monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
0993fa5a913565b9b34da30f4d8dcf8ab21d1c04
greyhaven-design-system/app/globals.css
Joyce 0993fa5a91 import aspekta font
2026-04-10 11:22:36 -04:00

258 lines
8.3 KiB
CSS
Raw Blame History

@font-face {
font-family: 'Aspekta';
src: url('/fonts/Aspekta-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aspekta';
src: url('/fonts/Aspekta-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aspekta';
src: url('/fonts/Aspekta-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aspekta';
src: url('/fonts/Aspekta-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@import 'tailwindcss';
@import 'tw-animate-css';
@custom-variant dark (&:is(.dark *));
/* =============================================================================
GREYHAVEN DESIGN TOKENS
Based on Greyhaven Brand Guidelines v1.0
Color Philosophy:
- Neutral and minimal scheme
- Off-black, warm grey, and white form the base
- Single accent (orange) used sparingly for active/important states
- No gradients, no decorative color
============================================================================= */
:root {
/* Background & Foreground */
--background: 240 240 236; /* Grey 1 #F0F0EC */
--foreground: 22 22 20; /* Off-black #161614 */
/* Card */
--card: 249 249 247; /* Off-white #F9F9F7 - elevated from background */
--card-foreground: 22 22 20;
/* Popover */
--popover: 249 249 247;
--popover-foreground: 22 22 20;
/* Primary - Orange accent (used sparingly) */
--primary: 217 94 42; /* Orange #D95E2A */
--primary-foreground: 249 249 247; /* Off-white */
/* Secondary */
--secondary: 240 240 236; /* Grey 1 #F0F0EC */
--secondary-foreground: 47 47 44; /* Grey 8 #2F2F2C */
/* Muted */
--muted: 240 240 236; /* Grey 1 #F0F0EC */
--muted-foreground: 87 87 83; /* Grey 7 #575753 */
/* Accent - Subtle grey for hover states */
--accent: 221 221 215; /* Grey 2 #DDDDD7 */
--accent-foreground: 22 22 20; /* Off-black */
/* Destructive */
--destructive: 180 50 50; /* Muted red for destructive actions */
--destructive-foreground: 249 249 247;
/* Borders & Inputs */
--border: 196 196 189; /* Grey 3 #C4C4BD */
--input: 196 196 189; /* Grey 3 #C4C4BD */
/* Focus Ring */
--ring: 217 94 42; /* Orange for focus states */
/* Charts - Warm neutral palette with orange accent */
--chart-1: 217 94 42; /* Orange accent */
--chart-2: 87 87 83; /* Grey 7 */
--chart-3: 127 127 121; /* Grey 5 */
--chart-4: 166 166 159; /* Grey 4 */
--chart-5: 47 47 44; /* Grey 8 */
/* Radius - Tightened, no playful rounding */
--radius: 0.375rem;
/* Sidebar */
--sidebar: 240 240 236;
--sidebar-foreground: 22 22 20;
--sidebar-primary: 217 94 42;
--sidebar-primary-foreground: 249 249 247;
--sidebar-accent: 196 196 189;
--sidebar-accent-foreground: 22 22 20;
--sidebar-border: 196 196 189;
--sidebar-ring: 217 94 42;
}
/* =============================================================================
DARK THEME
Guidelines: Negative/reverse usage via off-black and greys
============================================================================= */
.dark {
/* Background & Foreground */
--background: 22 22 20; /* Off-black #161614 */
--foreground: 249 249 247; /* Off-white #F9F9F7 */
/* Card */
--card: 47 47 44; /* Grey 8 #2F2F2C */
--card-foreground: 249 249 247;
/* Popover */
--popover: 47 47 44;
--popover-foreground: 249 249 247;
/* Primary - Orange accent (same in dark mode) */
--primary: 217 94 42; /* Orange #D95E2A */
--primary-foreground: 249 249 247;
/* Secondary */
--secondary: 87 87 83; /* Grey 7 #575753 */
--secondary-foreground: 249 249 247;
/* Muted */
--muted: 87 87 83; /* Grey 7 #575753 */
--muted-foreground: 196 196 189; /* Grey 3 #C4C4BD */
/* Accent - Subtle grey for hover states */
--accent: 87 87 83; /* Grey 7 #575753 */
--accent-foreground: 249 249 247;
/* Destructive */
--destructive: 180 50 50;
--destructive-foreground: 249 249 247;
/* Borders & Inputs */
--border: 87 87 83; /* Grey 7 */
--input: 87 87 83;
/* Focus Ring */
--ring: 217 94 42;
/* Charts */
--chart-1: 217 94 42;
--chart-2: 196 196 189;
--chart-3: 166 166 159;
--chart-4: 127 127 121;
--chart-5: 240 240 236;
/* Sidebar */
--sidebar: 47 47 44;
--sidebar-foreground: 249 249 247;
--sidebar-primary: 217 94 42;
--sidebar-primary-foreground: 249 249 247;
--sidebar-accent: 87 87 83;
--sidebar-accent-foreground: 249 249 247;
--sidebar-border: 87 87 83;
--sidebar-ring: 217 94 42;
}
/* =============================================================================
THEME CONFIGURATION
Typography: Source Serif Pro (primary) + Aspekta (secondary/UI)
============================================================================= */
@theme inline {
/* Typography - Calibrated to Slides 19-24 */
--font-serif: 'Source Serif Pro', 'Source Serif 4', 'Georgia', serif;
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Institutional Type Scale - Hard-Calibrated to Slide 22 Scale Table */
--type-display: clamp(4rem, 12vw, 9.375rem); /* 150px Display */
--type-h1: clamp(2.5rem, 10vw, 6.25rem); /* 100px H1 */
--type-h2: clamp(2rem, 6vw, 4.6875rem); /* 75px H2 */
--type-h3: clamp(1.5rem, 4vw, 3.75rem); /* 60px H3 */
--type-h4: clamp(1.25rem, 2vw, 2.25rem); /* 36px H4 */
--type-body-lg: 1.125rem; /* 18px Body */
--type-body: 0.9375rem; /* 15px Body SM */
--type-caption: 10px; /* 10pt/px exact fallback */
/* Tracking - Slide 22 Table Definitions */
--type-tracking-heading: -0.01em; /* -1% for Display/H1/H2/H3/H4 */
--type-tracking-body: 0.02em; /* +2% for Body/Caption */
/* Institutional Spacing & Construction */
--border-institutional: 0.5px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
/* Color mappings */
--color-background: rgb(var(--background));
--color-foreground: rgb(var(--foreground));
--color-card: rgb(var(--card));
--color-card-foreground: rgb(var(--card-foreground));
--color-popover: rgb(var(--popover));
--color-popover-foreground: rgb(var(--popover-foreground));
--color-primary: rgb(var(--primary));
--color-primary-foreground: rgb(var(--primary-foreground));
--color-secondary: rgb(var(--secondary));
--color-secondary-foreground: rgb(var(--secondary-foreground));
--color-muted: rgb(var(--muted));
--color-muted-foreground: rgb(var(--muted-foreground));
--color-accent: rgb(var(--accent));
--color-accent-foreground: rgb(var(--accent-foreground));
--color-destructive: rgb(var(--destructive));
--color-destructive-foreground: rgb(var(--destructive-foreground));
--color-border: rgb(var(--border));
--color-input: rgb(var(--input));
--color-ring: rgb(var(--ring));
/* Greyhaven-specific colors for direct use */
--color-greyhaven-orange: #D95E2A;
--color-greyhaven-offblack: #161614;
--color-greyhaven-offwhite: #F9F9F7;
--color-greyhaven-grey3: #C4C4BD;
--color-greyhaven-grey7: #575753;
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground antialiased;
font-feature-settings: "ss01", "ss02", "cv01", "cv11";
}
h1, h2, h3, h4 {
letter-spacing: var(--type-tracking-heading);
font-weight: 500; /* Medium weight matching Slide 19 */
}
p, span, li {
letter-spacing: var(--type-tracking-body);
}
}
@layer utilities {
.institutional-grid {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-rule='evenodd' stroke='%23C4C4BD' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
background-size: 30px 52px;
}
}
Reference in New Issue View Git Blame Copy Permalink