oh-my-opencode 4.9.2 → 4.11.0

package/packages/omo-codex/plugin/skills/frontend/references/design/apple.md

@@ -0,0 +1,247 @@
+# Design System Inspired by Apple
+
+## 1. Visual Theme & Atmosphere
+
+Apple's web language is a precision editorial system that alternates between gallery-like calm and retail-density information blocks. The visual tone stays restrained: broad neutral canvases, quiet chrome, and product imagery given almost all of the expressive weight. The interface is engineered to disappear so hardware, materials, and finish options become the narrative foreground.
+
+Across the five analyzed pages, the rhythm is consistent but not monolithic. Marketing surfaces (homepage and Environment) use cinematic black-and-light chaptering, while commerce surfaces (Store and Shop flows) introduce tighter spacing, more utility controls, and denser card stacks without breaking the core brand grammar. The result is one system with two gears: showcase mode and transaction mode.
+
+Typography is the stabilizer. SF Pro Display carries hero and merchandising hierarchy with compact line heights and controlled tracking, while SF Pro Text handles product metadata, navigation, filters, and dense selection UI. The typography stays understated, but the scale range is wide enough to support both billboard hero messaging and micro utility labels.
+
+**Key Characteristics:**
+- Binary section rhythm: deep black scenes (`#000000`) alternating with pale neutral fields (`#f5f5f7`)
+- Single blue accent family for action and link semantics (`#0071e3`, `#0066cc`, `#2997ff`)
+- Dual operating modes in one system: cinematic showcase modules and dense commerce configurators
+- Heavy reliance on imagery and material finishes; UI chrome remains visually thin
+- Tight headline metrics (SF Pro Display, semibold) paired with compact body/link typography (SF Pro Text)
+- Pill and capsule geometry as signature action language (`18px` to `980px` and circular controls)
+- Depth used sparingly; contrast and surface separation do most of the layering work
+- Multi-page color-block rhythm: black hero chapters -> pale neutral merchandising fields -> utility white retail surfaces -> dark micro-surfaces for controls
+
+## 2. Color Palette & Roles
+
+> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`
+
+### Primary
+- **Absolute Black** (`#000000`): Immersive hero canvases, high-drama product chapters, deep UI anchors.
+- **Pale Apple Gray** (`#f5f5f7`): Main light surface for feature bands, comparison blocks, and editorial transitions.
+- **Near-Black Ink** (`#1d1d1f`): Primary text and dark-fill control color on light canvases.
+
+### Secondary & Accent
+- **Apple Action Blue** (`#0071e3`): Primary action fill and focus-signaling brand accent.
+- **Body Link Blue** (`#0066cc`): Inline link color optimized for long-form readability.
+- **High-Luminance Link Blue** (`#2997ff`): Bright link treatment on darker scenes where stronger contrast is required.
+
+### Surface & Background
+- **Pure White Canvas** (`#ffffff`): Retail/product-list backgrounds and dense transactional sections.
+- **Graphite Surface A** (`#272729`): Dark card and media-control context layer.
+- **Graphite Surface B** (`#262629`): Slightly deeper dark utility layer for control groupings.
+- **Graphite Surface C** (`#28282b`): Elevated dark supporting surfaces.
+- **Graphite Surface D** (`#2a2a2c`): Darkest elevated step used for separation in richer dark scenes.
+
+### Neutrals & Text
+- **Secondary Neutral Gray** (`#6e6e73`): Body secondary copy, helper descriptions, tertiary metadata.
+- **Soft Border Gray** (`#d2d2d7`): Dividers, subtle outlines, and muted utility containment.
+- **Mid Border Gray** (`#86868b`): Stronger field outlines in product-configuration and filter contexts.
+- **Utility Dark Gray** (`#424245`): Dark-neutral text/surface crossover in store contexts.
+
+### Semantic & Accent
+- **Selection/Focus Signal** (`#0071e3`): Shared focus and selected-state signal across marketing and commerce contexts.
+- **Error/Warning/Success**: No distinct semantic palette was consistently visible in the extracted surface set.
+
+### Gradient System
+- The extracted pages are overwhelmingly solid-surface driven. Visual richness comes from photography and finish rendering rather than persistent UI gradients.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display Family:** `SF Pro Display`, fallbacks `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Text Family:** `SF Pro Text`, fallbacks `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Usage Split:** Display family handles hero/product headlines and merchandising headings; Text family handles navigation, controls, labels, and dense commerce copy.
+
+### Hierarchy
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Environment/store hero scale |
+| Hero Display L | 56px | 600 | 1.07 | -0.28px | Homepage hero moments |
+| Section Display | 48px | 500-600 | 1.08 | -0.144px | Major chapter headings |
+| Product Heading | 40px | 600 | 1.10 | normal | Product and campaign section titles |
+| Feature Display | 38px | 600 | 1.21 | 0.152px | Device and merchandising callouts |
+| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px to 0.352px | Module-level sub-heroes |
+| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Tile-level naming and key copy |
+| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Configurator and grouped content headers |
+| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Larger promotional links |
+| Subhead | 19px | 600 | 1.21 | 0.228px | Compact section intros |
+| Body Primary | 17px | 400 | 1.47 | -0.374px | Standard body and retail descriptions |
+| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Emphasized labels and key values |
+| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Buttons, helper labels, compact nav text |
+| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Fine print, micro labels |
+| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Dense metadata and legal support text |
+
+### Principles
+- **Continuity across page types:** The same typographic DNA spans cinematic launches and product-purchase flows, preventing a brand split between marketing and commerce.
+- **Compression at scale:** Display tiers use tight leading and controlled tracking to feel machined and product-first.
+- **Readable density at retail depth:** SF Pro Text balances compactness with enough vertical rhythm for long product lists and option matrices.
+- **Measured weight ladder:** 600 is the dominant emphasis weight; 700 appears selectively; 300 is used sparingly for contrast in larger lines.
+
+### Note on Font Substitutes
+- Closest freely available substitutes: `Inter` for text-heavy implementation and `SF Pro Display-like` metrics approximated with `Inter Tight` for headings.
+- When substituting, increase line-height slightly (+0.02 to +0.06) on body sizes and reduce negative tracking intensity to preserve readability.
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Fill Action:** `#0071e3` background, `#ffffff` text, 8px radius, compact horizontal padding (commonly 8px 15px). Used for decisive purchase/progression actions.
+- **Dark Fill Action:** `#1d1d1f` background, `#ffffff` text, 8px radius. Used when light surfaces need a restrained high-contrast primary.
+- **Pill/Capsule Action Family:** large capsule actions at `18px`-`56px` radii and extreme pill links at `980px`. Establishes Apple’s soft but precise call-to-action silhouette.
+- **Utility Filter/Button Shells:** light shells (`#fafafc` or translucent white) with subtle gray borders (`#d2d2d7` / `#86868b`) for dense configuration contexts.
+- **Pressed Behavior:** active controls commonly reduce scale or shift fill slightly to indicate physical press confirmation.
+
+### Cards & Containers
+- **Editorial/Product Cards:** light cards on `#f5f5f7` or white fields with minimal framing and image-first composition.
+- **Dark Utility Cards:** graphite steps (`#272729` to `#2a2a2c`) used for overlays, media controls, and dark-context modules.
+- **Configurator Panels:** rounded containers (often 12px-18px) with clear but restrained border definition.
+- **Carousel/Spotlight Modules:** larger rounded shells (`28px`-`36px`) for featured content lanes.
+
+### Inputs & Forms
+- **Retail Input Fields:** translucent or white backgrounds, dark text (`#1d1d1f`), border-led containment (`#86868b`).
+- **Selection Controls:** circular/toggle-like control geometry appears frequently in product selection interfaces.
+- **Density Strategy:** form fields remain visually quiet to keep device imagery and pricing hierarchy dominant.
+
+### Navigation
+- **Global Marketing Nav:** compact dark translucent bar with small-type links and restrained iconography.
+- **Store/Sub-shop Nav Layers:** additional utility bars, chips, and segmented controls for category and product narrowing.
+- **Link Hierarchy:** link blues remain the primary interactive signal while neutral text supports dense navigation sets.
+
+### Image Treatment
+- **Object-First Photography:** hardware and accessories are foregrounded on controlled solid surfaces.
+- **High-fidelity finish rendering:** reflective/material details are central to visual persuasion.
+- **Mixed framing:** full-bleed hero scenes coexist with rounded retail cards and tightly cropped merchandising thumbnails.
+
+### Other Distinctive Components
+- **Product Configurator Matrix:** option stacks and selectors combining chips, radio-style controls, and contextual pricing/summary blocks.
+- **Carousel Control Dots/Arrows:** circular control vocabulary in muted overlays for gallery progression.
+- **Environment Story Panels:** narrative chapters that blend editorial typography with cinematic product/environment visuals.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit is effectively `8px`, but the system supports dense micro-steps for precision alignment.
+- Frequently reused spacing values across pages: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
+- Universal rhythm constants visible across both marketing and retail flows: `8px` unit scaffolding with `14-20px` utility intervals for component padding and list spacing.
+
+### Grid & Container
+- **Showcase pages:** large central columns with broad horizontal breathing room and full-width color chapters.
+- **Commerce pages:** tighter multi-column product and control grids with frequent modular stacking.
+- **Container behavior:** constrained readable core with generous outer margins at desktop widths.
+
+### Whitespace Philosophy
+- **Scene pacing:** major visual chapters use broad top/bottom breathing room.
+- **Information compaction where needed:** retail pages deliberately compress spacing to expose more actionable information per viewport.
+- **Contrast-led separation:** section transitions rely more on surface changes than decorative separators.
+
+### Border Radius Scale
+- **5px:** tiny utility links/tags and minor small shells.
+- **8px-12px:** standard controls and compact fields.
+- **16px-18px:** cards, module frames, and commerce panels.
+- **28px-36px:** larger module and spotlight containers.
+- **56px / 100px / 980px:** capsules, large pills, and signature elongated CTA forms.
+- **50%:** circular media and selection controls.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|------|-----------|-----|
+| Level 0 | Flat neutral surfaces (`#ffffff`, `#f5f5f7`, `#000000`) | Main narrative and product stages |
+| Level 1 | Subtle border containment (`#d2d2d7`, `#86868b`) | Filters, input fields, utility cards |
+| Level 2 | Soft shadow (`rgba(0,0,0,0.08)` to `rgba(0,0,0,0.22)` where present) | Highlighted cards and elevated merchandise modules |
+| Level 3 | Dark-surface stepping (`#272729` -> `#2a2a2c`) | Overlays, media controls, dark utility clusters |
+| Accessibility | Blue focus signal (`#0071e3`) | Keyboard and selection emphasis |
+
+Depth is intentionally restrained. Apple favors tonal contrast, surface stepping, and compositional hierarchy over heavy shadow stacks.
+
+### Decorative Depth
+- Decorative depth is primarily created by photographic realism and material rendering, not synthetic UI effects.
+- Translucent overlays and glass-like utility bars provide mild atmospheric layering in navigation and controls.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the neutral triad (`#000000`, `#f5f5f7`, `#ffffff`) as the structural foundation.
+- Reserve blue accents for genuine action and navigation semantics.
+- Keep typography tight and deliberate, especially at display scales.
+- Maintain the capsule/circle geometry language for controls and key actions.
+- Let product imagery carry visual drama; keep chrome understated.
+- Use border-led containment in dense retail contexts instead of heavy card ornamentation.
+- Preserve clear separation between showcase modules and transactional modules while keeping core tokens shared.
+
+### Don't
+- Don’t introduce broad secondary accent palettes that compete with Apple blue.
+- Don’t overuse shadows, glow effects, or decorative gradients in core UI chrome.
+- Don’t mix unrelated font families or loosen tracking indiscriminately.
+- Don’t flatten all corners to a single radius; Apple uses purposeful radius tiers.
+- Don’t overload commerce modules with thick borders or loud visual effects.
+- Don’t remove neutral contrast cadence between dark and light chapters.
+- Don’t treat marketing and purchase flows as separate design systems.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | 374px and below | Tightened retail controls, single-column product stacks |
+| Mobile | 375px-640px | One-column modules, compact action rows, condensed selectors |
+| Tablet | 641px-833px | Expanded cards and mixed 1-2 column transitions |
+| Tablet Wide | 834px-1023px | More stable multi-column merchandising, larger text blocks |
+| Desktop | 1024px-1240px | Full retail layouts and product comparison structures |
+| Desktop Wide | 1241px-1440px | Marketing hero expansion and broader section spacing |
+| Large Desktop | 1441px+ | Maximum chapter breathing room and wide editorial composition |
+
+### Touch Targets
+- Primary and secondary actions are generally presented in tap-friendly pill/button geometries.
+- Circular media and selection controls align with minimum touchable intent in mobile contexts.
+- Dense commerce UI uses compact labels but maintains clear hit regions via surrounding shape padding.
+
+### Collapsing Strategy
+- Marketing hero typography scales down in discrete tiers while preserving hierarchy contrast.
+- Product and commerce grids collapse from multi-column to stacked cards with persistent selector visibility.
+- Utility navigation compresses into simpler link/control groupings while preserving key actions.
+- Option/configuration clusters become vertically sequenced to keep purchase flow linear on small screens.
+
+### Image Behavior
+- Product imagery preserves aspect and centrality through breakpoints.
+- Hero visuals remain dominant on mobile, with text repositioned around media priority.
+- Retail thumbnails stay legible via tighter crop logic and denser card stacking.
+- Image-led modules continue to anchor the rhythm as layout density increases.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary action blue: **Apple Action Blue** (`#0071e3`)
+- Inline link blue: **Body Link Blue** (`#0066cc`)
+- Dark chapter canvas: **Absolute Black** (`#000000`)
+- Light chapter canvas: **Pale Apple Gray** (`#f5f5f7`)
+- Primary text on light: **Near-Black Ink** (`#1d1d1f`)
+- Secondary text: **Secondary Neutral Gray** (`#6e6e73`)
+- Retail border soft: **Soft Border Gray** (`#d2d2d7`)
+- Retail border strong: **Mid Border Gray** (`#86868b`)
+
+### Example Component Prompts
+- "Design an Apple-style product hero on a black canvas (`#000000`) with SF Pro Display semibold headline (48-56px), concise supporting copy, and two capsule CTAs using `#0071e3` and `#1d1d1f`."
+- "Create a commerce configuration panel on white (`#ffffff`) with 18px rounded cards, `#86868b` border fields, SF Pro Text 17px body copy, and compact option selectors."
+- "Build a merchandising card grid alternating `#f5f5f7` and white surfaces, with image-first cards, restrained shadows, and 14-17px SF Pro Text metadata."
+- "Generate a carousel control cluster using circular buttons (50% radius), muted gray overlays, and clear active feedback for gallery navigation."
+- "Compose a mixed marketing + retail page rhythm: dark showcase chapter -> light feature chapter -> dense product list module while keeping blue accents only for actions and links."
+
+### Iteration Guide
+1. Lock the neutral foundation first (`#000000`, `#f5f5f7`, `#ffffff`) before tuning accents.
+2. Keep blue accents scarce and purposeful; if everything is blue, hierarchy collapses.
+3. Tune typography in this order: display scale, body readability, then micro labels.
+4. Match radius by component class (field, card, capsule, circle) rather than one-size-fits-all rounding.
+5. Increase density gradually when moving from showcase sections to commerce sections.
+6. Validate that product imagery remains the strongest visual layer after each revision.
+
+### Known Gaps
+- Distinct semantic status colors (error/warning/success) were not consistently visible in the extracted page set.
+- Some interaction micro-states vary by module and are not represented as universal system tokens.
+- A few retail modules expose context-specific typography overrides that do not appear across all five pages.

