oh-my-opencode 4.9.2 → 4.11.0

package/dist/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

package/dist/skills/frontend/references/design/bmw.md

@@ -0,0 +1,180 @@
+# Design System Inspired by BMW
+
+## 1. Visual Theme & Atmosphere
+
+BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.
+
+The typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.
+
+What makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.
+
+**Key Characteristics:**
+- BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority
+- BMW Blue (`#1c69d4`) as singular accent — used only for interactive elements
+- Zero border-radius detected — angular, sharp-cornered, industrial geometry
+- Dark hero photography + white content sections — showroom lighting rhythm
+- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility
+- Weight 900 for navigation emphasis — extreme contrast with 300 display
+- Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering
+- Full-bleed automotive photography as primary visual content
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds
+- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent
+- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states
+
+### Neutral Scale
+- **Near Black** (`#262626`): Primary text on light surfaces, dark link text
+- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata
+- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements
+
+### Interactive States
+- All links hover to white (`#ffffff`) — suggesting primarily dark-surface navigation
+- Text links use underline: none on hover — clean interaction
+
+### Shadows
+- Minimal shadow system — depth through photography and dark/light section contrast
+
+## 3. Typography Rules
+
+### Font Families
+- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`
+- **Body / UI**: `BMWTypeNextLatin`, same fallback stack
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |
+| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |
+| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |
+| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |
+| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA buttons |
+| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |
+
+### Principles
+- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.
+- **Universal uppercase display**: The 60px hero is always uppercase — creating a monumental, architectural quality.
+- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.
+- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.
+
+## 4. Component Stylings
+
+### Buttons
+- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary
+- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)
+- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)
+- No border-radius — sharp rectangular buttons
+
+### Cards & Containers
+- No border-radius — all containers are sharp-cornered rectangles
+- White backgrounds on light sections
+- Dark backgrounds for hero/feature sections
+- No visible borders on most elements
+
+### Navigation
+- BMWTypeNextLatin 18px weight 900 for primary nav links
+- White text on dark header
+- BMW logo 54x54px
+- Hover: remains white, text-decoration none
+- "Home" text link in header
+
+### Image Treatment
+- Full-bleed automotive photography
+- Dark cinematic lighting
+- Edge-to-edge hero images
+- Car photography as primary visual content
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px
+
+### Grid & Container
+- Full-width hero photography
+- Centered content sections
+- Footer: multi-column link grid
+
+### Whitespace Philosophy
+- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.
+- **Compressed content**: Body text areas use tight line-heights and compact spacing — information-dense, no waste.
+
+### Border Radius Scale
+- **None detected.** BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |
+| Flat (Level 1) | White surface, no shadow | Content sections |
+| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |
+
+**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use BMWTypeNextLatin Light (300) uppercase for all display headings
+- Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable
+- Use BMW Blue (`#1c69d4`) only for interactive elements — never decoratively
+- Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional
+- Use full-bleed automotive photography for hero sections
+- Keep line-heights tight (1.15–1.30) throughout
+- Use `--site-context-*` CSS variables for theming
+
+### Don't
+- Don't round corners — zero radius is the BMW identity
+- Don't use BMW Blue for backgrounds or large surfaces — it's an accent only
+- Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes
+- Don't add decorative elements — the photography and typography carry everything
+- Don't use relaxed line-heights — BMW text is always compressed
+- Don't lighten the dark hero sections — the contrast with white IS the design
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <375px | Minimum supported |
+| Mobile | 375–480px | Single column |
+| Mobile Large | 480–640px | Slight adjustments |
+| Tablet Small | 640–768px | 2-column begins |
+| Tablet | 768–920px | Standard tablet |
+| Desktop Small | 920–1024px | Desktop layout begins |
+| Desktop | 1024–1280px | Standard desktop |
+| Large Desktop | 1280–1440px | Expanded |
+| Ultra-wide | 1440–1600px | Maximum layout |
+
+### Collapsing Strategy
+- Hero: 60px → scales down, maintains uppercase
+- Navigation: horizontal → hamburger
+- Photography: full-bleed maintained at all sizes
+- Content sections: stack vertically
+- Footer: multi-column → stacked
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`)
+- Text: Near Black (`#262626`)
+- Secondary text: Meta Gray (`#757575`)
+- Accent: BMW Blue (`#1c69d4`)
+- Focus: BMW Focus Blue (`#0653b6`)
+- Muted: Silver (`#bbbbbb`)
+
+### Example Component Prompts
+- "Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere."
+- "Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout."
+- "Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface."
+- "Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15."
+
+### Iteration Guide
+1. Zero border-radius — every corner is sharp, no exceptions
+2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)
+3. BMW Blue for interactive only — never as background or decoration
+4. Photography carries emotion — the UI is pure precision
+5. Tight line-heights everywhere — 1.15 to 1.30 is the range

package/dist/skills/frontend/references/design/brutalist-skill.md

