Atlas workspace
On trackRenewal is due in 18 days. Weekly use is up and two seats were added this month.
- Seats
- 24
- Usage
- +18%
- Renewal
- 18 days
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
Your Design Kit keeps
Colors, typefaces, the spacing scale, motifs, and brand voice.
Swiss / International Typographic changes
Surface material, borders, shape, depth, component layout, states, and motion.
Swiss / International Typographic specimen
Customer health
Accounts at risk
Open account12 min ago
Customer health
Accounts at risk
Atlas workspace
On trackRenewal is due in 18 days. Weekly use is up and two seats were added this month.
- Seats
- 24
- Usage
- +18%
- Renewal
- 18 days
Open account12 min ago
Look for: 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.
Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.
Choose what to restyle
Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.
Apply Swiss / International Typographic to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.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