registry/design-system.md

Stack.Gallery Design System

Bloomberg terminal-inspired aesthetic with dark theme, sharp corners, and orange/green accent colors.

Colors (HSL)

Dark Theme (Default)

Token	HSL	Hex	Usage
background	0 0% 0%	#000000	Page background
foreground	0 0% 100%	#FFFFFF	Primary text
primary	33 100% 50%	#FF8000	Bloomberg orange, CTAs, highlights
primary-foreground	0 0% 0%	#000000	Text on primary buttons
accent	142 71% 45%	#22C55E	Terminal green, success states
accent-foreground	0 0% 0%	#000000	Text on accent
muted	0 0% 8%	#141414	Subtle backgrounds
muted-foreground	0 0% 55%	#8C8C8C	Secondary text, labels
card	0 0% 4%	#0A0A0A	Card backgrounds
border	0 0% 15%	#262626	All borders, dividers
destructive	0 84% 60%	#EF4444	Errors, terminal red dots

Light Theme

Token	HSL	Hex
background	0 0% 100%	#FFFFFF
foreground	0 0% 5%	#0D0D0D
primary	33 100% 45%	#E67300
accent	142 71% 35%	#16A34A
muted	0 0% 96%	#F5F5F5
muted-foreground	0 0% 40%	#666666
card	0 0% 98%	#FAFAFA
border	0 0% 90%	#E5E5E5

---

Typography

Font Families

--font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Usage

• Monospace: All headings, labels, navigation, buttons, data, code
• Sans-serif: Body text, descriptions only

Font Sizes

Element	Size	Weight	Letter Spacing
H1 (Hero)	3rem / 4rem (md)	700	-0.02em (tight)
H2 (Section)	1.5rem / 1.875rem (md)	700	-0.02em
H3 (Card title)	0.875rem	600	normal
Labels	0.75rem	400	0.05em (wider)
Body	0.875rem	400	normal
Small/Tags	0.75rem	400	0.05em

Text Transform

• Navigation, labels, buttons, tags: uppercase
• Body text, descriptions: normal case

---

Spacing & Layout

Border Radius

--radius: 0px;  /* All elements: sharp corners */

Container

• Max width: 1280px
• Padding: 1rem (16px) horizontal

Grid Gaps

• Section padding: 2rem / 4rem vertical
• Card padding: 1.5rem
• Grid gap: 2rem

Borders

• Width: 1px
• Color: var(--border)
• Used extensively: section dividers, cards, tables, inputs

---

Components

Buttons

/* Primary */
height: 40px;
padding: 0 24px;
background: var(--primary);
color: var(--primary-foreground);
font: 700 0.875rem/1 var(--font-mono);
text-transform: uppercase;
border: none;

/* Secondary/Outline */
height: 40px;
padding: 0 24px;
background: transparent;
color: var(--foreground);
border: 1px solid var(--border);
font: 400 0.875rem/1 var(--font-mono);
text-transform: uppercase;

Tags/Badges

padding: 4px 8px;
font: 400 0.75rem/1 var(--font-mono);
color: var(--accent);
background: hsl(var(--accent) / 0.05);
border: 1px solid hsl(var(--accent) / 0.3);
text-transform: uppercase;

Code Blocks

background: var(--card);
border: 1px solid var(--border);
font: 400 0.875rem/1.6 var(--font-mono);

/* Header bar */
background: hsl(var(--muted) / 0.5);
border-bottom: 1px solid var(--border);
padding: 8px 12px;

/* Terminal dots */
.dot-red: var(--destructive) / 0.6
.dot-orange: var(--primary) / 0.6
.dot-green: var(--accent) / 0.6
/* Each dot: 8px x 8px square */

Data Tables

border: 1px solid var(--border);
font: 400 0.75rem/1 var(--font-mono);

/* Header row */
background: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted-foreground);

/* Data cells */
border-bottom: 1px solid var(--border);
padding: 12px 16px;

/* Status indicators */
.supported: var(--accent)  /* green */

---

Visual Patterns

1. Section Headers: Small colored square (8x8px) + uppercase label + count on right
2. Grid Dividers: Use divide-x and divide-y with border color
3. Numbering: Bold primary-colored numbers (01, 02, etc.)
4. Hover States: Subtle background change hsl(var(--muted) / 0.3)
5. Status Indicators: Colored squares or text (green = active/supported)

---

Icon Library

Using Lucide Icons (stroke-based, 24px default):

• Github, Book, Terminal, Menu, X, Copy, Check
• Size in UI: 16px (h-4 w-4) or 20px (h-5 w-5)