Design system

One sticker sheet for everything.

The tokens and components behind the site, kept in step with the phone app and the logo. Flip the theme in the nav to see both modes.

Color

Brand

Mustard#E0A93A--brand-mustard
Cobalt#4C7BD9--brand-cobalt
Teal#3EA7A2--brand-teal
Tomato#D9573F--brand-tomato
Cream#F3E9D2--brand-cream
Ink#141413--brand-ink
Cap#3B3A36--brand-cap
Tile grey#8A8578--brand-tile-grey

Status (shared with the app)

Waiting#4CC38A--status-waiting
Working#5B9CF6--status-working
Idle#8A9099--status-idle

Themed surfaces and text

TokenLightDark
Ground
--color-ground		#F3E9D2#0F1113
Surface
--color-surface		#FBF6EA#141719
Raised
--color-raised		#FFFFFF#181B1F
Border
--color-border		#D9CFB6#1E2227
Border strong
--color-border-strong		#B9AD8E#2A2E34
Text
--color-text		#141413#E8E6E1
Text secondary
--color-text-secondary		#3F3B34#A9AEB5
Text muted
--color-text-muted		#5A564E#9AA0A8
Ink (outlines, shadows)
--color-ink		#141413#F3E9D2
Link
--color-link		#2F5BB8#8DB9FF

Muted text is 6.1:1 on cream and 7.2:1 on ground, so captions pass AA in both themes.

Type

Space Grotesk for anything that shouts, IBM Plex Sans for reading, JetBrains Mono for the terminal. Loaded from Google Fonts.

Display--text-display64px · Space Grotesk 700
Hold to talk
Display md--text-display-md56px · Space Grotesk 700
Hold to talk
Display sm--text-display-sm40px · Space Grotesk 700
Hold to talk
H2--text-h232px · Space Grotesk 700
Hold to talk
H3--text-h322px · Space Grotesk 700
Hold to talk
Body--text-body17px · IBM Plex Sans 400
Hold to talk
Small--text-small14px · IBM Plex Sans 400/600
Hold to talk
Mono--text-mono14px · JetBrains Mono 400
Hold to talk

Space, radius, shadow

4
8
12
16
20
24
32
40
48
64
80
96
--radius-sm8px
--radius-md12px
--radius-lg16px
--radius-xl24px
--radius-pill999px
--shadow-sticker4px 4px 0 ink
--shadow-sticker-lg8px 8px 0 ink
--shadow-sticker-pressed1px 1px 0 ink

Max content width 1120 px, 16 px side gutter on phones, never a horizontal scroll.

Components

Button

As a link

StatusDot

Waiting for youWorkingIdleGone

SessionRow

api-refactor
~/projects/api-refactor5m

Needs approval to run the rooms migration.

? Run migration 0042_rooms?
ios-appWorking on
~/projects/grenade-ios38s

Splitting the group list into one row per member.

Editing SessionsView.swift
buildWorking
~/projects/grenade-ios1m
⎿ Bash(xcodebuild test) · running
notesIdle
~/notes1h
vim todo.md
old-branchGone
~/projects/old3d

SessionGroup and MemberCard

grenade-website3 sessions1m
websiteWorking on

Regenerating the logo PNGs from mark.ts.

dev-serverIdle
astro dev · localhost:4321
review

Wants to know which branch to diff against.

AgentGlyph

Card

With a title

Body copy sits in the secondary text color.
Eyebrow

With an eyebrow

Use the eyebrow for a category or a status.
No title at all; just a sticker box.

CodeBlock

Terminal
grenade daemon
grenade pair
plain
{ "ok": true, "version": "0.1.0" }

PhoneMock

Logo

Logo with mode="auto" (the default) ships both drawings and shows the right one per theme with no script.

Downloads

Everything in public/brand/, generated by npm run logos.