Canvas
App background
#F5F7FB
Visual system
Grocery tech, not a cheap marketplace
This system is designed for a product intelligence app: fresh without drowning in green, premium without feeling sterile, and calm enough to make price comparison feel fast.
Savings-forward
Price wins and smart decisions should always feel measurable.
Search-first
Intent comes first. Navigation and surfaces should clear the way for it.
Premium clarity
High contrast, soft shadows, and fewer noisy patterns keep the UI sharp.
Color palette
Fresh, modern, balanced
Teal carries the brand, but ink, sky, amber, and violet do the heavy lifting so the app feels intelligent and premium instead of “green marketplace template”.
Ink
Primary text
#0F172A
Teal
Primary action
#0F9D87
Sky
Intelligence / insight
#0EA5E9
Amber
Savings / emphasis
#F59E0B
Violet
Premium accent
#6D5EFC
Typography
Manrope for headlines, Inter for flow
Headings should feel editorial and precise. Body copy should stay invisible enough to let the product thinking shine.
Display
Search once. Compare smarter.
Section heading
Weekly savings trend
Body
Use steady, readable body text for explanations and decision support. It should never compete with the price, savings, or core call to action.
Icon style
Thin, geometric, calm
Icons should feel slightly softened and product-grade, with consistent stroke weight, simple geometry, and enough breathing room to avoid a cramped utility look.
Search
Home
Cart
Account
Card system
Soft depth, strong hierarchy
Cards should feel like quiet product canvases: rounded, elevated, and spacious enough to hold price intelligence without slipping into marketplace clutter.
Cheapest nearbySave $1.20
Product intelligence card
Hero price first, comparison cues second, supporting metadata third.
Quiet analytics
Dashboard insight card
Use subtle gradients and low-contrast chrome so the numbers still feel human.
Actions should feel confident, not noisy
Primary actions use dark ink to feel decisive. Secondary actions stay bright and crisp. Brand teal is reserved for moments where the app is helping the user commit.
Primary
High-confidence actions
Use for “Compare now”, “Checkout”, and the clearest forward path.
Secondary
Framing actions
Use for supporting decisions that still deserve prominence without shouting.
Accent
Form and commit actions
Use on in-flow confirmations where the brand teal should feel fresh, not loud.