designmd-forge 1.2.0

package/dist/data/designs/ios-gas.md

@@ -0,0 +1,387 @@
+# Design System Inspiration of Gas (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Gas's iOS app is deliberately, unapologetically *joyful*. It is an anonymous compliments app built for high-schoolers, and every design decision pushes toward warmth, play, and a quick dopamine loop — the opposite of a corporate, dark, "serious" product. The screen is a **full-bleed indigo→purple gradient** (`#6C5CE7 → #A06CFF`) from top to bottom, and floating in the center of that purple world is one big, friendly, pure-white **poll card** with very round corners (28pt) and a soft purple-tinted shadow. There is no feed, no infinite scroll, no profiles to stalk. The entire core experience is: *answer a poll about your classmates, one card at a time, then see flames roll in when people pick you.* This is light-UI by design — Gas has no dark mode in spirit; the brand IS the bright gradient.
+
+The signature moment is the **anonymous compliment poll**. A question like "Who has the best smile? 😄" sits in heavy rounded type above **four bold gradient name buttons** in a 2×2 grid, each a different cheerful color from a fixed rotating palette (indigo, pink, yellow, green). You tap a name (positive-only — every question is a compliment), the card springs away, the next one slides in, and a counter advances. The names are pulled from the user's school and reshuffled with a "shuffle" affordance. This poll card — emoji + bold question + four colorful name choices — is the most recognizable artifact in the app and the thing every clone must nail.
+
+The second signature is the **flame 🔥 currency**. Voting earns flames; flames are spent to unlock hints about *who* picked you ("a girl from your grade", "someone whose name starts with J"). The flame count lives in a pill in the top-right, glowing flame-orange (`#FF7A45`) against the purple. It's the game layer — the reason to come back, the reason to invite friends (more friends = more polls = more flames). Color is loud and happy: the indigo/purple gradient is the world, the four choice colors are a fixed festive set, and flame-orange is the only "currency" accent. Type is **Nunito** — a rounded, soft, friendly sans set at heavy weights (800–900) — chosen because it reads as approachable and middle-school-warm, never austere or techy. Everything about Gas is positive, anonymous, and bright.
+
+**Key Characteristics:**
+- Full-bleed indigo→purple gradient world (`#6C5CE7 → #A06CFF`) — light-UI by design, no dark mode in spirit
+- Big friendly white poll card (`#FFFFFF`, 28pt radius, soft purple shadow) floating centered — one card at a time
+- **Anonymous compliment poll** — emoji + bold question + 4 colorful gradient name buttons in a 2×2 grid (the signature)
+- Positive-only questions — every poll is a compliment; the tone is "be nice"
+- Fixed festive choice palette — indigo / pink / yellow / green gradient buttons, rotating per poll
+- **Flame 🔥 currency** (`#FF7A45`) — earned by voting, spent to unlock "who picked you" hints; the dopamine loop
+- Shuffle + skip affordances — reshuffle the four names, or skip to the next card
+- Heavy rounded Nunito type (800–900) — approachable, warm, middle-school-friendly, anti-corporate
+- Springy, game-like motion — cards bounce away, flames count up, confetti on milestones
+- No feed, no infinite scroll, no public profiles — a focused, safe, finite loop
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Brand Gradient** (`#6C5CE7 → #A06CFF`, 135–180°): The app world background and primary CTA fill.
+- **Gas Indigo** (`#6C5CE7`): The brand anchor — gradient top, primary buttons, choice color #1.
+- **Gas Purple** (`#A06CFF`): Gradient bottom, lighter brand accent.
+- **Gas Violet** (`#7B4DFF`): The on-white brand tint — used for the poll tag, links, accents on the white card.
+- **Indigo Pressed** (`#5A4AD1`): Pressed state for indigo buttons/choices.
+
+### Canvas & Surfaces
+- **App Background** (gradient `#6C5CE7 → #A06CFF`): The full-bleed world — every screen.
+- **Card White** (`#FFFFFF`): The poll card and all primary content cards — bright, high-contrast on purple.
+- **Tint Surface** (`#F4F2FF`): Secondary surfaces inside white cards (pressed rows, sub-panels) — a faint lavender.
+- **Divider** (`#ECE9FB`): Hairline dividers inside white cards — a soft lilac.
+- **Glass Bar** (`rgba(255,255,255,0.16)` + blur): The translucent tab bar over the gradient.
+- **Scrim** (`rgba(40,20,90,0.45)`): Dim behind modals/sheets — a purple-tinted scrim, never gray-black.
+
+> Gas is light-UI by design. There is no separate dark theme; the brand identity *is* the bright purple gradient. (If a system-level dark accommodation is ever required, deepen the gradient to `#4A3FB0 → #6C5CE7` and keep cards white — but the product intent is always light.)
+
+### Text (on white cards)
+- **Card Text Primary** (`#1A1530`): Poll questions, titles — a near-black plum, warmer than pure black.
+- **Card Text Secondary** (`#6B6588`): Body, descriptions — a muted purple-gray.
+- **Card Text Tertiary** (`#A29DB8`): Metadata, counts, hints — light lavender-gray.
+
+### Text (on the gradient)
+- **On-Purple Primary** (`#FFFFFF`): Top-bar labels, tab labels, skip — pure white.
+- **On-Purple Secondary** (`rgba(255,255,255,0.8)`): Sub-labels, de-emphasized.
+
+### Choice Palette (fixed festive set, rotates per poll)
+| Slot | Gradient | Text |
+|------|----------|------|
+| Choice 1 (Indigo) | `#6C5CE7 → #8B6CFF` | `#FFFFFF` |
+| Choice 2 (Pink) | `#FF6CC8 → #FF9CDB` | `#FFFFFF` |
+| Choice 3 (Yellow) | `#FFC93C → #FFB13C` | `#4A3300` |
+| Choice 4 (Green) | `#2BC48A → #4FD9A6` | `#FFFFFF` |
+
+### Accent & Currency
+- **Flame** (`#FF7A45`): The flame 🔥 currency color — count pill, "earned", "unlock for N". The single non-purple, non-choice accent. Means exactly "flames".
+- **Flame Glow** (`rgba(255,122,69,0.15)`): Lit/active flame chip background.
+
+### Semantic
+- **Success** (`#2BC48A`): "Vote counted!", milestone reached (reuses Choice Green for palette discipline).
+- **Error** (`#FF5470`): Failed action, "no more polls right now", validation.
+- **Celebrate Pink** (`#FF6CC8`): Confetti / celebration accents (reuses Choice Pink).
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Nunito` (by Vernon Adams / Jacques Le Bailly, SIL OFL) — a balanced, rounded, friendly sans-serif. The rounded terminals read as warm and approachable — exactly Gas's middle-school-friendly, anti-corporate voice. Closest free Google Font to Gas's playful rounded type.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Weight philosophy**: Gas runs HEAVY. Most text is 800 (ExtraBold) or 900 (Black). Regular 400 barely appears. The chunky weight is part of the playful identity.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Nunito | 32pt | 900 | 1.15 | -0.4pt | "Polls", big screen titles |
+| Screen Title | Nunito | 26pt | 900 | 1.2 | -0.3pt | "Your flames", "Inbox" |
+| Poll Question | Nunito | 23pt | 900 | 1.25 | -0.2pt | The poll prompt on the card |
+| Card Title | Nunito | 18pt | 800 | 1.3 | -0.1pt | "Someone is thinking about you" |
+| Choice Button | Nunito | 16pt | 800 | 1.1 | 0pt | The four name buttons |
+| Body | Nunito | 15pt | 700 | 1.45 | 0pt | Card body copy, hints |
+| Big Number | Nunito | 28pt | 900 | 1.0 | -0.5pt | Flame counts, big stats |
+| Metadata | Nunito | 13pt | 700 | 1.3 | 0pt | "5 people voted · 2m ago" |
+| Poll Tag | Nunito | 12pt | 800 | 1.0 | 0.5pt | "ANONYMOUS · BE NICE" uppercase |
+| Button | Nunito | 16pt | 900 | 1.0 | 0.2pt | Primary CTA |
+| Pill / Flame | Nunito | 15pt | 900 | 1.0 | 0pt | Flame count pill |
+| Tab Label | Nunito | 10pt | 800 | 1.0 | 0.1pt | Bottom tab labels |
+| Skip / Link | Nunito | 14pt | 800 | 1.0 | 0pt | "Skip ›", text links |
+
+### Principles
+- **Heavy and rounded**: 800–900 weight everywhere — the chunkiness IS the brand voice; never set body below 700.
+- **Big and centered on cards**: poll questions are large (23pt) and center-aligned — readable at a glance, screenshot-friendly.
+- **Emoji as a first-class type element**: a 50pt emoji crowns nearly every poll card; treat it as part of the headline.
+- **Numbers shout**: flame counts and stats use 28pt 900 — the game layer should feel celebratory.
+- **Dynamic Type**: poll questions, titles, body scale; tab labels, poll tags, choice button labels stay fixed (layout-critical 2×2 grid).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Get my flames / Continue)**
+- Shape: Full pill, 999pt corner radius
+- Background: brand gradient `#6C5CE7 → #A06CFF`
+- Text: `#FFFFFF`, Nunito 16pt weight 900
+- Padding: 15pt vertical, 30pt horizontal
+- Pressed: `filter: brightness(0.96)` + scale 0.97 (springy)
+- Shadow: `0 10px 24px rgba(108,92,231,0.45)` — a colored glow, not gray
+
+**Choice Button (the four poll names)**
+- Shape: Large rounded rect, 20pt corner radius (NOT a pill — distinct chunky tile)
+- Background: one of the 4 fixed choice gradients (rotates by slot)
+- Text: white (or `#4A3300` on the yellow slot), Nunito 16pt weight 800, centered
+- Padding: 16pt vertical, 10pt horizontal
+- Pressed: scale 0.96 + brightness 0.94; selected: scales 1.04 then springs back as the card exits
+- Always rendered in a 2-column grid with 12pt gaps
+
+**Flame Button (Unlock hint)**
+- Background: `#FF7A45` (flame)
+- Text: `#FFFFFF`, Nunito 15pt weight 900, with a leading 🔥
+- Corner radius: 999pt
+- Pressed: brightness 0.94 + scale 0.97
+
+**Ghost / Skip Button**
+- Background: `rgba(255,255,255,0.18)` (on gradient) OR `#F4F2FF` (on white card)
+- Text: `#FFFFFF` (on gradient) / `#6B6588` (on card), Nunito 14–15pt weight 800
+- Corner radius: 999pt
+- Often just text: "Skip ›" in `#FFFFFF` 80% opacity
+
+**Text Button (Shuffle names)**
+- Text: `#7B4DFF` (on card) / `#FFFFFF` (on gradient), Nunito 14pt weight 800
+- Often paired with an emoji ("🔄 Shuffle names")
+- No background; pressed: 70% opacity
+
+### Core Atoms
+
+**Poll Card (the hero)**
+- Background: `#FFFFFF`
+- Corner radius: 28pt (very round — friendly)
+- Shadow: `0 24px 50px -20px rgba(40,20,90,0.55)` — soft, purple-tinted, generous
+- Padding: 26pt top, 20pt sides, 24pt bottom
+- Floats centered in the gradient with breathing room above/below
+- Content stack: 50pt emoji → 23pt question → 12pt tag → 2×2 choices → footer
+
+**Flame Pill (top-right currency)**
+- Background: `rgba(255,255,255,0.22)` (on gradient) or `#FFF` with flame text (on card)
+- Content: 🔥 emoji + count, Nunito 15pt weight 900 white
+- Corner radius: 999pt, padding 7pt/14pt
+
+**Avatar / Identity**
+- Gas is anonymous-first — avatars are rare. Where present: 40pt circle, gradient or emoji fill, never a real photo in poll context
+
+**Card (generic, e.g. inbox item)**
+- Background: `#FFFFFF`, 20pt radius
+- Soft purple shadow `0 12px 28px -14px rgba(40,20,90,0.4)`
+- Internal padding 18–20pt
+
+### Navigation
+
+**Top Bar**
+- Height: 44pt + safe area, transparent over the gradient
+- Leading: school name (small, 80% white) + screen label (17pt 900 white) stacked
+- Trailing: the flame pill
+- No border (it floats over the gradient)
+
+**Bottom Tab Bar**
+- Height: ~54pt + safe area (70pt visual)
+- Background: `rgba(255,255,255,0.16)` + 16px blur (frosted over the gradient)
+- 5 slots: Polls, Inbox, **Add/Invite (center, raised white circle)**, School, You
+- Icon size: 23pt; center action is a 50pt white circle raised -16pt with an indigo `+` glyph
+- Active color: `#FFFFFF` (icons fill solid); inactive: `rgba(255,255,255,0.6)`
+- Labels: Nunito 10pt weight 800, always shown (center action has no label)
+
+**Profile / "You"**
+- Big flame total (28pt 900), polls answered, school, invite-friends CTA
+- Positive-only — no follower counts, no public activity
+
+### Input Fields
+
+**Search (school / friends)**
+- Height: 48pt
+- Background: `#FFFFFF`, 999pt pill radius
+- Border: none (focus: 2pt `#7B4DFF`)
+- Leading magnifier `#A29DB8`
+- Placeholder: "Find your school" Nunito 15pt weight 700 `#A29DB8`
+
+**Name Entry / Onboarding fields**
+- Background: `#FFFFFF`, 18pt radius, generous 16pt padding
+- Text Nunito 17pt weight 800 `#1A1530`
+- Big, chunky, easy for teens
+
+### Distinctive Components
+
+**Anonymous Compliment Poll (the signature)**
+- Emoji headline (50pt) + bold centered question (23pt 900) + uppercase tag ("ANONYMOUS · BE NICE", 12pt 800 `#7B4DFF`)
+- Four name buttons in a 2×2 grid, each a fixed-slot gradient (indigo/pink/yellow/green), 20pt radius
+- Footer: "🔄 Shuffle names" + a "Skip ›" affordance
+- A progress indicator (segmented dots) shows position in the current poll set
+- Tapping a name: button springs (scale 1.04), card flies out, next card springs in (~350ms)
+
+**Flame Currency System**
+- Flame pill (count) top-right; "+N earned" toasts after voting
+- "Unlock for 🔥 N" gates on hint reveals ("who picked you")
+- Flame count animates up digit-by-digit with a soft haptic + tiny flame burst
+
+**Choice Result / "Who picked you" Reveal**
+- A white card: "Someone picked you for 😄 best smile"
+- Blurred/locked hint rows; tapping spends flames to reveal one attribute ("a girl in your grade")
+- Reveal animates with a shimmer + confetti pop (`#FF6CC8` / `#FFC93C`)
+
+**Progress Dots**
+- Row of segmented bars: 22pt wide, 5pt tall, 3pt radius
+- Inactive `rgba(255,255,255,0.35)`; active `#FFFFFF`, widened to 30pt
+- Sits below the poll card on the gradient
+
+**Invite / Add Friends (center tab action)**
+- Raised 50pt white circle with indigo `+`
+- Opens a share sheet — "more friends = more polls = more 🔥" is the core growth loop
+
+**Celebration / Confetti**
+- On flame milestones and first poll: a burst of pink/yellow/green confetti over the gradient
+- Spring scale-in on the milestone number
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48
+- Poll card padding: 26/20/24pt
+- Choice grid gap: 12pt
+- Card-to-progress-dots gap: 18pt
+- Generous vertical centering — the card floats with space above and below
+
+### Grid & Container
+- iPhone: single centered poll card, ~18pt side gutters from screen edge to card
+- Choices: strict 2×2 grid (never 1×4 or 4×1 — the 2×2 is iconic)
+- iPad: card stays centered with a max-width (~440pt) — Gas does NOT spread to a wide grid; it's a phone-shaped, focused experience
+- One card on screen at a time — no scroll in the core poll loop
+
+### Whitespace Philosophy
+- **The card is the focus**: the purple gradient is generous negative space; the white card is the single object of attention
+- **Loud but uncluttered**: bright colors, but only ONE poll card visible — no competing UI
+- **Centered and finite**: everything is centered; there is no infinite scroll — the loop is intentionally bounded
+- **Playful breathing room**: chunky padding inside the card; nothing cramped
+
+### Border Radius Scale
+- Square (0pt): rare — full-bleed gradient only
+- Standard (8pt): tiny chips, progress bar segments (3pt)
+- Comfortable (14pt): small inner panels
+- Choice (20pt): the four name buttons, generic cards
+- Card (28pt): the hero poll card
+- Sheet (36pt): bottom sheets, modals (very round)
+- Pill (500pt): primary CTAs, flame pill, skip, search
+- Circle (50%): the center tab action, avatars
+
+## 6. Depth & Elevation
+
+Gas uses depth playfully — the white card *pops* off the purple world with a soft, colored shadow. Shadows are purple-tinted (never neutral gray) so they feel warm and part of the brand.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| World (Level 0) | The gradient itself, no shadow | App background |
+| Floating Card (Level 1) | `rgba(40,20,90,0.55) 0 24px 50px -20px` | The hero poll card |
+| Raised Control (Level 1.5) | `rgba(40,20,90,0.5) 0 8px 20px` | The center tab circle, primary CTA glow |
+| Generic Card (Level 1) | `rgba(40,20,90,0.4) 0 12px 28px -14px` | Inbox cards, reveal cards |
+| Sheet (Level 2) | `rgba(40,20,90,0.5) 0 -8px 30px` + 36pt top radius | Bottom sheets, invite sheet |
+| Scrim | `rgba(40,20,90,0.45)` | Dim behind modals — purple-tinted, never gray |
+
+**Shadow Philosophy**: Every shadow is a *purple-plum tint* (`rgba(40,20,90,…)`), not neutral black, so the depth feels cohesive with the gradient world and stays cheerful. The card's big soft shadow makes it feel like a physical card you could pick up — tactile and friendly. Buttons get colored glows matching their fill (indigo CTA → indigo glow), reinforcing the candy-bright feel.
+
+### Motion
+- **Card transition (vote)**: tapped choice scales 1.04 (120ms spring), card flies out (translate + fade, 280ms ease-in), next card springs in from below (scale 0.9 → 1.0 + fade, 350ms spring damping 0.7)
+- **Choice press**: scale 0.96 + brightness 0.94 (90ms), release springs back
+- **Flame count-up**: digits roll/increment over 600ms with a soft haptic per increment + a tiny flame particle burst
+- **Skip**: card slides left and fades (220ms ease-in), next springs in
+- **Shuffle names**: the four buttons quick-fade-swap labels with a 180ms cross-dissolve + subtle jiggle
+- **Confetti / milestone**: pink/yellow/green particles burst from center, milestone number scales 0 → 1.15 → 1.0 (spring)
+- **Reveal (who picked you)**: locked row shimmer (800ms), then content fades in + confetti pop
+- **Tab switch**: bouncy cross-fade 220ms; active icon pops scale 1.0 → 1.15 → 1.0
+- **Haptics**: medium impact on vote, soft tick per flame increment, success haptic on milestone, light tick on skip/shuffle
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the full-bleed indigo→purple gradient (`#6C5CE7 → #A06CFF`) as the world — Gas is light-UI by design
+- Float ONE big white poll card (28pt radius, soft purple shadow) centered — one card at a time
+- Render poll choices as four bold gradient buttons in a strict 2×2 grid
+- Keep questions positive-only and centered with a 50pt emoji headline and a "be nice" tag
+- Use the fixed festive choice palette (indigo/pink/yellow/green) and rotate by slot
+- Make the flame 🔥 (`#FF7A45`) the single currency accent — count pill, earn toasts, unlock gates
+- Set type HEAVY in Nunito (800–900) — chunky and rounded is the brand voice
+- Use purple-tinted shadows (`rgba(40,20,90,…)`) — never neutral gray
+- Make motion springy and celebratory — cards bounce, flames count up, confetti pops
+- Keep it finite — one card, no infinite scroll, no public profiles
+
+### Don't
+- Don't ship a dark theme — Gas's identity IS the bright purple gradient; light by design
+- Don't show a feed or infinite scroll — the loop is one poll card at a time, intentionally bounded
+- Don't make questions negative or comparative-in-a-mean-way — every poll is a compliment
+- Don't lay choices out 1×4 or in a list — the 2×2 grid of color tiles is iconic
+- Don't use neutral gray shadows — all elevation is purple-plum tinted
+- Don't go light-weight on type — never below 700; the chunky Nunito is the personality
+- Don't add a second accent color beyond the flame — purple gradient + 4 choice colors + flame is the whole system
+- Don't reuse flame-orange for anything but the currency — it must mean "flames"
+- Don't make it look corporate, minimal, or "sleek" — Gas is candy-bright and teen-warm on purpose
+- Don't surface real names/photos in poll context — anonymity and safety are core
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Poll card tighter (22pt padding); question 21pt; choices stay 2×2 |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; flame pill clears it |
+| iPhone 15/16 Pro Max | 430pt | Larger card, 26pt question, more breathing room |
+| iPad (portrait) | 768pt | Card centered, max-width ~440pt — does NOT widen to a grid; phone-shaped focus |
+| iPad (landscape) | 1024pt+ | Same centered card; gradient fills the rest — never a multi-column layout |
+
+### Dynamic Type
+- Scales: poll questions, card titles, body
+- Fixed: choice button labels (2×2 grid is layout-critical), tab labels, poll tags, progress dots
+- Very long names truncate with ellipsis inside the choice tile (never reflow the grid)
+
+### Orientation
+- Portrait-only in practice (a one-handed teen app); if rotated, the card stays centered and capped
+- No landscape-specific layout — the focused single-card loop is portrait-native
+
+### Touch Targets
+- Choice buttons: full tile, ≥ 56pt tall — big, easy, thumb-friendly
+- Center tab action: 50pt circle, 56pt hit
+- Flame pill: 44pt hit
+- Skip / shuffle: ≥ 44pt hit
+- Tab items: 23pt glyph, 48pt hit
+
+### Safe Area Handling
+- Top: flame pill + school label respect the Dynamic Island
+- Bottom: frosted tab bar + home indicator respected; the raised center circle clears the indicator
+- Sides: ~18pt gutter from screen edge to the poll card
+- The gradient extends fully edge-to-edge under everything (it's the world)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- App background: gradient `#6C5CE7 → #A06CFF`
+- Gas Indigo: `#6C5CE7`
+- Gas Purple: `#A06CFF`
+- Gas Violet (on-white tint): `#7B4DFF`
+- Card white: `#FFFFFF`
+- Tint surface: `#F4F2FF`
+- Divider (on card): `#ECE9FB`
+- Card text primary: `#1A1530`
+- Card text secondary: `#6B6588`
+- Card text tertiary: `#A29DB8`
+- Flame (currency): `#FF7A45`
+- Choice 1 indigo: `#6C5CE7 → #8B6CFF` (white text)
+- Choice 2 pink: `#FF6CC8 → #FF9CDB` (white text)
+- Choice 3 yellow: `#FFC93C → #FFB13C` (text `#4A3300`)
+- Choice 4 green: `#2BC48A → #4FD9A6` (white text)
+- Success: `#2BC48A` · Error: `#FF5470`
+
+### Example Component Prompts
+- "Build the Gas poll card in SwiftUI: a `#FFFFFF` card with 28pt corner radius and a soft shadow `rgba(40,20,90,0.55)` blur 50 y 24, floating centered on a full-bleed gradient `#6C5CE7 → #A06CFF`. Card padding 26pt top / 20pt sides / 24pt bottom. Content stack: a 50pt emoji centered, a poll question in Nunito 23pt weight 900 `#1A1530` centered, an uppercase tag 'ANONYMOUS · BE NICE' in Nunito 12pt weight 800 `#7B4DFF` with 0.5pt tracking, then a 2×2 grid (12pt gaps) of four name buttons. Each button: 20pt corner radius, 16pt vertical padding, Nunito 16pt weight 800 centered, filled with its fixed slot gradient — slot 1 `#6C5CE7→#8B6CFF` white, slot 2 `#FF6CC8→#FF9CDB` white, slot 3 `#FFC93C→#FFB13C` text `#4A3300`, slot 4 `#2BC48A→#4FD9A6` white. Footer: a '🔄 Shuffle names' text button in `#7B4DFF`. On tap, the chosen button scales to 1.04 (spring), the card flies out over 280ms, and the next card springs in from below over 350ms."
+
+- "Create the Gas flame currency pill: a capsule `rgba(255,255,255,0.22)` on the gradient, containing a 🔥 emoji + the count in Nunito 15pt weight 900 white, 7pt vertical / 14pt horizontal padding, 999pt radius. When flames are earned, animate the number incrementing digit-by-digit over 600ms with a soft haptic per tick and a tiny flame-particle burst."
+
+- "Build the Gas bottom tab bar: ~54pt + safe area, background `rgba(255,255,255,0.16)` with a 16px blur over the gradient. Five slots: Polls, Inbox, Add (center — a raised 50pt white circle, offset -16pt up, with an indigo `#6C5CE7` `+` glyph and a `rgba(40,20,90,0.5)` shadow), School, You. Inactive icons `rgba(255,255,255,0.6)` 23pt; active icons solid `#FFFFFF`. Labels Nunito 10pt weight 800 (no label on the center action)."
+
+- "Create the Gas primary button: a full pill (999pt) filled with the gradient `#6C5CE7 → #A06CFF`, white Nunito 16pt weight 900 text, 15pt vertical / 30pt horizontal padding, and a colored glow shadow `rgba(108,92,231,0.45)` blur 24 y 10. Pressed: brightness 0.96 + scale 0.97 (springy)."
+
+- "Build the Gas progress dots: a centered row of segmented bars below the poll card, each 22pt wide × 5pt tall, 3pt radius, color `rgba(255,255,255,0.35)`; the active segment is `#FFFFFF` and widens to 30pt. 6pt gap between segments."
+
+- "Create the Gas 'who picked you' reveal card: a `#FFFFFF` card (20pt radius, purple shadow) titled 'Someone picked you for 😄 best smile' in Nunito 18pt weight 800 `#1A1530`. Below: locked hint rows with a blur + a '🔥 Unlock for 5' flame button (`#FF7A45`, white Nunito 15pt weight 900, 999pt radius). Tapping spends flames; the row shimmers 800ms then reveals the hint text with a pink/yellow confetti pop."
+
+### Iteration Guide
+1. The world is a full-bleed indigo→purple gradient `#6C5CE7 → #A06CFF` — Gas is LIGHT-UI by design; never ship a dark theme
+2. One big white poll card (28pt radius, soft purple-tinted shadow) floats centered — one card at a time, no feed, no scroll
+3. The signature is the anonymous compliment poll: 50pt emoji + bold centered 23pt question + four gradient name buttons in a strict 2×2 grid
+4. Choice buttons use a FIXED festive palette by slot — indigo / pink / yellow / green — 20pt radius tiles, never a 1×4 list
+5. Every question is positive-only with a "be nice" tag — Gas is compliments, anonymous and safe
+6. The flame 🔥 `#FF7A45` is the ONLY currency accent — earned by voting, spent on "who picked you" hints; it animates and celebrates
+7. Type is Nunito set HEAVY (800–900) — chunky and rounded is the brand voice; never below 700
+8. All shadows are purple-plum tinted (`rgba(40,20,90,…)`) — never neutral gray
+9. Motion is springy and celebratory — cards bounce in/out, flames count up, confetti pops on milestones
+10. Keep it finite, centered, and phone-shaped even on iPad — no infinite scroll, no public profiles, no corporate sleekness