The Farmup Operating
Design Language
Nature × Technology. One system of tokens, components and motion that every Farmup surface - web, commerce, mobile, dashboards, marketplace, school and investor portals - inherits.
Color tokens
Typography
Display / Sora 700
Heading / Sora 600
Body large - Manrope 400. Design should breathe; text sets the rhythm.
Caption - Manrope 400, muted foreground.
Mono - data, code, sensor values 24.6°C
Spacing, radius & elevation
Motion grammar
Toggle, checkbox
cubic-bezier(.22,1,.36,1)
Hover, press
cubic-bezier(.22,1,.36,1)
Modal, drawer, tabs
cubic-bezier(.22,1,.36,1)
Hero, scroll reveal
cubic-bezier(.22,1,.36,1)
Controls & inputs
Card family
MNFS Balcony Kit
4 modules · self-watering
Why soil beats hydroponics at home
A field note from our agronomy team.
Food-Ed: Grow Your First Salad
6 lessons · 2 hours · Ages 8+
“My terrace now feeds three families every week.”
Household
- 1 MNFS module
- Seasonal seed kit
- App + AI advisor
Community
- 6 modules
- Onsite setup
- CSR impact reporting
Feedback, AI & timeline
Ask about yields, crops, or your farm setup.
No harvests yet
Log your first harvest to start tracking yield and impact.
- Week 1
Setup
Modules installed and seeded.
- Week 4
First harvest
Greens ready for the kitchen.
- Week 12
Impact report
CO₂, water and yield summarised.
System states
Accessibility & responsive
Accessibility
- AA contrast in both themes via semantic tokens only.
- Visible 2px focus ring on every interactive element.
- 44×44px minimum tap targets on mobile.
- Motion respects prefers-reduced-motion.
- One h1 and one main per screen; icon buttons carry labels.
Breakpoints
- xs 384 · sm 640 · md 768
- lg 1024 · xl 1280 · 2xl 1536
- 3xl 1920 (ultra-wide, capped content at 78rem)