Foundations · Spacing

Spacing, radii & elevation.

The quiet tokens. A 4px base spacing scale that expands exponentially at the top, a five-step radius scale from compact chips to hero surfaces, and iris-tinted shadows that lift things cleanly toward the viewer.

Spacing scale

14 steps, 4px base. Steps 0–7 are linear (work-in-progress UI); 8–13 grow exponentially (section gaps, layout rhythm). Never invent a gap — pick a step.

--space-1xxs 2px

--space-2xs 4px

--space-3sm 8px

--space-4md 12px

--space-5lg 16px

--space-6xl 20px

--space-72xl 24px

--space-83xl 32px

--space-94xl 40px

--space-105xl 56px

--space-116xl 72px

--space-127xl 96px

--space-138xl 128px

In use

Dense product UI and comfortable marketing use different ends of the same scale.

Dense UI

Small stack (--space-3 / 8px) for label→control, medium stack (--space-5 / 16px) between fields.

Workspace name

Slug

IrisCoralTeal

Comfortable layout

Marketing and editorial lean on --space-9 / 40px and --space-10 / 56px for generous block rhythm — more room to breathe, fewer competing ideas per column.

The spacing step is the same token — just a different choice up the scale.

Radii

Six steps plus full. Radius tracks container size: tiny for chips, large for surfaces, full for pills and avatars. Never mismatch radii across a single composition.

xs · 4pxcheckbox

sm · 6pxinput, chip

md · 10pxbutton

lg · 14pxcard

xl · 20pxsurface

2xl · 28pxhero

fullpill, avatar

Elevation

Shadows are slightly cool (toward the ink neutral), layered in two planes for soft edges. Two branded variants — iris and coral — for primary/secondary lift moments.

--shadow-xsresting / table row

Hairline lift. Used for stacked list items and inline chips that need edge definition.

--shadow-smcard · resting

Default card elevation. The system's workhorse — most surfaces use this.

--shadow-mdcard · hover, dropdown

Hover lift on interactive cards; resting elevation for popovers and menus.

--shadow-lgmodal · floating

Modals and dialogs. Big drop, diffused bottom — reads as floating above the page.

--shadow-xlcommand · overlay

Command palettes and full-screen overlays. Use sparingly — only one at a time.

--shadow-irisprimary CTA hover

Branded lift for primary buttons and feature tiles on hover / active selection.

--shadow-coralsecondary spotlight

Reserved for the one thing on screen that should feel warm and promoted.

--shadow-insetrecessed / input

Inset highlight — inputs, toggled-off states, and pressed chips.

Motion

Three durations, one easing curve for 95% of cases. --ease-out for entrances and hover reactions; --ease-in-out only for layout-shifting transitions. Hover a row to trigger.

hover each row →

--dur-fast · 120msmicro-interactions

ease-outhover color, focus ring

--dur-base · 180msdefault

ease-outdropdowns, tooltips

--dur-slow · 280mslayout shift

ease-in-outmodal, drawer, accordion

Tokens

Paste into :root. Components consume these — never raw px values.

/* Spacing — 4px base */
--space-0: 0;     --space-1: 2px;   --space-2: 4px;   --space-3: 8px;
--space-4: 12px;  --space-5: 16px;  --space-6: 20px;  --space-7: 24px;
--space-8: 32px;  --space-9: 40px;  --space-10: 56px;
--space-11: 72px; --space-12: 96px; --space-13: 128px;

/* Radii */
--radius-xs:   4px;   --radius-sm:  6px;   --radius-md:  10px;
--radius-lg:   14px;  --radius-xl:  20px;  --radius-2xl: 28px;
--radius-full: 999px;

/* Elevation */
--shadow-xs:    0 1px 1px -0.5px rgb(15 23 42 / .04), 0 1px 2px -1px rgb(15 23 42 / .06);
--shadow-sm:    0 1px 2px -1px rgb(15 23 42 / .06), 0 2px 4px -2px rgb(15 23 42 / .05);
--shadow-md:    0 4px 10px -4px rgb(15 23 42 / .10), 0 8px 16px -8px rgb(15 23 42 / .06);
--shadow-lg:    0 12px 24px -12px rgb(15 23 42 / .14), 0 20px 40px -20px rgb(15 23 42 / .08);
--shadow-xl:    0 24px 48px -24px rgb(15 23 42 / .20), 0 40px 80px -40px rgb(15 23 42 / .10);
--shadow-iris:  0 12px 28px -14px rgb(45 17 150 / .35), 0 4px 10px -6px rgb(45 17 150 / .22);
--shadow-coral: 0 12px 28px -14px rgb(136 53 24 / .30), 0 4px 10px -6px rgb(136 53 24 / .20);
--shadow-inset: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px rgb(15 23 42 / .04);

/* Motion */
--ease-out:    cubic-bezier(.22, 1, .36, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
--dur-fast: 120ms;  --dur-base: 180ms;  --dur-slow: 280ms;