Paul Roberts
6593bdf689
Extracted real production usage from 8 KDC repos and consolidated the consensus (kdcsurveyadd / kdcvault / kdc_void_planner) into the canonical design.md + tokens. Highlights: - brand.ink #000000 -> #1A1530 (purple-tinted, matches real usage) - brand.canvas #F5F4F0 -> #F7F4ED (warm) - neutral ramp rebuilt around ink (purple-tinted, not cold slate) - semantic palette retuned for warm canvas + soft tints - elevation shadows retinted with brand-ink rgb - new accent.gold (product) and accent.mint (marketing) tokens - real themes/light, themes/dark, themes/high-contrast - fleshed out every component + foundation README - docs/consolidation-2026-05.md captures the full audit + drift inventory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
40 lines
1.5 KiB
Markdown
40 lines
1.5 KiB
Markdown
# Foundations · Spacing
|
|
|
|
KDS is built on a **4px base unit**. All spacing, sizing, and layout dimensions are multiples of 4.
|
|
|
|
## Scale
|
|
|
|
| Token | px | rem | Use |
|
|
|-------|-----|-----|-----|
|
|
| `0` | 0 | 0 | Reset |
|
|
| `1` | 4 | 0.25 | Hairline / icon-to-text |
|
|
| `2` | 8 | 0.5 | Tight stack |
|
|
| `3` | 12 | 0.75 | Default field-to-label |
|
|
| `4` | 16 | 1 | Default container padding (mobile) |
|
|
| `5` | 20 | 1.25 | Card inner gap |
|
|
| `6` | 24 | 1.5 | Default card padding, section gap |
|
|
| `8` | 32 | 2 | Form section separator |
|
|
| `10` | 40 | 2.5 | Page section separator (small) |
|
|
| `12` | 48 | 3 | Page section separator (default) |
|
|
| `16` | 64 | 4 | Hero block padding |
|
|
| `20` | 80 | 5 | Marketing hero |
|
|
| `24` | 96 | 6 | Marketing hero, very generous |
|
|
|
|
## Density
|
|
|
|
Product apps expose `[data-density="compact|default|cozy"]` on the `<html>` root (see kdcmapper). Each density rebinds two CSS variables:
|
|
|
|
| Density | `--gap` | `--pad` |
|
|
|---------|---------|---------|
|
|
| compact | 12px (`3`) | 14px |
|
|
| default | 18px | 22px |
|
|
| cozy | 18px | 22px |
|
|
|
|
Use density for table-heavy / wizard-heavy screens. Don't fork component padding per screen — change density instead.
|
|
|
|
## Rules
|
|
|
|
- ✅ Always pick from the scale. If the value isn't on the scale, you're probably making the wrong choice.
|
|
- ✅ Pair gap and padding from the same step where possible (`gap-4` inside `p-4`).
|
|
- ❌ Don't use 1px, 3px, 5px etc. as spacing — those are border / decoration only.
|