§ Design system · v 1.1 · May 2026

The system underneath the studio.

Tokens, type, color, components, motion — every visual decision BeFair Lab makes, rendered live and named for editing. Pair this with the design.md below for the why.

← Back to site ↓ Get design.md

§ 00 · Why

The why, in prose.

The full design document. Source of truth lives at src/content/design.md in the repo, and is also downloadable here. When the design changes, that file is updated first.

§ 01 · Voice

Plain. Past tense. First-person plural.

We write the way we'd talk to a colleague we respect. Honest about uncertainty. We don't dress up shipping a feature in launch language, and we don't dress up an unfinished thing as roadmap material.

§ Recurring rhetorical move

Things we've built — and shipped.

A small studio.
Honest software.

✓ Do

Say what we did, in past tense.
Name the model when AI was involved.
Admit what didn't work.
Use ordinary words. “Honest” not “transparent.”

× Don't

“Revolutionary,” “powered by AI,” “delight,” “magical.”
Em-dash padding inside short headlines.
Exclamation marks. Ever.
“We're a team that…” About copy.

§ 02 · Type

Three families. One italic word at a time.

Inter Tight does the structural work. Instrument Serif (italic only) is the spotlight; spotlights stop working when there are five. JetBrains Mono is for everything that isn't quite copy: section markers, eyebrows, captions, metrics.

display-xlInter Tight 500
clamp(44px, 7.4vw, 116px)
tracking −0.035em

Honest software.

display-lgInter Tight 500
clamp(36px, 4.6vw, 68px)
tracking −0.025em

Things we've built — and shipped.

display-mdInter Tight 500
clamp(28px, 3.2vw, 44px)
section heads

The rules we work to.

h3Inter Tight 500
clamp(22px, 2.4vw, 36px)
tile + post titles

Fairmark — read what you saved, honestly.

ledeInter Tight 400
clamp(17px, 1.4vw, 20px)
first paragraph

A small studio building apps, tools, websites, plugins, and the occasional record. We use AI in everything we build, and we say so out loud.

bodyInter Tight 400
16–18px / 1.55
running text

Most read-it-later apps pretend to summarize. They confidently flatten a 9,000-word essay into three bullets and you never know what was lost. Fairmark takes the opposite approach: it tells you what it skimmed, what it actually read, and where it was unsure.

mono-eyebrowJetBrains Mono 400
11–13px / uppercase
tracking 0.06–0.08em

§ 02 · Blog — most recent

§ 03 · Color

Near-monochrome, with five atmospheric stops.

The system is greyscale. Color enters as a gradient, glow, or pulsing pip — never a flat fill on type. One accent per screen.--danger is the single functional color, reserved for destructive admin actions and form errors.

§ Neutrals — the system

--ink

#0c0a09

--ink-2

#292524

--muted

#4e4e4e

--muted-2

#777169

--muted-3

#a8a29e

--line-3

#d6d3d1

--line

#e7e5e4

--line-2

#f0efed

--paper

#f5f5f5

--paper-2

#fafafa

--paper-3

#ffffff

--surface-strong

#f0efed

§ Atmospheric stops — the soul

--grad-mint

#a7e5d3 · Live, affirmation

--grad-peach

#f4c5a8 · Headline glow

--grad-lavender

#c8b8e0 · Process / lab

--grad-sky

#a8c8e8 · Default media

--grad-rose

#e8b8c4 · Paired with peach

§ Functional — danger only

--danger#c8351fDestructive actions, form errors, hidden flag

--danger-bg#fff3f0Background for danger notices

§ 04 · Space & lines

Hairlines do the work shadows would.

The whole system is held together by 1px lines in three weights. Sections breathe; padding clamps fluidly with viewport. Borders before fills, always.

§ Vertical rhythm — section padding

section pad

60–120px

hero pad

60–140px

head margin

48px

block margin

32px

row margin

16px

shell gutter

20–56px

shell max

1440px

§ Hairlines — three weights

--line · #e7e5e4
--line-2 · #f0efed
--line-3 · #d6d3d1

§ Radius — there is no radius

Border-radius is 0 on every UI surface — buttons, inputs, tiles, code blocks. The only round things in the system are the live pip and the brand dot.

§ 05 · Components

Small set, used everywhere.

Each component is a real element from globals.css — what you see is what ships.

§ CTA · ink fill, no radius, arrow translates 3px on hover

Read essay →Get in touch →+ New post Edit settings Clear filters Delete

§ Status pip · live pulses, others static

Live Beta Soon Archived

§ Eyebrow · mono section marker with optional pulse

§ 02 · Blog — most recent

§ Principles

§ Tile · project card with status, mono meta, sans h3, tag chips

LiveiOS · Web

Fairmark

Save links. Get honest summaries. The AI tells you what it skimmed and what it actually read.

AIProductivity

LiveFeatured

Groundtruth

A workbench for evaluating LLM apps, with structured slices and side-by-side comparison.

EvalsInternal tools

§ Section head · stacked label + h2, never inline column

§ 01 · Projects

Things we've built — and shipped.

§ Filter chip · for filters only — never a primary button

12 items

§ Form field · public underline pattern, mono label above

Email *

Message * Tell us a bit more (10+ chars)

§ Empty state · serif italic h3, muted lede, optional cta-sm

§ No matches

Nothing matches that.

Try a different topic or clear the search.

§ 06 · Admin chrome

Same system. Denser.

The admin uses the same tokens and font triplet as the public site, but trades atmospheric breathing room for table density. Inputs switch from the underline .field pattern to a boxed.admin-input. Pages share a singleAdminPageHeader chrome.

§ Page header · § crumb + 32px h1 + actions

§ Boxed input · admin density variant of the public form field

Site title

Tagline

A small studio. Honest software.

§ Notice · single-line banner, danger variant uses --danger-bg

✓ Saved

Database not reachable. Check DATABASE_URL.

§ 07 · Motion

Drift or pulse. Nothing slides.

Motion is presence, not transition. Long durations for ambient atmosphere, short ones for input feedback. The 600ms–1.5s “page transition” range is empty on purpose.

§ Live, here, now

Live pip · 2.2s

Live in production

Eyebrow pulse · 2s

§ Currently shipping

Headline glow · 6s

Honest software.

§ Timing reference

Pattern

Duration

Curve / Where

Atmospheric drift

22–28s

ease-in-out alternate · hero blobs

CTA glow drift

28s

ease-in-out infinite · .cta-glow

Headline glow

ease-in-out infinite · .ac::before

Live pip ring

2.2s

ease-out infinite · status.live

Eyebrow pulse

ease-in-out infinite · .pulse

Marquee scroll

40s

linear infinite · footer

Tile / row hover

200ms

ease · background-color only

CTA arrow

200ms

ease · translateX(3px)

All ambient animation respects prefers-reduced-motion.

§ 08 · Anti-patterns

Things we've decided not to do.

Listed in case it gets tempting later.

Rounded corners on UI surfaces — buttons, inputs, tiles, code blocks. All square.

Drop shadows. The whole system is hairlines.

Emoji in headlines or marketing copy.

Decorative SVG illustrations of “AI” — circuits, brains, sparkles, robots, glowing orbs.

Aggressive gradient backgrounds. Atmosphere only.

Hero copy with three clauses and an em-dash holding it together.

Statistic bars on a landing page — “10x faster, 50% less, ∞ better.”

Page transitions in the 600ms–1.5s range. Drift or pulse. Nothing slides.

More than one italic word per phrase. Spotlights stop working at five.

.chip on repurposed as a primary button. Filter chips and primary actions stay distinct.

Hardcoded hex literals in components. If a color shows up twice it earns a token.