package/packages/omo-codex/plugin/skills/frontend/references/design/binance.md

@@ -0,0 +1,345 @@
+# Design System Inspired by Binance.US
+
+## 1. Visual Theme & Atmosphere
+
+Binance.US radiates the polished urgency of a digital trading floor — a space where money moves and decisions happen in seconds. The design is a two-tone composition that alternates between stark white trading surfaces and deep near-black panels (`#222126`), creating a visual rhythm that mirrors the bull-and-bear duality of crypto markets. Binance Yellow (`#F0B90B`) cuts through this monochrome foundation like a gold ingot on a steel desk — unmistakable, confident, and engineered to guide every eye toward the next action.
+
+The interface speaks the language of fintech trust. Custom BinancePlex typography gives every headline and data point a proprietary gravitas, while generous whitespace and restrained decoration keep the focus on numbers, charts, and call-to-action buttons. The design avoids visual complexity in favor of operational clarity — every element exists to either inform or convert. Product screenshots of the mobile trading app dominate the middle sections, presented on floating device mockups against golden gradients, reinforcing that this is a platform you carry with you.
+
+What makes Binance.US distinctive is the tension between warmth and precision. The golden yellow brand color — warm, optimistic, almost celebratory — lives inside a system of cold, clinical grey text and razor-sharp borders. This isn't a playful fintech like Robinhood or a corporate fortress like Fidelity — it's a crypto-native platform that wraps cutting-edge trading technology in the visual language of established finance.
+
+**Key Characteristics:**
+- Two-tone light/dark section alternation — white surfaces for trust, dark panels for depth
+- Binance Yellow (`#F0B90B`) as the singular accent color driving all primary actions
+- BinancePlex custom typeface providing proprietary brand identity at every text level
+- Pill-shaped CTA buttons (50px radius) that demand attention
+- Floating device mockups on golden gradients for product showcasing
+- Crypto price tickers with real-time data prominently displayed
+- Shadow-light elevation with subtle 5% opacity card shadows
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **Binance Yellow** (`#F0B90B`): The signature — primary CTA backgrounds, brand accent, active states, link color. The single most important color in the system
+- **Binance Gold** (`#FFD000`): Lighter gold variant used for pill button borders, secondary CTA fills, and golden gradient highlights
+- **Light Gold** (`#F8D12F`): Soft gold for gradient endpoints and hover-adjacent states
+
+### Secondary & Accent
+
+- **Active Yellow** (`#D0980B`): Darkened yellow for active/pressed button states — the "clicked" gold
+- **Focus Blue** (`#1EAEDB`): Accessibility focus state — appears on hover and focus for all interactive elements
+
+### Surface & Background
+
+- **Pure White** (`#FFFFFF`): Primary page canvas, card surfaces, light section backgrounds
+- **Snow** (`#F5F5F5`): Subtle surface differentiation, input backgrounds, alternating row fills
+- **Binance Dark** (`#222126`): Dark section backgrounds, footer canvas, "Trusted by millions" panel — a near-black with a faint purple undertone
+- **Dark Card** (`#2B2F36`): Card surfaces within dark sections, elevated dark containers
+- **Ink** (`#1E2026`): Button text on yellow backgrounds, deepest text color on light surfaces
+
+### Neutrals & Text
+
+- **Primary Text** (`#1E2026`): Main body text, headings on light backgrounds — near-black with slight warmth
+- **Secondary Text** (`#32313A`): Navigation links, descriptive copy on light surfaces
+- **Slate** (`#848E9C`): Tertiary text, metadata, timestamps, footer links — the workhorse grey
+- **Steel** (`#686A6C`): Disabled-adjacent text, subtle labels
+- **Muted** (`#777E90`): Secondary navigation links, less prominent footer text
+- **Hover Dark** (`#1A1A1A`): Universal link hover color — text darkens on hover
+
+### Semantic & Accent
+
+- **Crypto Green** (`#0ECB81`): Positive price movement, success states, "up" indicators
+- **Crypto Red** (`#F6465D`): Negative price movement, error states, "down" indicators
+- **Border Light** (`#E6E8EA`): Standard card and section borders on light backgrounds
+- **Border Gold** (`#FFD000`): Active/selected state borders, pill button outlines
+
+### Gradient System
+
+- **Golden Glow**: Radial gradient from `#F0B90B` center to `#F8D12F` edge — used behind product mockup screenshots
+- **Dark Fade**: Linear gradient from `#222126` to transparent — used for dark section transitions
+- **Hero Shimmer**: Subtle animated gold gradient on hero section accents
+
+## 3. Typography Rules
+
+### Font Family
+
+**Primary:** BinancePlex (custom proprietary typeface designed by Binance)
+- Fallbacks: Arial, sans-serif
+- Replaced DIN Next to solve multi-language spacing issues
+- Available in weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
+
+**System:** system-ui stack for cookie banners and third-party UI
+- Fallbacks: Segoe UI, Roboto, Helvetica, Arial
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 60px | 700 | 1.08 | — | Hero headlines, maximum impact |
+| Display Secondary | 34px | 700 | 1.00 | — | Section titles on dark backgrounds |
+| Heading 1 | 28px | 500 | 1.00 | — | Major section headings |
+| Heading 2 | 24px | 700 | 1.00 | — | Feature headings, card titles |
+| Heading 3 | 24px | 600 | 1.00 | — | Subsection headings |
+| Heading 4 | 20px | 600 | 1.25 | — | Card headings, feature labels |
+| Body Large | 20px | 500 | 1.50 | — | Hero subtitle, lead paragraphs |
+| Body | 16px | 500 | 1.50 | — | Standard body text |
+| Body SemiBold | 16px | 600 | 1.30 | — | Emphasized body, nav links |
+| Body Bold | 16px | 700 | 1.50 | — | Strong emphasis text |
+| Button | 16px | 600 | 1.25 | 0.16px | Primary button text |
+| Button Small | 14.4px | 600 | 1.60 | 0.72px | Secondary buttons, wider tracking |
+| Caption | 14px | 500 | 1.43 | — | Metadata, labels, prices |
+| Caption SemiBold | 14px | 600 | 1.50 | — | Emphasized captions |
+| Small | 12px | 600 | 1.00 | — | Tags, badges, fine print |
+| Tiny | 11px | 500 | 1.00 | — | Micro-labels, chart annotations |
+
+### Principles
+
+BinancePlex is engineered for data-dense interfaces where numbers and text must coexist at multiple scales. The typeface has tabular numerals by default — critical for price columns and portfolio values that need perfect vertical alignment. Weights lean toward the heavier end (500-700), giving the interface a sense of authority and confidence that's essential for a financial platform. The tight line-heights (1.00-1.25) on headings create a stacked, compressed feel that mirrors the density of trading dashboards, while body text opens up to 1.50 for comfortable reading of educational and marketing content.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Yellow Fill)**
+- Background: Binance Yellow (`#F0B90B`)
+- Text: Ink (`#1E2026`), 16px/600, BinancePlex
+- Border: none
+- Border radius: slightly rounded (6px)
+- Padding: 6px 32px
+- Hover: shifts to Focus Blue (`#1EAEDB`) with white text
+- Active: darkens to Active Yellow (`#D0980B`)
+- Focus: Focus Blue (`#1EAEDB`) bg, 1px black border, 2px black outline, opacity 0.9
+- Transition: background 200ms ease
+
+**Primary Pill (Gold)**
+- Background: Binance Gold (`#FFD000`)
+- Text: White (`#FFFFFF`)
+- Border: 1px solid `#FFD000`
+- Border radius: full pill (50px)
+- Padding: 10px horizontal
+- Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
+- Hover: shifts to Focus Blue (`#1EAEDB`) with white text
+
+**Secondary (White Outlined)**
+- Background: White (`#FFFFFF`)
+- Text: Binance Yellow (`#F0B90B`)
+- Border: 1px solid `#F0B90B`
+- Border radius: full pill (50px)
+- Padding: 10px horizontal
+- Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
+- Hover: shifts to Focus Blue bg, white text
+
+**Disabled**
+- Background: `#E6E8EA`
+- Text: `#848E9C`
+- Cursor: not-allowed
+
+### Cards & Containers
+
+- Background: White (`#FFFFFF`) on light sections, Dark Card (`#2B2F36`) on dark sections
+- Border: 1px solid `#E6E8EA` on light cards
+- Border radius: medium rounded (12px) for content cards, tight (8px) for data cards
+- Shadow: `rgba(32, 32, 37, 0.05) 0px 3px 5px 0px` — barely visible, trust-building
+- Hover: shadow intensifies to `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px`
+- Transition: box-shadow 200ms ease
+
+### Inputs & Forms
+
+- Background: White (`#FFFFFF`) or Snow (`#F5F5F5`)
+- Text: Ink (`#1E2026`)
+- Border: 1px solid `#E6E8EA`
+- Border radius: 8px
+- Padding: 0px 12px (compact for trading context)
+- Focus: border shifts to black (`#000000`), 1px outline
+- Placeholder: Slate (`#848E9C`)
+- Transition: border-color 200ms ease
+
+### Navigation
+
+- Background: White (`#FFFFFF`), sticky
+- Height: ~64px
+- Left: Binance logo (SVG, yellow mark + dark wordmark)
+- Center/Right: navigation links in 14px/600 BinancePlex, color `#32313A`
+- CTA: Yellow pill button "Get Started" in nav right
+- Hover: links darken to `#1A1A1A`
+- Mobile: hamburger menu, full-height overlay
+- Top: optional promotional banner bar
+
+### Image Treatment
+
+- Product mockups: device frames on golden gradient backgrounds, floating with subtle shadow
+- Hero images: full-width contained within card-like areas with rounded corners (24px)
+- Video sections: 24px radius with embedded player controls
+- App screenshots: dark-themed trading UI shown within phone/tablet bezels
+- Crypto icons: 48px circular with brand colors
+
+### Trust Indicators
+
+- Real-time crypto price ticker (BTC, BNB, SOL with green/red price change)
+- "Trusted by millions" section with statistics on dark background
+- Security badges and regulatory compliance mentions
+- QR code for direct app download in footer
+
+## 5. Layout Principles
+
+### Spacing System
+
+Base unit: 8px
+
+| Token | Value | Use |
+|-------|-------|-----|
+| space-1 | 4px | Tight inline gaps, icon padding |
+| space-2 | 8px | Base unit, button icon gaps, tight margins |
+| space-3 | 12px | Card internal padding, input padding |
+| space-4 | 16px | Standard padding, section margins |
+| space-5 | 20px | Card gaps, medium padding |
+| space-6 | 24px | Section internal padding |
+| space-7 | 32px | Section breaks, large padding |
+| space-8 | 48px | Major section padding |
+| space-9 | 64px | Hero section padding |
+| space-10 | 80px | Large section spacing |
+
+### Grid & Container
+
+- Max container width: 1200px (centered)
+- Hero area: single column with side-by-side text + image above 1024px
+- Feature grid: 3-column on desktop, single column on mobile
+- Product showcase: 2-column (text + device mockup)
+- Horizontal padding: 32px desktop, 16px mobile
+- Grid gap: 24px between feature cards
+
+### Whitespace Philosophy
+
+Binance.US uses whitespace as a trust signal. Generous padding around the hero section and between content blocks creates a sense of spaciousness that counters the information density typically associated with crypto exchanges. The light sections breathe — wide margins around headlines and ample spacing between cards — while dark sections compress, packing features into tighter grids to convey capability and depth. The overall rhythm alternates between "inviting entry" (light, spacious) and "deep functionality" (dark, dense).
+
+### Border Radius Scale
+
+| Value | Context |
+|-------|---------|
+| 1px | Subtle edge softening, fine UI elements |
+| 2px | Close buttons, micro-interactive elements |
+| 6px | Primary buttons (non-pill), small cards |
+| 8px | Form inputs, data cards, image containers |
+| 10px | Navigation pills, tag containers |
+| 12px | Content cards, feature containers |
+| 24px | Video containers, hero imagery, large cards |
+| 50px | Pill buttons (CTA), search inputs, full-round elements |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat | No shadow, solid background | Default for inline elements |
+| Subtle | `rgba(32, 32, 37, 0.05) 0px 3px 5px` | Content cards, resting state |
+| Medium | `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px` | Hovered cards, elevated containers |
+| Pill Shadow | `rgb(153,153,153) 0px 2px 10px -3px` | Pill CTA buttons, floating actions |
+| Heavy | `rgba(0,0,0) 0px 32px 37px` | Modal overlays, dropdown menus |
+
+Binance.US uses a whisper-light shadow system. Card shadows are barely perceptible at 5% opacity — they exist not for dramatic depth but as subtle ground cues that keep cards from feeling pasted onto the surface. The pill button shadow is the exception: slightly more visible to give CTAs a "floating" quality that invites clicks. The philosophy is pragmatic — in a financial context, heavy shadows feel frivolous, while no shadows at all feel flat and untrustworthy. The 5% sweet spot communicates professionalism.
+
+### Decorative Depth
+
+- **Golden gradient backgrounds**: Behind device mockup sections, radial golden glow centered on the product
+- **Dark-to-light section transitions**: Hard cut (no gradient blend) between white and `#222126` sections
+- **Price ticker strip**: Flat, borderless, reads as a data bar rather than a decorative element
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use Binance Yellow (`#F0B90B`) exclusively for primary CTAs and brand accents — it's the single point of color
+- Keep light and dark sections strictly alternating for visual rhythm
+- Use BinancePlex at weight 500+ for all interactive elements — this is a confidence-forward design
+- Apply 50px radius to all primary CTA pill buttons — the signature interactive shape
+- Maintain 12px radius on content cards for a polished but not overly rounded feel
+- Show real-time data prominently (prices, percentages, stats) — numbers build trust
+- Use Slate (`#848E9C`) for all secondary/metadata text — the universal quiet voice
+- Keep shadows at 5% opacity or less — barely there but present
+
+### Don't
+
+- Don't introduce additional brand colors — Binance Yellow is the only accent; all other color is data-driven (green up, red down)
+- Don't use rounded corners above 12px on content cards — only CTAs and video containers go higher
+- Don't add heavy shadows or hover lift effects — this is a restrained financial platform
+- Don't use BinancePlex below weight 500 for headings — lighter weights undermine authority
+- Don't place yellow text on yellow backgrounds — always ensure high contrast pairing
+- Don't mix pill (50px) and square (6px) button styles in the same row
+- Don't soften the dark sections — `#222126` should feel authoritative, not grey
+- Don't use decorative illustrations — imagery should be product screenshots or data visualizations
+- Don't add animation beyond subtle transitions (200ms ease) — financial platforms need stability
+- Don't use colored backgrounds for semantic states in cards — keep cards white or dark, use text color for semantic meaning
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <425px | Single column, stacked hero, hamburger nav, 16px padding |
+| Small Mobile | 425-599px | Wider mobile layout, price ticker wraps |
+| Tablet Small | 600-768px | 2-column feature grid begins |
+| Tablet | 769-896px | Hero side-by-side layout begins |
+| Desktop Small | 897-1024px | Full nav expands, 3-column features |
+| Desktop | 1024-1280px | Full layout, max content width |
+| Large Desktop | 1280-1440px | Increased margins, centered container |
+| XL Desktop | >1440px | Max-width container (1200px) with expanded margins |
+
+### Touch Targets
+
+- Minimum touch target: 44x44px (WCAG AAA)
+- Pill CTA buttons: 48px height minimum
+- Nav links: 44px touch area
+- Crypto ticker items: full-width tappable rows on mobile
+- App download buttons: large tap zones (50px+)
+
+### Collapsing Strategy
+
+- **Navigation**: Full horizontal links → hamburger menu below 897px; logo and "Get Started" CTA remain visible
+- **Hero section**: Side-by-side (text left, image right) → stacked (text top, image below) at 768px
+- **Feature grid**: 3-col → 2-col at 768px → 1-col at 600px
+- **Price ticker**: Horizontal row → wrapping or scrollable at 600px
+- **Section padding**: 64px → 48px → 32px → 16px as viewport narrows
+- **Device mockups**: Scale down proportionally, maintain centered positioning
+- **Footer**: Multi-column → stacked accordion sections on mobile
+
+### Image Behavior
+
+- Device mockups: CSS-scaled with max-width constraints, maintain aspect ratio
+- Hero imagery: contained within rounded containers (24px), scale proportionally
+- App screenshots: responsive width with fixed aspect ratio
+- QR code: fixed 120px square, hidden on mobile (replaced with direct app store links)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: Binance Yellow (`#F0B90B`)
+- Secondary CTA: Binance Gold (`#FFD000`)
+- Background Light: Pure White (`#FFFFFF`)
+- Background Dark: Binance Dark (`#222126`)
+- Heading text: Ink (`#1E2026`)
+- Body text: Slate (`#848E9C`)
+- Border: Border Light (`#E6E8EA`)
+- Positive: Crypto Green (`#0ECB81`)
+- Negative: Crypto Red (`#F6465D`)
+
+### Example Component Prompts
+
+- "Create a hero section with white background, a 60px/700 bold headline in Ink (#1E2026), a 20px/500 subtitle in Slate (#848E9C), and a Binance Yellow (#F0B90B) pill button (50px radius) with dark text (#1E2026)"
+- "Design a crypto price ticker strip showing BTC, BNB, SOL prices in 14px/600 Ink (#1E2026) with green (#0ECB81) or red (#F6465D) percentage changes, on a white background with #E6E8EA bottom border"
+- "Build a feature card grid (3-column, 24px gap) with 12px radius white cards, subtle shadow (rgba(32,32,37,0.05) 0px 3px 5px), each containing a yellow (#F0B90B) icon, 20px/600 heading, and 14px/500 #848E9C description"
+- "Create a dark section (#222126) with a 34px/700 white headline centered, and a 3-column feature grid using dark cards (#2B2F36) with 12px radius and yellow (#F0B90B) accent icons"
+- "Design a sticky navigation bar with white background, Binance logo left, 14px/600 #32313A nav links center, and a yellow (#F0B90B) pill button (50px radius, 6px padding 32px) labeled 'Get Started' right"
+
+### Iteration Guide
+
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document
+3. Remember: Binance Yellow (#F0B90B) is the ONLY accent color — everything else is grey/dark/white
+4. Use the dark/light section alternation for visual pacing
+5. Numbers and data should be prominent — this is a financial platform
+6. Pill buttons (50px radius) for CTAs, regular buttons (6px radius) for form actions
+7. Keep shadows almost invisible (5% opacity) — trust comes from clarity, not depth
+8. BinancePlex at 600+ weight for any text that needs to feel authoritative