All interface styles
System & typographic
Free

Swiss / International Typographic

A visible column grid, one neutral typeface at a strict scale, and alignment doing every job that decoration does elsewhere.

Also called: international style, grid design, helvetica school, rational, modernist

Swiss / International Typographic specimen

Look at the left edges: nav, headline, label, card text and data row all start on the same column. The only decoration is a hairline rule, and the selected chip is marked by weight and a rule, not by a pill.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

What you see

The perceptual fingerprint, in the order you notice it.

  • Everything aligns to the same columns and the same baseline
  • One typeface, few sizes, differences carried by weight and position
  • Large deliberate whitespace as an active element, not leftover room
  • Thin hairline rules used sparingly to mark structure
  • Asymmetric layouts that still feel balanced because the grid holds

Best for

  • Consultancies, studios and B2B products selling clarity and rigour
  • Content-heavy sites where structure has to survive long pages
  • Brands whose kit is already restrained and would be ruined by ornament

Avoid when

  • The product needs warmth or playfulness — this reads institutional
  • Content is irregular and cannot be made to fit a column discipline
  • You need dense functional chrome; Swiss spends its space on air

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Hairline rules and thin dividers are non-text elements: keep them at 3:1 or accept that they are decorative and add a real boundary elsewhere.
  • Small type at a tight scale is the recurring failure — hold body copy at 16px minimum and check the 1.5× line-height rule.
  • Alignment is invisible to a screen reader. The grid must be mirrored in heading levels and landmarks, not just in CSS.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Grid-driven International Typographic / constructivist systems — bold grotesque display, modular grids, flush-left rule lines, poster discipline, full-bleed color bands.

Implementation bundle

What an agent needs in order to actually build Swiss / International Typographic on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • A named 12-column grid on the page container (`display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px`), and every region places itself on it.
  • One family from the kit (`--font-sans`) at four sizes max; the scale is 1.2 and the ratio is never broken for emphasis.
  • Rules are `1px solid hsl(var(--border))` and horizontal only. No boxes, no vertical dividers, no shadows.
  • Radius 0 or 2px. Rounded corners fight the grid's logic.
  • Spacing is a strict 8px multiple, with section rhythm at 64/96px — the whitespace is the design and must not be tuned per component.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav is a single row aligned to the grid's first and last columns, active item at 600 weight with a 2px rule under it.
  • Headline sits on columns 1–8, the primary action on 9–12 — the asymmetry is the composition.
  • Inputs are underline-only: transparent background, `1px solid --border` bottom rule that becomes 2px `--ring` on focus, label above at small caps.
  • Selected chip: 600 weight plus a 2px `--foreground` bottom rule. Unselected: 400 weight, `--muted-foreground`, no rule.
  • Cards are not boxes — a hairline top rule, a heading, real text and a right-aligned data row on the same baseline.
  • Secondary action is a text link with a persistent 1px underline, not a ghost button.

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • 12 columns → 6 at 900px → 4 at 640px. The grid narrows; it does not disappear into a stack of centred blocks.
  • Section rhythm compresses 96px → 48px, but the 8px base stays, so alignment survives.
  • Asymmetric headline/action split becomes vertical, with the action still aligned to the same left column as the headline.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • Where `subgrid` is unavailable, repeat the column definition on the child rather than falling back to flex — flex breaks cross-region alignment.
  • If the kit's `--border` fails 3:1 against the page, keep the hairline as decoration and carry structure with spacing and weight instead of darkening the rule arbitrarily.
  • Long unbreakable strings get `overflow-wrap: anywhere` — a blown column destroys the whole composition, unlike in bordered styles.

QA checks

What to verify before shipping an interface in this style.

  • Overlay the column guides: every left edge in the page lands on a column start.
  • Body copy is ≥16px with line-height ≥1.5, and the scale has at most four sizes.
  • Heading levels descend without skipping, matching the visual hierarchy the grid implies.
  • At 320px nothing is centred that was left-aligned at desktop.

Agent tags

The vocabulary a coding agent can match this style on.

  • column-grid
  • typographic-scale
  • hairline-rule
  • asymmetric-balance
  • neutral-sans