A hero that shows, not tells
The studio site opens with a small live card about your own visit: how far you have scrolled, your time on the page, the frame rate, and the sections you have seen. It all stays in your browser.
Studio and design system
Artelier
A studio site, and the system the rest is built on.
Artelier is my dashboard studio. Its site is also the home of the Artelier Design System: one set of parts and rules that every interface I make starts from. The site you are reading is built on it too.
Visit artelier.agency (opens in a new tab)
- Role
- Design and build
- Type
- Studio site and design system
- Built with
- The Artelier Design System
01 The problem
Every new screenstarted from zero.
Dashboards have a lot of parts. Tables, charts, filters, buttons, alerts. When each one is drawn on its own, they drift apart. Buttons end up in three sizes. Greys end up in twelve shades.
Then every new screen takes longer than the last, and none of them quite match. I wanted one place where those choices are made once, and everything else follows.
02 What I did
What I did
- 01
Made the choices once
Spacing, type, colour and depth are set as tokens. Every part reads from them. Change one and every screen follows.
- 02
Wrote down every part
Each entry has a live sample, its states, its rules, and the exact tokens it uses. Nothing is left to guesswork.
- 03
Sorted parts by their job
Parts are grouped by where they show up on screen, not by the alphabet. You find a thing by what it has to do.
- 04
Kept colour for meaning
The frame is grey. Five colours are kept for the brand and for states like success, warning and danger. So when something has colour, it means something.
03 Details
Details that matter
Built on itself
The studio site uses the system it describes. If a part does not hold up, I find out there first, before a client does.
Easy to rebrand
Every part lists the values it reads. A new brand is a change of values, not a hunt through the code.
This site, too
The grey, the soft depth and the type on this site all come from the Artelier Design System.
- 56
- Entries, each with a live sample
- 12
- Groups, sorted by job
- 5
- Colours, kept for meaning
04 For your site
What you can take from it.
Write your choices down. Every business already has a design system. It is just kept in someone's head. Put your colours, fonts and button styles in one place, and every new page, flyer or ad gets quicker to make and looks more like you.
Want something like this?
Want one set of parts your whole site can share? Let's talk about it.
Start a project
Tell me what you want to build.
Pick what you need and see the price right here, or just send a few lines. I read every message and reply myself.
What happens next
See all prices and what each includes