Nisbel Autostuudio — brand, design system and a new website
A Tallinn car studio that works on one car at a time: a design system from tokens to components, five print pieces and a new static nisbel.ee whose home page loads in 148 KB.
| Type of evidence | Client work. Brand, design system, print and the website rebuild. |
|---|---|
| Whose problem it illustrates | A small car repair workshop whose site did not say what it does and loaded slowly. |
| What it does not prove | The page shows the design and measured speed, not the number of enquiries – that has not been measured long enough yet. |
| What you can order from this | Small-business website · 1,190 € |
Problem
The old nisbel.ee was a compiled React snapshot patched by six scripts. The home page loaded 920 KB and was 14,741 px long on a phone (source: Playwright measurement 17 Oct 2026). The headline “Personal projects, not a quick service” never said it was car repair, content appeared only on scroll, and the site made unconfirmed promises such as an extended warranty and real-time tracking.
System
The design system came first: 93 tokens in one file drive the colours, type, space, corners and motion. On top of that, 25 components, 28 icons on one grid and logo rules with computed contrast on every background (source: Nisbel design system). The invoice, cover letter, notepad and business card come from the same system. The new site is hand-written HTML and CSS, one small script and a Python build and verify step that blocks publishing whenever a page carries an unconfirmed claim or a broken link.
Decisions
The customer’s problem before self-praise: the second block on the home page is “What is going on with your car?”, not a service list. One white action per view. The form does not pretend to book anything – it composes a message the customer sends themselves. The blog, placeholder case studies and the floating chat were removed because they brought no requests. Motion follows Apple’s springs: a press responds instantly, a release springs back without overshoot.
Metrics
Home page first load 920 KB → 148 KB, requests 25 → 5, scripts 10 → 1, page length on a phone 14,741 px → 9,438 px, 36 % shorter (source: Playwright measurement 17 Oct 2026, same browser and viewport). The design system can be explored interactively: logo backgrounds, contrast, type, components, the spring and the print pieces.
Stack
Hand-written HTML and CSS, vanilla JS, Inter, a Python build and verify step, FTPS publishing with a server snapshot, design tokens in JSON.
Product screens
The images were captured from the public nisbel.ee on 18 October 2026, the day after the new site went live. The form image uses sample data – no message was sent.
The same clear brand and fast site for your business
Your business needs a clear service overview, useful supporting information and a contact route.