@@ -0,0 +1,92 @@
+---
+name: industrial-brutalist-ui
+description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
+---
+
+# SKILL: Industrial Brutalism & Tactical Telemetry UI
+
+## 1. Skill Meta
+**Name:** Industrial Brutalism & Tactical Telemetry Interface Engineering
+**Description:** Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.
+
+## 2. Visual Archetypes
+The design system operates by merging two distinct but highly compatible visual paradigms. **Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.**
+
+### 2.1 Swiss Industrial Print
+Derived from 1960s corporate identity systems and heavy machinery blueprints.
+*   **Characteristics:** High-contrast light modes (newsprint/off-white substrates). Reliance on monolithic, heavy sans-serif typography. Unforgiving structural grids outlined by visible dividing lines. Aggressive, asymmetric use of negative space punctuated by oversized, viewport-bleeding numerals or letterforms. Heavy use of primary red as an alert/accent color.
+
+### 2.2 Tactical Telemetry & CRT Terminal
+Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).
+*   **Characteristics:** Dark mode exclusivity. High-density tabular data presentation. Absolute dominance of monospaced typography. Integration of technical framing devices (ASCII brackets, crosshairs). Application of simulated hardware limitations (phosphor glow, scanlines, low bit-depth rendering).
+
+## 3. Typographic Architecture
+Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.
+
+### 3.1 Macro-Typography (Structural Headers)
+*   **Classification:** Neo-Grotesque / Heavy Sans-Serif.
+*   **Optimal Web Fonts:** Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
+*   **Implementation Parameters:**
+    *   **Scale:** Deployed at massive scales using fluid typography (e.g., `clamp(4rem, 10vw, 15rem)`).
+    *   **Tracking (Letter-spacing):** Extremely tight, often negative (`-0.03em` to `-0.06em`), forcing glyphs to form solid architectural blocks.
+    *   **Leading (Line-height):** Highly compressed (`0.85` to `0.95`).
+    *   **Casing:** Exclusively uppercase for structural impact.
+
+### 3.2 Micro-Typography (Data & Telemetry)
+*   **Classification:** Monospace / Technical Sans.
+*   **Optimal Web Fonts:** JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
+*   **Implementation Parameters:**
+    *   **Scale:** Fixed and small (`10px` to `14px` / `0.7rem` to `0.875rem`).
+    *   **Tracking:** Generous (`0.05em` to `0.1em`) to simulate mechanical typewriter spacing or terminal matrices.
+    *   **Leading:** Standard to tight (`1.2` to `1.4`).
+    *   **Casing:** Exclusively uppercase. Used for all metadata, navigation, unit IDs, and coordinates.
+
+### 3.3 Textural Contrast (Artistic Disruption)
+*   **Classification:** High-Contrast Serif.
+*   **Optimal Web Fonts:** Playfair Display, EB Garamond, Times New Roman.
+*   **Implementation Parameters:** Used exceedingly sparingly. Must be subjected to heavy post-processing (halftone filters, 1-bit dithering) to degrade vector perfection and create textural juxtaposition against the clean sans-serifs.
+
+## 4. Color System
+The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.
+
+**CRITICAL: Choose ONE substrate palette per project and use it consistently. Never mix light and dark substrates within the same interface.**
+
+### If Swiss Industrial Print (Light):
+*   **Background:** `#F4F4F0` or `#EAE8E3` (Matte, unbleached documentation paper).
+*   **Foreground:** `#050505` to `#111111` (Carbon Ink).
+*   **Accent:** `#E61919` or `#FF2A2A` (Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.
+
+### If Tactical Telemetry (Dark):
+*   **Background:** `#0A0A0A` or `#121212` (Deactivated CRT. Avoid pure `#000000`).
+*   **Foreground:** `#EAEAEA` (White phosphor). This is the primary text color.
+*   **Accent:** `#E61919` or `#FF2A2A` (Aviation/Hazard Red). Same red, same rules.
+*   **Terminal Green (`#4AF626`):** Optional. Use ONLY for a single specific UI element (e.g., one status indicator or one data readout) — never as a general text color. If it doesn't serve a clear purpose, omit it entirely.
+
+## 5. Layout and Spatial Engineering
+The layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.
+
+*   **The Blueprint Grid:** Strict adherence to CSS Grid architectures. Elements do not float; they are anchored precisely to grid tracks and intersections.
+*   **Visible Compartmentalization:** Extensive utilization of solid borders (`1px` or `2px solid`) to delineate distinct zones of information. Horizontal rules (`<hr>`) frequently span the entire container width to segregate operational units.
+*   **Bimodal Density:** Layouts oscillate between extreme data density (tightly packed monospace metadata clustered together) and vast expanses of calculated negative space framing macro-typography.
+*   **Geometry:** Absolute rejection of `border-radius`. All corners must be exactly 90 degrees to enforce mechanical rigidity.
+
+## 6. UI Components and Symbology
+Standard web UI conventions are replaced with utilitarian, industrial graphic elements.
+
+*   **Syntax Decoration:** Utilization of ASCII characters to frame data points.
+    *   *Framing:* `[ DELIVERY SYSTEMS ]`, `< RE-IND >`
+    *   *Directional:* `>>>`, `///`, `\\\\`
+*   **Industrial Markers:** Prominent integration of registration (`®`), copyright (`©`), and trademark (`™`) symbols functioning as structural geometric elements rather than legal text.
+*   **Technical Assets:** Integration of crosshairs (`+`) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g., `REV 2.6`, `UNIT / D-01`) to simulate active mechanical processes.
+
+## 7. Textural and Post-Processing Effects
+To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.
+
+*   **Halftone and 1-Bit Dithering:** Transforming continuous-tone images or large serif typography into dot-matrix patterns. Achieved via pre-processing or CSS `mix-blend-mode: multiply` overlays combined with SVG radial dot patterns.
+*   **CRT Scanlines:** For terminal interfaces, applying a `repeating-linear-gradient` to the background to simulate horizontal electron beam sweeps (e.g., `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)`).
+*   **Mechanical Noise:** A global, low-opacity SVG static/noise filter applied to the DOM root to introduce a unified physical grain across both dark and light modes.
+
+## 8. Web Engineering Directives
+1.  **Grid Determinism:** Utilize `display: grid; gap: 1px;` with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.
+2.  **Semantic Rigidity:** Construct the DOM using precise semantic tags (`<data>`, `<samp>`, `<kbd>`, `<output>`, `<dl>`) to accurately reflect the technical nature of the telemetry.
+3.  **Typography Clamping:** Implement CSS `clamp()` functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.