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

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

View File

@@ -145,7 +145,7 @@
@theme inline {
/* Typography - Using CSS variables from Next.js font loading */
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -188,6 +188,7 @@
--color-sidebar-ring: rgb(var(--sidebar-ring));
/* Greyhaven-specific colors for direct use */
/* Orange: PANTONE 1595 C */
--color-greyhaven-orange: #D95E2A;
--color-greyhaven-offblack: #161614;
--color-greyhaven-offwhite: #F9F9F7;
@@ -198,6 +199,29 @@
--color-greyhaven-grey5: #7F7F79;
--color-greyhaven-grey7: #575753;
--color-greyhaven-grey8: #2F2F2C;
/* ==========================================================================
TYPE SCALE — Greyhaven Brand Guidelines v1.1
Source: brand guidelines deck, slide 22
Print pt values converted to px at 1pt = 1.333px.
Web scale is proportionally reduced from print scale.
Primary typeface: Source Serif Pro (Source Serif 4)
Secondary typeface: Aspekta (commercial) — Inter used as substitute
Logo typeface: Circular Medium (logo use only, not loaded here)
========================================================================== */
--type-display: clamp(3rem, 6vw, 7.5rem); /* 136pt print reference */
--type-h1: clamp(2.25rem, 4vw, 4.25rem); /* 68pt print reference */
--type-h2: clamp(1.75rem, 3vw, 3rem); /* 51pt print reference */
--type-h3: clamp(1.375rem, 2vw, 2.25rem); /* 40pt print reference */
--type-h4: clamp(1.125rem, 1.5vw, 2rem); /* 36pt print reference */
--type-body-lg: 1.125rem; /* 18px */
--type-body: 1rem; /* 16px */
--type-body-sm: 0.9375rem; /* 15px */
--type-caption: 0.75rem; /* 10pt / 12px */
--type-tracking-tight: -0.01em; /* 1% — headings */
--type-tracking-body: 0.02em; /* 2% — body text */
}
@layer base {