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

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

@@ -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() {
<div className="space-y-10">
{/* Primary Scheme */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
Primary Scheme
</h4>
<p className="font-sans text-xs text-muted-foreground mb-4">
Neutral and minimal. Off-black, warm grey, and white form the base. No gradients, no decorative color.
</p>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
{primaryColors.map((color) => (
<div key={color.name} className="border border-border rounded-md overflow-hidden">
@@ -56,6 +64,37 @@ export function ColorSwatches() {
</div>
</div>
{/* Accent */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
Accent
</h4>
<p className="font-sans text-xs text-muted-foreground mb-4">
Orange is the single accent — used sparingly to mark what&apos;s active or important.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{accentColors.map((color) => (
<div key={color.name} className="border border-border rounded-md overflow-hidden">
<div
className="h-24 flex items-end p-3"
style={{ backgroundColor: color.hex }}
>
<span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
{color.hex}
</span>
</div>
<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>
))}
</div>
</div>
{/* Grey Scale */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">

140
components/design-system/component-matrix.tsx
View File

@@ -39,13 +39,125 @@ import {
export function ComponentMatrix() {
return (
<TooltipProvider>
<div className="space-y-10">
<div className="space-y-16">
{/* Typography Audit - Slide 22 */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Typography Audit — Slide 22
</h4>
<div className="border-institutional border-border rounded-sm p-12 bg-brand-offwhite institutional-grid space-y-8">
<div className="space-y-1">
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">Display Title (150px)</span>
<h1 className="text-display leading-none">Modular Systems</h1>
</div>
<div className="space-y-1">
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H1 Headline (100px)</span>
<h1 className="text-h1 leading-none">Sovereign AI Systems</h1>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8 border-t border-border">
<div className="space-y-2">
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H2 Section (75px)</span>
<h2 className="text-h2 leading-tight">Institutional Architecture</h2>
</div>
<div className="space-y-2">
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H3 Label (60px)</span>
<h3 className="text-h3 leading-tight">Functional Design</h3>
</div>
</div>
</div>
</div>
{/* Key Visual - Slide 26 */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Key Visual Composition — Slide 26
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-0 border-institutional border-border rounded-sm overflow-hidden min-h-[500px]">
<div className="p-12 bg-brand-offwhite flex flex-col justify-center space-y-6">
<h2 className="text-h1 leading-[0.9] max-w-md">Key visual: structures built from base geometry</h2>
<div className="space-y-4 text-muted-foreground max-w-sm">
<p className="text-body-lg font-serif">Greyhaven's key visual is constructed from a modular system derived from the same underlying geometry as the logo.</p>
<div className="pt-4 space-y-2">
<div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
<span className="w-1.5 h-1.5 bg-brand-orange"></span> Modular Stacking
</div>
<div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
<span className="w-1.5 h-1.5 bg-brand-orange"></span> Hexagonal Logic
</div>
</div>
</div>
</div>
<div className="bg-brand-black relative flex items-center justify-center p-12">
<div className="absolute inset-0 institutional-grid opacity-20"></div>
<img
src="/brand/modular-geometry.png"
alt="Modular Geometry"
className="relative z-10 object-contain w-full h-full scale-110"
/>
<div className="absolute left-6 top-6 bottom-6 w-[2px] bg-brand-orange/50"></div>
</div>
</div>
</div>
{/* Brand Identity Integration */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Institutional Brand Integration
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Modular Geometry Showcase */}
<div className="border-institutional border-border rounded-sm p-8 bg-card institutional-accent overflow-hidden relative min-h-[300px] flex flex-col justify-end">
<div className="absolute top-0 right-0 w-1/2 h-full opacity-40">
<img
src="/brand/modular-geometry.png"
alt="Modular Geometry"
className="object-contain object-right h-full w-full"
/>
</div>
<div className="relative z-10 space-y-2">
<Badge className="bg-brand-orange text-white border-0">Modular System</Badge>
<h3 className="text-display text-4xl leading-none">Modular<br />Core</h3>
<p className="text-sm text-muted-foreground max-w-[200px]">
Leveraging architectural logic through 3D modular geometry.
</p>
</div>
</div>
{/* Prompt A & B Treatments */}
<div className="space-y-6">
<div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-offwhite text-brand-offblack flex flex-col">
<div className="aspect-[4/3] flex items-center justify-center overflow-hidden grayscale hover:grayscale-0 transition-all duration-500">
<img src="/brand/briefcase-lineart.png" alt="Lineart" className="w-full h-full object-cover" />
</div>
<div className="p-6">
<h5 className="font-sans text-xs font-bold uppercase tracking-widest text-brand-orange mb-1">Prompt A</h5>
<h4 className="text-body-lg font-serif mb-1">Institutional Lineart</h4>
<p className="text-xs text-brand-grey7">High-contrast structural lineart defined for documentation visuals.</p>
</div>
</div>
<div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-black text-brand-offwhite flex flex-col">
<div className="aspect-[4/3] flex items-center justify-center overflow-hidden">
<img src="/brand/briefcase-silhouette.png" alt="Silhouette" className="w-full h-full object-cover" />
</div>
<div className="p-6">
<h5 className="font-sans text-xs font-bold uppercase tracking-widest text-[#D95E2A] mb-1">Prompt B</h5>
<h4 className="text-body-lg font-serif mb-1 italic">High-Contrast Silhouette</h4>
<p className="text-xs text-zinc-400">Bold graphic silhouettes used for high-impact social and poster assets.</p>
</div>
</div>
</div>
</div>
</div>
{/* Buttons - All Variants */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Buttons — Variants
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<div className="space-y-2">
<p className="font-sans text-xs text-muted-foreground">Primary</p>
@@ -80,7 +192,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Buttons — Sizes
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="flex flex-wrap items-end gap-4">
<div className="space-y-2">
<p className="font-sans text-xs text-muted-foreground">Small</p>
@@ -103,7 +215,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Buttons — States
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="space-y-6">
{/* Primary States */}
<div>
@@ -145,7 +257,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Icon Buttons
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="space-y-6">
{/* By Variant */}
<div>
@@ -185,7 +297,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Buttons with Icons
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="space-y-6">
{/* Leading Icons */}
<div>
@@ -224,7 +336,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Badges — Core Variants
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="flex flex-wrap gap-3">
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
@@ -239,7 +351,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Badges — Tag & Value
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="flex flex-wrap gap-3">
<Badge variant="tag">Tag</Badge>
<Badge variant="tag">Category</Badge>
@@ -255,7 +367,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Badges — Semantic
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="flex flex-wrap gap-3">
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
@@ -270,7 +382,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Badges — Channel Pills
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="flex flex-wrap gap-3">
<Badge variant="whatsapp">WhatsApp</Badge>
<Badge variant="email">Email</Badge>
@@ -303,7 +415,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Inputs
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-3">
<p className="font-sans text-xs text-muted-foreground">Default</p>
@@ -334,7 +446,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Select
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="space-y-3">
<p className="font-sans text-xs text-muted-foreground">Default</p>
@@ -382,7 +494,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Checkboxes & Switches
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4">
<p className="font-sans text-xs text-muted-foreground">Checkboxes</p>
@@ -428,7 +540,7 @@ export function ComponentMatrix() {
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Tabs
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="border-institutional border-border rounded-sm p-6 bg-card">
<Tabs defaultValue="overview" className="w-full">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>