One set of tokens and one set of components for the three product apps, so they read as one product. It is Leather as written in DESIGN.md, with every value taken from the mobile theme. No app uses it yet; adopting it is a later roadmap per app.
Four roles carry meaning on every surface. Nothing else gets a color of its own.
--t-ink · slate--t-confirm · gold--t-record · --t-error--t-success · --t-warning · --t-errorLight and dark come from the mobile theme's two palettes. Switch the theme in the bar to see dark.
--t-bg--t-card--t-surface--t-surface-2--t-inverse.t-dots--t-text--t-muted--t-subtle--t-line--t-line-strong--t-secondary · people| Role | Mark | Badge | Means | Token |
|---|---|---|---|---|
| Success | Good | Health 80 and up, done, saved | --t-success | |
| At risk | At risk | Health 60 to 79, a new account that needs a decision | --t-warning not in the theme yet | |
| Critical, error | Overdue | Health under 60, overdue, failed, destructive | --t-error | |
| Confirm | Ready to save | Will commit when pressed. Not a status | --t-confirm | |
| Promise | Promised | A commitment the rep made, open until kept | --t-commit | |
| Call | Call | The channel, not a state | --t-channel not in the theme yet | |
| Person | New person | A person to add, riding along with a note | --t-secondary |
The mobile theme's scale, in one family: Space Grotesk, which mobile already uses on its titles. Medium for controls, semibold for headings. Space Mono for figures that line up.
| display.md · 36/700 | Spring stocking order |
| heading.h1 · 30/700 | Copperline Auto Parts |
| heading.h2 · 24/600 | Follow-ups |
| heading.h3 · 20/600 | Recent activity |
| heading.h4 · 18/500 | Dana Whitlow, Buyer |
| body.base · 16/400 | Wants the heavy-duty filter program on the March order. |
| body.sm · 14/400 | Send the spring brake-line price sheet before Friday. |
| ui.label · 14/500 | Mark complete |
| ui.caption · 12/400 | Last visit yesterday · 1.2 mi |
| mono · 14 | $48,000.00 · 212 of 480 |
1 · 42 · 83 · 124 · 165 · 206 · 248 · 3212 · 4816 · 64Card padding 24, controls 12 by 16, between elements 16, between sections 48.
8 · controls12 · callouts16 · cards24 · sheetsfull · pillsOutline icons at 1.75 stroke, 16, 20 or 24 px, in the text color of their row. Each app keeps one set it already ships, and drops its second.
Drawn with lucide, the extension's set, as the reference shape.
| App | Keeps | Drops |
|---|---|---|
| Headframe | Heroicons outline (inline SVG, 126 templates) | Font Awesome 4.7 (47 icons, 40 templates) |
| Minecart mobile | MaterialCommunityIcons, outline variants (252 uses) | Ionicons (33 uses) |
| Chrome extension | lucide-react | nothing |
Each one is built with the app's own tools: a DaisyUI theme on Headframe, react-native-paper and StyleSheet on mobile, shadcn on the extension.
| Component | Headframe | Minecart mobile | Chrome extension |
|---|---|---|---|
| Button | DaisyUI btn btn-primary on a headframe theme | react-native-paper Button, theme colors | shadcn ui/button.tsx, re-pointed variables |
| Input | DaisyUI input input-bordered | react-native-paper TextInput | shadcn ui/input.tsx |
| Card, callout | Tailwind classes on the theme (no partial today) | StyleSheet on theme.colors | Tailwind classes on the variables |
| List row | table rows in each list template | list items per screen (no shared row) | search results rows |
| Badge, chip | DaisyUI badge | ui/FilterChips.tsx, ui/ChipMenu.tsx | Tailwind classes |
| Navigation | components/_sidebar.html | CustomTabBar, ui/TabBar.tsx | the panel header in App.tsx |
From the R2 to R4 mirrors, which draw each app as its code renders today. Each row is a change a later roadmap would make.
| Area | Today | In the shared style | Seen in |
|---|---|---|---|
| Primary action | Blue text links and buttons (text-blue, bg-blue: about 80 uses on six key screens) beside the navy headframe-primary. | Ink for every primary action, a headframe DaisyUI theme so btn-primary is ink. | account detail, accounts list |
| Status colors | Success is both green and emerald; amber marks statuses as well as confirm; purple and violet both mean people. | Green success, yellow at risk, red critical, amber only to confirm, violet for people. | account detail, review queue |
| At risk | --color-warning is orange (#ea580c family); the review sheet already uses yellow. | Yellow --t-warning, the ratified color. | base.html, review queue |
| Health badges | Inline hex and rgba in the template (#a16207 on yellow, #fef2f2 with #d5001c). | The status badge on tokens. | account detail |
| Page palettes | Hex <style> blocks on Notes and the account note cards; the review queue runs its own .leather-review palette. | One token sheet; the review palette folds into it. | notes tracker, review queue |
| Grays | Tailwind cool grays (gray-500 is #6b7280). | The mobile neutral ramp (gray-500 #737373). | every screen |
| Type | System sans; DM Sans and IBM Plex Mono load on Notes only. | Space Grotesk everywhere, Space Mono for figures. | notes tracker |
| Icons | Heroicons inline plus Font Awesome 4.7 (13 icons on the key screens). | Heroicons outline only. | review queue, planner |
| Dark | Locked to light. | Light first; dark later through the same tokens. | base.html |
| Area | Today | In the shared style | Seen in |
|---|---|---|---|
| Theme use | Four of nine key screens type every color (Contact detail has 78 literals), so they stay light in dark mode. | Every color from theme.colors; dark works everywhere. | contact detail, activity detail, capture |
| Dark legibility | Ink "Text note" label and #121926 note headers vanish on black; the capture account chip turns near-black on gray. | Text roles that flip with the theme. | account detail, contact detail, new note |
| Cards in dark | AccountCard hard-codes white, so cards stay white in dark. | --t-card: white in light, surface in dark. | accounts |
| Golds | Three: confirm #f59e0b, the retired #FFB700 (Edit, Login, capture Save) and the tab bar #F5A623. | One amber, --t-confirm. | login, capture, shell |
| Reds | The record gradient plus the retired #ef4444 on the decibel wash. | One red, --t-record. | new note |
| At risk | Theme warning is orange (#ea580c). | Yellow, the ratified color. | theme |
| Tab bar | Its slate pill is a module constant (#2D3142) outside the theme. | --t-inverse. | shell |
| Type | Space Grotesk on some titles, "Inter" named but not bundled, the system font elsewhere. | Space Grotesk everywhere (already bundled); drop the unbundled Inter. | login, note taking |
| Icons | MaterialCommunityIcons plus 33 Ionicons. | MaterialCommunityIcons outline only. | shell, capture |
| Spacing | Settings cards touch (settingCard has no bottom margin). | 16 between cards, on the grid. | settings |
| Area | Today | In the shared style | Seen in |
|---|---|---|---|
| Primary action | Raw Tailwind blue: blue-950 header, blue-600 buttons. The shadcn primary is default near-black and only the options page uses it. | Ink header and buttons through re-pointed shadcn variables. | every state |
| Background | --background is rgb() inside hsl(), invalid, so the panel shows Chrome's white. | White, from the neutral ramp. | index.css |
| Status colors | Insight colors are inline hex (green-600, red-600, blue-600, yellow-600). | The status roles, the same as mobile and Headframe. | account |
| Wrong color | "Failed to save settings" shows in green. | Error text is red. | options |
| Tokens | Only the options page's Button and Label read the shadcn variables. | Every component reads them, plus confirm, record, success and warning. | every state |
| Grays and type | Tailwind cool grays; system font. | Neutral ramp; Space Grotesk. | every state |
| Dark | A .dark block exists but never turns on. | Light first; dark later through the same tokens. | index.css |
Each one is the R2 to R4 mirror with the same data, redrawn on these tokens. Today's mirror sits beside it in the item's design folder; the links open them from the board's Design tab.