Taco Bell DESIGN.md

1. Visual Theme & Atmosphere

Taco Bell's iOS app is a neon, dark-first ordering playground. Unlike most QSR apps that sit on white, Taco Bell commits to a purple-tinted near-black canvas (#0E0A14) — the dark isn't neutral gray, it carries a violet bias so the brand purple feels native rather than painted on top. Over that canvas runs the signature Taco Bell Purple → Electric Magenta gradient (#702082 → #C72BC8): it's the primary CTA, the active customizer step, the box preview backdrop, and the brand bell plate. The energy color is Hot Sauce Yellow #FFC700 — used for prices, reward chips, and eyebrows — with Fire Orange #FF6A1A and Hot Pink #E928A0 as occasional heat accents. The mood is bold, playful, slightly rebellious — "Live Más" rendered in pixels.

The signature screen is the build-your-box customizer. Taco Bell's product genius is configurability — the Cravings Box, the build-your-own Crunchwrap, "make it a combo," "make it Supreme/Fresco," "add Diablo sauce." The customizer screen is the heart of the app: an eyebrow + builder title ("BUILD YOUR BOX" / "Cravings Box"), a gradient box-preview hero with a stylized taco illustration, a glow, the box name + item count, and a yellow price; a horizontally-scrolling numbered step pill row (Main ✓ → Side ② → Drink ③ → Sweet ④) where the active step glows with the purple-magenta gradient and completed steps go green; then the option rows themselves — a food thumbnail, name, description, optional "+$1.00" upcharge, and a control: a magenta radio for single-select, or a magenta-outline stepper for quantities. A persistent bottom CTA bar shows the running box total in yellow and a gradient "Add to Order" button. The second signature surface is the Cravings menu — tiles with a purple-gradient food image, name, description, a yellow price, and a gradient "Add" pill that opens the same customizer.

The color system is intentionally loud and gradient-driven. There is no flat single brand color — the purple-to-magenta gradient is the brand on screen, and yellow is the spark that draws the eye to value (price, reward, "free"). Everything else is a tightly-controlled neutral on the violet-black so the neon pops. The aesthetic rule: gradients for action and brand presence, yellow for energy/value, deep violet-black for the stage.

Typography is a clean, slightly techy geometric sans (Taco Bell's brand face lineage); on iOS it falls back to SF Pro, and for documentation/catalog Sora is the closest free analog. Hierarchy is heavy and confident: screen titles 32pt/800, builder titles 26pt/800, option names 15pt/600, body 16pt/400. Weight (700/800) plus the gradient and yellow carry hierarchy.

Key Characteristics:

• Dark-first, purple-tinted near-black canvas #0E0A14 — violet bias so the brand feels native, never neutral gray
• Purple → Magenta gradient #702082 → #C72BC8 is the brand on screen — primary CTA, active step, box backdrop, bell plate
• Hot Sauce Yellow #FFC700 — the energy/value highlight: prices, reward chips, eyebrows, "free"
• Build-your-box customizer — the signature flow: gradient box preview + numbered step pills + radio/stepper option rows
• Numbered step pills — Main / Side / Drink / Sweet; active glows gradient, done turns green #36C275
• Box-preview hero — gradient panel with a stylized taco, glow blooms, name + item count + yellow price
• Persistent bottom CTA bar — running box total in yellow + a gradient "Add to Order" button
• Cravings menu tiles — purple-gradient food image, name, yellow price, gradient "Add" pill → opens customizer
• Radio + stepper controls — magenta-tinted single-select radios and magenta-outline quantity steppers
• Neon accents — Fire Orange #FF6A1A, Hot Pink #E928A0 for heat/limited-time energy
• Heavy techy-geometric type — screen titles 32pt/800; gradient + yellow + weight carry hierarchy
• Rounded but punchy — 14pt CTA radius, 20pt box hero, pill chips; bold not soft

2. Color Palette & Roles

Primary (Interactive — Gradient)

• Brand Gradient: linear-gradient(120deg, #702082 0%, #C72BC8 100%) — primary CTA, active customizer step, box-preview backdrop, "Add" pills, brand bell. This gradient is the brand on screen.
• Taco Bell Purple (#702082): Solid fallback / gradient start; flat purple surfaces and outlines.
• Purple Bright (#8A2BA0): Hover/secondary purple, mid-gradient.
• Electric Magenta (#C72BC8): Gradient end; the single-select radio fill, stepper outline, active-tab tint, focus ring.
• Magenta Pressed (#A8239F): Pressed state for magenta controls.

Energy / Value

• Hot Sauce Yellow (#FFC700): Prices, reward chips, eyebrows, "FREE", progress highlights. Text on yellow is #2A1530 (deep plum-black), never white.
• Fire Orange (#FF6A1A): Spicy/heat tags, limited-time flares.
• Hot Pink (#E928A0): Promo accents, "new" energy.

Canvas & Surfaces (Dark — primary)

• Purple-Black Canvas (#0E0A14): The primary canvas — near-black with a violet bias.
• Dark Surface 1 (#1A1322): Cards, step pills, customizer rows base.
• Dark Surface 2 (#261B32): Elevated tiles, Cravings cards, badge fills.
• Dark Divider (#34273F): Hairline dividers between option rows and sections.

Canvas & Surfaces (Light — secondary)

Taco Bell is dark-first, but a light theme keeps the same gradient brand on a warm-white stage.

• Canvas Light (#FFFFFF): Light canvas.
• Surface Light 1 (#F6F2F8): Cards, step pills (violet-tinted off-white).
• Surface Light 2 (#EDE6F1): Elevated tiles.
• Divider Light (#E3D9EA): Hairlines.

Text

• Text Primary Dark (#F4EFF7): Primary text on dark — a violet-tinted near-white.
• Text Secondary Dark (#A99BB6): Descriptions, metadata, step labels.
• Text Tertiary Dark (#6E6079): Disabled, low-emphasis.
• Text Primary Light (#1F1626): Primary text on light.
• Text Secondary Light (#6E6079): Metadata on light.
• Text On Yellow (#2A1530): Mandatory text/icon over #FFC700.
• Text On Gradient (#FFFFFF): Text/icon over the purple-magenta gradient.

Roles Summary

Semantic

• Success Green (#36C275): Completed customizer step, order placed, "saved".
• Error Red (#FF4D6D): Item unavailable, payment failure, destructive delete.
• Warning Orange (#FF6A1A): "Few left", "ends tonight" (shares the fire-orange accent).
• Info Magenta (#C72BC8): Informational links, hints.
• Reward Yellow (#FFC700): Reward chips, points, "FREE" flags (the value highlight).

3. Typography Rules

Font Family

• Brand / All UI: Taco Bell's brand sans lineage — a clean, slightly techy geometric humanist (used across the app's headings and UI). Bundled in the official app.
• iOS Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Web/Catalog Fallback: Sora (closest free geometric sans with the same confident weight range)
• Numerals are tabular in prices, totals, step counts, and timers so values align.

Hierarchy

Principles

• Weight + gradient + yellow carry hierarchy: emphasis lives at 700/800, in the purple-magenta gradient (action), and in Hot Sauce Yellow (value). The builder title and the yellow price are the two anchors of the customizer.
• Eyebrows are yellow and UPPERCASE: every builder/section gets a 12pt/700 +1pt-tracked yellow eyebrow — it's a signature Taco Bell editorial tic.
• Tabular numerals for money/steps: prices, the running box total, "STEP 2 OF 4", and timers all align.
• Punchy, not soft: heavy weights + tight tracking on titles keep the tone bold and a little rebellious.
• Dynamic Type: titles, body, option copy scale; step pills, eyebrows, chips/badges, tab labels stay fixed (layout-critical).

4. Component Stylings

Buttons

Primary Button (Add to Order / Continue / Checkout)

• Shape: Rounded rectangle, 14pt corner radius
• Background: linear-gradient(120deg, #702082 0%, #C72BC8 100%)
• Text: #FFFFFF, Brand Sans 15pt weight 800
• Padding: 14–15pt vertical, 28pt horizontal (full-width in the bottom CTA bar)
• Pressed: filter: brightness(0.95) + scale 0.98
• Disabled: #261B32 fill, text #6E6079

Value Button (Apply Reward / Redeem)

• Background: #FFC700 (Hot Sauce Yellow)
• Text: #2A1530 (deep plum-black — never white), Brand Sans 15pt weight 800
• Corner radius: 14pt
• Pressed: filter: brightness(0.95)

Outline Button (Customize / Edit)

• Background: transparent
• Border: 1.5pt #C72BC8 (magenta)
• Text: #C72BC8, Brand Sans 14pt weight 700
• Corner radius: 12pt
• Padding: 12pt vertical, 22pt horizontal
• Pressed: background rgba(199,43,200,0.12)

Text Button (Skip this step / See all)

• Text: #FFC700 (yellow), Brand Sans 14pt weight 800
• No background, no border
• Pressed: opacity 0.6

Add Pill (Cravings tile)

• Pill, 999pt radius, brand gradient fill
• "Add" / "ADD" in #FFFFFF, Brand Sans 12pt weight 800 UPPERCASE +0.3pt
• Padding: 7pt vertical, 16pt horizontal
• Tapping opens the item customizer

Core Atoms

Step Pill

• Pill, 999pt radius, 30pt tall
• Leading 16pt number badge (circle) + label
• Default: #1A1322 fill, 1pt #34273F border, text/badge #A99BB6
• Active: brand gradient fill, white text, badge rgba(255,255,255,0.25)
• Done: 1pt #36C275 border, text #F4EFF7, badge #36C275 with a ✓ in #06210F
• Horizontally scrollable row, 8pt gap

Single-Select Radio

• 24pt circle, 2pt border
• Off: #34273F border, transparent
• On: #C72BC8 border + a 16pt inset #C72BC8 filled dot
• Tap target ≥ 44pt; whole option row is tappable

Quantity Stepper

• − / + in 26pt circles, 1.5pt #C72BC8 outline, magenta glyphs
• Quantity centered, Brand Sans 14pt/800 #F4EFF7, tabular
• Used for add-on quantities (extra sauce, sides)

Reward / Status Chip

• Pill, 999pt radius
• "STEP 2 OF 4" / "FREE REWARD": brand gradient or yellow #FFC700 (text #2A1530)
• "DONE": green #36C275 (text #06210F); "CANTINA": magenta-outline transparent
• Brand Sans 12pt weight 800 UPPERCASE +0.3pt

Eyebrow

• Brand Sans 12pt weight 700, UPPERCASE, +1pt tracking
• Color #FFC700 (yellow) above builder/section titles

Navigation

Builder Header

• Yellow eyebrow ("BUILD YOUR BOX")
• Builder title — Brand Sans 26pt/800 #F4EFF7
• Sub-line — 13pt #A99BB6
• No heavy chrome; the box-preview hero sits directly beneath

Bottom Tab Bar

• Height: 70pt incl. safe area
• Background: rgba(14,10,20,0.96) with blur, 0.5pt top #34273F divider
• Tabs (5): Home, Menu, Rewards, Bag, Account
• Icon 22pt; active = filled glyph in #C72BC8 (magenta); inactive = stroke #7A6C86
• Labels always shown, 10pt/700
• Bag shows a count badge (gradient dot, white number)

Top Nav (Menu / Item detail)

• Transparent or #0E0A14 solid; leading back chevron (circular icon button)
• Center: screen title, Brand Sans 18pt/800
• Trailing: search / bag as icon buttons
• Sticky category strip on the menu once scrolled

Persistent Bottom CTA Bar

• rgba(14,10,20,0.96) background, 1pt #34273F top divider
• Left: "Box total" eyebrow + amount (#F4EFF7 19pt/800, the amount sometimes yellow in cart)
• Right: full-width-flexed gradient "Add to Order" button
• Always visible during a build; total updates live

Input Fields

Search Field

• Height: 48pt
• Background: #1A1322 / #F6F2F8
• Corner radius: 14pt
• Leading 18pt magnifyingglass #A99BB6
• Placeholder: "Search the menu" #A99BB6 15pt
• Focus: 1.5pt #C72BC8 border + faint magenta glow

Form Field (address / payment)

• Height: 52pt
• Background: #1A1322 / #F6F2F8
• Corner radius: 12pt
• Floating label 11pt #A99BB6 on focus; text #F4EFF7 15pt
• Focus: 1.5pt #C72BC8 border
• Error: 1.5pt #FF4D6D border + 12pt red helper text

Promo Code Field

• Inline, dashed #C72BC8 border, 12pt radius
• "APPLY" trailing text button in #FFC700 13pt/800 UPPERCASE

Distinctive Components

Box-Preview Hero

• 20pt rounded panel, brand-purple-gradient background with radial magenta + yellow glow blooms
• Center: stylized food/taco illustration (or product photo)
• Bottom-left: box name (Brand Sans 13pt/800 white) + item count sub (12pt yellow)
• Bottom-right: box price in #FFC700 20pt/800
• Updates as the user completes steps (illustration/contents morph)

Numbered Step Pill Row

• Horizontally-scrollable pills representing the build sequence
• Exactly one active (gradient), zero-or-more done (green), the rest default
• Tapping a pill jumps to that step (if reachable)

Customizer Option Row

• 46pt rounded food thumbnail + name (15pt/600) + description (12pt secondary) + optional "+$1.00" upcharge (13pt/700 secondary) + control (radio or stepper)
• 1pt #34273F divider between rows
• Selecting advances the active step pill and updates the running total + box hero

Cravings Menu Tile

• 16pt rounded card on #261B32
• Leading 72pt purple-gradient food image
• Body: name (15pt/800), description (12pt secondary), then a footer row: yellow price + trailing gradient "Add" pill
• "Add" opens the customizer for that item

Make-It-A-Combo Upsell Sheet

• Bottom sheet, 28pt top corners
• "Make it a combo?" gradient header, +$X yellow delta, side/drink quick-pick
• "Add combo" gradient CTA / "No thanks" text button

Rewards / Cantina Card

• Gradient or dark card with points balance in #FFC700, progress toward next reward
• "FREE REWARD" yellow chip when redeemable

Sauce Picker

• A signature Taco Bell touch — Mild / Hot / Fire / Diablo chips with heat-colored borders (#FFC700 → #FF6A1A → #FF4D6D), multi-select with the magenta stepper

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
• Option row vertical padding: 14pt
• Screen horizontal inset: 18pt
• Intra-card content gaps: 2–10pt
• Section/builder header top margin: 16pt

Grid & Container

• iPhone: single-column build flow; step pills in a scrollable row; option rows full-width
• Box-preview hero spans content width at ~150pt tall
• Cravings menu: single-column tiles (or 2-up on larger devices)
• iPad: 2-column (menu list + live box preview/customizer panel), max content 760pt centered, 24pt insets
• The bottom CTA bar is pinned and full-width

Whitespace Philosophy

• The stage is dark and roomy: the violet-black canvas + generous gaps let the neon gradient and yellow pop
• The box hero owns the top of the customizer: it's the largest, most colorful block — it shows what you're building
• Option rows breathe: 14pt vertical padding + thin dividers, never boxed-in, so the list scans fast
• Gradient = action, yellow = value, violet-black = stage: a disciplined three-role color logic keeps the loud palette coherent

Border Radius Scale

• Square (0pt): dividers, full-bleed edges
• Subtle (6pt): tiny tags
• Compact (10pt): inline chips, small controls
• Standard (12–14pt): buttons, search/form fields, Cravings cards
• Hero (20pt): box-preview panel
• Sheet (28pt): bottom sheets (combo upsell, sauce picker)
• Pill (999pt): step pills, "Add" pills, reward/status chips, steppers
• Circle (50%): radios, stepper buttons, avatars

6. Depth & Elevation

Taco Bell uses glow more than shadow — on a dark stage, a colored bloom reads as "this is the live/active thing."

Shadow Philosophy: Cards are flat (a divider/border defines them). The expressive depth cue is glow: the box-preview hero blooms purple-magenta and yellow from its corners; the active step pill and a focused field carry a faint magenta halo. Drop shadow is reserved for the pinned CTA bar and bottom sheets so they detach from the scrolling stage. On the (secondary) light theme, glows soften and a normal soft shadow replaces them on the hero and sheets.

Motion

• Add to Order: the gradient CTA flashes brighter (brightness 1.0→1.12→1.0, 220ms), the box total rolls up, a soft haptic fires; the item animates into the Bag tab with a magenta trail
• Step advance: when an option is chosen, the completed step pill cross-fades default → gradient → green over 250ms; the row's radio fills with a 150ms scale-in; the box-preview contents morph (200ms ease-out)
• Box-preview build: as steps complete, the illustration/photo updates with a quick crossfade + a subtle glow pulse
• Cravings "Add" → customizer: shared-element gradient image zoom into the customizer, 300ms ease-out
• Combo upsell sheet: slides up 300ms ease-out from the CTA; dim fades; drag-to-dismiss with rubber-banding
• Sauce pick: chip border ignites (color sweep) on select; multi-select stepper bumps with a soft tick
• Reward redeem: yellow chip flips, a confetti-free but bright scale bounce (1.05) + success haptic
• Pull-to-refresh: gradient bell spinner; haptic tick on release
• Haptics: soft impact on add-to-order, light tick on step/radio/sauce select, success notification on order placed / reward redeemed

7. Do's and Don'ts

Do

• Use the purple → magenta gradient (#702082 → #C72BC8) for primary CTAs, the active step, the box hero — it's the brand on screen
• Keep the canvas a purple-tinted near-black (#0E0A14) — dark-first, never neutral gray
• Use Hot Sauce Yellow (#FFC700) for prices, reward chips, and UPPERCASE eyebrows — text on it is #2A1530, never white
• Make the build-your-box customizer the centerpiece: gradient box hero + numbered step pills + radio/stepper rows
• Show exactly one active step (gradient), mark completed steps green (#36C275)
• Keep a persistent bottom CTA bar with a live-updating total + gradient "Add to Order"
• Use glow (radial blooms) on the box hero and active step instead of heavy shadows
• Put a yellow eyebrow above builder/section titles, UPPERCASE with +1pt tracking
• Use magenta radios for single-select and magenta-outline steppers for quantities
• Roll the box total and morph the box-preview contents as steps complete
• Keep food imagery vivid against the neon chrome; use tabular numerals for money/steps

Don't

• Don't use a flat single brand color where the gradient belongs — the purple→magenta gradient is the identity
• Don't put the app on white by default — it's dark-first with a violet bias
• Don't use a neutral gray dark canvas — #0E0A14 carries purple
• Don't put white text on yellow — #2A1530 deep plum-black only
• Don't bury the box-preview hero or the running total — they anchor the build
• Don't show multiple active steps — exactly one gradient-active at a time
• Don't replace the glow language with flat Material shadows on the hero/active elements
• Don't desaturate food imagery — the neon stage stays vivid
• Don't drop the yellow eyebrows — they're a signature editorial tic
• Don't animate sluggishly — motion is punchy and quick (150–300ms), tied to building/ordering
• Don't use timid sentence-case chips — step/reward chips are UPPERCASE and bold

8. Responsive Behavior

Device Sizes

Dynamic Type

• Screen titles, builder titles, section headers, body, option copy: full scale
• Step pills, eyebrows, chips/badges, tab labels, the box-hero price: FIXED (layout-critical)
• Prices/totals scale one step then truncate gracefully

Orientation

• iPhone: portrait-locked for the build flow (category standard)
• iPad: supports landscape with a 2-column build + sticky summary

Touch Targets

• Step pill: ≥ 30pt tall, full-pill tap, 44pt hit
• Radio / stepper button: visual ~24–26pt, 44pt hit area
• Gradient CTA: ≥ 48pt tall
• Tab bar icon: 22pt glyph, 44pt+ hit
• Option row: full-row tap toggles the radio

Safe Area Handling

• Top: builder header + Dynamic Island respected
• Bottom: the persistent CTA bar sits above the tab bar, both above the home indicator
• Keyboard: address/promo forms scroll above keyboard; combo/sauce sheets position above it

9. Agent Prompt Guide

Quick Color Reference

• Canvas (dark, primary): #0E0A14
• Surface 1 / 2: #1A1322 / #261B32
• Divider: #34273F
• Text primary: #F4EFF7 (dark) / #1F1626 (light)
• Text secondary: #A99BB6 (dark) / #6E6079 (light)
• Brand gradient: linear-gradient(120deg, #702082 0%, #C72BC8 100%)
• Magenta (controls/focus): #C72BC8
• Value highlight: #FFC700 — text on it is #2A1530
• Success (step done): #36C275
• Accents: Fire Orange #FF6A1A, Hot Pink #E928A0
• Error: #FF4D6D

Example Component Prompts

• "Build the Taco Bell box-preview hero in SwiftUI: a 20pt rounded panel filled with linear-gradient(150deg, #702082, #4A1559, #2B0C36). Add two radial glow blooms — magenta rgba(199,43,200,0.35) top-right and yellow rgba(255,199,0,0.22) bottom-left. Center a stylized taco illustration. Bottom-left: box name in Sora 13pt/800 white + an item-count sub in 11pt #FFC700. Bottom-right: the box price in #FFC700 20pt/800. When a step completes, crossfade the illustration and pulse the glow."

• "Create the Taco Bell numbered step pill row: a horizontally-scrollable HStack, 8pt gap. Each pill is 30pt tall, 999pt radius, with a leading 16pt circular number badge + label in Sora 12pt/700. Default: #1A1322 fill, 1pt #34273F border, #A99BB6 text. Active (exactly one): brand gradient #702082 → #C72BC8 fill, white text, badge rgba(255,255,255,0.25). Done: 1pt #36C275 border, #F4EFF7 text, badge #36C275 with a ✓ in #06210F."

• "Render a Taco Bell customizer option row: a 46pt rounded food thumbnail, then name in Sora 15pt/600 #F4EFF7 + a 12pt #A99BB6 description, an optional '+$1.00' upcharge in 13pt/700 #A99BB6, and a trailing control. Single-select uses a 24pt radio (off: 2pt #34273F border; on: 2pt #C72BC8 border + a 16pt inset #C72BC8 dot). Quantity uses a stepper: −/+ in 26pt circles with a 1.5pt #C72BC8 outline and magenta glyphs, quantity in Sora 14pt/800 tabular. 1pt #34273F divider between rows. Selecting advances the active step pill and updates the running total."

• "Build the Taco Bell persistent bottom CTA bar: rgba(14,10,20,0.96) background, 1pt #34273F top divider. Left: a 'Box total' eyebrow 11pt #A99BB6 over the amount in #F4EFF7 19pt/800 (tabular). Right: a flex-grow gradient button 'Add to Order' (linear-gradient(120deg, #702082, #C72BC8), white Sora 15pt/800, 14pt radius, 15pt padding). On tap, brighten the gradient 1.0→1.12→1.0 over 220ms, roll the total, soft haptic, and animate the item into the Bag tab."

• "Create a Taco Bell Cravings menu tile: a 16pt rounded card on #261B32. Leading 72pt purple-gradient food image. Body: name in Sora 15pt/800 #F4EFF7, a 12pt #A99BB6 description, then a footer row with the price in #FFC700 15pt/800 and a trailing gradient 'Add' pill (999pt radius, white Sora 12pt/800 UPPERCASE). Tapping 'Add' shared-element-zooms the gradient image into the customizer over 300ms."

• "Render the Taco Bell bottom tab bar: 5 tabs — Home, Menu, Rewards, Bag, Account. 22pt icons; active = filled glyph in #C72BC8; inactive = stroke #7A6C86; labels 10pt/700 always shown. The Bag tab has a gradient count badge with a white number. Bar background rgba(14,10,20,0.96) blurred with a 0.5pt #34273F top divider."

Iteration Guide

1. The purple → magenta gradient (#702082 → #C72BC8) is the brand on screen — CTAs, active step, box hero
2. Canvas is a purple-tinted near-black #0E0A14 — dark-first, never neutral gray
3. Hot Sauce Yellow #FFC700 is the value highlight (prices, rewards, eyebrows); text on it is #2A1530
4. The build-your-box customizer is the centerpiece: gradient box hero + numbered step pills + radio/stepper rows
5. Exactly one step pill is gradient-active; completed steps turn green #36C275
6. A persistent bottom CTA bar shows a live-updating total + a gradient "Add to Order"
7. Depth is glow (radial blooms on the hero/active step), not heavy shadow — drop shadow only for the CTA bar & sheets
8. Yellow UPPERCASE eyebrows (+1pt tracking) sit above builder/section titles — a signature tic
9. Magenta radios for single-select, magenta-outline steppers for quantities
10. Motion is punchy and quick (150–300ms): step pill cross-fade to green, total roll, box-hero morph, gradient-CTA flash