Foundations

Spacing

A strict 4px base unit. Every spacing value is a multiple of 4. Use Tailwind's numeric scale (p-4, gap-6) for most cases, or the semantic aliases (space-md) when the intent matters more than the number.

Semantic Aliases

Named shortcuts that communicate intent. Prefer these over raw numbers in component APIs.

--space-xsp-space-xs / m-space-xs→ --space-1

4px

Micro — icon padding, tight chips

--space-smp-space-sm / m-space-sm→ --space-2

8px

Small — compact UI, list gaps

--space-mdp-space-md / m-space-md→ --space-4

16px

Medium — standard component padding

--space-lgp-space-lg / m-space-lg→ --space-6

24px

Large — card padding, section gaps

--space-xlp-space-xl / m-space-xl→ --space-10

40px

XL — between major sections

--space-2xlp-space-2xl / m-space-2xl→ --space-16

64px

2XL — section x-padding

--space-3xlp-space-3xl / m-space-3xl→ --space-24

96px

3XL — full-section vertical padding

Component Tokens

Named for specific structural elements. Override these per-app to respace the layout.

--nav-height68px

Fixed nav bar height

--section-padding-x64px

Section horizontal padding (maps to --space-16)

--section-padding-y80px

Section vertical padding (maps to --space-20)

Corner Radius

Nine steps from square to pill. --radius-2xl (24px) is the signature radius — applied to gallery photos, the hero, and category cards.

--radius-nonerounded-none0px

Square — no rounding

--radius-smrounded-sm4px

Subtle — tags, badges

--radiusrounded8px

Default — inputs, buttons

--radius-mdrounded-md8px

Alias for default

--radius-lgrounded-lg12px

Cards, dropdowns

--radius-xlrounded-xl16px

Modals, sheets

--radius-2xlrounded-2xl24px

Gallery photos, hero, category cards ★

--radius-3xlrounded-3xl40px

Reserved — extra-large pill containers

--radius-fullrounded-full9999px

Pills, avatars, circular buttons

Full Scale

All Tailwind spacing utilities available in Blanc. Each step = 4px. The scale is identical to Tailwind's default — these are documented here for reference and mapped as CSS custom properties.

px--space-px1px

Hairline / 1px borders

0.5--space-0-52px

Tight micro-gap

1--space-14px

Base unit

1.5--space-1-56px

2--space-28px

Compact padding (badges, chips)

2.5--space-2-510px

3--space-312px

Small gap between elements

3.5--space-3-514px

4--space-416px

Standard component padding

5--space-520px

6--space-624px

Section gap, card padding

7--space-728px

8--space-832px

Large component padding

9--space-936px

10--space-1040px

Inter-section gap (medium)

11--space-1144px

12--space-1248px

Nav-related spacing

14--space-1456px

16--space-1664px

Section horizontal padding

20--space-2080px

Section vertical padding

24--space-2496px

Large section gap

28--space-28112px

32--space-32128px

36--space-36144px

40--space-40160px

48--space-48192px

56--space-56224px

64--space-64256px

80--space-80320px

96--space-96384px