Point, snap, done.
12,000+ foods and their portions, from one photo.
DESIGN SYSTEM
Pantry: everything Platewise is made from.
Pantry is the kit behind every Platewise surface: the landing page, the app, social and email. One set of tokens, a handful of components, and rules for keeping the food the loudest thing on screen.
57design tokens
8components
AAcontrast
Principles
Four rules for deciding between two good options.
01
The food is the hero
Interface stays white and quiet so the plate and its numbers carry the colour. No decoration that competes with the scan.
02
One action per screen
Every view has one thing it wants you to do, in one green or ink button. Everything else is secondary.
03
Numbers you can trust
Real units on every value, tabular figures, and the macro colours never change meaning.
04
Kind about food
Celebrate habits, not weight. No red for “over”, no guilt, no good and bad foods.
Colour
Five groups, all from one CSS file. Click a chip to copy its hex.
Core
Ink carries text and dark surfaces. Muted is for supporting copy.
Surfaces
White first. Tints appear one per card, never side by side in the same hue.
Green
One hue, five jobs. Green fills, green-btn sits under white text, green-d and green-ink are the only green text.
Macros and accents
Macro colours are fixed: protein violet, carbs sun, fat coral. They appear only inside data.
On colour
Secondary text that sits on green and ink fills.
Contrast
Every text pair meets WCAG AA (4.5:1). These are the approved pairs, and the three that look fine but fail.
| Sample | Text | On | Ratio | Result |
|---|---|---|---|---|
| Aa | --ink | --bg | 17.2:1 | AA pass |
| Aa | --muted | --bg | 5.5:1 | AA pass |
| Aa | --green-d | --bg | 4.5:1 | AA pass |
| Aa | --green-ink | --mint | 5.8:1 | AA pass |
| Aa | white | --green-btn | 5.4:1 | AA pass |
| Aa | --on-green | --green-btn | 4.9:1 | AA pass |
| Aa | --lime | --ink | 13.3:1 | AA pass |
| Aa | --on-dark-muted | --ink | 8.7:1 | AA pass |
| Aa | white | --green | 2.6:1 | fail · don't use |
| Aa | --green-d | --mint | 4.0:1 | fail · don't use |
| Aa | --lime | --bg | 1.3:1 | fail · don't use |
Typography
Plus Jakarta Sans, 400 to 800. Display sizes are fluid between phone and desktop.
Display
display-hero66px · 800 / 1.04 / −4.5%Know every calorie.
CTA
display-cta56px · 800 / 1.05 / −4%Your first scan.
Heading
display-section52px · 800 / 1.08 / −3%Plate to progress
Stat
stat58px · 800 / 1.0 / −4%1.2s
Card title
card-title21px · 800 / 1.2 / −2%Macros, beautifully broken down
Lede
lede19px · 400 / 1.55 / 0Take a photo of any meal.
Body
body15px · 500 / 1.55 / 0Unlimited AI photo scans and a personal coach.
Kicker
kicker13px · 800 / caps / +14%HOW IT WORKS
Data label
data-label12px · 800 / tabularSalmon · 367 kcal
Spacing & layout
Content sits in a 1200px wrap with 24px gutters. Card grids use a 20px gap; sections breathe at 110–120px.
gap-xs8pxIcon to label, chipsgap-sm12pxButton rows, macro gridgap-md20pxCard gridsgutter24pxPage sidespad-card28pxCard paddingpad-plan32pxPlan padding, hero CTA gaphead-gap56pxSection head to contentsection110pxSection paddingRadius & elevation
Soft and friendly. Anything you can press is a pill. Shadows are kept for things that float above the page.
Radius
radius-xs · 8pxLabelsradius-sm · 14pxStore buttonsradius-md · 18pxFloating cardsradius · 24pxCardsradius-plan · 28pxPlansradius-cta · 40pxBandsradius-pill · fullButtons, pillsElevation
flatInline content, tablesshadowHovered cardsshadow-btnGreen buttonsshadow-lgFloating objectsIconography
24px grid, 2.2–2.4px stroke, round caps and joins. Icons share the geometry of the viewfinder mark.
Motion
Motion explains the product: the scan animates, chrome doesn't. The first screen is never hidden behind an entrance animation, and everything respects reduced-motion settings.
| Token | Value | Use |
|---|---|---|
dur-fast | 200ms | Hover, press, colour |
dur-reveal | 800ms | Below-the-fold fade up (28px) |
dur-float | 6–7s | Floating cards and phone bob |
dur-scan | 7s loop | Scan line, boxes, macro fill |
ease-out | cubic-bezier(.2,.7,.2,1) | Reveals, hover lifts |
Macro visualisation
Protein is always violet, carbs sun, fat coral. Every bar carries its label and value; colour never works alone. Progress toward a goal is green, never red.
Protein 42g
Carbs 61g
Fat 38g
Macro bars · 7px · track #EEF2F4
Donut · 16px stroke · 3% gaps
M
T
W
T
F
S
S
Weekly bars · today in Green · goal dashed
Button
One primary per view. Action green is for the thing the page exists for; Ink is the nav and dark-ground primary; Ghost is everything secondary.
DefaultHoverFocusDisabled
Action
Ink
Ghost
Height 48Padding 14 × 24Radius pillLabel 15 / 700Focus 3px green-btn ring, 3px offsetHover lift 2px, darker fill
Store buttons
The landing page's one call to action. Always App Store first, always as a pair, never beside another primary.
Fill inkRadius 14Padding 10 × 18Label 10 / 600 over 16 / 700
Detection label
The signature component. A box snaps around each food after the scan line passes, labelled with the food and its calories.
New Eyebrow pill · green-ink on mint
Box 2px, radius 10Label 12 / 800, tabularSeparator middle dot ·Sequence 0.15s apartBox colour matches the food
Floating card
One small stat beside the phone. It may overlap the phone's frame, never the app content inside it. One per hero.
Daily calories 71%
1,420 / 2,000 kcal
Radius 18Shadow shadow-lgProgress green → limeMotion bob 12px / 6s
Bento card
A feature tile: tag, title, one line and a live visual. One dark lead card per grid; the rest take one tint each.
Macros, beautifully broken down
Protein, carbs, fat and 30+ micronutrients.
Trends that actually help
Your week at a glance, against your goal.
Radius 24Padding 28Title 21 / 800Tag 11 / 800 capsHover lift 6px + shadow-lg
Plan card
Exactly one plan is highlighted. It goes dark, gets the lime badge and the green button.
Most popular
Pro
Unlimited scanning and a personal AI coach.
$9/ month
Start 14-day free trial- Unlimited AI photo scans
- AI nutrition coach
Radius 28Padding 32Price 52 / 800, tabularBadge lime, ink text
Testimonial
Results describe habits and goals, never weight lost. One featured card per section, in Action green.
Hit protein 6 weeks straight
“I just take a picture. It's the first habit I've actually kept.”
MR
Maya R.Product designer
“It split my burrito bowl into 7 ingredients.”
DK
Daniel K.Software engineer
FAQ item
Native details and summary, so keyboards and screen readers work. One open at a time; open items turn soft and the plus turns on a lime disc.
How accurate is the calorie detection?
Platewise identifies foods with 98% accuracy in testing. Tap any item to adjust it.
Can I cancel anytime?
Yes, in two taps from your account settings.
Token reference
Every colour as a CSS custom property, defined once in app/globals.css.
| Token | Value | Use | |
|---|---|---|---|
--ink | #0B1D26 | Text, dark surfaces | |
--ink-2 | #1E3340 | Nav links, quotes | |
--muted | #5B6B75 | Ledes, card copy | |
--logo-grey | #65747D | Logo strip only | |
--line | #E4EBEE | Hairlines, borders | |
--bg | #FFFFFF | Page, raised cards | |
--soft | #F4F8F5 | Quiet cards, open FAQ | |
--cream | #FFF8EE | Warm card | |
--mint | #DDF7EA | Green tint, chips | |
--tint-sky | #EEF4FF | Barcode card | |
--tint-violet | #F4F0FF | Voice card | |
--tint-coral | #FFF1EC | Integrations card | |
--green | #12B76A | Logo, charts, progress | |
--green-d | #08875A | Text on white only | |
--green-btn | #077A51 | Buttons, green bands | |
--green-btn-hover | #06623F | Hover, pressed | |
--green-ink | #066B47 | Text on tints | |
--lime | #C8F169 | Highlight, scan line | |
--violet | #7B61FF | Protein, voice | |
--sun | #FFC940 | Carbs, stars | |
--coral | #FF7A59 | Fat, streaks | |
--sky | #3BA7FF | Integrations | |
--track | #EEF2F4 | Empty bars | |
--on-green | #E6FAEF | Body on action green | |
--on-dark-muted | #A9BDB6 | Body on ink |