monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

import brand images

Browse Source
This commit is contained in:
Joyce
2026-04-10 10:38:12 -04:00
parent b6a2c908c6
commit a9d0ac182d
11 changed files with 1478 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/design-system/color-swatches.tsx
View File

@@ -1,18 +1,23 @@
export function ColorSwatches() {
const primaryColors = [
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
{ name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215", token: "--secondary", pantone: null },
{ name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", token: "--card (dark)", dark: true, pantone: null },
{ name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true, pantone: "PANTONE Black 6 C" },
]
const accentColors = [
{ name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true, pantone: "PANTONE 1595 C" },
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
]
const greyScale = [
{ name: "Grey 1 (5%)", hex: "#F0F0EC", rgb: "240 240 236" },
{ name: "Grey 2 (10%)", hex: "#DDDDD7", rgb: "221 221 215" },
{ name: "Grey 3 (20%)", hex: "#C4C4BD", rgb: "196 196 189" },
{ name: "Grey 4 (50%)", hex: "#A6A69F", rgb: "166 166 159" },
{ name: "Grey 5 (60%)", hex: "#7F7F79", rgb: "127 127 121", dark: true },
{ name: "Grey 7 (70%)", hex: "#575753", rgb: "87 87 83", dark: true },
{ name: "Grey 8 (80%)", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
{ name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215" },
{ name: "Grey 2", hex: "#C4C4BD", rgb: "196 196 189" },
{ name: "Grey 3", hex: "#A6A69F", rgb: "166 166 159" },
{ name: "Grey 4", hex: "#7F7F79", rgb: "127 127 121", dark: true },
{ name: "Grey 5", hex: "#575753", rgb: "87 87 83", dark: true },
{ name: "Grey 6", hex: "#F0F0EC", rgb: "240 240 236" },
{ name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
]
const semanticTokens = [
@@ -30,9 +35,12 @@ export function ColorSwatches() {
<div className="space-y-10">
{/* Primary Scheme */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
Primary Scheme
</h4>
<p className="font-sans text-xs text-muted-foreground mb-4">
Neutral and minimal. Off-black, warm grey, and white form the base. No gradients, no decorative color.
</p>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
{primaryColors.map((color) => (
<div key={color.name} className="border border-border rounded-md overflow-hidden">
@@ -56,6 +64,37 @@ export function ColorSwatches() {
</div>
</div>
{/* Accent */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
Accent
</h4>
<p className="font-sans text-xs text-muted-foreground mb-4">
Orange is the single accent — used sparingly to mark what&apos;s active or important.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{accentColors.map((color) => (
<div key={color.name} className="border border-border rounded-md overflow-hidden">
<div
className="h-24 flex items-end p-3"
style={{ backgroundColor: color.hex }}
>
<span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
{color.hex}
</span>
</div>
<div className="p-3 bg-card">
<p className="font-sans text-sm font-medium">{color.name}</p>
<p className="font-mono text-xs text-muted-foreground">{color.token}</p>
{color.pantone && (
<p className="font-sans text-xs text-muted-foreground mt-0.5">{color.pantone}</p>
)}
</div>
</div>
))}
</div>
</div>
{/* Grey Scale */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">