Newsreader
A serif that draws finer lines at big sizes, so a headline looks sharp without a second font.
--font-serifDesign system
How this site is made.
One set of parts, used on every page.
This site is built on the Artelier Design System, then tuned for websites: more room to read, fewer and bigger parts, and one colour for the thing to click. Everything on this page is drawn with the real styles, so it can never drift from the rest of the site.
01 Built on Artelier
Built on Artelier,tuned for websites.
The Artelier Design System (opens in a new tab) is made for dashboards: screens people work in all day. A website is different. People read it once, often on a phone, and then decide whether to get in touch.
So the base stays the same: the greys, the two shadows, the three typefaces and the five colours for state. The rules on top of it change.
| Artelier, for dashboards | This site, for websites |
|---|---|
| A lot of data on one screen | Room to read, one idea per section |
| Many small parts | Fewer, bigger parts |
| Colour only for state | Colour for state, plus the ink for the one action |
| Tables and charts | Text kept to a comfortable reading width |
| Panels you work in all day | Sections you read once, top to bottom |
| Many actions side by side | One main action per screen |
| Ends when the task is done | Every page ends with a way to get in touch |
02 The name
The name,in lower case.
The name is "clotaire" in lower case Geist, a clean sans serif, set semi bold and a little tight. There is no logo next to it. The word is the mark.
It stays small on purpose. In the menu bar it is 19 pixels, about the size of the text around it, so the eye goes to the page, not to the name.
Geist is used for the name and nothing else, and the browser only loads the eight letters it needs.
--font-mark- clotaire44px
- clotaire28px
- clotaire19px
- clotaire15px
03 Type
Three typefaces,one job each.
Inter Tight
Clear at small sizes, a little narrow, so a sentence holds together on a phone.
--font-uiJetBrains Mono
Small labels above headings, and figures that line up.
--font-mono- How this site is made.
- Depth is the only decoration.
- Interface design
- The opening line under a headline, a little larger than the text.
- Running text. Kept under about 65 characters a line so the eye finds the next line easily.
- Notes, captions and hints under a field.
- Design system
04 Colour
Grey, so colourmeans something.
The page is grey and ink. The darkest value is kept for the one thing to click. Switch the theme and every swatch changes with it, because each one is painted with the token it names.
- CanvasThe page behind everything.
--canvas - SurfaceInset wells and fields.
--surface - RaisedCards, buttons, the menu bar.
--raised - TextHeadings and names.
--text - Text softRunning text.
--text-soft - SubduedLabels and notes.
--subdued - LineThin rules between rows.
--line - AccentThe one thing to click.
--accent
Five colours, only for state.
They come from Artelier and keep their names. On this site they say something has worked, needs a look, or went wrong. A colour is a dot or a word, never a background.
- CeladonDone, live, at the desk.
--ok - OrpimentWorth a look.
--warn - VermilionSomething went wrong.
--bad - TyrianArtelier primary. Rare.
--brand-primary - VerdigrisArtelier secondary. Rare.
--brand-secondary
05 Depth
Depth is theonly decoration.
Nothing has a border. Shape comes from two shadows: a light one up and to the left, a dark one down and to the right. There are three depths and no more.
.cardRaised
Things to read or press: cards, buttons, the menu bar.
--raised · --soft-raised.wellInset
Pressed into the page: facts, figures, form fields.
--surface · --soft-inset.pressedPressed
A button while you hold it down, or a switch that is on.
--surface · --soft-inset-sm06 Parts
The parts.
Fewer, bigger parts than a dashboard needs. Each one lists the tokens it reads, so a change to a token is a change everywhere.
Buttons
.btn · .btn-accent · .btn-quietStart a project See the workRead more
One ink button per screen, for the main action. Reads --accent, --accent-ink, --raised, --soft-raised-sm.
Chips
.chip · .dotLiveNuxtDesign system
Small facts: a tool, a status, a tag. Reads --surface, --soft-inset-sm, --font-mono.
The menu bar
AppNavA raised capsule that stays at the top: the name, a few places to go, and the one action. The section you are in stays lifted.
Project tiles
ProjectLogo- CrawlStatCrawlStat
- Artelier
- Laguna Electric
- NSKU
- MaisonMaison Artelier
Pandaz Boba Tea
Client marks always sit in the ink on an inset tile. Their own colours would fight the page; the shape is enough to know them.
The work row
WorkListOne project a row: the mark, what it is, one line, and where it goes.
Form fields
.field · .field-label · .input · .field-hintSo I know who I am writing back to.
That does not look like a web address yet.
The label sits above the field, the hint below, and an error says what is wrong in words. Reads --surface, --soft-inset-sm, --focus-ring, --bad.
The closing card
.cta-bandGot something that is not working?
One question, one sentence, one button.
Every page ends with one. The real one is at the bottom of this page.
07 Rules
Rules forevery page.
- 01
One main action per screen.
Only one button gets the ink. If two things shout, neither is heard.
- 02
Keep lines short.
Text stops at about 65 characters a line. Longer lines are hard to follow back to the start.
- 03
End with a way to get in touch.
Every page closes with the same card and the same button.
- 04
Client logos in the ink.
Their own colours would fight the page. The shape is enough to know them.
- 05
Nothing moves.
The page is done the moment it arrives, and stays where you left it.
- 06
Plain words.
If a short word works, use it. Say what a thing does, not what it is called.
- 07
Use the form.
No email address or phone number on the page. The form keeps every message in one place and the spam out.
Want a site built this way?
Tell me what you need it to do. I will write back with what I would build first.