Biomarkd
Design system · every figure is an example

Chalk, iron and one violet

Updrift's grammar with Biomarkd's own colour, type and voice. DESIGN.md in the repository is the written standard; this page is the same thing, working.

Colour

Chalk--chalk · #F4F4F6Page canvas
Card--card · #FFFFFFFloating surfaces
Well--well · #EBEAF0Tracks, tiles, segments
Iron--iron · #17161CText, primary buttons
Muted--muted · #6F6D78Secondary text, 5.2:1
Violet--violet · #6C47FFSignature fill, white on it 5.3:1
Violet deep--violet-deep · #5431E0Figures and links on white
Violet soft--violet-soft · #EEEAFFCallouts, badges

Range status, results only

In rangeNear the edgeAbove rangeBelow range

Always a word with the colour. Never a warning icon.

Violet has a budget

The mark, the current bar, "now" on a curve, the headline figure, the active choice, progress and links. Never a background, body text, decoration or the primary button.

Type

Archivo 800, 75% wide · headline figure
152kg e1RM
Archivo 700 · headings 30 and 18
Week 6 of your block
Bench press · top sets
Inter · reading, 15 px

Three sessions this week, 49.3 tonnes moved. Bench is up 4 kg on last week's estimate, and your next bloods are due on 9 October.

IBM Plex Mono · units, times, lab values
34.1 nmol/L · 125 mg · 0.51 L/L · 07:42 · 1.0 mL

Controls and the mark

3sessions
49.3 tvolume
91.4 kgbodyweight
This week
Day 38 of 84. Two pins due, Thursday and Sunday.
Biomarkd

A reference range with its two limits and a dot where you sit: the first thing every result shows.

Forms

Real inputs, drawn our way, so every form posts without JavaScript. Try them: the switch's thumb overshoots once, the segment slides, a chip ticks.

Settings

Example

Log a weigh-in

Example
kg

Motion

Motion is how the app answers you. Each piece has a still version under reduced motion, and every page is complete before any of it runs. Ideas from transitions.dev by Jakub Antalik, rebuilt in our own CSS.

Spinning figure

Example
kg e1RM

For a figure that just changed: a new best, a new week. Reels decelerate onto each digit, left to right.

Stacked banners

Example

What just happened, three deep. Hover or tap the stack to fan it out.

Plus button

Example

The one way to log anything, from any page. The actions pour out as liquid; Escape or a tap elsewhere closes it.

Saving

The everyday save barely moves; a new best, which is rare, gets a little more. Never confetti: this is health data.

Save, Saving, Saved

Example

The label crossfades, its width never jumps, and a tick draws itself. Screen readers hear each state.

A new best

Example
Bench e1RM 152 kgNew best

A small spring and a ring that widens once. Only for bests, which come a few times a year.

An impossible value

Example
kg

Phone

What makes it feel like an app in the hand. Each still works with a mouse, a keyboard and without JavaScript.

Bottom sheet

Example

Quick logging rises from the bottom. Drag it down or flick it to close; it resists being pulled up. Without JavaScript the link opens the full page.

Log a weigh-in

Log a weigh-in

kg

Swipe to delete

Example
  • Weigh-in91.4 kg · 07:42
  • Session17.9 t · 18:10
  • Weigh-in91.1 kg · yesterday

Swipe a row left on a phone. It only deletes when your finger lifts past two fifths, and Undo brings it back.

Header that shrinks

This page

Scroll this page: its big title shrinks away and "Design system" appears in the top bar. Scroll-driven, off the main thread; where a browser cannot, the title simply scrolls.

Safety and loading

Hold to confirm

Example

For what cannot be undone. The fill is slow while you decide and drains fast if you let go. Settings uses it for deleting an account.

Placeholder into content

Example

5 results from 14 Sep. Total testosterone above range, haematocrit near the top, the rest in range.

Nothing shows for the first 150 ms; once shown, the placeholder stays 400 ms, then fades into the content.

Panels that open smoothly

Example
Why is it above range?
The range is for men not taking testosterone. On a protocol, most results sit above it; what matters is how it moves between tests.
When to test
At trough, just before a dose, so each result is comparable with the last.

Results

Bloods

Example
Total testosterone Above range34.1 nmol/LRange 8.6 to 29.0 · 14 Sep
Oestradiol In range142 pmol/LRange 41 to 159 · 14 Sep
Haematocrit Near the edge0.51 L/LRange 0.40 to 0.52 · 14 Sep
HDL cholesterol Below range0.9 mmol/LRange above 1.0 · 14 Sep
ALT In range38 U/LRange 0 to 45 · 14 Sep

Best this block

Example
Bench press+4 kg152 kg · 140 × 3 on Mondaye1RM
Squat+7.5 kg215 kg · 190 × 4e1RM
Deadlift+5 kg262 kg · 240 × 3e1RM

Charts

Drawn on the server first, so the page is complete without JavaScript; then Updrift's EvilCharts load in the browser and take over, with tooltips and a left-to-right reveal.

Estimated active level

Example
0100200300Wk 1Wk 2Wk 3Wk 4Wk 5Wk 6Now · 220 mg est.

Estimated active ester, mgMarks on the baseline are doses. A model from half-lives, not a blood result.

Weekly training volume

Example
0204060Wk 1Wk 2Wk 3Wk 4Wk 5Wk 6Wk 7best · 49.3 tThis wk

Bodyweight

Example
868890926 weeks agoToday91.3 kg

Email

Updrift's recap format in Biomarkd's colours: one big figure, a week of bars with the best named, stat tiles, one callout and one iron button. The subject line never names a substance, dose or result.

Open the example email

Voice

Write
Not
Haematocrit 0.51, near the top of range.
Warning: your haematocrit is getting dangerously high!
Next pin Thursday, 125 mg.
Remember to stay safe on your cycle!
Bench e1RM 152 kg, up 4 kg.
Beast mode! You're crushing it
Your week: 3 sessions, bench up 4 kg
Your Test E cycle update