designmd-forge 1.2.0

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

@@ -0,0 +1,353 @@
+# Design System Inspiration of Revolut (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Revolut's iOS app is a near-black financial cockpit where money looks engineered, not nostalgic. The canvas sits at `#0A0A0F` — a cool, almost-black with the faintest blue cast — so that the product's signature gradient (an electric violet-to-indigo sweep, `#5B6BFF → #9C6BFF`) and the metal-card hero read like premium hardware on a dark workbench. Nothing is beige, nothing is "bank green"; this is fintech as a precision instrument. Balance numbers are huge, spend analytics are charted in a single donut, and every surface is a slightly-lifted slab (`#16161F` / `#1E1E2A`) floating on the void.
+
+The accent system is a gradient ritual. The violet→purple sweep carries the brand: the primary CTA, the active tab, the selected segment, the analytics donut's spent arc, and the sheen that rolls across the metal card. A solid `#6B5BFF` is the fallback when a gradient can't be used (thin strokes, small icons, focus rings). Everything else is white, gray, or the deep canvas. The restraint makes the gradient feel like *Revolut* — when it appears, it's the product speaking.
+
+Typography is Aeonik, Revolut's geometric grotesque (Inter is the closest free substitute). It's confident and slightly tight — perfect for big balance figures and dense transaction lists. The hierarchy is built for numbers: a balance can hit 34–40pt weight 700, transaction amounts sit at 16pt weight 600 (green for incoming, white for outgoing), and the most expressive moment is the multi-currency balance — a stack of currency tiles, each with a flag, a code, and a precisely-aligned tabular figure.
+
+**Key Characteristics:**
+- Near-black canvas (`#0A0A0F`) with cool-blue cast — fintech as precision hardware
+- Violet→purple gradient (`#5B6BFF → #9C6BFF`) as the single brand accent
+- Metal-card hero with a moving sheen — the centerpiece of the Home / Cards tab
+- Multi-currency balance tiles — flag chip + code + tabular figure, perfectly aligned
+- Spend-analytics donut — one ring, gradient spent arc, category legend
+- Transaction rows with merchant logos — incoming green, outgoing white
+- Aeonik font (proprietary geometric grotesque), weights 400 / 600 / 700
+- Bottom tabs: Home, Invest, Crypto, Lifestyle, Cards
+- Card 3D flip + sheen, haptic on reveal — the signature motion moment
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Gradient Start** (`#5B6BFF`): Left/top stop of the brand gradient — CTAs, active tab, donut arc.
+- **Gradient End** (`#9C6BFF`): Right/bottom stop of the brand gradient.
+- **Brand Solid** (`#6B5BFF`): Solid fallback when a gradient cannot be used — strokes, small icons, focus rings, links.
+- **Brand Pressed** (`#5648D6`): Pressed/active state for solid brand elements.
+- **Brand Tint** (`#1C1B33`): Selected-row wash, info banners on dark, gradient-ghost backgrounds.
+
+### Canvas & Surfaces
+- **Canvas** (`#0A0A0F`): Primary near-black background, the void everything floats on.
+- **Surface 1** (`#16161F`): Card backgrounds, balance tiles, list containers.
+- **Surface 2** (`#1E1E2A`): Higher elevation — sheets, modals, active rows, the metal-card backing.
+- **Surface 3** (`#28283A`): Pressed state on dark surfaces, segmented-control track.
+- **Divider** (`#2A2A38`): Hairline rules between rows and around tiles.
+- **Border Subtle** (`#33334A`): Card outline at rest, input border.
+
+### Text
+- **Text Primary** (`#FFFFFF`): Balances, headings, primary amounts, primary UI text.
+- **Text Secondary** (`#9A9AAA`): Merchant subtitles, metadata, currency names, helper text.
+- **Text Tertiary** (`#6A6A7E`): Disabled labels, placeholders, very low-emphasis captions.
+
+### Semantic
+- **Income Green** (`#1FD17B`): Incoming transactions, positive change, "received".
+- **Spend Red** (`#FF5A6A`): Declined, negative alerts, "you spent more".
+- **Warning Amber** (`#FFB23F`): Pending, attention-required, card-frozen banner.
+- **Crypto Gold** (`#F7C948`): Crypto-specific accents, BTC highlight in portfolio.
+- **Info Blue** (`#3F9BFF`): Informational links inside support / statements.
+
+### Light Mode (Limited Use)
+Revolut's iOS app is a dark-first product; a light variant exists for system light mode but the canonical experience — and all brand photography — is the dark cockpit.
+- **Light Canvas** (`#FFFFFF`)
+- **Light Surface** (`#F4F4F8`)
+- **Light Text** (`#0A0A0F`)
+- **Brand (light-adjusted)** (`#5648D6`) — solid, no gradient ghosting on light
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Aeonik` (proprietary geometric grotesque, Regular / Medium / Bold)
+- **Fallback Stack**: `'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numerals**: Tabular figures mandatory in balances, transaction amounts, and the currency stack
+- **CJK/Non-Latin**: Falls to system stack — Revolut ships across EU/UK/US/APAC
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Balance (Hero) | Aeonik | 40pt | 700 | 1.05 | -0.6pt | Total balance on Home, tabular |
+| Screen Title (Large) | Aeonik | 28pt | 700 | 1.15 | -0.4pt | "Accounts", "Invest" nav title |
+| Section Header | Aeonik | 22pt | 700 | 1.2 | -0.3pt | "Spending", "Your cards" |
+| Tile Balance | Aeonik | 22pt | 700 | 1.1 | -0.2pt | Per-currency balance figure, tabular |
+| Subsection | Aeonik | 18pt | 600 | 1.3 | -0.1pt | Group titles, "This month" |
+| Amount (Row) | Aeonik | 16pt | 600 | 1.2 | 0pt | Transaction amount, tabular |
+| Body / Merchant | Aeonik | 16pt | 600 | 1.3 | 0pt | Merchant name on a transaction row |
+| Body | Aeonik | 15pt | 400 | 1.45 | 0pt | Descriptions, statement copy |
+| Button (Primary) | Aeonik | 16pt | 600 | 1.0 | 0pt | Gradient CTA label |
+| Meta / Subtitle | Aeonik | 13pt | 400 | 1.3 | 0pt | "Today, 14:32", category, currency name |
+| Label (UPPER) | Aeonik | 11pt | 700 | 1.2 | 0.6pt | "AVAILABLE", section labels |
+| Tab Label | Aeonik | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
+| Caption | Aeonik | 11pt | 400 | 1.3 | 0pt | Legal, "Rates update every 60s" |
+
+### Principles
+- **Numbers are the headline**: The balance is the largest type on the screen — 34–40pt weight 700
+- **Tabular figures everywhere money appears**: Balances, amounts, and the currency stack must align to the decimal
+- **Weight, not size, builds row hierarchy**: Merchant 16pt w600 vs. category 13pt w400 — compact lists
+- **Gradient is never type**: The brand sweep is a fill/stroke, never applied to text glyphs
+- **Negative tracking on big numbers**: -0.4 to -0.6pt on hero balance and large titles; body sits at 0pt
+- **Dynamic Type respected** on titles, body, amounts; tab labels and uppercase labels fixed
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Gradient CTA ("Add money" / "Continue")**
+- Background: linear gradient `#5B6BFF → #9C6BFF` (≈115°)
+- Text: `#FFFFFF`, Aeonik 16pt weight 600
+- Height: 52pt, full-width; corner radius 16pt
+- Pressed: gradient dims to ~85% + scale 0.98, soft haptic
+- Disabled: `#28283A`, text `#6A6A7E`
+
+**Secondary Button ("Details" / outline)**
+- Background: `#1E1E2A`
+- Text: `#FFFFFF`, Aeonik 16pt weight 600
+- No border (filled-tonal), height 52pt, radius 16pt
+- Pressed: `#28283A`
+
+**Tertiary / Ghost ("Skip")**
+- Transparent, text `#9A9AAA` weight 600, no border
+- Pressed: text `#FFFFFF`
+
+**Circular Quick Action (Home action bar: Add, Exchange, More)**
+- 56pt circle, background `#1E1E2A`, glyph 22pt
+- Default glyph `#FFFFFF`; the primary "Add money" circle uses the gradient fill with white glyph
+- Label below in 13pt `#9A9AAA`
+
+**Icon Button (freeze, settings, statement)**
+- 24pt glyph, 44pt hit area
+- Default `#9A9AAA`; active `#6B5BFF`
+
+**Text Link**
+- Aeonik 15pt weight 600, color `#6B5BFF`, no underline; pressed `#5648D6`
+
+### Cards & Containers
+
+**Metal Card Hero (signature)**
+- Full-width card, aspect ≈ 1.586 (ISO card), corner radius 16pt
+- Background: dark brushed-metal gradient with a diagonal sheen highlight that animates on appear/flip
+- Overlaid: Revolut wordmark, last-4 digits in Aeonik tabular, contactless glyph
+- Variant chips: Standard / Plus / Premium / Metal change the base gradient (graphite, steel, rose-gold ghost)
+- Tap: 3D flip (Y-axis) revealing CVV/expiry on the back, with haptic
+
+**Currency Balance Tile**
+- Background `#16161F`, 1pt `#2A2A38`, radius 16pt, height ~72pt
+- Leading: 28pt circular flag chip; then currency code (16pt w600 white) + name (13pt w400 `#9A9AAA`)
+- Trailing: balance figure 22pt w700 white, tabular, right-aligned
+- Pressed: `#1E1E2A`
+- A horizontal carousel of these is the multi-currency switcher
+
+**Spend Analytics Donut Card**
+- Card `#16161F`, radius 20pt, padding 20pt
+- Centered ring: track `#28283A`, spent arc filled with the brand gradient, ~14pt stroke
+- Center label: total spent 22pt w700 white + "this month" 13pt `#9A9AAA`
+- Below: category legend rows (color dot + name + amount), top 4 categories
+
+**Transaction Row**
+- Height 64pt
+- Leading: 40pt circular merchant logo (or category glyph on `#1E1E2A`)
+- Center: merchant 16pt w600 white + meta "Today, 14:32 · Groceries" 13pt `#9A9AAA`
+- Trailing: amount 16pt w600 — `#1FD17B` if incoming (prefixed `+`), `#FFFFFF` if outgoing
+- Pressed: `#1E1E2A`; divider `#2A2A38`
+
+**Account Switcher Sheet**
+- Bottom sheet `#1E1E2A`, top grabber, radius 24pt top corners
+- List of accounts/profiles with avatar, name, and balance; selected row has a gradient left bar
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `rgba(10,10,15,0.92)` with `.regularMaterial` blur
+- Tabs: Home, Invest, Crypto, Lifestyle, Cards
+- Icon size: 24pt
+- Active: gradient-tinted icon + label `#FFFFFF` (a 2pt gradient pill can sit under the active icon)
+- Inactive: `#6A6A7E`
+- Labels: Aeonik 10pt weight 600, always shown
+
+**Top Bar (Home)**
+- Profile avatar (32pt circle) top-left → name/plan; right: search + notifications (24pt)
+- Total balance sits large directly below, with an "Accounts" disclosure
+
+**Segmented Control (Analytics period / Card type)**
+- Track `#1E1E2A`, height 36pt, radius 18pt
+- Selected segment: gradient pill, white text weight 600
+- Unselected: `#9A9AAA`
+- Sliding thumb 220ms ease
+
+### Input Fields
+
+**Amount Entry (Exchange / Send)**
+- Large centered field, value in Aeonik 34pt w700 white, currency chip trailing
+- No box — the number *is* the input; a thin gradient caret blinks
+- Sub-line: converted value 15pt `#9A9AAA`, live-updating
+
+**Text Field (profile / address)**
+- Filled style, background `#16161F`, height 56pt, radius 12pt
+- Rest: 1pt `#33334A`; focus: 1.5pt gradient stroke (or `#6B5BFF` solid), label floats and tints
+- Error: 1.5pt `#FF5A6A`, helper `#FF5A6A`
+
+**Search Bar**
+- Background `#16161F`, height 44pt, radius 22pt
+- Leading `magnifyingglass` 18pt `#9A9AAA`; placeholder 16pt `#9A9AAA`
+- Focus: 1pt `#6B5BFF` ring
+
+### Distinctive Components
+
+**Metal Card Carousel + Sheen**
+- The Cards tab is a horizontally-paged carousel of card faces; the active card catches a moving diagonal sheen (a translucent white band sweeping ~1.2s on appear and on flip). This is the brand's signature object.
+
+**Spend Donut**
+- A single ring summarizing the month: track + gradient spent arc + center total. Tapping a legend row highlights its segment (arc brightens, others dim). The "one ring to read your month" device.
+
+**Multi-Currency Stack**
+- The balance switcher: a tight vertical/horizontal stack of currency tiles with flag chips and tabular figures, decimal-aligned. Exchange pulls two of these into a converter.
+
+**Card 3D Flip**
+- Tapping the card hero flips it on the Y-axis (front → back) over ~450ms with a subtle perspective and a confirming haptic, revealing CVV/expiry; tapping again flips back.
+
+**Live FX Ticker**
+- A slim strip in Exchange showing the mid-market rate with a 60s refresh and a tiny up/down delta in `#1FD17B`/`#FF5A6A`.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 52, 64
+- Standard screen margin: 16pt horizontal
+- Card internal padding: 20pt; section vertical gap: 24pt
+- Transaction rows: 0pt gap, separated by `#2A2A38` hairlines
+
+### Grid & Container
+- Content width: full device width, 16pt side margins
+- Quick-action bar: 4 circular actions, evenly distributed
+- Card carousel: full-width pages, ~12pt peek of the next card
+- Currency tiles: full-width stacked, or 1.2-up horizontal carousel
+
+### Whitespace Philosophy
+- **Floating slabs on a void**: Surfaces are clearly separated from the `#0A0A0F` canvas by elevation + radius, not heavy borders
+- **Numbers get air**: The hero balance and donut center always have generous clear space — money is the focal point
+- **Dense lists, calm cards**: Transaction lists are tight (64pt rows); analytic cards are roomy (20pt padding)
+
+### Border Radius Scale
+- Soft (8pt): Small chips, flag containers, inline tags
+- Standard (12pt): Inputs, small tiles
+- Comfortable (16pt): Buttons, cards, the metal-card hero
+- Roomy (20pt): Analytics cards, feature modules
+- Sheet (24pt): Bottom sheets (top corners)
+- Pill (≥18pt half-height): Segmented control, filter chips
+- Circle (50%): Quick-action circles, avatars, flag chips
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, transaction list rows |
+| Surface (Level 1) | `rgba(0,0,0,0.4) 0 2px 10px` | Balance tiles, list containers |
+| Card (Level 2) | `rgba(0,0,0,0.5) 0 8px 24px` | Metal-card hero, analytics card |
+| Glow (Level 2g) | `rgba(108,91,255,0.30) 0 8px 28px` | Gradient CTA / active state ambient glow |
+| Sheet (Level 3) | `rgba(0,0,0,0.6) 0 -16px 48px` | Bottom sheets, account switcher |
+| Tab Material | `.regularMaterial` over `rgba(10,10,15,0.92)` | Bottom tab bar over scrolling content |
+
+**Shadow Philosophy**: On a near-black canvas, shadows must be deep (0.4–0.6 opacity) to register, and they're cool-toned, never warm. The one expressive shadow is the gradient *glow*: the primary CTA and active states cast a soft violet ambient halo so the brand color feels lit from within. Everything else relies on elevation + radius to lift off the void.
+
+### Motion
+- **Card flip**: Y-axis 3D rotation front→back ~450ms with perspective, confirming haptic on reveal
+- **Card sheen**: diagonal white band sweeps across the active card ~1.2s on appear/flip
+- **Gradient CTA press**: scale 0.98 + gradient dim to 85% + soft haptic, 150ms
+- **Donut draw**: spent arc animates from 0 to value over 700ms ease-out on screen entry
+- **Balance reveal**: tap-to-hide blurs/un-blurs the figure with a 250ms crossfade
+- **Segmented thumb**: gradient pill slides 220ms ease-in-out
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#0A0A0F` as the canvas — cool near-black, not pure `#000000`, not warm
+- Reserve the violet→purple gradient (`#5B6BFF → #9C6BFF`) for the primary action, active tab, and the spent arc
+- Use the solid `#6B5BFF` only where a gradient can't render (thin strokes, tiny icons, focus rings)
+- Make the balance the largest element on the screen — 34–40pt weight 700, tabular
+- Use tabular numerals for every balance, amount, and currency tile so columns align
+- Color incoming amounts `#1FD17B` and outgoing `#FFFFFF` on transaction rows
+- Give the card hero a 3D flip + sheen with a confirming haptic
+- Let the gradient CTA cast a soft violet glow — the brand is lit from within
+- Float surfaces on the void with elevation + radius, not heavy borders
+
+### Don't
+- Don't use pure black `#000000` or a warm dark — the canvas has a cool blue cast
+- Don't apply the gradient to text glyphs — it's a fill/stroke device only
+- Don't add a second accent hue — the gradient is the entire brand color story
+- Don't let a merchant name outweigh its amount, or an amount outweigh the hero balance
+- Don't use proportional figures for money — always tabular, decimal-aligned
+- Don't use light/thin font weights — Aeonik starts at 400
+- Don't over-skeuomorph the card — the sheen is a subtle band, not a glossy reflection
+- Don't animate the donut or sheen aggressively — 700ms / 1.2s, smooth and singular
+- Don't hide the live FX delta in Exchange — rate transparency is core
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Smaller card hero, balance caps ~34pt, 3 quick actions visible |
+| iPhone 13/14/15 | 390pt | Standard card hero, balance ~40pt, 4 quick actions |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the top bar |
+| iPhone 15/16 Pro Max | 430pt | Larger card hero, more carousel peek, donut scales up |
+| iPad | 768pt+ | Two-pane (accounts list + detail), card carousel centered, larger donut |
+
+### Dynamic Type
+- Titles, body, merchant names, amounts: full scale
+- Hero balance: scales but caps to protect the single-line layout
+- Tab labels, uppercase labels: fixed
+- Currency-tile figures: fixed tabular size for column alignment
+
+### Orientation
+- All primary tabs: **portrait-locked** on iPhone
+- iPad: landscape supported with split layout
+- Card flip / scanner: **portrait-locked**
+
+### Touch Targets
+- Gradient CTA: 52pt height — unmissable
+- Quick-action circles: 56pt
+- Transaction rows: 64pt, full-row tappable
+- Tab icons: 24pt glyph, 44pt effective hit
+- Card hero: full-card tap to flip
+
+### Safe Area Handling
+- Top: top bar + balance respect safe area / Dynamic Island
+- Bottom: tab bar blur respects the home indicator; sheets present above it
+- Sides: 16pt content insets throughout
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#0A0A0F`
+- Surface 1 (tiles/cards): `#16161F`
+- Surface 2 (sheets/active): `#1E1E2A`
+- Divider: `#2A2A38`
+- Text primary: `#FFFFFF`
+- Text secondary: `#9A9AAA`
+- Gradient start: `#5B6BFF`
+- Gradient end: `#9C6BFF`
+- Brand solid (fallback): `#6B5BFF`
+- Brand pressed: `#5648D6`
+- Income green: `#1FD17B`
+- Spend red: `#FF5A6A`
+- Crypto gold: `#F7C948`
+
+### Example Component Prompts
+- "Create a SwiftUI Revolut currency balance tile: 72pt tall, background #16161F with 1pt #2A2A38 border and 16pt corner radius. Leading 28pt circular flag chip, then 'USD' in Inter 16pt weight 600 #FFFFFF with 'US Dollar' 13pt weight 400 #9A9AAA below. Trailing balance '$4,820.50' in Inter 22pt weight 700 #FFFFFF, tabular numerals, right-aligned. Pressed background #1E1E2A."
+- "Build the Revolut primary CTA: 52pt tall full-width button, 16pt radius, background a 115° linear gradient from #5B6BFF to #9C6BFF, 'Add money' in Inter 16pt weight 600 white. Pressed: gradient dims to 85%, scale 0.98, soft haptic. Cast a soft violet glow rgba(108,91,255,0.30) 0 8px 28px."
+- "Design the Revolut spend-analytics donut card: #16161F card, 20pt radius, 20pt padding. A centered ring (~14pt stroke) with track #28283A and the spent arc filled with the #5B6BFF→#9C6BFF gradient, animating 0→value over 700ms. Center: '£1,284' in 22pt weight 700 white + 'this month' 13pt #9A9AAA. Below: 4 legend rows, each a color dot + category + amount."
+- "Create the Revolut metal-card hero: full-width ISO-ratio card (≈1.586), 16pt radius, dark brushed-metal gradient with a diagonal white sheen band that sweeps ~1.2s on appear. Overlaid Revolut wordmark, tabular last-4 '•••• 4821', contactless glyph. Tap flips it on the Y-axis over 450ms with a confirming haptic to reveal CVV/expiry."
+- "Build a Revolut transaction row: 64pt tall, 40pt circular merchant logo leading, merchant 'Spotify' 16pt weight 600 white + 'Today, 14:32 · Subscriptions' 13pt #9A9AAA, trailing amount. Outgoing '-£9.99' in white weight 600; incoming '+£40.00' in #1FD17B. Pressed #1E1E2A, divider #2A2A38."
+
+### Iteration Guide
+1. Canvas is cool near-black `#0A0A0F` — never pure black, never warm
+2. The violet→purple gradient (`#5B6BFF → #9C6BFF`) is the entire brand accent; solid `#6B5BFF` only where a gradient can't render
+3. Never apply the gradient to text — it's a fill/stroke device
+4. The balance is the largest element — 34–40pt weight 700, tabular numerals
+5. Money columns (tiles, amounts, donut center) are always tabular and decimal-aligned
+6. Incoming amounts are `#1FD17B`, outgoing are `#FFFFFF`
+7. The metal-card hero (flip + sheen + haptic) and the spend donut are the signature objects
+8. Float surfaces with deep cool shadows + radius; let the gradient CTA glow violet (lit from within)