Paper first
Warm ground, soft edges, one pool of light from above. Surfaces are dressed as sheets of paper, not as rectangles on a dashboard.
Design language
The house style,
in one page.
Bookcrumbs is one card of warm paper, one quote, and a great deal of restraint. This is everything that holds it together — the ramp, the two faces, the three curves, and every element with the state it wears when you reach for it. All of it below is the real stylesheet, running live. Nothing here is a picture of it.
- 1ramp, ten steps
- 2families
- 3materials
- 5card states
01 · The house
A reading corner, not a dashboard.
The product is a single screen with one job: hand over a thought from a book and then get out of the way. Everything below follows from that. Ornament is allowed, but it is never in front of the quote, and it is never the same twice in a row.
One idea per screen
No rails, no sidebars, no counters competing for the eye. The note is the only thing that moves unless you ask it to.
Gilt, not gold
Every accent is a diluted brown. Shine is a soft pass of light, never a saturated hue, and never more than a hairline wide.
The mark
An open book with a ruled page on each side. The topmost leaf turns over on hover, and closes on itself — its face and its back are the same shape, so the turn lands back on the open book it started from.
24 · wordmark
20
16
on espresso-900
02 · Colour
One ramp, named for the drink.
Ten steps of espresso, from the paper the card is printed on to the ink it is printed in. Every other colour in the house is one of these steps at some opacity. Click any swatch to copy its token.
Roles
The ramp is the material. These are the jobs it does.
Lines & rules
Hairlines are ink at low alpha rather than their own colour, so a rule drawn on paper and the same rule drawn on ink belong to the same scale.
Each rule is shown twice: once on paper, once on espresso-900. The ink scale is cut for paper — reversed, it very nearly vanishes, which is why nothing in the house ever draws a rule on the dark ground. That ground is given a paper line instead.
Alpha, from channels
Four raw channel triples carry every translucent surface, so a border and the text inside it are literally the same brown.
Reversed
The ramp runs both ways: espresso-100 through 400 keep their contrast when the ground is the darkest step. This is how the app's own surfaces hold up.
Aa
Reading on ink
For inverted moments — the toast, the sealed crest, the reversed mark — the paper steps become the type and the ink step becomes the ground.
expresso-900 ground expresso-100 type expresso-300 detail
03 · Type
A book face and a shop face.
Fraunces reads the quotes. Hanken Grotesk runs the interface. They are never swapped: display for what was written, sans for what the product says.
Display
Aa
Fraunces
Self-hosted variable, weights 100–900, optical sizing on. Softness 80, wonk off. The quote, the counts, the roadmap titles.
--font-display: 'Fraunces', Georgia, serif
Interface
Aa
Hanken Grotesk
400 / 500 / 600 / 700. Everything with a job to do: buttons, bylines, tabs, labels, tooltips.
--font-body: 'Hanken Grotesk', 'Segoe UI', sans-serif
The display scale
.note-text
We read to know we are not alone.
.spec-title
A note is a small thing
.about-intro h3
Good books. Lasting thoughts.
.project-item p
Let a little quiet into the day.
The interface scale
.royal-heading-label
The Royal Record
.changelog-dateline
3 days ago · New
.footer-attribution-label
Curated by
.project-tab
What's new
.book-link
The Royal Diaries of Krishnakumar
.author-line
by R. K. Narayan
.swipe-hint
Swipe to keep reading
The variable axes
Fraunces carries four axes. The house sets SOFT 80,
WONK 0 and lets opsz follow the size it is rendered
at. Move them and the setting below is the real declaration.
Handgloves
font-weight: 350;
Measure
One measure for the whole product: --note-content-max-width. The
card, the topbar, the panel and the footer are all that wide, so the page has a
single column of gravity.
760px is wide enough for a sentence and narrow enough that the eye returns to the left edge without hunting for it.
04 · Space, shape & material
Air, then edge, then light.
Space is a quarter-rem ladder and almost nothing else. Corners are pills, panels and sheets. Light comes from above in every case, always warm, never grey.
The ladder
0.25hairline gaps
0.5icon to label
0.75chip padding
1button gap, tab gap
1.15panel padding
1.5view spacing
2section gutter
3screen gap
Corners
--radius-pillcontrols, chips, toast24pxthe note card18pxthe about panel14pxmedallions, tab rail12pxroadmap plates, icons7pxrule lozenges, rotated 45°50%crest, streak, node--radius-tabbare tabsThree materials
Paper
An opaque sheet with a gilt gradient border, a highlight along its top inner edge, and a long soft shadow beneath. This is the card, the panel and this page's own sections.
expresso-50 + gradient borderGlass
Controls that sit over the card: white at 36%, a 12px backdrop blur, and the shadow that keeps them from floating away. They tint what is behind them.
surface-control + blur(12px)Gilt
Light travelling along a rule or over a pill. It is a 1px gradient moved by a background-position keyframe — never a border colour, never a glow filter.
--expresso-500 through transparentElevation
rest
a border and nothing else
--shadow-control
0 8px 22px rgba(0,0,0,.04)
--shadow-panel
0 12px 30px ink at 12%
the card
four layers, incl. an espresso glow
05 · Motion
Slow in, quick out.
Three curves and three durations, and nothing else. Entering is a long settle, leaving is almost gone, and anything you can push, push back on. The curves below are drawn from the tokens themselves.
Durations
The rules
- Nothing loops in the reading view. The note itself is still while you read it. Ornament breathes on a 4–7 second cycle and never draws the eye back.
- The card moves as one piece. Swipe, wheel, and arrow keys all translate the same foreground element, so a gesture never looks like a redraw.
- No hover lift on the drag target. The card is where a swipe starts, so a
:hovertransform would jump it the moment the pointer drifted off. - Duration is read from CSS, in JS. The note transition reads
--motion-enterand--motion-exitoff the root, so the animation and the token can never disagree. - Reduced motion is a floor, not a switch. Every duration collapses to 0.01ms and every loop to one pass; nothing is left spinning or frozen mid-flight.
06 · Access
Reachable, first time.
The contrast figures below are measured from the tokens in this stylesheet as you load the page, not written down. If a ramp step moves, the audit moves with it.
Contrast audit
PairRatioBodyLarge
The focus ring
Two pixels of ink at a four pixel offset. It is the same ring on every control, and it is never removed — only restyled for the surface it sits on.
7
Targets & states
- 36px for icon buttons and the streak badge; 52px is the full-size control, and both clear the 24px minimum with room to spare.
- Tab order is visual order. Panels trap nothing and restore focus to the toggle that opened them.
- One live region. The card announces each new note politely, and sets
aria-busywhile one is on its way out. - Every gesture has a key. Swipe, wheel and scroll all resolve to the same four arrow keys.
07 · Elements
The small parts, with all their states.
Hover and focus are shown as previews here, because a static page cannot hand you a pointer. Tab into any tile and you will get the real thing.
Icon buttons
Glass by default, gilt at the top of the page, a sheet of paper once they sit
inside the card's meta. 36px square, 16px glyph, radius --radius-pill.
Rest
.about-button
Hover
translateY(-1px)
Active
scale(.94)
Disabled
opacity .56
Open
aria-expanded
The support pill
The one warm call to action in the house. Paper until you reach for it, then the gilt comes up under it, a sheen crosses it, and the heart starts beating.
Support this project
Hover
gilt rises, star in
Badges, hints & fields
7
Streak
.streak-badge
hover for the tooltip
Scroll or use arrow keys
Hint
.swipe-hint
nudges on a 2.2s cycle
Field
pill, surface-control
Toast
Ink ground, paper type, a pill, and an undo where there is something to undo. It stays mounted and fades, so opening and closing both ease.
Note hidden
Could not update the note.
Toast hidden
08 · The note card
The whole product, in one card.
A sheet of paper with two more behind it, four stars in the corners, a quote, a hairline with a lozenge at its centre, and two small controls. This is the live component, rendered by the same stylesheet as the site.
- 1Gilt border & inner rule A gradient clipped to the border box, then a second rule 9px in. Both catch light from the top left.
- 2The deck Two sheets behind the card, rotated 2.5° and −1.5° and scaled down, so the stack has thickness without a drop shadow doing all the work.
- 3Corner stars Four ✦, 1.3s apart on a 5.2s cycle, so they never pulse together.
- 4Meta hairline Fades at both ends with a 7px lozenge at the centre — the same ornament the page foot and the roadmap use.
- 5Actions 36px paper buttons. Hide only exists at localhost; share is always there, and is disabled until a note has loaded.
- 6The quote Fraunces at 350, tracking −0.065em, ink laid down as a gradient clipped to the glyphs.
Every state
Five states, one component. Each tile wears the class the reader’s own card would be wearing at that moment — the ones the app actually toggles. The gesture hint rides along with the card in every one of these states; it is drawn once on the resting card rather than repeated down the column.
.note-shell
The reading card as it settles: a quote, a byline, two controls.
.note-content.is-expanded
A note too long for the fixed height outgrows the sheet instead of shrinking its type. On a phone the hint swaps its wording at the same moment, to name the gesture that folds it back.
.is-swiping
The card follows the pointer. will-change is on, and nothing about the paper changes.
.is-transitioning
Between two notes. The class only buys a compositing hint — the travel is animated from the motion tokens.
.note-shell.is-support
The one card that is not a quote: centred, with no actions, steam rising off the cup and a star at every corner. It arrives after fifteen to twenty notes and never twice in a row.
09 · Panels
The menu, dressed as the card it sits beside.
Three views on one panel, a rail of tabs, and a chronicle down a gilt spine. It is live: switch views, and the height holds so nothing jumps.
Laid out here rather than dropped from its toggle, so the whole panel can be read at once. On the site it mounts closed, drops twelve pixels below the button it belongs to, and raises a fixed veil over the page behind it.
The chronicle
Entries hang off a gilt spine with a lit bead at each one, and the freshest is
sealed in gold. These are the real entries, read from the same
/api/project-updates the menu reads — nothing here is
written by hand.
The Royal Record
The road ahead
Two chapters, a gilt rule between them. Shipped work is dimmed and sealed; planned work grows a star when you reach for it. Each entry is a single line of Fraunces — the entries carry a title and nothing else, so the list stays a list.
The Road Ahead
The seal
The foot of every page: a gilt rule lit at its centre and a beating heart on it. The sign-off carries the current mark, cut in Roman numerals and bumped with every release.
10 · Tokens
Everything the house is made of.
Every custom property the page is actually running, read out of the cascade. This
is the contract: change a value in variables.css and this table, the
audit above, and every component on this page move together.
Token
Value
Sample
The end of the book
Now go and read something.
That is the whole system: one ramp, two faces, three materials, three curves, and a card that knows how to get out of the way.