Less, but better.

Design philosophy

Every pixel must earn its place. If removing an element does not reduce comprehension or capability, remove it.

Decision order

1. Remove it.
2. Express it with space.
3. Express it with type weight or opacity.
4. Express it with a hairline.
5. Only last, use color or elevation.

Spatial engine and layout

A 4pt base with an 8pt rhythm. Gaps communicate relationship: related items sit close, groups sit 4x apart, sections 8x or more.

Spacing scale

Breakpoints and dynamic padding

--gutter: clamp(1rem, 4vw, 4rem);
--section-y: clamp(4rem, 10vw, 8rem);
--measure: 65ch;  --container: 72rem;  --container-narrow: 40rem;

Layout rules

1. Default to a single column; reading and forms use 40rem.
2. Use a 12-column grid on desktop, collapse to one column below 768px. Never more than 4 content columns.
3. Pair a narrow label column with a wide content column for editorial calm.
4. Use a 1px hairline only where spacing fails. Never stack border, fill and shadow.
5. Keep a strong left edge. Touch targets are at least 44 by 44px.

Typography and hierarchy

Inter for interface and body, with Newsreader as an optional editorial accent. Hierarchy comes from size, weight and opacity.

Scale

Weight and opacity

Use weights 400 and 500; allow 600 for one emphasis tier; never 700 or above. Three tones create depth: primary, secondary (about 70%) and tertiary (about 55%, never below AA). Large type tightens tracking, small type loosens it.

Color and surface

A warm monochrome foundation and exactly one accent. Surfaces are flat: no gradients, glass or textures, and never more than two levels visible at once.

Neutral foundation (light, with dark values)

Single accent

Reserved for the primary call to action, selected state, links, focus ring and progress. Pick one per product.

Tokens

:root {
  --bg:#FAFAF8; --surface:#FFFFFF; --surface-tint:#F4F4F1;
  --border-subtle:#EAEAE6; --border-strong:#D9D8D3;
  --text-primary:#141413; --text-secondary:#52514D; --text-tertiary:#6B6A66;
  --accent:#2B4EFF; --accent-hover:#1F3BD9; --accent-tint:#EEF1FF; --on-accent:#FFFFFF;
}

Surface rules

1. Flat planes only.
2. At most two surface levels visible at once.
3. Separate with space, then a hairline, then a tint. Elevation last.
4. Images carry color; chrome stays neutral.

Interactive components

Radius is 6px for controls and 10px for containers, with one 1px border weight. Shadows appear only on overlays.

Buttons

Sizes are 32, 40 and 48px high. One primary per view. Labels use sentence case and weight 500.

Cards

Form controls

Modal, tooltip and overlays

modal: 0 8px 32px rgba(20,20,19,.08), 0 1px 2px rgba(20,20,19,.04)   radius 10px   scrim rgba(20,20,19,.4), no blur
dark mode: replace shadow with a 1px --border-strong hairline

Motion

Motion explains cause and effect; it never entertains. Animate only opacity, transform and color. No bounce, parallax or looping decoration.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

Accessibility

Light, quiet typography is minimalism's biggest accessibility risk. These minimums are mandatory in both themes.

Rules

1. Never use weight below 400; 300 or lighter is prohibited below 24px.
2. Text below 14px must meet 4.5:1.
3. Do not dim text with opacity; use the tertiary token.
4. Never convey state by color alone.
5. Keep focus always visible: 2px accent ring with 2px offset.
6. Support 200% zoom, reflow at 320px, keyboard order and focus trapping in modals.
7. Honor reduced motion and avoid flashing above 3 times per second.

Figma tokens

Three tiers: primitive, semantic, component. Light and dark modes swap the semantic layer. Name tokens category/role/variant/state, for example color/text/secondary or motion/duration/base. Bind auto-layout spacing to variables so the grid is enforced by construction.

The Minimalism audit

Before shipping a screen, answer yes to all of these. A no is a defect, not a preference.

1. Is there a single, obvious primary action?
2. Is the accent used only for action, selection, links and focus?
3. Could any border, fill, shadow or icon go without loss of meaning?
4. Does every spacing value come from the scale?
5. Do all text and UI elements meet the contrast table?
6. Are there at most two weights and one serif accent?
7. Do transitions stay within 100 to 200ms and respect reduced motion?