diff --git a/app/globals.css b/app/globals.css index 20af21b..5d7c8c3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; } } diff --git a/components/design-system/color-swatches.tsx b/components/design-system/color-swatches.tsx index 013d163..89eea27 100644 --- a/components/design-system/color-swatches.tsx +++ b/components/design-system/color-swatches.tsx @@ -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() {
{/* Primary Scheme */}
-

+

Primary Scheme

+

+ Neutral and minimal. Off-black, warm grey, and white form the base. No gradients, no decorative color. +

{primaryColors.map((color) => (
@@ -56,6 +64,37 @@ export function ColorSwatches() {
+ {/* Accent */} +
+

+ Accent +

+

+ Orange is the single accent — used sparingly to mark what's active or important. +

+
+ {accentColors.map((color) => ( +
+
+ + {color.hex} + +
+
+

{color.name}

+

{color.token}

+ {color.pantone && ( +

{color.pantone}

+ )} +
+
+ ))} +
+
+ {/* Grey Scale */}

diff --git a/components/design-system/component-matrix.tsx b/components/design-system/component-matrix.tsx index 622b500..b6cc41d 100644 --- a/components/design-system/component-matrix.tsx +++ b/components/design-system/component-matrix.tsx @@ -39,13 +39,125 @@ import { export function ComponentMatrix() { return ( -
+
+ {/* Typography Audit - Slide 22 */} +
+

+ Typography Audit — Slide 22 +

+
+
+ Display Title (150px) +

Modular Systems

+
+ +
+ H1 Headline (100px) +

Sovereign AI Systems

+
+ +
+
+ H2 Section (75px) +

Institutional Architecture

+
+
+ H3 Label (60px) +

Functional Design

+
+
+
+
+ + {/* Key Visual - Slide 26 */} +
+

+ Key Visual Composition — Slide 26 +

+
+
+

Key visual: structures built from base geometry

+
+

Greyhaven's key visual is constructed from a modular system derived from the same underlying geometry as the logo.

+
+
+ Modular Stacking +
+
+ Hexagonal Logic +
+
+
+
+
+
+ Modular Geometry +
+
+
+
+ + {/* Brand Identity Integration */} +
+

+ Institutional Brand Integration +

+
+ {/* Modular Geometry Showcase */} +
+
+ Modular Geometry +
+
+ Modular System +

Modular
Core

+

+ Leveraging architectural logic through 3D modular geometry. +

+
+
+ + {/* Prompt A & B Treatments */} +
+
+
+ Lineart +
+
+
Prompt A
+

Institutional Lineart

+

High-contrast structural lineart defined for documentation visuals.

+
+
+ +
+
+ Silhouette +
+
+
Prompt B
+

High-Contrast Silhouette

+

Bold graphic silhouettes used for high-impact social and poster assets.

+
+
+
+
+
+ {/* Buttons - All Variants */}

Buttons — Variants

-
+

Primary

@@ -80,7 +192,7 @@ export function ComponentMatrix() {

Buttons — Sizes

-
+

Small

@@ -103,7 +215,7 @@ export function ComponentMatrix() {

Buttons — States

-
+
{/* Primary States */}
@@ -145,7 +257,7 @@ export function ComponentMatrix() {

Icon Buttons

-
+
{/* By Variant */}
@@ -185,7 +297,7 @@ export function ComponentMatrix() {

Buttons with Icons

-
+
{/* Leading Icons */}
@@ -224,7 +336,7 @@ export function ComponentMatrix() {

Badges — Core Variants

-
+
Default Secondary @@ -239,7 +351,7 @@ export function ComponentMatrix() {

Badges — Tag & Value

-
+
Tag Category @@ -255,7 +367,7 @@ export function ComponentMatrix() {

Badges — Semantic

-
+
Success Warning @@ -270,7 +382,7 @@ export function ComponentMatrix() {

Badges — Channel Pills

-
+
WhatsApp Email @@ -303,7 +415,7 @@ export function ComponentMatrix() {

Inputs

-
+

Default

@@ -334,7 +446,7 @@ export function ComponentMatrix() {

Select

-
+

Default

@@ -382,7 +494,7 @@ export function ComponentMatrix() {

Checkboxes & Switches

-
+

Checkboxes

@@ -428,7 +540,7 @@ export function ComponentMatrix() {

Tabs

-
+
Overview diff --git a/public/brand/briefcase-lineart.png b/public/brand/briefcase-lineart.png new file mode 100644 index 0000000..9917f44 Binary files /dev/null and b/public/brand/briefcase-lineart.png differ diff --git a/public/brand/briefcase-silhouette.png b/public/brand/briefcase-silhouette.png new file mode 100644 index 0000000..253f296 Binary files /dev/null and b/public/brand/briefcase-silhouette.png differ diff --git a/public/brand/cell-tower.png b/public/brand/cell-tower.png new file mode 100644 index 0000000..90b038c Binary files /dev/null and b/public/brand/cell-tower.png differ diff --git a/public/brand/circuit-breaker.png b/public/brand/circuit-breaker.png new file mode 100644 index 0000000..59092df Binary files /dev/null and b/public/brand/circuit-breaker.png differ diff --git a/public/brand/geometric-system.svg b/public/brand/geometric-system.svg new file mode 100644 index 0000000..d413830 --- /dev/null +++ b/public/brand/geometric-system.svg @@ -0,0 +1,1267 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/brand/modular-geometry.png b/public/brand/modular-geometry.png new file mode 100644 index 0000000..d530452 Binary files /dev/null and b/public/brand/modular-geometry.png differ diff --git a/public/brand/phone-coil.png b/public/brand/phone-coil.png new file mode 100644 index 0000000..9648304 Binary files /dev/null and b/public/brand/phone-coil.png differ diff --git a/public/brand/retro-phone.png b/public/brand/retro-phone.png new file mode 100644 index 0000000..6879081 Binary files /dev/null and b/public/brand/retro-phone.png differ