The design system, live.

Everything on this page is the real component, not a picture of it. The written source is design.md; tokens live in src/styles/tokens.css.

Voice

Plain, specific, a little dry. We say what a thing does, not how exciting it is.

Do

Say what we did, in the past tense.
Name the tool when it mattered, AI included.
Write buttons as the action: “Start a project”, “Send message”.
Sentence case everywhere.

Don't

“Revolutionary”, “powered by AI”, “delight”, “magical”.
Exclamation marks.
Selling AI as the product. It is one of the tools.
Apologising in error messages. Say what happened and how to fix it.

Colour

Warm paper, ink outlines, and five bright fills. Colour is always a flat fill inside an ink outline.

--ink#1d1b16

Text, outlines, hard shadows

--ink-2#4a463d

Secondary text

--ink-3#7a7466

Hints, placeholders, dates

--paper#f6f2ea

Page background

--card#fffcf6

Surfaces, inputs, tiles

--board#ebe3d3

The dotted board under the shelf

--red#ff4d2e

Primary buttons, the CTA block, the logo tile

--butter#ffd43b

Client tags, “you”, focus rings, pressed toggles

--mint#8fe0bd

“us”, success, Live

--sky#9cc6ff

Tiles, websites

--lilac#c7b3ff

Tiles, stickers, apps

--navy#1e2a5e

Dark tile, browser mock-ups

Type

One family: Bricolage Grotesque, variable in weight, optical size and width. Onest covers Cyrillic.

Display800 · clamp(46–128px) · −0.05em

We make things

Heading800 · clamp(38–72px) · −0.045em

The shelf

Title800 · 26px · −0.03em

Fair Align

Lede400 · 18–22px · 1.5

A small studio. Our products, your projects.

Body400 · 18px · 1.55

Design, build, a CMS you can actually use.

Tag600 · 14px · width 75%

Client website

Shape

2px ink outlines. Hard offset shadows. Radius grows with the size of the thing.

--r-sm12px · Inputs

--r-md18px · Cards, code

--r-lg26px · Tiles, media

--r-xl40px · CTA, footer, forms

Components

Buttons lift on hover and press into their shadow. Toggles slide. Tags never move.

Start a projectChipChip on

ExtensionClient website Live Beta Soon Archived Draft

Shelf

Client website

Client site

Live

A browser mock-up when there is no screenshot yet.

Extension

A plugin

Beta

Icon tiles tilt back when you hover.

Tool

A tool

Soon

No icon, no image: the first letter stands in.

Your project could go here.Websites, apps, plugins, AI. Tell us what you need.Start a project

Service rows

Websites

Design, build, a CMS you can actually use, and lead capture that pings you in Telegram.

See МЕСТО

Apps and tools

Small, sharp Mac and web tools that take a boring step out of someone's day.

See Demo Recorder

Plugins

SketchUp extensions and integrations, from first prototype to the store listing.

See Fair Align

AI integration

Consulting on where AI actually fits your work, then building it in. A straight answer where it doesn't.

Ask us

Call to action

Got something to build? Let's be fair about it.

Terms come from settings
One per line
Hidden when empty

Start a project

Motion

One thing moves by itself: tiles drop onto the board the first time it scrolls into view. Everything else answers a person.

--springcubic-bezier(.34,1.56,.64,1)

Lifts, straightening, sliding pills

--outcubic-bezier(.22,1,.36,1)

Colour sweeps, the drop

Reduced motionprefers-reduced-motion

Durations go to zero, the drop is skipped

Don't

Things that make a page look like every other page.

ALL CAPS labels, § markers, and “A · B · C” meta strings
A different colour or italic for one word in a headline
Soft grey drop shadows. Shadows here are hard, ink, offset
Arrows appended to button text
Animating things nobody asked to move. Motion answers a click or a hover
Gradients as decoration, glowing orbs, robots and sparkles for “AI”