Design Systems That Survive Contact With Content

A design system built against a Figma file is a design system built against a lie. The lie is that the content will be the length you drew it. It will not: the headline will be four words or fourteen, the case study will have two metrics or none, and someone will paste a 60-character client name into a field you sized for 20.

Systems that survive share a few properties.

#Few tokens, chosen properly

Four to six colour tokens is plenty for a content site: a background, an ink, a muted ink, a surface, and one or two accents. More than that and nobody — including you — remembers which is which, and the palette drifts.

Name them by role rather than appearance. --color-paper and --color-ink survive a rebrand; --color-light-grey-2 becomes a lie the moment the design changes.

@theme {
  --color-paper:  #eff1ee;
  --color-surface:#e3e7e2;
  --color-ink:    #141a1f;
  --color-muted:  #5f6b66;
  --color-accent: #2b4cff;
  --color-signal: #ff4d2e;
}

#Type scales should be fluid, not stepped

Breakpoint-stepped type produces headlines that are perfect at 1440px and broken at 1200px. clamp() removes the whole category of problem:

--text-d1: clamp(3rem, 10.5vw, 7.5rem);
--text-d1--line-height: 0.92;
--text-d1--letter-spacing: -0.035em;

Tie leading and tracking to the size in the same token. Large display type needs tight leading and negative tracking; body type needs neither. Bundling them means a component cannot accidentally use display tracking on a paragraph.

#Design the empty and the overflowing state

For every component, draw three versions: the shortest realistic content, the longest, and none at all. A case study card with no metrics should still look deliberate. A headline that wraps to four lines should not collide with the image below it.

• Give text containers a max-width in ch, not pixels — around 65ch for body copy.
• Use text-wrap: balance on headings and pretty on paragraphs.
• Let grids collapse to one column early. 360px is a real viewport.
• Never rely on a fixed height to make two cards match; use the grid.

#Components own their motion

Motion added at the page level becomes a snowflake. Motion added inside a component — a reveal wrapper, a hover treatment — is reusable and can be gated once.

Every animation in this system checks prefers-reduced-motion and has a resting state that is already visible. That is not only an accessibility requirement; it is what stops a JavaScript failure from producing an invisible page. More on the mechanics in Editorial Layout on the Web.

If your system only looks right with the content from the mockup, you did not build a system. You built a mockup with extra steps.