Visual Framework — Universal Design System v0.4.2

Spacing Scale

4px base unit, 13-step scale. Locked across all palettes.

--space-1 through --space-24

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

Typography Scale

10 levels from display to label. Body uses Inter (locked); display font varies per palette.

--text-display-xl through --text-label

--text-display-xlDisplay XL

--text-display-lgDisplay Large

--text-display-mdDisplay Medium

--text-heading-lgHeading Large

--text-heading-mdHeading Medium

--text-heading-smHeading Small

--text-body-lgBody large — for lead paragraphs and introductions.

--text-body-mdBody medium — default paragraph text across all surfaces.

--text-body-smBody small — for captions, metadata, and secondary content.

--text-labelLabel — form labels, overlines, chips

Color System

All 9 palettes with 17 semantic swatches each. Brand, text, background, border, status, and utility colors.

Shadow / Elevation

5 elevation levels from xs to xl. Shadows vary per palette to match the visual identity.

--shadow-xs through --shadow-xl

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

Radius Identity

Same card shape across all 9 palettes. Radius defines the visual personality — from sharp corporate to rounded illustration.

Component Anatomy

Token-driven components. Every dimension, color, and spacing references a design token — never a hardcoded value.

Button

bg: --color-brand-primary color: --color-text-on-brand radius: --radius-md height: 40px (md) px: --space-4 font: --font-sans 500 transition: --duration-fast focus: 2px outline

Card

Card Title

Card content uses --color-text-secondary for visual hierarchy below the title.

bg: --color-bg-primary border: --color-border-default radius: --radius-lg shadow: --shadow-md padding: --space-6 title: --font-display 600 text: --color-text-secondary