Design System
Live token preview — see DESIGN.md and design-tokens.json at the repo root
Color
primary-700
#15803d · Primary actions, brand
primary-900
#14532d · Header surface
sea-700
#0e7490 · Fisheries accent
harvest-600
#d97706 · Price emphasis, CTA accent
soil-700
#44403c · Body text
soil-200
#e7e5e4 · Borders
critical
#b91c1c · Typhoon / pest alerts only
warning
#b45309 · Shortage warnings
info
#1d4ed8 · Bulletins, events
Typography
Page title — 2xl/3xl bold
Section heading — xl semibold
Card title — base semibold
Body — 16px floor, 1.6 line-height, system font stack (zero webfont bytes).
Meta / caption — sm, soil-500
Badges
WeatherShortageEventIn Demand🌱 Farm🐟 FisheriesCarabao mangoGrade A
Buttons
All ≥ 44px touch target