Swiggy DESIGN.md

1. Visual Theme & Atmosphere

Swiggy's iOS app is appetite-driven commerce. The entire visual language exists to do one thing: make you hungry, then make ordering feel instantaneous. The canvas is white (#FFFFFF) in light mode and a near-black charcoal (#121212) in dark mode, but the canvas is almost never what you notice — what you notice is the food. Every screen is photo-forward: 16:10 restaurant hero images with a dark bottom scrim that holds an offer in bold white type ("60% OFF UPTO ₹120"), square dish thumbnails with a floating green "ADD" button, and a relentless rhythm of cards that pull the eye down the list.

The signature screen is the restaurant list (the "Swiggy" / Food home tab): a sticky location header ("Home ⌄" with the delivery address beneath it), an orange-iconed search pill ("Search 'biryani'"), a horizontally-scrolling filter chip row (Filter, Under 30 mins, Rating 4.0+, Pure Veg, Offers), and then the restaurant cards themselves. Each card is a complete decision unit: photo + offer overlay, restaurant name in heavy 18pt, a green rating chip (#48C479 with the score and a star), delivery-time and distance metadata, cuisine tags, and a dashed-divider footer carrying a free-delivery or coupon line in Swiggy Orange. The second signature surface is the restaurant menu / dish list — vegetarian/non-veg marks (the green-dot-in-a-square, red-triangle-in-a-square), dish name, price, a green in-card rating, a description, and a square food image with the bottom-overlapping "ADD" button + customisation "›" hint.

The color system is built around a single, unmistakable hero: Swiggy Orange #FC8019. It is warm, energetic, slightly tangy — engineered to read as "fresh food, fast." It is the primary CTA, the active tab, the search/location icons, the footer accent, and the brand wordmark plate. Supporting it: the rating green #48C479 (high ratings) and rating amber #DB7C38 (lower ratings) for the trust signal Swiggy users scan first; Instamart magenta-purple #982C61 for the grocery vertical; and Dineout red #D7385E for table-booking. Offers are rendered as gradient chips (orange→red) or bold scrim text. The palette is deliberately small and loud — Swiggy is not a calm app, it is a crave-and-tap app.

Typography is a clean grotesque. Swiggy's brand face is a proprietary/Proxima-Nova-lineage sans (the product historically uses ProximaNova and a Basis-Grotesque-style UI face); on iOS it falls back to SF Pro when a bundled face is unavailable. The hierarchy is heavy and confident: screen titles at 32pt/800, restaurant card names at 18pt/800, body at 16pt/400. Weight does the work — Swiggy leans on 700/800 to make food names and prices unmissable.

Key Characteristics:

• White canvas (#FFFFFF) light / near-black charcoal (#121212) dark — but the screen is carried by food photography, not chrome
• Single hero accent: Swiggy Orange #FC8019 — CTA, active tab, icons, footer accent, wordmark
• Photo-forward restaurant cards — 16:10 hero image + dark bottom scrim + bold white offer text
• Green rating chip (#48C479) / amber (#DB7C38) — the trust signal users scan first, always pill-shaped with a star
• Sticky location header — "Home ⌄" + delivery address, with avatar at trailing edge
• Veg / non-veg marks — green-dot-in-square / red-triangle-in-square, mandatory on every dish (Indian FSSAI convention)
• Floating "ADD" button — green-outline, bottom-overlapping the square dish image, with a customisation "›"
• Dashed-divider card footers — free-delivery / coupon line in Swiggy Orange
• Filter chip row — horizontally scrollable, 8pt-radius rounded rectangles, active state filled
• Multi-vertical tab bar — Swiggy (food), Instamart (grocery), Dineout (table booking), Cart
• Offer chips — orange→red gradient or white-on-scrim bold type ("60% OFF UPTO ₹120")
• Heavy grotesque type — screen titles 32pt/800, food names 18pt/800; weight carries hierarchy

2. Color Palette & Roles

Primary (Interactive)

• Swiggy Orange (#FC8019): The brand. Primary CTA background, active tab, search/location icons, footer accent links, wordmark plate, segmented-control selection.
• Swiggy Orange Pressed (#E06D0C): Pressed/active state for orange CTAs.
• Swiggy Orange Tint (#FC80191A): 10% orange wash behind selected chips, promo banners.

Rating & Trust

• Rating Green (#48C479): Rating chips for scores ≥ 4.0 — the single most-scanned element on a card.
• Rating Amber (#DB7C38): Rating chips for scores 3.0–3.9.
• Rating Red (#E84A4A): Rating chips for scores < 3.0 (rare; also error).

Vertical Accents

• Instamart Purple (#982C61): Instamart (grocery) tab, headers, CTAs within Instamart.
• Dineout Red (#D7385E): Dineout (table booking) tab and accents.
• Offer Gradient (#FC8019 → #D7385E): Discount chips, hero offer banners.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas.
• Surface Gray (#F4F4F6): Search pill fill, chip backgrounds, sectioned groups.
• Surface Pressed (#ECECEE): Pressed rows / chips.
• Divider (#E2E2E7): Hairline dividers; dashed variant on card footers.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#121212): Primary dark canvas — near-black, NOT pure black.
• Dark Surface 1 (#1C1C1E): Card backgrounds, search pill, sheets.
• Dark Surface 2 (#2A2A2A): Elevated chips, "ADD" button background.
• Dark Divider (#2C2C2E): Hairline dividers; dashed variant on footers.

Text

• Text Primary Light (#02060C): Primary text — near-black, slightly cool.
• Text Secondary Light (#686B78): Metadata, cuisine tags, distance.
• Text Tertiary Light (#93959F): Disabled, very-low-emphasis.
• Text Primary Dark (#F2F2F2): Primary text on dark.
• Text Secondary Dark (#A0A0A0): Metadata on dark.
• Text Tertiary Dark (#6A6A6A): Disabled on dark.

Roles Summary

Semantic

• Success Green (#48C479): Order-placed, rating, "Free delivery" confirmation.
• Error Red (#E84A4A): Payment failure, item-unavailable, destructive delete.
• Warning Amber (#DB7C38): "Few items left", surge-fee notice.
• Info Blue (#1A73E8): Informational links inside checkout.
• Veg Mark (#48C479): Vegetarian indicator square + dot.
• Non-Veg Mark (#E84A4A / classic #A1303A): Non-veg indicator square + triangle.

3. Typography Rules

Font Family

• Brand / Display: ProximaNova lineage — Swiggy's marketing & heavy headings face (geometric humanist sans).
• UI / Text: Basis Grotesque-style grotesque for body and metadata (neutral, highly legible at small sizes).
• iOS Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Web/Catalog Fallback: Plus Jakarta Sans (close geometric humanist match for documentation/preview)
• Numerals are tabular in price, rating, and delivery-time contexts so columns align.

Hierarchy

Principles

• Weight carries hierarchy: Swiggy concentrates emphasis at 700/800. Restaurant names, prices, and offers are heavy so the eye locks onto them while scrolling fast.
• UPPERCASE for action: Primary CTAs and the "ADD" button are uppercase with +0.2–0.3pt tracking — it signals "commit."
• Tabular numerals everywhere money/time appears: prices, ETAs, ratings align in columns.
• Display vs UI split: ProximaNova-lineage for headings and actions; the grotesque for dense metadata and descriptions.
• Dynamic Type: titles, body, descriptions scale; rating chips, tab labels, veg marks, and offer badges stay fixed (layout-critical).

4. Component Stylings

Buttons

Primary Button (Continue / Pay / Place Order)

• Shape: Rounded rectangle, 12pt corner radius
• Background: #FC8019 (Swiggy Orange)
• Text: #FFFFFF, ProximaNova 15pt weight 700, UPPERCASE, +0.2pt tracking
• Padding: 14pt vertical, 28pt horizontal (full-width in checkout/cart)
• Pressed: background #E06D0C + scale 0.98
• Disabled: background #E2E2E7 / #2A2A2A, text #93959F

Secondary / Outline Button (Repeat Last Order / Customise)

• Background: transparent
• Border: 1.5pt #FC8019
• Text: #FC8019, ProximaNova 13pt weight 700, UPPERCASE
• Corner radius: 10pt
• Padding: 11pt vertical, 20pt horizontal
• Pressed: background #FC80191A

ADD Button (the signature dish CTA)

• Background: #FFFFFF light / #2A2A2A dark
• Border: 1pt #48C479
• Text: #48C479 (or #1BA672 light), ProximaNova 13pt weight 800, UPPERCASE
• Corner radius: 10pt
• Padding: 7–9pt vertical, 22–26pt horizontal
• Shadow: rgba(0,0,0,0.5) 0 4px 12px
• Position: bottom-overlapping the dish image by -12pt, horizontally centered
• After tap: morphs into a [ − qty + ] stepper with the same border/colour

Text Button (View Full Menu / Show More)

• Text: #FC8019, ProximaNova 13pt weight 700, UPPERCASE
• No background, no border
• Pressed: opacity 0.6

Stepper (Quantity)

• Pill, 10pt radius, 1pt #48C479 border
• − and + glyphs in green, quantity centered in green 800
• Min height 32pt; matches the ADD button footprint exactly

Core Atoms

Rating Chip

• Pill, 6pt corner radius
• Background: #48C479 (≥4.0) / #DB7C38 (3.0–3.9) / #E84A4A (<3.0)
• Content: 10pt white star polygon + score in white, Basis Grotesque 12pt weight 700
• Padding: 2pt vertical, 6pt horizontal
• Always immediately left of the ETA / distance metadata

Veg / Non-Veg Mark

• 16pt square, 1.5pt border, 3pt corner radius
• Veg: green border #48C479, centered 7pt green filled dot
• Non-veg: red border #E84A4A, centered upward triangle
• Mandatory leading element on every dish row

Offer Badge / Chip

• On photo: white ProximaNova 16pt/800 over the scrim with an 11pt/600 sub ("UPTO ₹120")
• Standalone chip: gradient #FC8019 → #D7385E, 8pt radius, white 12pt/800 UPPERCASE
• Swiggy One badge: 1pt orange border, transparent, #FC8019 11pt/800

Filter Chip

• Rounded rectangle, 8pt corner radius
• Default: #FFFFFF/#1C1C1E fill, 1pt #E2E2E7/#2C2C2E border, text #02060C/#F2F2F2 12pt/600
• Active: #ECECEE/#2A2A2A fill, border #686B78, optional leading icon
• Height: 32pt; horizontally scrollable row, 8pt gap

Card Footer (Free-Delivery Strip)

• Separated from card body by a 1pt dashed divider (#E2E2E7/#2C2C2E)
• Leading 13pt clock/percent icon in #FC8019
• Text: #FC8019, 12pt weight 700 — "Free delivery on orders above ₹199"

Navigation

Sticky Location Header

• Leading: 18pt orange map-pin #FC8019
• Title: "Home ⌄" — ProximaNova 17pt/800, chevron 14pt
• Sub-line: full delivery address, 12pt #686B78, indented to align under title
• Trailing: 34pt circular profile avatar
• Collapses into a compact bar on scroll; search pill can pin under it

Search Pill

• Height: 46pt
• Background: #F4F4F6 / #1C1C1E
• Corner radius: 14pt
• Leading 18pt orange magnifyingglass; trailing 18pt orange mic
• Placeholder: rotating ("Search 'biryani'", "Search 'cake'") #686B78/#A0A0A0 14pt/500

Bottom Tab Bar

• Height: 70pt incl. safe area
• Background: rgba(255,255,255,0.94) / rgba(18,18,18,0.94) with blur, 0.5pt top divider
• Tabs (4): Swiggy (food/home), Instamart (grocery), Dineout (table booking), Cart
• Icon 22pt; active = filled glyph in #FC8019; inactive = stroke #888
• Labels always shown, 10pt weight 600
• Cart shows a count badge (orange dot, white number)

Top Nav (Restaurant detail)

• Transparent over the hero image, gradient-scrim backed
• Leading back chevron (white over image, #02060C once scrolled)
• Trailing: search, share, favourite (heart)
• Sticky category strip appears once the menu starts scrolling

Input Fields

Search Field (active)

• Same 46pt pill; on focus, border becomes 1pt #FC8019, cursor orange
• Recent searches and trending dishes shown below as tappable rows

Address / Form Field

• Height: 52pt
• Background: #F4F4F6 / #1C1C1E
• Corner radius: 12pt
• Label floats to 11pt #686B78 on focus; text #02060C/#F2F2F2 15pt
• Focus: 1pt #FC8019 border
• Error: 1pt #E84A4A border + 12pt red helper text

Coupon Field

• Inline within cart, dashed #686B78 border, 8pt radius
• "APPLY" trailing text button in #FC8019 13pt/800 UPPERCASE

Distinctive Components

Photo-Forward Restaurant Card

• Full-bleed 16:10 image, 16pt corner radius
• Bottom scrim: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%)
• Offer text bottom-left in white ProximaNova 16pt/800 + 11pt/600 sub
• Top-left optional "AD" flag (rgba(0,0,0,0.4) pill, white 10pt/700)
• Top-right favourite heart in a 32pt rgba(0,0,0,0.4) circle
• Below image: name (18pt/800) → rating chip + " · " + ETA (14pt/600) → cuisine tags (14pt #686B78) → locality · distance → dashed footer

Dish Row (Menu Item)

• Leading veg/non-veg mark
• Name 15pt/700 → price 14pt/600 → in-card green rating "4.5 (1.2K)" → 2-line description 12pt #686B78
• Trailing 110pt square image with the bottom-overlapping ADD button / stepper
• "More Details ›" link if customisable

Offer / Coupon Sheet

• Bottom sheet, 20pt top corners
• Each coupon: dashed-bordered card, code in mono-ish bold, savings line in #48C479, "APPLY" orange text button

Cart Bar (floating)

• Pinned above the tab bar when items exist
• Orange #FC8019 rounded bar: "N items | ₹XXX" left, "VIEW CART ›" right, white ProximaNova 14pt/800
• Slides up with spring when first item added

Live Order Tracking

• Map with the delivery partner's animated pin (orange)
• Stepped progress: Order Placed → Preparing → On the way → Delivered
• ETA in heavy ProximaNova; partner name + call button row

Instamart Switch

• Tapping Instamart tab re-themes accents to #982C61 (purple) while keeping the same layout grammar — proves the system flexes per vertical

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
• Card vertical gap: 22pt (cards breathe; food needs air)
• Screen horizontal inset: 16pt
• Intra-card content gaps: 4–6pt (tight, scannable)
• Section header top margin: 16pt

Grid & Container

• iPhone: single-column card list, 16pt insets, full-width photos
• Horizontal carousels (top chains, what's on your mind): 8–12pt gap, peek of next item
• iPad: 2-column restaurant grid, max content width 760pt centered, 24pt insets
• Dish image is a fixed 110×110pt square; ADD button overlaps by -12pt

Whitespace Philosophy

• Photos earn the space: the largest element on any card is the food image — chrome is minimal so imagery dominates
• 22pt between cards: deliberate breathing room so each restaurant is a discrete decision
• Dashed dividers, not boxes: footers and dish rows are separated by dashed hairlines, never heavy borders or nested cards
• One loud accent: only Swiggy Orange (and the rating green) carry colour weight; everything else is neutral so the eye goes to action + trust

Border Radius Scale

• Square (0pt): full-bleed hero edges, dividers
• Subtle (6pt): rating chips, small badges
• Compact (8pt): filter chips, offer chips
• Standard (10–12pt): buttons, search pill, form fields, ADD button
• Card (16pt): restaurant photos, dish thumbnails
• Sheet (20pt): bottom sheets (offers, customise, address)
• Pill (500pt): qty steppers, toggle switches
• Circle (50%): avatars, favourite-heart background

6. Depth & Elevation

Swiggy is mostly flat; elevation is reserved for "this floats above the list and demands a tap."

Shadow Philosophy: Cards themselves are flat (a 1pt divider or the photo edge defines them). Shadow appears only on the ADD button, the floating cart bar, and bottom sheets — each is a "tap me / acknowledge me" surface. The ADD button's shadow is what makes it feel like it's hovering over the food, ready to be pressed. On dark mode, shadows deepen (0.5 opacity) and bottom sheets gain a 1pt #2C2C2E top border as a secondary elevation cue.

Motion

• ADD → Stepper morph: ADD button cross-fades to [ − 1 + ] over 180ms ease-out; soft haptic on tap
• Cart bar reveal: slides up from above the tab bar, 280ms spring (damping 0.8) when the first item is added; the price counter rolls
• Card tap → restaurant: hero image shared-element zoom into the detail screen, 320ms ease-out
• Filter chip select: fill colour cross-fades 150ms; list re-sorts with a 200ms fade-through
• Pull-to-refresh: orange Swiggy spinner; haptic tick on release
• Live tracking: delivery pin animates along the route at a steady tween; step ticks advance with a soft pop
• Bottom sheet: slides up 300ms ease-out; dim fades in parallel; drag-to-dismiss with rubber-banding
• Scrim/offer text: appears with the image (no separate animation) — feels instantaneous
• Haptics: soft impact on ADD, medium on "Place Order" success, light tick on chip toggle and pull-to-refresh

7. Do's and Don'ts

Do

• Use Swiggy Orange (#FC8019) as the single hero accent — CTA, active tab, icons, footer
• Lead every restaurant card with a large 16:10 photo + dark bottom scrim + bold white offer text
• Put a green/amber rating chip (#48C479 / #DB7C38) immediately before the ETA — it's the first thing users scan
• Show veg/non-veg marks on every dish (green-dot-square / red-triangle-square)
• Make the dish "ADD" button green-outline, bottom-overlapping the square image, with a shadow so it floats
• Use uppercase + tracking on primary CTAs and ADD
• Separate card footers and dish rows with dashed hairlines, never nested boxes
• Float an orange cart bar above the tab bar when items exist
• Use tabular numerals for prices, ETAs, and ratings
• Re-theme accents per vertical (Instamart purple #982C61, Dineout red #D7385E) while keeping the same layout grammar
• Keep dark mode near-black (#121212) with full-saturation food photography

Don't

• Don't introduce a second loud brand colour competing with Swiggy Orange
• Don't shrink food photography or crop it square on list cards — 16:10 hero is the standard
• Don't hide or restyle the rating chip — it must be the green/amber pill with a star, left of ETA
• Don't omit veg/non-veg marks on dishes — it's a hard requirement in this market
• Don't make the ADD button a plain text link — it's a green-outline, shadowed, overlapping control
• Don't box every section in heavy cards — Swiggy uses dashed dividers and whitespace
• Don't use pure black (#000000) for the dark canvas — #121212 is correct
• Don't desaturate or dim food imagery in dark mode — UI chrome recedes, food does not
• Don't animate aggressively — motion is fast and functional (150–320ms), tied to the order flow
• Don't bury the cart — it floats persistently once non-empty
• Don't use sentence-case timid CTAs — Swiggy commits with uppercase action verbs

8. Responsive Behavior

Device Sizes

Dynamic Type

• Screen titles, section headers, body, descriptions: full scale
• Rating chips, offer badges, tab labels, veg marks, qty steppers: FIXED (layout-critical)
• Prices scale one step then truncate gracefully

Orientation

• iPhone: portrait-locked for the order flow (standard for the category)
• iPad: supports landscape with a 2–3 column grid + sticky cart panel

Touch Targets

• ADD button / stepper: ≥ 32pt tall, 44pt hit area
• Filter chip: 32pt tall, full-chip tap
• Tab bar icon: 22pt glyph, 44pt+ hit
• Rating chip: not tappable (informational)
• Restaurant card: full-card tap target

Safe Area Handling

• Top: location header + Dynamic Island respected; hero image bleeds under status bar with scrim
• Bottom: floating cart bar sits above the tab bar, both above the home indicator
• Keyboard: address/coupon forms scroll above keyboard; sticky CTA pins above it

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #121212
• Surface (dark card): #1C1C1E
• Divider: #E2E2E7 light / #2C2C2E dark (dashed on footers)
• Text primary: #02060C light / #F2F2F2 dark
• Text secondary: #686B78 light / #A0A0A0 dark
• Brand / CTA: Swiggy Orange #FC8019 (pressed #E06D0C)
• Rating green: #48C479 · Rating amber: #DB7C38
• Instamart purple: #982C61 · Dineout red: #D7385E
• Offer gradient: #FC8019 → #D7385E
• Veg mark: #48C479 · Non-veg mark: #E84A4A

Example Component Prompts

• "Build the Swiggy restaurant card in SwiftUI: full-bleed 16:10 image with 16pt corner radius. Overlay a bottom scrim linear-gradient(transparent 45%, rgba(0,0,0,0.78)). Bottom-left offer text in ProximaNova 16pt weight 800 white ('60% OFF') with an 11pt weight 600 sub ('UPTO ₹120'). Top-left 'AD' pill (rgba(0,0,0,0.4), white 10pt/700). Top-right favourite heart in a 32pt rgba(0,0,0,0.4) circle. Below: restaurant name ProximaNova 18pt/800 #F2F2F2; a row with a green #48C479 rating chip (white star + '4.4', 6pt radius, 12pt/700) then ' · ' then '30–35 mins' 14pt/600; cuisine tags 14pt #A0A0A0; locality · distance; then a 1pt dashed #2C2C2E divider and a footer line in #FC8019 12pt/700 with a leading clock icon."

• "Create the Swiggy dish row: leading 16pt veg mark (1.5pt #48C479 square, centered 7pt green dot). Dish name 15pt/700 #F2F2F2; '₹289' 14pt/600; an inline green rating '4.5 (1.2K)' with a star; a 2-line description 12pt #A0A0A0. Trailing 110×110pt food image, 14pt radius, with a white/#2A2A2A 'ADD' button (1pt #48C479 border, #48C479 text, ProximaNova 13pt/800 UPPERCASE, 10pt radius, rgba(0,0,0,0.5) 0 4px 12px shadow) overlapping the image bottom by -12pt, horizontally centered. On tap, morph ADD into a [ − 1 + ] stepper with the same border."

• "Render the Swiggy sticky location header: leading 18pt orange #FC8019 map-pin; 'Home' in ProximaNova 17pt/800 #F2F2F2 with a 14pt chevron-down; sub-line full address 12pt #A0A0A0 indented under the title; trailing 34pt gradient circular avatar (#FC8019 → #D7385E). Below it a 46pt search pill, #1C1C1E fill, 14pt radius, leading orange magnifyingglass + trailing orange mic, placeholder 'Search "biryani"' 14pt/500 #A0A0A0."

• "Build the Swiggy bottom tab bar: 4 tabs — Swiggy (house, food/home), Instamart (grid), Dineout (paper-plane), Cart (cart with count badge). 22pt icons; active = filled glyph in #FC8019; inactive = stroke #888; labels always shown 10pt/600. Background rgba(18,18,18,0.94) with blur and a 0.5pt #2C2C2E top divider."

• "Create the Swiggy floating cart bar: pinned above the tab bar when items exist. Orange #FC8019 rounded bar (12pt radius), left 'N items | ₹XXX' and right 'VIEW CART ›' in white ProximaNova 14pt/800. Slides up with a 280ms spring (damping 0.8) when the first item is added; the price counter rolls."

• "Render the Swiggy filter chip row: horizontally scrollable, 8pt gap, 16pt insets. Each chip 32pt tall, 8pt corner radius. Default: #1C1C1E fill, 1pt #2C2C2E border, text #F2F2F2 12pt/600. Active: #2A2A2A fill, #686B78 border, optional leading 12pt icon. First chip 'Filter' has a leading sliders icon."

Iteration Guide

1. Swiggy Orange (#FC8019) is the only loud accent — CTA, active tab, icons, footer; pressed #E06D0C
2. Every restaurant card is photo-first: 16:10 image + dark bottom scrim + bold white offer text
3. The green/amber rating chip (#48C479 / #DB7C38) sits left of the ETA — the most-scanned element
4. Veg/non-veg marks are mandatory on dishes (green-dot-square / red-triangle-square)
5. The dish ADD button is green-outline, shadowed, overlapping the square image bottom by -12pt; morphs to a stepper
6. Footers and dish rows use dashed hairlines, never nested boxes
7. A floating orange cart bar appears above the tab bar once items exist
8. Primary CTAs and ADD are UPPERCASE with +0.2–0.3pt tracking
9. Dark canvas is #121212 (near-black); food photography stays full-saturation
10. Verticals re-theme the accent (Instamart #982C61, Dineout #D7385E) but keep the same card/list grammar