The Luxury design system: light Jost type and a lot of quiet
Luxury is Anticode's design system for brands that sell on restraint. It sets everything in Jost, starts on near-black with a champagne action colour, uses very light display type with small, widely spaced capitals for navigation and buttons, keeps every corner square, and lets a full-bleed photograph carry the opening screen when there's one to use.
What makes a site feel expensive
Luxury on the web is mostly subtraction. High-end brands show fewer things, larger, with more space around them; they whisper the navigation and let one photograph speak. The type is thin and large rather than bold, and colour is held back to one metallic accent. What breaks the effect is the opposite habit: crowded cards, rounded buttons with drop shadows, every section shouting. The luxury web design guide covers the wider style; Anticode's own version of it is fixed in one place: the Luxury design system (Jost, champagne, square edges) described here.
The choices it makes
| Element | How Luxury handles it |
|---|---|
| Typeface | Jost, a geometric sans with crisp light weights, used from 300 to 700 |
| Hero headline | Weight 300, very large, with almost no negative tracking and a tight line height |
| Section headings | Also weight 300, so nothing on the page is heavy |
| Body text | 19.5px, the largest of the seven systems, so long lines of light type stay readable |
| Navigation, buttons, footer | Small uppercase lettering, spaced wide apart |
| Buttons | Outlined in the action colour on a transparent fill, taller than usual; they fill with the colour on hover |
| Corners | Square everywhere: buttons, cards, images and forms |
| Cards | No background, just a thin rule in the action colour above each one |
The starting palette is near-black with warm off-white text and a champagne action colour. The light palette turns it into cream paper with a bronze accent and dark brown-black text, which suits jewellery or interiors brands whose photography is bright.
The full-bleed hero
Luxury is the only system that switches the opening screen to a photograph filling the whole width, with the headline set over it in white. It does this when Anticode's curated photo library has pictures that match the subject, each with written alt text. A dark gradient is laid over the photo so the white type stays legible. The hero is tall but bounded: it takes most of the screen height, with a floor and a ceiling so it neither collapses on short laptop screens nor towers on very tall ones. The headline and buttons sit at the bottom, and the key facts appear in a frosted panel. Without photography, the hero falls back to the standard split layout.
Who it's for
- Photographers and filmmakers, especially weddings, where the work is the message. The design engine's quick preview picks Luxury for these.
- Ceramicists, jewellers and craft studios selling a few pieces at a time.
- Hotels, perfumers, tailoring and interiors, anywhere the brand depends on calm.
- Less suited to businesses that need to show a lot at once (large menus, timetables, product ranges) or that want to feel friendly and casual.
Using it well
- Check the opening photograph. The full-bleed hero is only as good as the image behind it; if the library has nothing that fits your subject, you get the split layout, which still works.
- Write less. Light type at large sizes needs short headlines; cut the hero line to a handful of words.
- Keep champagne unless the brand has a metal of its own. Gold is one of the eight action colours if you want something slightly brighter.
- Use Calm for the hero headline scale. Luxury's headline is already large, and Bold or Boldest can crowd a phone screen.
Limits
- No serif. Many luxury brands use a classic serif; Anticode doesn't, and its design gate refuses serif type, fallbacks included. Jost gives elegance through weight and spacing instead.
- No video background. Published pages can't embed players or run scripts, so the hero is a still photograph.
- Wide-spaced capitals are short by design. They're applied to navigation, buttons and labels, so keep those to a word or two.
- Apps get a description. A model-written app is told Luxury means Jost, champagne on black, quiet and spacious, and your request can override it.
Questions people ask
Why is Luxury dark by default?
Its own palette is champagne on near-black, which makes photography glow. Choose Light under Theme for cream and bronze.
Does the full-screen photo hurt on phones?
It's bounded: it uses most of the screen height but has a fixed minimum and maximum, and the text sits at the bottom so the first words are always visible.
Can I keep square corners but use a different font?
Not within Luxury. Swiss and Brutalist also use square corners, with Inter Tight and Archivo respectively.