How to build your own style: from three words to a one-page guide
Four decisions that change everything, seven steps, from words to decisions, references with notes, this site’s style on one sheet and a test on three screens — with live examples and prompts for images.
In short
Your own style is not a trend you pick but a handful of decisions you keep. It starts with three words about how the brand should be remembered, then references that are not just collected but taken apart: what exactly do you like in each? From the words and references come the constants — a family of colour tones with one accent, one or two typefaces, a rule for corners, a spacing scale — and one signature element by which the brand is recognised. The style is tested on three real screens: the first screen, a product card and a form, because a style that only works in the hero is a decoration. Finally the decisions are written down on one sheet and changed slowly, one rule at a time.
Four decisions change everything
One card, four axes: typeface, shape, accent and density. Combine them — every combination is a different brand.
Serif, soft corners and air feel calm and expensive; mono, sharp corners and density feel technical; grotesque, pills and lime feel bold and friendly. A style is made of such decisions, not of decoration — and there are surprisingly few of them.
Seven steps to your own style
In this order: every step relies on the one before.
-
01Three words
How should the brand be remembered: calm, precise, bold? Words are the brief for every later decision.
-
02References, taken apart
Collect twenty, keep five, and next to each write what exactly you like: the colour, the type, the space.
-
03Constants
A family of colour tones with one accent, one or two typefaces, a rule for corners, a spacing scale.
-
04One signature
A technique by which the brand is recognised without a logo: a label, a line, a shape.
-
05A test on three screens
The first screen, a product card and a form. If the style holds in the form, it holds everywhere.
-
06Rules on one sheet
Colours with codes, type sizes, corners, spaces and the signature — and what is not allowed.
-
07Slow changes
One rule at a time, checked on the same three screens.
From words to decisions
Each word points to a colour, a typeface and a shape. Three words together narrow the choice to a few options.
| Word | Colour | Type | Shape and space |
|---|---|---|---|
| Calm | muted tones of one family | a clear grotesque, regular weight | a lot of air, soft corners |
| Precise | neutrals and one accent | a grotesque and mono labels | a grid, rules, small corners |
| Bold | one bright contrasting accent | a large heavy headline | hard shadows or large blocks |
| Warm | soft light tones | a serif or a rounded grotesque | rounded corners, photos of people |
| Technical | a dark background, one glowing accent | a grotesque and mono | thin lines, a visible grid |
References: collect and take apart
Designer moodboard pinned on a pale sage wall, a neat grid of printed references: a Swiss-style poster, a close-up of linen fabric, an oak wood sample, a black-and-white architecture photo, a typography specimen with a bold grotesque, colour chips in sage, graphite and acid lime, small handwritten notes on paper tags explaining what is liked in each item, soft daylight, straight-on photo, aspect ratio 16:9A moodboard without notes is a collection of pretty pictures. With notes it becomes a brief: “this poster — the grid and the size of the headline”, “this photo — the light”, “this fabric — the colour”. When the same note appears under several references, it is already a rule of your style.
References are taken from different fields — architecture, fashion, print, interiors — not only from sites. Otherwise the style ends up as a copy of someone else’s site.
A style on one sheet: this site
Colours of one family with a lime accent, two typefaces, a ladder of corners, a spacing scale and a signature — a mono label in square brackets.
The ladder of corners is a small rule with a big effect: every nested level is three pixels less round than the one around it, so blocks sit inside each other calmly. Rules like this are what make a style recognisable — more than any single colour.
A test on three screens
The first screen, a product card and a form in one style. The form is the hardest test: there is no room for decoration in it.
A style tile instead of a brand book
Style tile board for a home textile brand, flat digital layout, colour swatches of sage green, graphite, off-white and one acid-lime accent with hex codes, typography samples with a bold grotesque headline and a clean body font, button and tag samples with identical rounded corners, a small photo crop of linen fabric, a thin line icon set, the adjectives "calm, precise, bold" in small caps, neat grid, aspect ratio 16:9A style tile is one sheet with colours, type, components and a sample of imagery. It was suggested as an alternative to full mock-ups at the start of a project: cheaper to make, easier to discuss, and it fixes the decisions rather than one particular page.
When the project grows, the sheet turns into design tokens and then into a design system — but the words and the signature stay the same.
A style in code
The whole style of a site as a handful of variables and one signature component.
Decisions as variables
Written once, they keep every page in tune — and changing one rule changes it everywhere.
:root {
/* Colour: a family of tones and one accent */
--c-paper: #F8F8F8;
--c-mist: #E1E3DF;
--c-sage: #BBC0B5;
--c-graphite: #434541;
--c-ink: #171817;
--c-accent: #E4FF4E;
/* Type: two families, three steps */
--f-text: "Manrope", system-ui, sans-serif;
--f-label: "Space Grotesk", ui-monospace, monospace;
--t-0: 1rem;
--t-2: 1.5rem;
--t-5: clamp(2.5rem, 6vw, 4.5rem);
/* Shape: every nested level is 3px less round */
--r-surface: 17px;
--r-block: 14px;
--r-card: 11px;
--r-small: 8px;
/* Space: one scale */
--s-2: 0.5rem;
--s-4: 1rem;
--s-6: 2rem;
--s-8: 4rem;
}
/* The signature: a mono label in square brackets */
.label {
font: 400 0.75rem/1 var(--f-label);
letter-spacing: 0.08em;
color: var(--c-graphite);
}
.label::before { content: "[ "; }
.label::after { content: " ]"; }7 rules of your own style
-
01
Words before pictures
Three adjectives decide what goes on the moodboard.
-
02
Constants before decoration
Colour, type, shape and space first; effects later or never.
-
03
A family of tones
Shades of a few colours, not a set of random ones.
-
04
One signature
Two or three signatures cancel each other out.
-
05
The form is the test
If the style holds in a form and a table, it holds everywhere.
-
06
Written down
On one sheet with codes and with what is not allowed.
-
07
Slow evolution
One rule changes at a time, and the brand stays recognisable.
Common mistakes when building a style
-
Taking a trend whole
The site looks like a hundred others made in the same season.
-
A moodboard without conclusions
Pretty pictures, but no decisions come out of them.
-
Too many signatures
Brackets, stickers, gradients and hand-drawn arrows at once.
-
A style only in the hero
Below the first screen the site turns into a template.
-
No rules for edge cases
Errors, tables and empty states are designed anew each time.
-
A new style every season
Recognition never has time to build up.
Questions about building a style
How do I find my own visual style?
Start from three words about how you want to be remembered, take apart references from different fields and turn the repeating notes into rules.
How many references are needed?
Collect about twenty and keep five — with a note under each about what exactly you take from it.
What is a style tile?
One sheet with colours, type, components and a sample of imagery — a cheap way to agree on a style before full mock-ups.
Can I mix two styles, for example minimalism and brutalism?
Yes, if one is the base and the other gives one or two accents. Equal parts usually look undecided.
How do I keep a style consistent in a team?
Write the decisions as tokens and components, and check new screens against the same three test screens.
How often should a style change?
Evolve it gradually — one rule at a time — and redo it entirely only when the brand itself changes.
Online form
A style that is
yours alone
I build brand styles from words to a one-page guide and test them on real screens — the site, cards, forms. Tell me about the project — I answer within one working day.