Cupfolio
Brand system

The folder, locked. Newsreader for the wordmark, espresso for the accent, three states for everything else.

v0.1 freezes the decisions from the brand sheet review. Newsreader 500 is the wordmark. Espresso is the only accent. Status uses three semantic colors - green, amber, red - re-keyed so they sit next to brown without fighting it.

Mark Reverse
WordmarkNewsreader 500replacing Quicksand
Body / UIInter 400 / 500tabular nums on
AccentEspresso#4A341F
Status3 colorsgreen / amber / red
01 - Marks

Four variants, vectorised.

Each mark is a self-contained SVG with hardcoded fills - drop them anywhere without inheriting CSS. The simplified glyph is for sub-32px contexts where the bean detail collapses into mud.

Mark Reverse
Reverseprimary · marketing
cf-mark-reverse.svg
Mark Reverse
Ink on creamstationery
cf-mark-ink.svg
Mark Reverse
Espresso on whiteapp · web
cf-mark-primary.svg
Mark Reverse
Glyph · 16–32pxfavicon
cf-glyph.svg
02 - Color

Twelve tokens. One accent. Three states.

Defined in OKLch so they age well across displays - with hex equivalents below each chip for tools that don’t speak OKLch yet (Figma, Sketch, stickers, Slack).

--cf-brand-espresso
Mark · accent
Hex#4A341F
--cf-brand-cream
Cut · inverse fg
Hex#F2EAD8
--cf-brand-ink
Body text
Hex#2D261E
--cf-bg
App canvas
Hex#FBF6EC
--cf-surface
Cards · panels
Hex#FDFBF6
--cf-muted
Secondary text
Hex#7B6E61
--cf-border
Hairlines
Hex#E7E0D2
--cf-accent-soft
Hover · selected
Hex#EFE3D0
In stock
--cf-success
In stock · paid
Hex#5C9858
Reorder
--cf-warning
Below par
Hex#C99A4A
Out
--cf-danger
Out · overdue
Hex#C5563E
Info
--cf-info
In transit
Hex#3F8AB8
03 - Type

Two families. One job each.

Newsreader for moments that should slow you down - the wordmark, headlines, KPI numbers. Inter everywhere else. JetBrains Mono for SKUs, weights, dates - anywhere alignment matters more than warmth.

Display - Newsreader
Cupfolio
Wordmark, hero headlines, KPI numbers, marketing display.
weight 500 · italic optionaltracking -0.02em at display sizesopsz axis: 8 (body) → 24 (display)
Body / UI - Inter
Cupfolio is the coffee app for people who love coffee people. Log it, follow it, find the next one. Tabular numerics on by default.
Body copy, table cells, buttons, sidebar, form fields.
weights 400 / 500 / 600features: ss01, cv11, tabular-nums13px UI · 15px body · 1.55 leading