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

feat: replace v0 defaults with Greyhaven brand — icons, fonts (Aspekta), colors, and type scale from brand guidelines

Browse Source
This commit is contained in:
Joyce
2026-04-10 09:41:14 -04:00
parent 52b4156653
commit b6a2c908c6
13 changed files with 1823 additions and 1949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
export function ColorSwatches() {
const primaryColors = [
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card" },
{ name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true },
{ name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true },
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
{ name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true, pantone: "PANTONE Black 6 C" },
{ name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true, pantone: "PANTONE 1595 C" },
]
const greyScale = [
@@ -47,6 +47,9 @@ export function ColorSwatches() {
<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>
))}

53
components/design-system/typography-samples.tsx
View File

@@ -104,20 +104,67 @@ export function TypographySamples() {
</div>
</div>
{/* Type Scale Reference */}
<div className="border border-border rounded-md p-6 bg-card">
<h4 className="font-sans text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
Type Scale — Brand Guidelines v1.1
</h4>
<div className="overflow-x-auto">
<table className="w-full text-sm font-sans">
<thead>
<tr className="border-b border-border text-left">
<th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Level</th>
<th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Print ref</th>
<th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Web token</th>
<th className="pb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">Tracking</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{[
{ level: "Display", print: "136pt", token: "--type-display", tracking: "−1%" },
{ level: "H1", print: "68pt", token: "--type-h1", tracking: "−1%" },
{ level: "H2", print: "51pt", token: "--type-h2", tracking: "−1%" },
{ level: "H3", print: "40pt", token: "--type-h3", tracking: "−1%" },
{ level: "H4", print: "36pt", token: "--type-h4", tracking: "−1%" },
{ level: "Body", print: "18px", token: "--type-body-lg", tracking: "2%" },
{ level: "Body sm", print: "15px", token: "--type-body-sm", tracking: "2%" },
{ level: "Caption", print: "10pt", token: "--type-caption", tracking: "2%" },
].map((row) => (
<tr key={row.level}>
<td className="py-2 pr-6 font-medium">{row.level}</td>
<td className="py-2 pr-6 text-muted-foreground font-mono text-xs">{row.print}</td>
<td className="py-2 pr-6 text-muted-foreground font-mono text-xs">{row.token}</td>
<td className="py-2 text-muted-foreground font-mono text-xs">{row.tracking}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Font Stack Reference */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="border border-border rounded-md p-4 bg-card">
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Serif Stack</p>
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Primary — Serif</p>
<p className="font-mono text-xs text-muted-foreground">
&apos;Source Serif Pro&apos;, &apos;Source Serif 4&apos;, Georgia, serif
</p>
</div>
<div className="border border-border rounded-md p-4 bg-card">
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Sans Stack</p>
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-1">Secondary — Sans</p>
<p className="font-mono text-xs text-muted-foreground">
&apos;Aspekta&apos;, ui-sans-serif, system-ui, sans-serif
</p>
</div>
<div className="border border-border rounded-md p-4 bg-card">
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-1">Logo only</p>
<p className="font-mono text-xs text-muted-foreground mb-2">
Circular Medium
</p>
<p className="font-sans text-xs text-muted-foreground">
Used exclusively for the Greyhaven wordmark and product logos. Do not use in UI.
</p>
</div>
</div>
</div>
)