ai-spector 0.3.4 → 0.3.6

package/assets/themes/apple/DESIGN.md

@@ -0,0 +1,313 @@
+# Design System Inspired by Apple
+
+## 1. Visual Theme & Atmosphere
+
+Apple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible. This is not minimalism as aesthetic preference; it is minimalism as reverence for the object.
+
+The typography anchors everything. San Francisco (SF Pro Display for large sizes, SF Pro Text for body) is Apple's proprietary typeface, engineered with optical sizing that automatically adjusts letterforms depending on point size. At display sizes (56px), weight 600 with a tight line-height of 1.07 and subtle negative letter-spacing (-0.28px) creates headlines that feel machined rather than typeset — precise, confident, and unapologetically direct. At body sizes (17px), the tracking loosens slightly (-0.374px) and line-height opens to 1.47, creating a reading rhythm that is comfortable without ever feeling slack.
+
+The color story is starkly binary. Product sections alternate between pure black (`#000000`) backgrounds with white text and light gray (`#f5f5f7`) backgrounds with near-black text (`#1d1d1f`). This creates a cinematic pacing — dark sections feel immersive and premium, light sections feel open and informational. The only chromatic accent is Apple Blue (`#0071e3`), reserved exclusively for interactive elements: links, buttons, and focus states. This singular accent color in a sea of neutrals gives every clickable element unmistakable visibility.
+
+**Key Characteristics:**
+- SF Pro Display/Text with optical sizing — letterforms adapt automatically to size context
+- Binary light/dark section rhythm: black (`#000000`) alternating with light gray (`#f5f5f7`)
+- Single accent color: Apple Blue (`#0071e3`) reserved exclusively for interactive elements
+- Product-as-hero photography on solid color fields — no gradients, no textures, no distractions
+- Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact
+- Full-width section layout with centered content — the viewport IS the canvas
+- Pill-shaped CTAs (980px radius) creating soft, approachable action buttons
+- Generous whitespace between sections allowing each product moment to breathe
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (`#000000`): Hero section backgrounds, immersive product showcases. The darkest canvas for the brightest products.
+- **Light Gray** (`#f5f5f7`): Alternate section backgrounds, informational areas. Not white — the slight blue-gray tint prevents sterility.
+- **Near Black** (`#1d1d1f`): Primary text on light backgrounds, dark button fills. Slightly warmer than pure black for comfortable reading.
+
+### Interactive
+- **Apple Blue** (`#0071e3`): `--sk-focus-color`, primary CTA backgrounds, focus rings. The ONLY chromatic color in the interface.
+- **Link Blue** (`#0066cc`): `--sk-body-link-color`, inline text links. Slightly darker than Apple Blue for text-level readability.
+- **Bright Blue** (`#2997ff`): Links on dark backgrounds. Higher luminance for contrast on black sections.
+
+### Text
+- **White** (`#ffffff`): Text on dark backgrounds, button text on blue/dark CTAs.
+- **Near Black** (`#1d1d1f`): Primary body text on light backgrounds.
+- **Black 80%** (`rgba(0, 0, 0, 0.8)`): Secondary text, nav items on light backgrounds. Slightly softened.
+- **Black 48%** (`rgba(0, 0, 0, 0.48)`): Tertiary text, disabled states, carousel controls.
+
+### Surface & Dark Variants
+- **Dark Surface 1** (`#272729`): Card backgrounds in dark sections.
+- **Dark Surface 2** (`#262628`): Subtle surface variation in dark contexts.
+- **Dark Surface 3** (`#28282a`): Elevated cards on dark backgrounds.
+- **Dark Surface 4** (`#2a2a2d`): Highest dark surface elevation.
+- **Dark Surface 5** (`#242426`): Deepest dark surface tone.
+
+### Button States
+- **Button Active** (`#ededf2`): Active/pressed state for light buttons.
+- **Button Default Light** (`#fafafc`): Search/filter button backgrounds.
+- **Overlay** (`rgba(210, 210, 215, 0.64)`): Media control scrims, overlays.
+- **White 32%** (`rgba(255, 255, 255, 0.32)`): Hover state on dark modal close buttons.
+
+### Shadows
+- **Card Shadow** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`): Soft, diffused elevation for product cards. Offset and wide blur create a natural, photographic shadow.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `SF Pro Display`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Body**: `SF Pro Text`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- SF Pro Display is used at 20px and above; SF Pro Text is optimized for 19px and below.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | SF Pro Display | 56px (3.50rem) | 600 | 1.07 (tight) | -0.28px | Product launch headlines, maximum impact |
+| Section Heading | SF Pro Display | 40px (2.50rem) | 600 | 1.10 (tight) | normal | Feature section titles |
+| Tile Heading | SF Pro Display | 28px (1.75rem) | 400 | 1.14 (tight) | 0.196px | Product tile headlines |
+| Card Title | SF Pro Display | 21px (1.31rem) | 700 | 1.19 (tight) | 0.231px | Bold card headings |
+| Sub-heading | SF Pro Display | 21px (1.31rem) | 400 | 1.19 (tight) | 0.231px | Regular card headings |
+| Nav Heading | SF Pro Text | 34px (2.13rem) | 600 | 1.47 | -0.374px | Large navigation headings |
+| Sub-nav | SF Pro Text | 24px (1.50rem) | 300 | 1.50 | normal | Light sub-navigation text |
+| Body | SF Pro Text | 17px (1.06rem) | 400 | 1.47 | -0.374px | Standard reading text |
+| Body Emphasis | SF Pro Text | 17px (1.06rem) | 600 | 1.24 (tight) | -0.374px | Emphasized body text, labels |
+| Button Large | SF Pro Text | 18px (1.13rem) | 300 | 1.00 (tight) | normal | Large button text, light weight |
+| Button | SF Pro Text | 17px (1.06rem) | 400 | 2.41 (relaxed) | normal | Standard button text |
+| Link | SF Pro Text | 14px (0.88rem) | 400 | 1.43 | -0.224px | Body links, "Learn more" |
+| Caption | SF Pro Text | 14px (0.88rem) | 400 | 1.29 (tight) | -0.224px | Secondary text, descriptions |
+| Caption Bold | SF Pro Text | 14px (0.88rem) | 600 | 1.29 (tight) | -0.224px | Emphasized captions |
+| Micro | SF Pro Text | 12px (0.75rem) | 400 | 1.33 | -0.12px | Fine print, footnotes |
+| Micro Bold | SF Pro Text | 12px (0.75rem) | 600 | 1.33 | -0.12px | Bold fine print |
+| Nano | SF Pro Text | 10px (0.63rem) | 400 | 1.47 | -0.08px | Legal text, smallest size |
+
+### Principles
+- **Optical sizing as philosophy**: SF Pro automatically switches between Display and Text optical sizes. Display versions have wider letter spacing and thinner strokes optimized for large sizes; Text versions are tighter and sturdier for small sizes. This means the font literally changes its DNA based on context.
+- **Weight restraint**: The scale spans 300 (light) to 700 (bold) but most text lives at 400 (regular) and 600 (semibold). Weight 300 appears only on large decorative text. Weight 700 is rare, used only for bold card titles.
+- **Negative tracking at all sizes**: Unlike most systems that only track headlines, Apple applies subtle negative letter-spacing even at body sizes (-0.374px at 17px, -0.224px at 14px, -0.12px at 12px). This creates universally tight, efficient text.
+- **Extreme line-height range**: Headlines compress to 1.07 while body text opens to 1.47, and some button contexts stretch to 2.41. This dramatic range creates clear visual hierarchy through rhythm alone.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Blue (CTA)**
+- Background: `#0071e3` (Apple Blue)
+- Text: `#ffffff`
+- Padding: 8px 15px
+- Radius: 8px
+- Border: 1px solid transparent
+- Font: SF Pro Text, 17px, weight 400
+- Hover: background brightens slightly
+- Active: `#ededf2` background shift
+- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline
+- Use: Primary call-to-action ("Buy", "Shop iPhone")
+
+**Primary Dark**
+- Background: `#1d1d1f`
+- Text: `#ffffff`
+- Padding: 8px 15px
+- Radius: 8px
+- Font: SF Pro Text, 17px, weight 400
+- Use: Secondary CTA, dark variant
+
+**Pill Link (Learn More / Shop)**
+- Background: transparent
+- Text: `#0066cc` (light bg) or `#2997ff` (dark bg)
+- Radius: 980px (full pill)
+- Border: 1px solid `#0066cc`
+- Font: SF Pro Text, 14px-17px
+- Hover: underline decoration
+- Use: "Learn more" and "Shop" links — the signature Apple inline CTA
+
+**Filter / Search Button**
+- Background: `#fafafc`
+- Text: `rgba(0, 0, 0, 0.8)`
+- Padding: 0px 14px
+- Radius: 11px
+- Border: 3px solid `rgba(0, 0, 0, 0.04)`
+- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline
+- Use: Search bars, filter controls
+
+**Media Control**
+- Background: `rgba(210, 210, 215, 0.64)`
+- Text: `rgba(0, 0, 0, 0.48)`
+- Radius: 50% (circular)
+- Active: scale(0.9), background shifts
+- Focus: `2px solid var(--sk-focus-color, #0071e3)` outline, white bg, black text
+- Use: Play/pause, carousel arrows
+
+### Cards & Containers
+- Background: `#f5f5f7` (light) or `#272729`-`#2a2a2d` (dark)
+- Border: none (borders are rare in Apple's system)
+- Radius: 5px-8px
+- Shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` for elevated product cards
+- Content: centered, generous padding
+- Hover: no standard hover state — cards are static, links within them are interactive
+
+### Navigation
+- Background: `rgba(0, 0, 0, 0.8)` (translucent dark) with `backdrop-filter: saturate(180%) blur(20px)`
+- Height: 48px (compact)
+- Text: `#ffffff` at 12px, weight 400
+- Active: underline on hover
+- Logo: Apple logomark (SVG) centered or left-aligned, 17x48px viewport
+- Mobile: collapses to hamburger with full-screen overlay menu
+- The nav floats above content, maintaining its dark translucent glass regardless of section background
+
+### Image Treatment
+- Products on solid-color fields (black or white) — no backgrounds, no context, just the object
+- Full-bleed section images that span the entire viewport width
+- Product photography at extremely high resolution with subtle shadows
+- Lifestyle images confined to rounded-corner containers (12px+ radius)
+
+### Distinctive Components
+
+**Product Hero Module**
+- Full-viewport-width section with solid background (black or `#f5f5f7`)
+- Product name as the primary headline (SF Pro Display, 56px, weight 600)
+- One-line descriptor below in lighter weight
+- Two pill CTAs side by side: "Learn more" (outline) and "Buy" / "Shop" (filled)
+
+**Product Grid Tile**
+- Square or near-square card on contrasting background
+- Product image dominating 60-70% of the tile
+- Product name + one-line description below
+- "Learn more" and "Shop" link pair at bottom
+
+**Feature Comparison Strip**
+- Horizontal scroll of product variants
+- Each variant as a vertical card with image, name, and key specs
+- Minimal chrome — the products speak for themselves
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px
+- Notable characteristic: the scale is dense at small sizes (2-11px) with granular 1px increments, then jumps in larger steps. This allows precise micro-adjustments for typography and icon alignment.
+
+### Grid & Container
+- Max content width: approximately 980px (the recurring "980px radius" in pill buttons echoes this width)
+- Hero: full-viewport-width sections with centered content block
+- Product grids: 2-3 column layouts within centered container
+- Single-column for hero moments — one product, one message, full attention
+- No visible grid lines or gutters — spacing creates implied structure
+
+### Whitespace Philosophy
+- **Cinematic breathing room**: Each product section occupies a full viewport height (or close to it). The whitespace between products is not empty — it is the pause between scenes in a film.
+- **Vertical rhythm through color blocks**: Rather than using spacing alone to separate sections, Apple uses alternating background colors (black, `#f5f5f7`, white). Each color change signals a new "scene."
+- **Compression within, expansion between**: Text blocks are tightly set (negative letter-spacing, tight line-heights) while the space surrounding them is vast. This creates a tension between density and openness.
+
+### Border Radius Scale
+- Micro (5px): Small containers, link tags
+- Standard (8px): Buttons, product cards, image containers
+- Comfortable (11px): Search inputs, filter buttons
+- Large (12px): Feature panels, lifestyle image containers
+- Full Pill (980px): CTA links ("Learn more", "Shop"), navigation pills
+- Circle (50%): Media controls (play/pause, arrows)
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, solid background | Standard content sections, text blocks |
+| Navigation Glass | `backdrop-filter: saturate(180%) blur(20px)` on `rgba(0,0,0,0.8)` | Sticky navigation bar — the glass effect |
+| Subtle Lift (Level 1) | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | Product cards, floating elements |
+| Media Control | `rgba(210, 210, 215, 0.64)` background with scale transforms | Play/pause buttons, carousel controls |
+| Focus (Accessibility) | `2px solid #0071e3` outline | Keyboard focus on all interactive elements |
+
+**Shadow Philosophy**: Apple uses shadow extremely sparingly. The primary shadow (`3px 5px 30px` with 0.22 opacity) is soft, wide, and offset — mimicking a diffused studio light casting a natural shadow beneath a physical object. This reinforces the "product as physical sculpture" metaphor. Most elements have NO shadow at all; elevation comes from background color contrast (dark card on darker background, or light card on slightly different gray).
+
+### Decorative Depth
+- Navigation glass: the translucent, blurred navigation bar is the most recognizable depth element, creating a sense of floating UI above scrolling content
+- Section color transitions: depth is implied by the alternation between black and light gray sections rather than by shadows
+- Product photography shadows: the products themselves cast shadows in their photography, so the UI doesn't need to add synthetic ones
+
+## 7. Do's and Don'ts
+
+### Do
+- Use SF Pro Display at 20px+ and SF Pro Text below 20px — respect the optical sizing boundary
+- Apply negative letter-spacing at all text sizes (not just headlines) — Apple tracks tight universally
+- Use Apple Blue (`#0071e3`) ONLY for interactive elements — it must be the singular accent
+- Alternate between black and light gray (`#f5f5f7`) section backgrounds for cinematic rhythm
+- Use 980px pill radius for CTA links — the signature Apple link shape
+- Keep product imagery on solid-color fields with no competing visual elements
+- Use the translucent dark glass (`rgba(0,0,0,0.8)` + blur) for sticky navigation
+- Compress headline line-heights to 1.07-1.14 — Apple headlines are famously tight
+
+### Don't
+- Don't introduce additional accent colors — the entire chromatic budget is spent on blue
+- Don't use heavy shadows or multiple shadow layers — Apple's shadow system is one soft diffused shadow or nothing
+- Don't use borders on cards or containers — Apple almost never uses visible borders (except on specific buttons)
+- Don't apply wide letter-spacing to SF Pro — it is designed to run tight at every size
+- Don't use weight 800 or 900 — the maximum is 700 (bold), and even that is rare
+- Don't add textures, patterns, or gradients to backgrounds — solid colors only
+- Don't make the navigation opaque — the glass blur effect is essential to the Apple UI identity
+- Don't center-align body text — Apple body copy is left-aligned; only headlines center
+- Don't use rounded corners larger than 12px on rectangular elements (980px is for pills only)
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <360px | Minimum supported, single column |
+| Mobile | 360-480px | Standard mobile layout |
+| Mobile Large | 480-640px | Wider single column, larger images |
+| Tablet Small | 640-834px | 2-column product grids begin |
+| Tablet | 834-1024px | Full tablet layout, expanded nav |
+| Desktop Small | 1024-1070px | Standard desktop layout begins |
+| Desktop | 1070-1440px | Full layout, max content width |
+| Large Desktop | >1440px | Centered with generous margins |
+
+### Touch Targets
+- Primary CTAs: 8px 15px padding creating ~44px touch height
+- Navigation links: 48px height with adequate spacing
+- Media controls: 50% radius circular buttons, minimum 44x44px
+- "Learn more" pills: generous padding for comfortable tapping
+
+### Collapsing Strategy
+- Hero headlines: 56px Display → 40px → 28px on mobile, maintaining tight line-height proportionally
+- Product grids: 3-column → 2-column → single column stacked
+- Navigation: full horizontal nav → compact mobile menu (hamburger)
+- Product hero modules: full-bleed maintained at all sizes, text scales down
+- Section backgrounds: maintain full-width color blocks at all breakpoints — the cinematic rhythm never breaks
+- Image sizing: products scale proportionally, never crop — the product silhouette is sacred
+
+### Image Behavior
+- Product photography maintains aspect ratio at all breakpoints
+- Hero product images scale down but stay centered
+- Full-bleed section backgrounds persist at every size
+- Lifestyle images may crop on mobile but maintain their rounded corners
+- Lazy loading for below-fold product images
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Apple Blue (`#0071e3`)
+- Page background (light): `#f5f5f7`
+- Page background (dark): `#000000`
+- Heading text (light): `#1d1d1f`
+- Heading text (dark): `#ffffff`
+- Body text: `rgba(0, 0, 0, 0.8)` on light, `#ffffff` on dark
+- Link (light bg): `#0066cc`
+- Link (dark bg): `#2997ff`
+- Focus ring: `#0071e3`
+- Card shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`
+
+### Example Component Prompts
+- "Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding)."
+- "Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. Description at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px."
+- "Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right."
+- "Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below."
+- "Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA."
+
+### Iteration Guide
+1. Every interactive element gets Apple Blue (`#0071e3`) — no other accent colors
+2. Section backgrounds alternate: black for immersive moments, `#f5f5f7` for informational moments
+3. Typography optical sizing: SF Pro Display at 20px+, SF Pro Text below — never mix
+4. Negative letter-spacing at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px
+5. The navigation glass effect (translucent dark + blur) is non-negotiable — it defines the Apple web experience
+6. Products always appear on solid color fields — never on gradients, textures, or lifestyle backgrounds in hero modules
+7. Shadow is rare and always soft: `3px 5px 30px 0.22 opacity` or nothing at all
+8. Pill CTAs use 980px radius — this creates the signature Apple rounded-rectangle-that-looks-like-a-capsule shape

package/assets/themes/apple/SUMMARY.md

@@ -0,0 +1,7 @@
+Visual vibe — Premium consumer tech: lots of whitespace, large product imagery, restrained palette, cinematic scroll sections.
+
+Atmosphere — Marketing-site polish: minimal chrome, strong typography, and focus on hardware/software hero shots—feels calm, expensive, and intentional.
+
+Signature — Neutral grays and whites · SF-like system feel · generous padding · subtle motion and depth · product-first layouts.
+
+Suggest for (AI) — Product landing pages, device or app showcases, premium B2C, keynote-style storytelling, brand sites where photography carries the story.

package/assets/themes/binance/DESIGN.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