# 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

```css
--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

```css
--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

```css
/* 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

```css
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

```css
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

```css
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`)