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

86
app/globals.css
View File

@@ -145,10 +145,31 @@
@theme inline {
/* Typography - Using CSS variables from Next.js font loading */
--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-sans: 'Inter', 'Outfit', ui-sans-serif, system-ui, sans-serif;
--font-serif: "Tiempos Text", var(--font-source-serif), 'Source Serif 4', serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Institutional Type Scale - Hard-Calibrated to Slide 22 (150px target) */
--type-display: clamp(4.5rem, 12vw, 9.375rem); /* 150px Display */
--type-h1: clamp(3rem, 10vw, 6.25rem); /* 100px Institutional Header */
--type-h2: clamp(2.25rem, 6vw, 4.6875rem); /* 75px Section Header */
--type-h3: clamp(1.5rem, 4vw, 3.75rem); /* 60px Subheader */
--type-h4: clamp(1.25rem, 2vw, 2.25rem); /* 36px Label */
--type-body-lg: 1.25rem; /* 20px - Secondary Body */
--type-body: 1.0625rem; /* 17px - Primary Body */
--type-caption: 0.8125rem; /* 13px - Meta */
/* Specified Tracking - Slide 22 (-2%) */
--type-tracking-heading: -0.02em;
--type-tracking-display: -0.04em;
--type-tracking-body: 0.01em;
/* 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));
@@ -169,59 +190,13 @@
--color-border: rgb(var(--border));
--color-input: rgb(var(--input));
--color-ring: rgb(var(--ring));
--color-chart-1: rgb(var(--chart-1));
--color-chart-2: rgb(var(--chart-2));
--color-chart-3: rgb(var(--chart-3));
--color-chart-4: rgb(var(--chart-4));
--color-chart-5: rgb(var(--chart-5));
--radius-sm: calc(var(--radius) - 2px);
--radius-md: var(--radius);
--radius-lg: calc(var(--radius) + 2px);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: rgb(var(--sidebar));
--color-sidebar-foreground: rgb(var(--sidebar-foreground));
--color-sidebar-primary: rgb(var(--sidebar-primary));
--color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
--color-sidebar-accent: rgb(var(--sidebar-accent));
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
--color-sidebar-border: rgb(var(--sidebar-border));
--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;
--color-greyhaven-grey1: #F0F0EC;
--color-greyhaven-grey2: #DDDDD7;
--color-greyhaven-grey3: #C4C4BD;
--color-greyhaven-grey4: #A6A69F;
--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 {
@@ -229,6 +204,19 @@
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
@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; /* Tiempos Medium fallback */
}
}
@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;
}
}