The Editorial design system: Geist, hairline rules and a big headline
Editorial is the design system Anticode reaches for when a site should read like a well-set magazine page. It sets every word in Geist, puts dark ink on warm off-white paper, divides content with hairline rules instead of boxes, and gives the hero an oversized headline. Quick previews use it for cafés, restaurants and barbers, and fall back to it when a request doesn't point clearly at another look.
What editorial design borrows from print
Editorial layouts come from newspapers and magazines, where the type does the work and decoration is kept to rules, white space and scale. A large headline sets the tone, a short standfirst explains it, and thin lines separate stories without fencing them into boxes. On the web the same habits read as confident and calm, which is why the style suits places with a strong voice and real things to show. The editorial web design guide covers the history; this page is about what Anticode's editorial design system with Geist actually sets.
The settings, one by one
| Setting | Editorial's choice |
|---|---|
| Typeface | Geist, weights 300 to 700, for headings and body alike |
| Light palette | Warm paper background, near-black ink, a deep navy action colour |
| Dark palette | Ink-dark background, cream text, a pale blue action colour |
| Default theme | Light |
| Body text | 18px with generous line spacing |
| Hero headline | Weight 500, tight negative tracking, set solid at a line height of 1 |
| Buttons | Fully rounded pills |
| Cards and images | Square corners; cards have no fill, just a hairline rule along the top |
Section headings drop to a lighter weight than the hero, which keeps one headline in charge of the page. The engine describes the system's signature as an oversized headline on a hairline rule system, and that's the thing to protect if you customise it.
Radius by role, the editorial way
Every design system assigns corner radius by what an element does rather than using one value everywhere. Editorial's split is unusually stark: controls are round and content is square. Buttons and tags are pills, so the things you can press look pressable, while photos, cards, pricing plans and panels have sharp corners like a printed page. Form fields sit in between, capped at a small radius so they don't turn into lozenges. The radius by role check explains why that split matters.
Which sites it suits
- Food and drink. Restaurants, cafés and coffee roasters, where a menu reads naturally as a ruled list with prices on the right.
- Personal services with a voice. Barbers, tailors, bookshops: businesses that want to sound like a person rather than a brand.
- Writers, publications and small studios. Anything where the words are the product.
- Not ideal for dense software dashboards (Technical fits better) or children's businesses (Playful is warmer).
A model build picks the system from what you write, so naming Editorial, or asking for a magazine feel, steers it here. A quick preview matches common subjects instead, and starts from Editorial when your subject isn't one it recognises, because a type-led layout rarely looks wrong. You can always switch.
Switching to Editorial, or away from it
- Turn on Edit in the builder and open the inspector. The Direction picker shows a swatch of each system's own palette.
- Choose Editorial. The page is rebuilt with the new type, palette and shapes; your text, section order and features stay.
- Or write "make it editorial" as a change. Anticode recognises the system's name and applies it in your browser, so it doesn't use your build allowance.
- Pick Light, Dark or Auto under Theme, and an action colour if navy isn't right for the brand.
Switching direction clears any colours you set by hand in the code view, since those were chosen against the previous palette.
Limits
- Sans-serif only. Editorial evokes print without serif type: Geist is a sans, and Anticode's design gate refuses serif type, fallbacks included. If your brand depends on a serif face, this system won't reproduce it.
- One family. You can't add a second display font from the builder.
- Model-written apps take Editorial as a starting description (Geist, ink on paper, generous white space, large confident headings) rather than the engine's exact stylesheet, and your own words in the request override it.
Questions people ask
Is Editorial a light or a dark design?
It starts light, ink on paper. Its dark palette keeps the same type and shapes with cream text on a near-black background; choose Dark under Theme.
Why are the buttons round when everything else is square?
Radius follows role. Pills mark what you can press; square photos and cards keep the printed-page feel.
Can I use Geist with a different system?
No. Each design system comes with its own typeface. To keep Geist, keep Editorial and change the theme or action colour instead.