Abstract Geometric vs Neo-Swiss
Both are compositions made of circles, squares and type on a grid. One uses shape as the layout; the other uses columns and never draws a shape at all.
Short answer: Abstract geometric places a large circle and a rotated square as the structure itself, then fits the type against them. Neo-Swiss has no shapes: a 12-column grid, a headline across nine columns, a standfirst starting at column seven, and one red used twice.
What actually separates them
The abstract page has geometry you can see. A circle at 50% radius, a square rotated 18 degrees with a 28px radius, pill buttons at 999px, cards at 24px with a 1px #ece6dd hairline. The headline is capped at 16ch because it has to sit in the gap the shapes leave, not because it needs a measure.
Neo-Swiss has geometry you can only infer. Everything is placed on repeat(12, 1fr): the headline takes 1 / span 9, the standfirst 7 / span 5, so the two blocks overlap across three columns. Corners are 0 everywhere, there are no shadows, and red appears exactly twice on the page.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Abstract / Geometric Shapes | Neo-Swiss |
|---|---|---|
| What you see | ● Circles, rotated squares, pill buttons | Columns and rules only |
| Layout device | Shapes define space; text fits around them | 12-column grid with deliberate overlap |
| Corner | ● 28px square, 24px cards, 999px pills | 0 everywhere |
| Accent | Pastel fills at low opacity, blending where they overlap | One red, used twice |
| Typeface | Montserrat, heavy | Helvetica Neue, one family |
| Headline measure | 16ch | grid-column: 1 / span 9 |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Abstract / Geometric Shapes | Neo-Swiss |
|---|---|---|
| Structure | shapes as blocks, text fitted against them |
grid-template-columns: repeat(12, 1fr) |
| Headline | max-width: 16ch |
grid-column: 1 / span 9 |
| Standfirst | max-width: 50ch |
grid-column: 7 / span 5 |
| Decoration | border-radius: 50% / rotate(18deg) |
border-radius: 0; no shapes |
When each one wins
Abstract / Geometric Shapes wins when
- The page has few words and needs a composition to hold the eye
- You want a modern, designed feel without photography
- The brand is creative and can carry a pastel palette
Neo-Swiss wins when
- The page carries several kinds of content and needs a system rather than a composition
- The brand is institutional — finance, engineering, academia — where restraint reads as competence
- You want the layout itself to look designed while staying entirely in black and white plus one red
Steering a model to one or the other
The instruction that separates them is whether shapes are allowed. For abstract geometric, name the shapes and their sizes — one circle at 50%, one 28px square rotated 18 degrees — and say the text is fitted against them. For neo-Swiss, state the column spans for the headline and the standfirst explicitly and forbid decorative shapes entirely. A model asked for "geometric layout" will add circles to a Swiss grid, which produces neither: columns that justify nothing, decorated with shapes that align to nothing.