Design styles
Most generated interfaces look the same: a centred hero, a three card row, soft grey borders, one blue button, generous rounded corners. It is not ugly. It is anonymous, and anonymous is a design failure for anything that has to be remembered.
A style is a set of decisions made together. Picking one deliberately and applying it consistently produces something that looks intentional. Mixing three produces something that looks generated.
Pick one and commit
The most common failure is not choosing a bad style, it is choosing three. Glass panels on a brutalist layout with an editorial serif and a bento grid reads as indecision.
Choose one primary style. Borrow at most one element from a second, deliberately, and be able to say why.
The styles
| Style | Feels like | Good for | Avoid when |
|---|---|---|---|
| Minimal | Calm, expensive, restrained | Products, portfolios, anything premium | Content is dense |
| Swiss | Rigorous, confident, editorial | Agencies, publications, B2B | The brand is playful |
| Neobrutalism | Loud, blunt, young | Dev tools, launches, standing out | Trust and calm are the goal |
| Glassmorphism | Layered, modern, atmospheric | Dashboards, media, dark interfaces | Contrast and legibility are critical |
| Bento | Organised, dense, product led | Feature pages, dashboards, overviews | There is one thing to say |
| Editorial | Considered, literate, human | Long form, case studies, brand sites | The page is a UI, not a read |
| Dark technical | Precise, engineered, serious | Infrastructure, developer products, data | The audience is consumer |
| Flat | Plain, efficient, unfashionable | Utilities, internal tools, forms | Differentiation matters |
references/choosing.md is the decision procedure when it is not obvious, plus what each style costs to execute.
What makes any style work
Independent of which you pick. These four decide whether it reads as designed or generated.
One decision per axis, applied everywhere
Pick a type scale and use only those sizes. Pick a spacing rhythm and use only its multiples. Pick a corner radius and use it, or one deliberate exception. Inconsistency reads as carelessness even when nobody can name what is wrong.
Contrast is a tool, not an accident
Something must dominate. If everything on a page is the same weight, size and colour, the reader has nowhere to start and the page reads as flat regardless of style.
Create hierarchy with one axis at a time. Bigger, or bolder, or coloured. Doing all three at once is shouting.
Space is the cheapest quality signal
More space around less content reads as more expensive, in every style including the dense ones. The most common fix for a design that looks amateur is to double the whitespace and change nothing else.
Bento and Swiss are dense, but their density is structured. Dense and unstructured is just cramped.
One accent colour
One. Used sparingly, for the thing you want clicked. A second accent halves the meaning of the first, and a page with four accent colours has none.
Neutrals do the work. The accent does the pointing.
Accessibility is not a style
It applies to all of them, and two styles actively fight it.
- Body text at 4.5:1 contrast minimum, large text at 3:1. Check it, do not estimate it. Glassmorphism and light neobrutalism both fail this routinely
- Never encode meaning in colour alone. Add an icon, a label or a shape
- Interactive targets at least 44 by 44 pixels
- Visible focus states. Removing focus outlines because they are ugly makes the interface unusable by keyboard. Restyle them instead
- Respect
prefers-reduced-motion
A style that cannot meet these is being applied wrong, not constrained by accessibility.
Practical rules
- Two typefaces at most. One is often better. A third is almost never the fix
- Do not centre body text. Centred headings, left aligned paragraphs
- Line length 45 to 75 characters. Wide full width paragraphs are hard to read at any size
- Motion between 140 and 260 milliseconds, ease out. Longer feels slow, bouncy feels toylike outside neobrutalism
- Design the empty and loading states. They are what a new user sees first, and they are what nobody designs
- Check it at 375 pixels wide. A design that only works on a laptop is not finished
Reference files
Everything the skill tells your AI to read, exactly as it ships in the zip.
references/bento.md 2.8 KB
# Bento
A grid of unequal boxes, each holding one idea. Named after the compartmented lunchbox. Apple made it standard for product pages and it has become the default way to show six features without six sections.
It is a layout system more than an aesthetic, which means it combines with other styles. Bento plus minimal, bento plus dark technical, bento plus glass all work.
## Decisions
| Axis | Choice |
|---|---|
| Grid | CSS grid, 4 or 6 columns. Cells span 1, 2 or 3 |
| Cell sizes | **Unequal on purpose.** Equal cells is a card grid, not bento |
| Gap | Consistent, 12 to 24px. This is the single most important measurement |
| Radius | Generous and identical on every cell. 16 to 24px |
| Colour | Neutral cells, one or two accented for emphasis |
| Content | One idea per cell. A stat, a screenshot, a sentence, a small chart |
| Border | Either a hairline on every cell or none. Not some |
| Shadow | Usually none. Separation comes from the gap |
| Motion | Subtle lift or border brighten on hover |
## The grid
```css
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cell-wide { grid-column: span 2; }
.cell-tall { grid-row: span 2; }
.cell-hero { grid-column: span 2; grid-row: span 2; }
@media (max-width: 768px) {
.bento { grid-template-columns: 1fr; }
.bento > * { grid-column: auto; grid-row: auto; }
}
```
Collapsing to one column on mobile is the standard answer. Two columns of tiny boxes is worse than a stack.
## Getting it right
- **Vary the sizes deliberately.** One large cell anchors the composition, the rest support it. All medium is a card grid
- **One idea per cell.** A cell with a heading, three bullets and a button is a section that wandered into the wrong layout
- **Fill every cell.** A gap in a bento grid reads as broken. Design the grid around what you have, not what you wish you had
- **The gap is the design.** Keep it identical everywhere, including the outer padding if the grid is contained
- **Aim for six to nine cells.** Fewer does not need a grid. More is a wall
## Where it fails
- **One message.** A page saying one thing should not be nine boxes
- **Sequential content.** Bento is deliberately non linear. A process with ordered steps needs order
- **Long text.** Cells are for a sentence, not a paragraph
- **Mobile, if unplanned.** Nine boxes stacked is a very long page. Consider hiding the least important on small screens
## Combining
- **Bento plus dark technical** is the current default for developer product pages. Dark cells, mono labels, one accent
- **Bento plus minimal** works when cells are large and content is sparse
- **Bento plus neobrutalism** works well: thick borders make the compartments literal
- **Bento plus glass** needs a strong background and is heavy to render. Use for a hero, not a whole page
references/choosing.md 3.6 KB
# Choosing a style
## Start with three questions
**1. Who is looking at this, and what do they need to feel?**
| They need to feel | Style |
|---|---|
| This is safe and serious | Minimal, Swiss, Flat |
| These people know what they are doing | Dark technical, Swiss |
| This is worth reading | Editorial |
| This is new and confident | Neobrutalism |
| This is modern and considered | Glassmorphism, Bento |
| This will not waste my time | Flat, Minimal |
**2. Is this something to look at, or something to use?**
Marketing pages can afford atmosphere. Interfaces cannot. A tool someone opens forty times a day should be legible and fast, and any style that costs legibility is the wrong style regardless of how it looks in a screenshot.
**3. How much content is there?**
- Very little: Minimal, Editorial
- A moderate amount, in chunks: Bento, Swiss
- A lot, structured: Flat, Swiss, Dark technical
- A lot, prose: Editorial
## When the brand already exists
The brand wins. If there is a logo, a palette and a typeface, the style has largely been chosen: your job is to apply it well rather than to pick a look.
Where a brand and a style genuinely conflict, say so rather than quietly overriding it. A brand with a warm serif wordmark rendered in neobrutalism will look wrong and nobody will be able to say why.
## Execution cost
Worth knowing before promising a look. Some styles are cheap to do well and expensive to do badly.
| Style | Cost | Where the cost is |
|---|---|---|
| Flat | Low | Getting the states and tables right |
| Bento | Low to medium | Content for every cell, and the mobile collapse |
| Neobrutalism | Low | Cheap to build, but contrast checking is real work |
| Dark technical | Medium | Tuning the dark palette. Neutral greys look cheap and finding the tint takes iteration |
| Minimal | Medium | Deceptive. Little on screen means every element must be excellent. Nowhere to hide |
| Glassmorphism | Medium to high | Needs a designed background, plus contrast and performance work |
| Swiss | High | The grid must be exact. Approximate Swiss looks worse than no system |
| Editorial | High | Needs typographic judgement, and content actually worth the treatment |
If time is short, Flat, Bento and Neobrutalism give the most result per hour. Swiss and Editorial reward time and punish rushing.
## Combining, carefully
One primary, at most one borrowed element, with a reason.
| Combination | Works because |
|---|---|
| Bento plus dark technical | Bento is a layout, dark technical is a surface treatment. No conflict |
| Bento plus neobrutalism | Thick borders make the compartments literal |
| Minimal plus editorial | Both restraint led. Add a serif headline and real measure to a minimal page |
| Swiss plus editorial | Historically the same lineage |
| Dark technical plus glass | One glass panel over a dark gradient. One |
Combinations that do not work:
- **Glassmorphism plus neobrutalism.** Softness and bluntness cancel out
- **Minimal plus bento.** Bento fills space, minimal empties it
- **Editorial plus flat.** Warm typographic craft against cool utility. Reads as two sites
- **Any three at once**
## Sanity checks before shipping
- **Squint at it.** Does one thing dominate. If everything blurs into one grey mass, the hierarchy has failed
- **Greyscale it.** Does it still work. If it collapses, colour was carrying meaning it should not
- **375 pixels wide.** Does it survive
- **Contrast checked, not estimated.** Every text colour against every surface it sits on
- **Show one person for five seconds and ask what it is about.** If they cannot say, the design is decorating rather than communicating
references/dark-technical.md 2.9 KB
# Dark technical
Deep dark surfaces, mono type for anything machine facing, one luminous accent, emphasis through glow rather than shadow. The default look of infrastructure, developer tools and data products.
Not the same as dark mode. Dark mode is a colour scheme applied to an existing design. This is a design that only makes sense dark.
## Decisions
| Axis | Choice |
|---|---|
| Background | Very dark, and tinted, not neutral. Deep navy, near black blue, dark slate |
| Surfaces | One or two steps lighter than the background. Elevation by lightness, not shadow |
| Type | A grotesque for prose, a mono for anything machine facing |
| Mono use | API paths, code, IDs, scopes, keys, timestamps, eyebrows, column headers |
| Colour | Neutral scale plus **one** luminous accent. Cyan, electric blue, green, violet |
| Accent use | Sparingly. The primary action, an active state, a data highlight |
| Radius | Moderate, 8 to 16px. Larger on big panels |
| Borders | 1px, low contrast, slightly lighter than the surface. These do most of the structural work |
| Shadow | Mostly ineffective on dark. Use glow instead: a coloured shadow at low opacity |
| Space | Tighter than a marketing site. Density signals capability here |
| Motion | Fast and precise. 140 to 220ms, no bounce |
## Palette
```
--bg-0: #0A0F1C deepest
--bg-1: #0F1626 surface
--bg-2: #172033 raised
--line: #223049
--text: #E8EDF7
--muted: #8494B0
--accent: #38C9FE
--glow: 0 0 24px rgba(56, 201, 254, 0.28)
```
**Tint the darks.** Pure `#000` and pure grey read as cheap. A few points of blue or violet is the difference between engineered and unfinished.
## Getting it right
- **Never pure white text on near black.** It vibrates and tires the eye. Come down to about 92 percent
- **Elevation is lightness.** Higher surfaces are lighter. Shadows barely register on dark backgrounds
- **Glow, not shadow, for emphasis.** A soft coloured halo on a focused input or a primary button
- **Mono is semantic.** Use it for machine facing content, consistently. When it is used decoratively it stops meaning anything
- **Watch saturated colour on dark.** Fully saturated blues and reds bloom and are hard to read. Desaturate slightly
- **Dim images.** Bright photography on a dark interface punches holes in it. Reduce brightness or overlay
## Where it fails
- **Long form reading.** Extended prose is harder to read light on dark for most people. If there is a lot to read, offer a light theme
- **Consumer and lifestyle products.** It reads as technical, which is the point and also the limit
- **Printing.** Anything expected to be printed needs a light variant
- **Accessibility, if unchecked.** Muted greys on dark backgrounds fail contrast quietly. Check every text colour against every surface it sits on
## Tell
Are the darks tinted, and is the mono meaningful. Neutral greys with mono used for decoration is dark mode with extra steps.
references/editorial.md 3.1 KB
# Editorial
Design borrowed from print magazines and books. Serif headlines, real typographic hierarchy, generous measure, pull quotes, captions, drop caps. The reader is expected to read.
The right choice when the content is genuinely worth reading and the wrong one when the page is really an interface.
## Decisions
| Axis | Choice |
|---|---|
| Type | Two families. A serif for headlines or body, a sans for the other. Never two of the same class |
| Serif choices | Freight, Tiempos, Source Serif, Newsreader, Instrument Serif, Fraunces |
| Type scale | Dramatic. Headline 56 to 96px, body 18 to 21px |
| Body size | **18px minimum.** Editorial with 14px body text is not editorial |
| Line height | 1.6 to 1.75 on body. Tight on headlines, 0.95 to 1.1 |
| Measure | 60 to 70 characters. Non negotiable |
| Colour | Warm neutrals. Cream, ivory, warm grey. Rarely pure white |
| Accent | One, used in links and small marks |
| Space | Vertical rhythm consistent. Space between paragraphs, not indents, on web |
| Motion | Almost none. Maybe a fade as content enters |
## Palette
```
--bg: #FBF9F4 warm off white
--text: #1A1917 warm near black
--muted: #6B6862
--rule: #E2DED4
--accent: #A63D2F a muted, slightly desaturated colour
```
Warm neutrals are what separate editorial from minimal. Cool grey reads as tech; warm reads as print.
## The furniture
Editorial has a vocabulary. Using it is what makes it read as editorial rather than a blog post in a serif:
- **Standfirst.** The larger intro paragraph below the headline, in a different weight or colour
- **Pull quotes.** A line lifted from the text at large size, often breaking the measure. One or two per article
- **Captions.** Small, muted, sans if the body is serif
- **Drop cap.** On the first paragraph. One per article, never more
- **Section rules.** A hairline or a small ornament between sections
- **Byline and date.** Small, mono or sans, above or below the headline
- **Figure numbers.** For images and tables, if the content warrants them
## Getting it right
- **The measure is the whole thing.** Full width paragraphs across a 1400px container are unreadable, regardless of typeface. Constrain to 60 to 70 characters and let images break out wider
- **Contrast the two typefaces sharply.** A serif with a grotesque. Two similar faces look like a mistake
- **Break the grid on purpose, occasionally.** A full bleed image, a quote in the margin. Once or twice per page, not constantly
- **Optical alignment on large type.** Hanging punctuation and negative letter spacing on big headlines. This is the detail that separates typeset from typed
- **Design the reading experience.** Where does the eye rest, where does it move
## Where it fails
- **Interfaces.** A dashboard in editorial style is a dashboard that is hard to use
- **Short content.** Editorial furniture around 200 words is costume
- **Dense marketing pages.** If the goal is to scan and click, this style slows the reader down, which is the opposite of the goal
## Tell
Remove every image. If the page is still good to look at, it is properly editorial. If it collapses, the typography was carrying nothing.
references/flat.md 2.8 KB
# Flat
No depth, no texture, no ornament. Solid colour, clear type, obvious affordances. Unfashionable, which is exactly why it is often the right answer for something people use rather than admire.
The style to reach for when the interface is a tool: internal systems, admin panels, forms, anything used daily by people who did not choose it.
## Decisions
| Axis | Choice |
|---|---|
| Type | A clear UI sans. Inter, System UI, Roboto, Public Sans |
| Type scale | Narrow. 13 / 14 / 16 / 20 / 28. Tools do not need 80px headlines |
| Colour | Solid fills. No gradients, no transparency effects |
| Semantic colour | A defined set: primary, success, warning, danger, info. Used consistently |
| Radius | Small and consistent. 4 to 6px |
| Borders | 1px, visible. Structure comes from borders and fills |
| Shadow | None, or one small shadow reserved for genuinely floating things: dropdowns, modals, toasts |
| Space | Efficient. 8px base unit, tighter than a marketing site |
| Density | Higher than a consumer product. People are working |
| Motion | Fast, functional. 120 to 180ms. Nothing decorative |
## Palette
```
--bg: #F7F8FA
--surface: #FFFFFF
--line: #E3E6EB
--text: #1F2430
--muted: #6B7280
--primary: #2563EB
--success: #16A34A
--warning: #D97706
--danger: #DC2626
```
## Getting it right
- **Affordances must be obvious.** A button looks like a button. A link is underlined or clearly coloured. Flat design earned criticism when it removed the cues that told people what was clickable, and that criticism was correct
- **Semantic colour, applied consistently.** Danger is always the same red, everywhere. Consistency is the entire trust mechanism in a tool
- **Never colour alone for meaning.** A red row needs an icon or a label. This matters more here than anywhere, because these interfaces carry consequences
- **Design the states.** Hover, active, focus, disabled, loading, error, empty. A tool lives in its states far more than a landing page does
- **Density is a feature.** People using this all day want more on screen, not more whitespace. Do not apply marketing site spacing to an admin panel
- **Tables are the main event.** Most flat interfaces are mostly tables. Invest in the table: alignment, number formatting, sticky headers, sensible column widths, right aligned numerics
## Where it fails
- **Differentiation.** It looks like everything else, deliberately. Not the choice for a brand that must be remembered
- **Marketing.** A landing page in flat UI style looks like a settings screen
- **Ambiguous clickability**, if the affordance rules above are ignored
## Why choose it anyway
Because it is legible, fast to build, easy to keep consistent, accessible by default, and it ages by not having been fashionable in the first place. For an internal tool used by thirty people every day, that is a better outcome than a style anyone would notice.
references/glassmorphism.md 2.7 KB
# Glassmorphism
Translucent panels, background blur, a light border catching the edge. Depth through layering rather than shadow.
It came back matured. The 2021 version put frosted glass on everything; the version that works now uses it on one or two elements against a background worth blurring.
## Decisions
| Axis | Choice |
|---|---|
| Background | **Required.** Glass needs something behind it. A gradient, a mesh, an image. Glass over flat grey is just a translucent box |
| Type | Clean sans. Inter, SF, Geist. High weight for legibility over a busy backdrop |
| Colour | Panels near white or near black at low opacity. Colour comes from the background |
| Blur | 12 to 24px. Below 8px does nothing, above 40px is soup |
| Border | 1px, white at 10 to 20 percent. This is what reads as a glass edge |
| Radius | Generous. 16 to 24px |
| Shadow | Soft, large, low opacity. It lifts the panel off the background |
| Space | Comfortable. Glass needs room to be seen as a layer |
| Motion | Slow and smooth. 300 to 400ms |
## The panel
```css
.glass {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}
```
`saturate()` alongside the blur is what stops it looking grey and dead. Most implementations omit it.
## Getting it right
- **Restraint.** One or two glass elements. A page where every card is glass is visual noise and the effect stops registering
- **Earn the background.** A rich gradient or a real image. The blur has to have something to blur
- **Layer count matters.** Glass on glass on glass is muddy. Two levels maximum
- **Dark mode suits it better.** White at low opacity over a dark gradient is more forgiving than dark over light
- **Provide a fallback.** `backdrop-filter` support is broad but not universal. Use `@supports` and fall back to a solid panel
## Where it fails
- **Text contrast.** This is the real problem, and it is not theoretical. Text on a translucent panel over a variable background has variable contrast, and the worst case will fail. Fix it by raising panel opacity behind text, or adding a subtle solid layer under the text specifically
- **Performance.** `backdrop-filter` is expensive. Many blurred elements, especially animated or scrolling, will drop frames on mid range hardware
- **Dense data.** Tables and forms need clarity, not atmosphere
- **Anything that must be readable in bright sunlight**
## Tell
Screenshot it and check the text contrast against the darkest and lightest points of the background behind it. If either fails, the design fails, however good it looks on your monitor.
references/minimal.md 2.2 KB
# Minimal
Restraint as the point. Very little on screen, everything that is there deliberate. Reads as expensive because space is the most expensive thing on a page.
Easy to do badly: minimal is not "the same generic layout with fewer elements". It is a small number of very good decisions.
## Decisions
| Axis | Choice |
|---|---|
| Type | One family. A good grotesque (Inter, Helvetica Now, Suisse) or one refined serif |
| Type scale | Wide. 14 / 16 / 24 / 48 / 80. The jump is the hierarchy |
| Weight | Two only. Regular and medium. Bold rarely |
| Colour | Near black on off white. One accent, used two or three times per page |
| Space | Very generous. Section padding 120 to 200px desktop |
| Radius | 0 or small, 4 to 8px. Consistent |
| Borders | Hairline, 1px, very low contrast. Or none |
| Shadow | None, or barely perceptible |
| Motion | Subtle fades and small translations. 200ms ease out |
| Imagery | Few, large, high quality. One good image beats six |
## Palette
```
--bg: #FDFDFC off white, never pure white
--surface: #F6F6F4
--text: #16161A near black, never pure black
--muted: #71717A
--line: #E8E8E4
--accent: one colour, chosen for the brand
```
Pure white and pure black both look cheap on screen. Off by a few percent reads as considered.
## Getting it right
- **The whitespace is the design.** If it looks empty, that is the style working. Resist filling it
- **Left align almost everything.** Centred everything is the generated look
- **One thing per screen.** If a section makes two points, it is two sections
- **Hierarchy through size, not decoration.** No boxes, no dividers, no badges. Just a big thing and a small thing
## Where it fails
- **Dense content.** A pricing comparison or a data table has too much in it. Minimal fights the content
- **When the content is not good.** Minimal removes everything to expose the words. If the words are weak, there is nothing left
- **Too little contrast.** Grey on light grey is the most common minimal failure and it fails accessibility. Muted is not the same as unreadable
## Tell
If it looks like every other landing page with less on it, it is not minimal, it is empty. Minimal has a point of view: an unusual type choice, a striking image, a headline worth the space around it.
references/neobrutalism.md 2.7 KB
# Neobrutalism
Thick black borders, hard offset shadows, saturated flat colour, no gradients, no softness. A deliberate reaction against polished interfaces, which is why it works: in a page of soft grey cards, this one is remembered.
Currently everywhere in developer tools and launch pages. That is both its strength and its expiry date.
## Decisions
| Axis | Choice |
|---|---|
| Type | Heavy grotesque, or a mono. Space Grotesk, Archivo Black, JetBrains Mono |
| Weight | Bold, and bolder. Body text can be regular, headings never |
| Colour | Flat and saturated. Yellow, lime, hot pink, electric blue, on white or cream |
| Borders | 2 to 4px, solid, pure black. On everything |
| Radius | 0, or a consistent large radius. Both work, mixing them does not |
| Shadow | Hard offset, no blur. `4px 4px 0 #000`. Never a soft shadow |
| Space | Tight to moderate. Density is part of it |
| Motion | Snappy and physical. Buttons translate on press so the shadow collapses |
| Imagery | High contrast, cut out, or plain illustration. No soft photography |
## Palette
```
--bg: #FFFEF2 cream, not white
--surface: #FFFFFF
--border: #000000
--shadow: #000000
--accent1: #FFDE3A yellow
--accent2: #FF6B6B coral
--accent3: #4ADE80 lime
```
Multiple saturated colours are allowed here, unusually. They work because the black borders contain them.
## The signature component
```css
.card {
background: #fff;
border: 3px solid #000;
border-radius: 0;
box-shadow: 6px 6px 0 #000;
}
.button:active {
transform: translate(3px, 3px);
box-shadow: 3px 3px 0 #000; /* shadow collapses as it presses in */
}
```
That press interaction is the detail that makes it feel built rather than copied.
## Getting it right
- **Commit fully.** Half brutalism, thin borders and a soft shadow, reads as a mistake
- **Borders on everything.** Cards, buttons, inputs, images, avatars. Consistency is what holds it together
- **Shadows all in one direction**, same offset, no blur, everywhere
- **Flat colour only.** One gradient breaks it
- **Copy can be blunt.** The style supports direct, funny, confident writing. Corporate copy in brutalist styling is incongruous
## Where it fails
- **Trust.** Finance, health, legal, anything where the reader needs to feel safe. It reads as young and loud
- **Contrast, quietly.** Yellow backgrounds with white text fail accessibility constantly. Check every combination, do not assume
- **Dense interfaces.** Thick borders on a data table produce visual noise. It suits marketing pages more than applications
- **Longevity.** It is strongly of this moment. Fine for a launch, riskier for a brand meant to last a decade
## Tell
Turn the shadows soft. If it still looks fine, it was not neobrutalism, it was a card with a border.
references/swiss.md 2.4 KB
# Swiss / International
Grid, type, and almost nothing else. Everything sits on a visible structure; asymmetry within a strict system does the work that decoration does elsewhere.
The most durable style here. It was right in 1960 and it is right now, which is exactly why it does not read as trend chasing.
## Decisions
| Axis | Choice |
|---|---|
| Type | One grotesque. Helvetica, Inter, Neue Haas, Univers, Suisse |
| Type scale | Mathematical. A ratio, applied strictly. 1.25 or 1.333 |
| Weight | Regular and bold. The contrast between them is a design element |
| Alignment | Flush left, ragged right. Almost never centred, never justified |
| Grid | 12 column, visible in the layout even when not drawn. Asymmetric placement |
| Colour | Black, white, one primary. Often red |
| Space | Consistent multiples of one unit. 8px is the usual base |
| Radius | 0. Corners are square |
| Shadow | None |
| Rules | Hairline rules used structurally, to divide, not to decorate |
| Motion | Minimal. Position, not effect |
## Palette
```
--bg: #FFFFFF
--text: #000000
--accent: #E5231B one saturated primary. Red is traditional
--rule: #000000 at 12%
```
Swiss tolerates pure black and pure white where minimal does not, because the structure carries the sophistication.
## Getting it right
- **The grid is not negotiable.** Every element starts on a column line. Nothing is nudged
- **Asymmetry, not centring.** A headline occupying columns 1 to 7 with white space in 8 to 12 is the whole look
- **Type does the hierarchy.** Size and weight only. No colour changes, no boxes
- **Rules divide, they do not ornament.** A 1px line under a section heading is structural. A decorative flourish is not this style
- **Number things.** Section numbers, index style lists, small mono labels. Swiss loves an enumeration
## Where it fails
- **Playful brands.** It reads as serious, always. A children's product in Swiss looks like a government form
- **Photography heavy sites.** It can hold images, but the grid must control them absolutely. Loose photography breaks it
- **Executed loosely.** Half a grid is worse than no grid. Swiss is unforgiving of approximation, and a single misaligned element is visible
## Tell
Look at the left edge. In real Swiss, everything lines up on a small number of x positions and you can see them. If elements start at eleven different offsets, it is not Swiss, it is just sans serif.
