update ui
This commit is contained in:
188
design-system.md
Normal file
188
design-system.md
Normal file
@@ -0,0 +1,188 @@
|
||||
# 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`)
|
||||
Reference in New Issue
Block a user