Diagnostics
Engine light on or the car behaves differently? Start with fault finding.
Ask for a diagnostics slot →A client brand must look the same on the web, in print and in icons.
A service business renewing its brand and website together. · web, print, icons
- icons
- 28
- token file for everything
- 1
- the new nisbel.ee
- Live
← Case studyCase study · brand and design system
Brand and design system
Brand, design system, print and a new website for a Tallinn car studio that works on one car at a time – all from one token file. Every block on this page is interactive: try it.
- 148 KBfirst load of the home page (was 920 KB)
- −36 %page length on mobile (14,741 → 9,438 px)
- 93tokens in one file
- 25components
- 28icons on one grid
- 5print pieces from the same system
Lihtsalt. Inimlikult. Ausalt.
One car at a time. One system for everything.
Situation
The site was a compiled React snapshot patched by six scripts. Twelve headings, two process sections, empty case studies and a logo in the wrong blue. The headline never said it was car repair.
Principle
Simply. Humanly. Honestly. The customer’s problem before self-praise, only confirmed promises, one white action per view and the slash from the logo as the only brand mark.
Outcome
A design system from tokens to components, five print pieces and a new static site: six pages, one script, one form that composes a message the customer sends by SMS or WhatsApp.
The logo never changes. Only the background does.
Pick a background and see whether the blue “AUTOSTUUDIO” stays legible. Turn on the clear-space grid and shrink the logo until it stops being readable.
2X = ½ h
Allowed · AUTOSTUUDIO 3.4 : 1- Don’t stretch
- Don’t recolour
- Don’t rotate
- Don’t add effects
One dark theme. One accent.
Click a colour to copy its value. Contrast is computed right here with the WCAG formula against the selected background.
Surfaces
Ink
Brand
States
One typeface. Light, large type.
Inter for everything. Edit the sample and see each style with your own words. Long Estonian compounds hyphenate automatically.
display-xl72px / 1.05 · 300 · -0.025em
Car repair and diagnostics in Tallinn
heading-148px / 1.1 · 300 · -0.01em
What is going on with your car?
title24px / 1.3 · 600 · 0
We agree on the first check
body16px / 1.6 · 400 · 0
Tell us what you notice, when it happens and what has been done before.
label12px / 1.4 · 500 · 0.3em
Common problems
field-label12px / 1.4 · 500 · 0.12em
Email or phone
numeral18px / 1 · 400 · 0
01 02 03
Why NisbelEmail or phone
The 0.3em section label is a brand signature. Form labels use 0.12em so the request form reads fast.
Space grows in 4 px steps, corners grow with the element.
radius-sm8px
radius-md12px
radius-lg18px
radius-xl24px
radius-pill32px
Field 8 px, card 12, process row 18, panel 24, button fully round.
Components that behave.
Everything is real: press the buttons, type a wrong phone number, open a question.
Buttons
Text field
Choice
Question
No. A request helps us discuss the job. The time is agreed once we have confirmed it with you.
Process
- 01You describe the problem
- 02We agree on the first check
- 03We explain the findings
Service card
Press responds instantly. Release springs.
Nisbel motion is a critically damped spring (Apple damping 1.0, response 0.4): it settles without overshoot. Change the parameters and press “Move”.
- duration-press100ms
- duration-fast150ms
- duration-base250ms
- duration-spring600ms
- ease-outcubic-bezier(0.2, 0, 0, 1)
- ease-springlinear(0, 0.24 10%, 0.56 20%, …
28 icons, one grid.
24 × 24, 2 px stroke, round caps, colour comes from the text. Search, pick a size and click to copy the SVG.
The same system on paper.
Invoice, cover letter and notepad on A4, a 90 × 50 mm business card with rounded corners. Click the card to flip it. The invoice shows sample bank details.
90 × 50 mm · R3 · Flip the card
Less page. More requests.
Drag the line: the old site on the left, the new one on the right. Measured 17 October 2026 in the same browser.
BeforeAfter| Metric | Before | After |
|---|---|---|
| Home page weight | 920 KB | 148 KB |
| Load time | 4–6 s | < 1 s |
| Requests / scripts | 25 / 10 | 5 / 1 |
| Page length on mobile | 14 741 px | 9 438 px |
| H2 headings | 12 | 6 |
What the client received.
- Tokens
- tokens.json → tokens.css, 93 tokens
- Components
- 25 HTML+CSS patterns with usage notes
- Logo rules
- LOGO.md: versions, clear space, backgrounds, don’ts
- Motion
- MOTION.md: springs, press, reduced motion
- Invoice, cover letter, notepad, business card
- Website
- 6 pages, build, verify and deploy scripts
Want a system on this level?
Let’s talkYour system
If you need a similar system, answer three questions in the enquiry:
- Which brand or product is it?
- How many surfaces (web, app, print …)?
- When does it need to be ready?