Guide 04 · typographic family
Swiss Grid & Editorial Luxury
Two styles with no elevation model at all. Hierarchy comes from scale, position, rules and whitespace. Swiss Grid is clinical: one grotesque, a strict twelve-column grid, a single red accent. Editorial Luxury is warmer and slower: a serif display face, wide letter-spaced eyebrows, hairline separators and margins most teams will find uncomfortable.
Preview the component
Watch what happens to the same module when shadows are removed entirely. Currently showing Swiss Grid.
Dashboard module
Deployment health
Build 4.2.0 is live on every regional edge. Response times stayed inside the target window during rollout.
Design specification
style: swiss-grid description: strict twelve-column grid, oversized display type, asymmetric placement, one accent, no ornament industries: architecture, consulting, museums and galleries, legal, engineering, academic institutions typography: Helvetica Neue or Inter — H1 at 8-12vw, tracking -0.03em, body 17px at 1.5, no italics card-architecture: column block; media flush to the column edge, caption 12px directly beneath, 1px top rule buttons: square, solid black fill or 1px outline, uppercase 13px label with 0.06em tracking navigation: flush-left text labels on the same grid as the content; current item marked with the accent border-radius: 0px elevation: none — separation by rule and whitespace surface: pure #FFFFFF, accent #E2231A used sparingly animation: none, or 150ms opacity on link hover grid: 12 columns, 24px gutter, 64px section rhythm caution: needs real editorial content, not filler
style: editorial-luxury description: magazine discipline applied to a website — serif display, paper ground, hairline rules, wide margins industries: fashion, hospitality, fine dining, property, jewellery, publishing, private clients typography: serif display (e.g. Playfair Display) for headings, grotesque for body; eyebrows uppercase 11px with 0.18em tracking; drop cap on opening paragraph card-architecture: full-width image, caption beneath in small caps, generous 40px bottom margin, no card border buttons: text button with 1px underline, or a solid ink block for the single commercial action navigation: centred wordmark, uppercase tracked links, thin rule below the header border-radius: 2px elevation: none surface: #FFFDF8 on #F3EFE7, rules in #C8BFAE animation: 400ms fade only; nothing slides or scales constraint: measure 62-72 characters, never full width
style: soft-minimal (control) description: the shadow-based alternative — included so you can see how much work elevation was doing typography: Inter — 600 headings, 400 body card-architecture: stacked media and body, 24px padding buttons: filled accent, 12px radius navigation: opaque bar with hover underline border-radius: 18px cards / 12px controls elevation: 0 6px 18px rgba(30,45,70,0.08) animation: 180ms ease note: easier to ship, far less distinctive
In this family the type scale is the design system. Fix the ratio first.
Designing without elevation
Remove shadows and every grouping decision becomes explicit. A card is no longer "a thing that floats"; it is a column of content with a rule above it and forty pixels of air below. That is liberating for reading and unforgiving for interface work, because the affordance of a clickable region has to be carried by something else — usually a rule that changes colour, a label that gains an underline, or a block of the accent colour behind the primary action. Decide that vocabulary before you build the components, or you will end up sprinkling borders inconsistently.
The second discipline is the baseline rhythm. Swiss Grid only reads as Swiss when things line up across unrelated blocks: the top of a caption, the start of a paragraph and the first row of a table all sitting on the same horizontal. In practice that means one spacing scale used without exception and section padding that is a multiple of your line height. Once you allow arbitrary values, the grid stops being visible and the page just looks bare.
Editorial Luxury replaces the grid's severity with contrast between faces. The pairing rule that survives contact with real content is simple: one face carries voice, the other carries information. If the serif is doing headlines and pull quotes, the grotesque does navigation, captions, labels, tables and buttons. Mixing them inside the same component — a serif heading with serif metadata — looks decorative rather than considered. Also budget for the measure: a luxury layout with full-width paragraphs is not a luxury layout, it is an unstyled document. Cap the reading column between roughly sixty-two and seventy-two characters and keep the remaining space as margin.
Specification comparison
| Criterion | Swiss Grid | Editorial Luxury |
|---|---|---|
| Display face | Grotesque, very tight tracking | Serif, moderate tracking |
| Ground | Pure white | Warm paper |
| Separation | 1px black rules | 1px warm hairlines plus whitespace |
| Radius | 0px | 2px |
| Accent use | One hue, small area, high impact | Almost none; ink and paper only |
| Motion | None or opacity | 400ms fade only |
| Photography | Documentary, cropped to the grid | Editorial, full-bleed, high quality |
| Mobile behaviour | Excellent — columns stack cleanly | Needs a reduced display scale |
Pros and cons
Arguments for
- No shadows or blur means the lightest possible rendering cost and no compositing issues.
- Ages extremely well; a grid-led layout rarely looks like a specific year.
- Reads as authoritative, which suits professional services and institutions.
- Content-first structure translates almost directly into clean, semantic markup.
Arguments against
- Requires finished copy and good photography — there is nowhere to hide.
- Interactive affordances must be invented deliberately, adding design time.
- Oversized display type needs careful clamping to avoid overflow at 320px.
- Editorial Luxury depends on a licensed display face, which adds cost and load weight.
Picking a side
Choose Swiss Grid for organisations that want to look precise: studios, consultancies, technical institutes, cultural venues with a strong programme. Choose Editorial Luxury when the audience is buying taste rather than efficiency, and when someone is genuinely responsible for words and images. If neither content condition is met, a typographic style will look thin — step to Guide 03 and let a component system carry the page instead.
Two practical notes. First, clamp the display size: a fluid clamp() value between about 32px and 96px keeps an oversized H1 usable from 320px upwards, and setting overflow-wrap: anywhere on headings prevents a long brand word from pushing the layout sideways. Second, because this family has no shadows, the focus ring is your only elevation cue — give it a solid two-pixel accent outline with a two-pixel offset and check it against the WCAG 2.2 quick reference on both the white and the paper ground.