189 lines
5.1 KiB
Markdown
189 lines
5.1 KiB
Markdown
# 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`)
|