julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
169 lines
2.1 KiB
Markdown
169 lines
2.1 KiB
Markdown
# Design Tokens
|
|
|
|
**Last Updated:** [Date]
|
|
**Token Count:** [count]
|
|
|
|
---
|
|
|
|
## Colors
|
|
|
|
### Primary Colors
|
|
|
|
```yaml
|
|
primary-50: #eff6ff
|
|
primary-100: #dbeafe
|
|
primary-200: #bfdbfe
|
|
primary-300: #93c5fd
|
|
primary-400: #60a5fa
|
|
primary-500: #3b82f6
|
|
primary-600: #2563eb
|
|
primary-700: #1d4ed8
|
|
primary-800: #1e40af
|
|
primary-900: #1e3a8a
|
|
```
|
|
|
|
### Semantic Colors
|
|
|
|
```yaml
|
|
success: #10b981
|
|
error: #ef4444
|
|
warning: #f59e0b
|
|
info: #3b82f6
|
|
```
|
|
|
|
### Neutral Colors
|
|
|
|
```yaml
|
|
gray-50: #f9fafb
|
|
gray-100: #f3f4f6
|
|
[... more grays]
|
|
gray-900: #111827
|
|
```
|
|
|
|
---
|
|
|
|
## Typography
|
|
|
|
### Font Families
|
|
|
|
```yaml
|
|
font-sans: 'Inter, system-ui, sans-serif'
|
|
font-mono: 'JetBrains Mono, monospace'
|
|
```
|
|
|
|
### Font Sizes
|
|
|
|
```yaml
|
|
text-xs: 0.75rem
|
|
text-sm: 0.875rem
|
|
text-base: 1rem
|
|
text-lg: 1.125rem
|
|
text-xl: 1.25rem
|
|
text-2xl: 1.5rem
|
|
text-3xl: 1.875rem
|
|
text-4xl: 2.25rem
|
|
```
|
|
|
|
### Font Weights
|
|
|
|
```yaml
|
|
font-normal: 400
|
|
font-medium: 500
|
|
font-semibold: 600
|
|
font-bold: 700
|
|
```
|
|
|
|
---
|
|
|
|
## Spacing
|
|
|
|
```yaml
|
|
spacing-0: 0
|
|
spacing-1: 0.25rem
|
|
spacing-2: 0.5rem
|
|
spacing-3: 0.75rem
|
|
spacing-4: 1rem
|
|
spacing-6: 1.5rem
|
|
spacing-8: 2rem
|
|
spacing-12: 3rem
|
|
spacing-16: 4rem
|
|
```
|
|
|
|
---
|
|
|
|
## Layout
|
|
|
|
### Breakpoints
|
|
|
|
```yaml
|
|
sm: 640px
|
|
md: 768px
|
|
lg: 1024px
|
|
xl: 1280px
|
|
2xl: 1536px
|
|
```
|
|
|
|
### Container Widths
|
|
|
|
```yaml
|
|
container-sm: 640px
|
|
container-md: 768px
|
|
container-lg: 1024px
|
|
container-xl: 1280px
|
|
```
|
|
|
|
---
|
|
|
|
## Effects
|
|
|
|
### Shadows
|
|
|
|
```yaml
|
|
shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)
|
|
shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1)
|
|
shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1)
|
|
```
|
|
|
|
### Border Radius
|
|
|
|
```yaml
|
|
radius-sm: 0.125rem
|
|
radius-md: 0.375rem
|
|
radius-lg: 0.5rem
|
|
radius-full: 9999px
|
|
```
|
|
|
|
### Transitions
|
|
|
|
```yaml
|
|
transition-fast: 150ms
|
|
transition-base: 200ms
|
|
transition-slow: 300ms
|
|
```
|
|
|
|
---
|
|
|
|
## Component-Specific Tokens
|
|
|
|
### Button
|
|
|
|
```yaml
|
|
button-padding-x: spacing-4
|
|
button-padding-y: spacing-2
|
|
button-border-radius: radius-md
|
|
button-font-weight: font-semibold
|
|
```
|
|
|
|
### Input
|
|
|
|
```yaml
|
|
input-height: 2.5rem
|
|
input-padding-x: spacing-3
|
|
input-border-color: gray-300
|
|
input-border-radius: radius-md
|
|
```
|
|
|
|
---
|
|
|
|
**Tokens are automatically populated as components are added to the design system.**
|