HELVETIA.Design Guide

Guide · How this site was built

The grid is the interface.

This page explains HELVETIA the way the studio would want it explained: no mystique, only method. Everything here obeys the same rules as the site itself — press G and the twelve columns appear on this page too.

The conceptAesthetic school · Swiss International Style

HELVETIA is a fictional Zürich design consultancy, founded 1962, with invented clients — a transit authority, a pharmaceutical company, a museum — and a manifesto it has never revised.

The site is an exercise in strict International Typographic Style (the "Swiss Style" of Müller-Brockmann, Ruder and Hofmann): a mathematical grid, one sans-serif family from the system stack (Helvetica Neue falling back to Arial), flush-left ragged-right setting, and exactly three colours — #E30613, #000000, #FFFFFF. There are no photographs, no icons, no gradients, no shadows. Hierarchy is built from size, weight and position; atmosphere is built from white space.

The conceit that holds it together: the design system is not hidden behind the page — it is the page, and you can switch it on. The grid overlay is the site's portfolio piece.

The techniquesFive tricks, no secrets

The grid overlay (press G)

Two layers, toggled by one class on <html>. The columns are a fixed-position element containing the same .container.grid markup the page uses, so it mirrors the real grid at every breakpoint. The baselines are a repeating 1px gradient every 8px, positioned absolutely over the whole document so the lines scroll with the text they audit.

/* the columns are the real grid, re-used */
.grid-overlay .grid{ height: 100%; }

/* baselines: 1px of red every 8px */
background: repeating-linear-gradient(
  to bottom,
  rgba(227,6,19,.14) 0 1px,
  transparent 1px var(--u));

Everything on an 8px baseline

One custom property, --u: 8px, and a discipline: every font size in the 1.25-ratio scale carries a line-height snapped to a multiple of 8 (16/24, 25/32, 39/48, 96/96), and every padding, margin and border weight is written as calc(n * var(--u)). Turn the overlay on and the text sits on the lines because the arithmetic says it must.

--fs-0: 16px;  --lh-0: 24px;  /* 3u */
--fs-2: 25px;  --lh-2: 32px;  /* 4u */
--fs-4: 39px;  --lh-4: 48px;  /* 6u */
--fs-8: 96px;  --lh-8: 96px;  /* 12u */

padding-block: calc(5 * var(--u));

Typographic posters, no images

Each case study swaps a "poster" into a fixed A-series frame (aspect-ratio: 1 / 1.4142). The posters are pure markup — cropped giant glyphs, a red disc, black bars — sized in container-query units (cqw) so the composition scales perfectly with the frame. Hovering or focusing a list row toggles an is-active class; the incoming poster rises exactly one baseline unit.

.poster-frame{
  aspect-ratio: 1 / 1.4142;
  container-type: inline-size; }

.poster--kunsthalle .glyph{
  font-size: 92cqw;   /* scales with frame */
  left: -7cqw; top: -18cqw; }

Reveals that move one unit, not "some"

An IntersectionObserver adds is-in once per element. The starting offset is translateY(var(--u)) — 8px, the baseline itself — so entrances feel like typesetting, not animation. Stagger comes from an inline --rd delay. Under prefers-reduced-motion the elements simply exist, already in place.

[data-reveal]{
  opacity: 0;
  transform: translateY(var(--u));
  transition-delay: var(--rd, 0s); }

[data-reveal].is-in{
  opacity: 1; transform: none; }

Twelve columns that never change

The grid is repeat(12, 1fr) at every viewport width; responsiveness only reassigns spans (grid-column: 1 / 8 becomes 1 / 13). That keeps the overlay honest on a phone, and it keeps layout decisions expressible as column numbers — the way a 1968 layout would be marked up in pencil.

.grid{ grid-template-columns:
  repeat(12, minmax(0,1fr)); }

@media (max-width: 900px){
  .case-list-col{
    grid-column: 1 / 13; } /* spans move,
  the columns don't */

How it was madeProvenance

This site was designed and built by Claude (Fable 5), writing vanilla HTML, CSS and JavaScript by hand — no frameworks, no build step, no external assets. The typefaces are the system's own; the posters are CSS; the studio, its founders and its clients are fiction written for the occasion.

It is one of twenty-five sites in a showcase of wildly different design directions, each built the same way. The full set lives at fable-25.pages.dev.

Steal thisFive things you can apply today

  1. Pick a unit and obey it

    Define --u: 8px and write every spacing value as a multiple of it. Half your "something feels off" reviews disappear, because vertical rhythm stops being a matter of opinion.

  2. Give line-heights in pixels, on the grid

    Unitless line-height is fine until you want rhythm. Pair each font size with a line-height that is a multiple of your unit (16/24, 25/32) and headlines will lock to the same baselines as body text.

  3. Build yourself a G key

    A debug overlay of your real grid costs twenty lines and repays them forever. Reuse your actual container and grid classes in the overlay so it can never drift out of sync with the layout it checks.

  4. Ration one colour

    Choose an accent and give it a job description — "the first thing you must find" — then refuse it everywhere else. Red used at 2% of the page reads louder than red used at 20%.

  5. Make previews out of type

    Before reaching for stock photography, try a "poster": one cropped giant glyph, one bar, one caption, sized in cqw so it scales with its container. It is lighter than any image and it can't be off-brand.