Density Formula | Prisma Design System

Density Formula System

Công thức tier-base cho phép scale toàn bộ hệ thống spacing/radius/gap bằng cách thay đổi 1 biến --spacing.

Core Variables

css

--spacing: 4px;    /* Atomic grid unit — change this to scale everything */

Tier Base Multipliers

Mỗi tier có 1 base multiplier. Tất cả tokens trong tier derive từ base × ratio.

Tier	Web Base	Mobile Base	Formula
page	×6 (24px)	×4 (16px)	`spacing × tier-mult`
section	×5 (20px)	×4 (16px)	`spacing × tier-mult`
group	×4 (16px)	×3 (12px)	`spacing × tier-mult`
comp	×2 (8px)	×2 (8px)	`spacing × tier-mult`

Token Derivation Ratios

Từ tier-base, các token con derive theo ratio cố định:

Token	Ratio	Example (group, web)
padding-large	2.0	×8 = 32px
padding-default	1.5	×6 = 24px
padding-small	1.0	×4 = 16px
stack-gap-large	1.25	×5 = 20px
stack-gap-default	1.0	×4 = 16px
stack-gap-small	0.5	×2 = 8px
inline-gap-default	1.0	×4 = 16px
grid-row-gap	1.0	×4 = 16px
grid-column-gap	1.0	×4 = 16px
margin-default	1.0	×4 = 16px
margin-large	1.5	×6 = 24px

Key rule: inline-gap = stack-gap = grid-row = grid-column tại mỗi tier (default size).

Scaling Examples

Thay --spacing để tạo density khác cho dự án:

text

┌──────────────────┬──────────┬──────────┬──────────┬──────────┐
│ Project          │ spacing  │ page.pad │ group.pad│ comp.pad │
├──────────────────┼──────────┼──────────┼──────────┼──────────┤
│ Default Web      │   4px    │  24px    │  24px    │  16px    │
│ Compact Web      │   3px    │  18px    │  18px    │  12px    │
│ Mobile App       │   4px    │  16px    │  16px    │  16px    │
│ Tablet           │   4px    │  20px    │  20px    │  16px    │
│ Large Display    │   5px    │  30px    │  30px    │  20px    │
└──────────────────┴──────────┴──────────┴──────────┴──────────┘

Usage Rule: Card Tier Assignment

text

Page (page tokens)
├── Stat Card       → section tokens (same level as section)
├── Table Section   → section tokens
├── Activity Section→ section tokens
│   └── Nested Card → group tokens (inside section)
│       └── Component → comp tokens

Card nằm trực tiếp trên page = dùng section tokens. Card nằm bên trong section = dùng group tokens.

Showcase Config Integration

Mỗi showcase có thể custom density qua showcase-config.json:

json

"density": "compact"              // preset string
"density": {                      // hoặc custom object
    "spacing": "3px",
    "profile": "web",
    "tier-bases": { "group": 3 }, // override 1 tier
    "overrides": {                // override từng token
        "comp.height-default": "48px"
    }
}

Presets có sẵn

Preset	spacing	profile	Tính chất
`compact`	3px	web	Data-heavy dashboards (75% default)
`comfortable`	4px	web	Default — Airbnb/Apple/Stripe
`spacious`	5px	web	Marketing/landing (125% default)
`mobile`	4px	mobile	Mobile app — Apple HIG
`mobile-compact`	3px	mobile	Small screens (SE/Mini)

Pipeline command

bash

node design-system/scripts/pipeline/sync-tokens.js {showcase-name}

→ Đọc density config → override --spacing + chọn profile → output variables.css.