Spacing & Radius

Spacing scale

8px base grid. All layout distances should snap to one of these steps.

4px

--spacing-ck-xs

Tight gaps, icon padding

8px

--spacing-ck-sm

Small internal padding

16px

--spacing-ck-md

Default component padding

24px

--spacing-ck-lg

Card padding, section gaps

48px

--spacing-ck-xl

Section-internal whitespace

96px

--spacing-ck-2xl

Section vertical padding

144px

--spacing-ck-3xl

Hero top padding

Container widths

Use max-width + margin: 0 auto with these values.

720px

--width-ck-narrow

Blog articles, forms

1080px

--width-ck-default

Standard page content

1280px

--width-ck-wide

Full-bleed marketing

Border radius

4px

Pills, badges, tags

8px

Buttons, inputs

12px

Cards (default)

20px

Hero containers, feature images

999px

Avatars, circular elements

Shadow

Card shadow

--shadow-ck-card

0 1px 3px rgba(15,27,45,0.04) — the only elevation in use