The native app's tokens and components, derived from the Doozer family skeleton (includes/doozer-family.php) and The One's own semantic set (includes/business-app.php), translated to iOS and Android. Includes three contrast findings that also apply to the web.
The app is the family's skeleton (paper and ink, system type, the lattice mark, "We Build Because.") with The One as its main screen. So it takes its tokens from two places that are already live: the family emitter doozerFamilyCss() for chrome, and The One's own :root in renderBusinessAppPage() for the semantic colors a place needs (the open chip, the star, the button). Nothing new is invented; a value that is not on the web does not belong here.
| token | light | dark | use |
|---|---|---|---|
paper |
#faf8f2 |
#0b120d |
the ground |
cream |
#f2efe4 |
#111b14 |
secondary ground, pressed rows |
card |
#ffffff |
#131e17 |
raised surfaces |
ink |
#111b14 |
#e8eee9 |
text (16.6:1 / 16.1:1) |
inkSoft |
#33463a |
#c3cfc6 |
long prose |
muted |
#5a6b60 |
#8fa196 |
meta and captions (5.3:1 / 7.0:1) |
line |
#e4e0d3 |
#22322a |
hairlines |
lineStrong |
#d3cebd |
#2f4237 |
ghost button borders |
green |
#12833c |
#3fbf6a |
the brand, icons, large text |
link |
#0c5c2a |
#5fd384 |
text links (7.7:1 / 10.1:1) |
greenTint |
#e6f2e9 |
#14301e |
selected chips |
btn / btnInk |
#0c5c2a / #fff |
#12833c / #fff |
primary buttons (8.1:1 / 4.8:1) |
gold |
#ffc107 |
#ffc107 |
the one spark: the mark's cell, focus ring; ink on it, never white |
goldText |
#8a5e00 |
#ffc94a |
eyebrows (5.4:1 on paper, 4.95:1 on cream) |
goldTint |
#fff4d1 |
#2e2610 |
a highlight ground |
star / starOff |
#e8a300 / #e4e0d3 |
#ffbf2e / #2c3b32 |
rating stars, always beside the number |
open / openBg |
#0c6b30 / #e3f3e7 |
#6fdc93 / #123020 |
Open chip (5.8:1 / 8.4:1) |
closed / closedBg |
#8a4b00 / #fbefdc |
#f2b562 / #33240f |
Closed for now (6.0:1 / 8.3:1) |
shut / shutBg |
#a3261c / #fbe5e2 |
#ff8f84 / #3a1714 |
Closed for good (6.1:1 / 7.3:1) |
unknown / unknownBg |
#5a6b60 / #efece2 |
#9fb0a5 / #1b2820 |
Hours not known (4.8:1 / 6.7:1) |
Rooms keep their light. The app's chrome is core green. Entering a family room tints its accent the way the web does, and only there: Games #2f5ae8 with #2142c2 for buttons (white 8.0:1); Shop #e11d48 as a tint with #be123c for text and buttons (#e11d48 is 4.4:1 on paper, just under AA for small text). Memories (Logfile, Wuz) stay core green: Jon decided on Oct 25 2026 that they are named features of Doozer, not rooms with their own light. If that ever changes, Wuz cyan is #06b6d4 as a ground with ink on it (7.3:1) and #0e7490 for text and buttons (5.0:1); cyan text on paper is 2.3:1 and never ships.
Category color comes from the API (category.color, the network's nicheColor()): pins and the monogram ground, never body text. The monogram letter picks white or ink by luminance.
--gold-deep:#a87300 fails AA for small text (3.9:1 on paper). The family's eyebrowsuse it at 12.5px. The app uses #8a5e00; the web should too.
#0d1310 vs #0b120d, card#16201a vs #131e17, and the family's dark --green-dark:#2fa457 vs The One's link #5fd384 plus button #12833c. The app takes The One's set (it separates link green from button green); the family CSS should adopt it.
brand-system.md still lists --gold-deep:#c98a00, which is lower contrast still.The live emitter is the truth; the brand node should be corrected.
The system face (San Francisco on iOS, Roboto on Android), as on the web: the character comes from weight, scale, tracking and the green. React Native measures letter spacing in points, so the web's em values are multiplied out.
| style | size / line | weight | tracking | use |
|---|---|---|---|---|
display |
32 / 36 | 800 | -0.7 | a place's name on The One |
title |
24 / 29 | 800 | -0.45 | screen titles |
heading |
19 / 24 | 700 | -0.2 | section heads |
body |
17 / 25 | 400 | 0 | everything readable (never below 16) |
callout |
15 / 21 | 500 | 0 | meta lines: category, town, distance |
caption |
13 / 18 | 500 | 0 | credits, timestamps |
eyebrow |
12 / 16 | 800 | 1.9, uppercase | goldText |
mono |
14 / 20 | 500 | 0 | doozer.link, codes, cite letters (Menlo, monospace) |
Dynamic Type and Android font scale are on. Rows never have a fixed height around text; dense rows cap the multiplier at 1.8.
card on paper with a 1-point line border and a soft shadow on iOS (ink,offset 0/8, radius 16, opacity 0.10), elevation 2 on Android, and no shadow in dark (it cannot be seen; the border carries it). A primary card has a 5-point left edge in the accent.
btn ground, btnInk text, radius 11, weight 800, 48 tall; presseddims to 0.9 and nudges down a point (the web's :active). Ghost: paper ground, ink text, 1.5-point lineStrong border. A control says what it does and keeps the name through the flow ("I'm here", "Save", "Keep it").
theirs), Save, Share. Icon over label, the same words as the web page.
("Closed, opens 7 AM"), Closed for good, Hours not known (hollow dot). Unknown is never drawn as Closed. Color is never the only signal.
lineborder, muted. A tap opens the Sources sheet at that row, like the web's footnote.
distance), the open chip. At least 72 tall; it grows with the text.
a stock image.
next tap does, her reason line beneath. On a phone she is the only thing in the corner.
doozerMarkSvg() drawn with react-native-svg: currentColor plus one gold cell; below 20 points every cell fills solid, as on the web. The app icon is the lattice D on green #12833c with the gold cell going in (Android: adaptive foreground and background layers). Splash: the mark on paper (#0b120d in dark).
Tabler outline icons at stroke 1.75 on a 24 grid, the family doozerIcon() already draws (@tabler/icons-react-native). Brand marks (Instagram, Facebook) filled, as on the web. No emoji anywhere in the product. The one exception is the native tab bar, which the OS draws with its own symbols (SF Symbols on iOS, Material Symbols on Android); it can carry Tabler images once the app moves to a development build.
The house move: a fade-up (10 points to 0, opacity 0 to 1), 280 ms ease-out, staggered 60 ms, on a screen's first appearance only. Reduce Motion keeps the fade and drops the movement. One light haptic when a check-in lands and when a game piece sets down; a selection tick on a chip. Never a haptic for a prompt or an offer.
MapLibre with a Doozer style built from these tokens (paper land, line roads, inkSoft labels, a dark variant from the dark set). "(c) OpenStreetMap contributors" always visible. Pins are category-color dots with a white edge; the chosen one gets an ink ring. Clusters at low zoom. Only real places, never a fake crowd.
The house style: sentence case, plain and active, no em dashes, no exclamation points, no emoji. A notification says what happened and what the tap does: "Luc's opens at 7. Tap for today's hours." Never urgency, never guilt, never a count meant to pull someone back.
AA everywhere (4.5:1 text, 3:1 large text and meaningful graphics), the targets above, VoiceOver and TalkBack labels on every icon button (the label is the action), Dynamic Type, Reduce Motion, and a visible gold focus ring for keyboard and switch control.
The tokens live in code at src/theme/tokens.ts in the app repo; this node is the why.
Related: Brand System, The Doozer App, API v1, The One Page, Alice, Niche colors.