Design system
The visual language
This page is the source of truth for how Tanaw looks. It lives at /design and renders the real tokens from src/styles/tokens.css and the real classes from app.css, so what you see here is what the app does. Rules and conventions are in docs/team/DESIGN.md.
Check it in light and dark, and at 375 px wide. Farmers read this in sunlight, on a phone, in a field.
Colour
Paddy green, straw gold for ripening and irrigation blue, on faintly green paper. Every colour has a token in all three theme blocks — never write a hex value in a component.
Surfaces and lines
Ink
Palette
Status
Chart series
In order. Use them in sequence so charts stay comparable.
Type
SF Pro Display for headings (--font-display) and SF Pro Text for body (--font-body) on Apple devices, Inter everywhere else; IBM Plex Mono for numbers and dates (--font-mono). Numbers in tables and facts are always mono, so columns line up.
Season report
--text-2xl — h1Pre-planting
--text-xl — h2Soil suitability
--text-lg — h3Rain is likely in the next five days. Hold off on fertiliser.
--text-base — bodySource: BSWM soil map, 2024.
--text-sm — .small, tables, hintsSentinel-2, 12 Nov 2026
--text-xs — captions, sourcesNDVI AVERAGE
--text-2xs — eyebrows, tagsLine height and tracking
--leading-tight 1.15 (headings) · --leading-snug 1.35 (captions) · --leading-normal 1.5 (body) · --tracking-caps 0.09em (uppercase eyebrows)
Spacing
Ten steps, taken from the paddings and gaps the app already uses. Pick the nearest step instead of inventing a value in between.
Radius
--r is the panel and card radius and has not changed. The smaller steps are for things inside a panel; --r-pill is for buttons and chips.
Elevation and focus
Three levels, and that is all. Most of the UI separates with a border, not a shadow — a flat card reads better in bright light.
Focus and touch
Focus is --focus-ring at --focus-offset. Tab to the button to see it. Anything tappable is at least --tap (44 px) on its short side.
Motion
--dur-fast 120ms (hover, press) · --dur-base 200ms (show/hide) · --ease ease-in-out · --ease-out cubic-bezier(0.2, 0.8, 0.3, 1)
All transitions and animations are switched off under prefers-reduced-motion.
Primitives
The classes in app.css, as the app renders them. New components get their own *.module.css instead of new global classes.
Buttons
One primary action per panel. aria-pressed marks a toggle that is on.
Chips
Chips label; they do not click. Use a button if it does something.
Panel
Growth
Crop health
Vigour is steady across the field. One block in the north-west is behind — check for water stress before you fertilise.
Source: Sentinel-2, 12 Nov 2026
Text utilities
Eyebrow
Body text, the default.
Muted — supporting detail.
Small — captions and hints.
2026-11-13 · 0.61 · 1.84 ha
Table
| Crop | Yield (t/ha) | Price (₱/kg) |
|---|---|---|
| Rice, irrigated | 4.2 | 23.50 |
| Rice, rainfed | 3.1 | 23.50 |
| Corn, yellow | 5.0 | 17.80 |
Labels left, numbers right and mono. Tables scroll sideways on a phone.
Farmer flow components
The map step is a full-page map with glass controls floating on it and one main action: the round +. While drawing it becomes Undo · Check my field · Cancel, and every corner can be dragged. The results step opens with a one-line answer, three facts and what to do. Styles: MapPanel.module.css and Results.module.css.
Map controls
68 px + and 52 px round buttons sit in thumb reach above the safe area. Glass only for chrome over the map.
Result summary
Your rice looks healthy
- Health
- Healthy As green as its usual seasons
- Harvest
- 23 Jun until 13 Jul
- Expected
- 12.4 t about ₱248k
One plain headline, then facts as separate tiles. Status is a dot plus a word, never colour alone.