Dev surface · extracted from rfz-app · remove before cutover
Colour, type family, radius and shadow are copied from the Rails app. Heading sizes deliberately follow Tailwind's prose defaults instead. The app sets h1 and h2 both to 4rem, which does not survive contact with a long page title on a phone.
primary every primary action
secondary body text, borders, the hard shadow
tertiary focus rings, muted text
off-white page background
off-white-dark alternating sections
light-gray input ring
green positive sentiment
red negative sentiment
salmon off-green muted chart fill
off-red muted chart fill
brand-blue default link colour
dark-blue code-400 code surface
code-600 code text
Headings are Schibsted Grotesk, body is Inter. Both SIL OFL, both self-hosted as woff2 from this origin. Sizes are prose defaults.
h1 · heading · 2.25rem
h2 · heading · 1.5rem
h3 · heading · 1.25rem
h4 · sans · 1rem bold
h5 · sans · sm bold uppercase
Body copy · Inter · 1rem. The quick brown fox jumps over the lazy dog.
Muted small · tertiary · 0.875rem
Display · 4rem
The app's oversized face. Hero use only, where the line is guaranteed short.
Hover them. The button shrinks to 95% and gains a hard 6px offset shadow with no blur. That is the app's signature interaction, and the thing a screenshot would not tell you.
shadow-custom · 0 6px 0 0 #1f1e1d