cdragon 0.1.0

package/skills/to-html/designs/uber.DESIGN.md

@@ -0,0 +1,387 @@
+---
+id: uber
+name: Uber
+country: US
+category: consumer-tech
+homepage: "https://www.uber.com"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: uber
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Base Web
+  url: "https://baseweb.design"
+  type: system
+  description: Uber's React implementation of Base — a living component system.
+---
+
+# Design System Inspiration of Uber
+
+## 1. Visual Theme & Atmosphere
+
+Uber's design language is a masterclass in confident minimalism -- a black-and-white universe where every pixel serves a purpose and nothing decorates without earning its place. The entire experience is built on a stark duality: jet black (`#000000`) and pure white (`#ffffff`), with virtually no mid-tone grays diluting the message. This isn't the sterile minimalism of a startup that hasn't finished designing -- it's the deliberate restraint of a brand so established it can afford to whisper.
+
+The signature typeface, UberMove, is a proprietary geometric sans-serif with a distinctly square, engineered quality. Headlines in UberMove Bold at 52px carry the weight of a billboard -- authoritative, direct, unapologetic. The companion face UberMoveText handles body copy and buttons with a slightly softer, more readable character at medium weight (500). Together, they create a typographic system that feels like a transit map: clear, efficient, built for scanning at speed.
+
+What makes Uber's design truly distinctive is its use of full-bleed photography and illustration paired with pill-shaped interactive elements (999px border-radius). Navigation chips, CTA buttons, and category selectors all share this capsule shape, creating a tactile, thumb-friendly interface language that's unmistakably Uber. The illustrations -- warm, slightly stylized scenes of drivers, riders, and cityscapes -- inject humanity into what could otherwise be a cold, monochrome system. The site alternates between white content sections and a full-black footer, with card-based layouts using the gentlest possible shadows (rgba(0,0,0,0.12-0.16)) to create subtle lift without breaking the flat aesthetic.
+
+**Key Characteristics:**
+- Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome
+- UberMove (headlines) + UberMoveText (body/UI) -- proprietary geometric sans-serif family
+- Pill-shaped everything: buttons, chips, nav items all use 999px border-radius
+- Warm, human illustrations contrasting the stark monochrome interface
+- Card-based layout with whisper-soft shadows (0.12-0.16 opacity)
+- 8px spacing grid with compact, information-dense layouts
+- Bold photography integrated as full-bleed hero backgrounds
+- Black footer anchoring the page with a dark, high-contrast environment
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Uber Black** (`#000000`): The defining brand color -- used for primary buttons, headlines, navigation text, and the footer. Not "near-black" or "off-black," but true, uncompromising black.
+- **Pure White** (`#ffffff`): The primary surface color and inverse text. Used for page backgrounds, card surfaces, and text on black elements.
+
+### Interactive & Button States
+- **Hover Gray** (`#e2e2e2`): White button hover state -- a clean, cool light gray that provides clear feedback without warmth.
+- **Hover Light** (`#f3f3f3`): Subtle hover for elevated white buttons -- barely-there gray for gentle interaction feedback.
+- **Chip Gray** (`#efefef`): Background for secondary/filter buttons and navigation chips -- a neutral, ultra-light gray.
+
+### Text & Content
+- **Body Gray** (`#4b4b4b`): Secondary text and footer links -- a true mid-gray with no warm or cool bias.
+- **Muted Gray** (`#afafaf`): Tertiary text, de-emphasized footer links, and placeholder content.
+
+### Borders & Separation
+- **Border Black** (`#000000`): Thin 1px borders for structural containment -- used sparingly on dividers and form containers.
+
+### Shadows & Depth
+- **Shadow Light** (`rgba(0, 0, 0, 0.12)`): Standard card elevation -- a featherweight lift for content cards.
+- **Shadow Medium** (`rgba(0, 0, 0, 0.16)`): Slightly stronger elevation for floating action buttons and overlays.
+- **Button Press** (`rgba(0, 0, 0, 0.08)`): Inset shadow for active/pressed states on secondary buttons.
+
+### Link States
+- **Default Link Blue** (`#0000ee`): Standard browser blue for text links with underline -- used in body content.
+- **Link White** (`#ffffff`): Links on dark surfaces -- used in footer and dark sections.
+- **Link Black** (`#000000`): Links on light surfaces with underline decoration.
+
+### Gradient System
+- Uber's design is **entirely gradient-free**. The black/white duality and flat color blocks create all visual hierarchy. No gradients appear anywhere in the system -- every surface is a solid color, every transition is a hard edge or a shadow.
+
+## 3. Typography Rules
+
+### Font Family
+- **Headline / Display**: `UberMove`, with fallbacks: `UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Body / UI**: `UberMoveText`, with fallbacks: `system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`
+
+*Note: UberMove and UberMoveText are proprietary typefaces. For external implementations, use `system-ui` or Inter as the closest available substitute. The geometric, square-proportioned character of UberMove can be approximated with Inter or DM Sans.*
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display / Hero | UberMove | 52px (3.25rem) | 700 | 1.23 (tight) | Maximum impact, billboard presence |
+| Section Heading | UberMove | 36px (2.25rem) | 700 | 1.22 (tight) | Major section anchors |
+| Card Title | UberMove | 32px (2rem) | 700 | 1.25 (tight) | Card and feature headings |
+| Sub-heading | UberMove | 24px (1.5rem) | 700 | 1.33 | Secondary section headers |
+| Small Heading | UberMove | 20px (1.25rem) | 700 | 1.40 | Compact headings, list titles |
+| Nav / UI Large | UberMoveText | 18px (1.13rem) | 500 | 1.33 | Navigation links, prominent UI text |
+| Body / Button | UberMoveText | 16px (1rem) | 400-500 | 1.25-1.50 | Standard body text, button labels |
+| Caption | UberMoveText | 14px (0.88rem) | 400-500 | 1.14-1.43 | Metadata, descriptions, small links |
+| Micro | UberMoveText | 12px (0.75rem) | 400 | 1.67 (relaxed) | Fine print, legal text |
+
+### Principles
+- **Bold headlines, medium body**: UberMove headings are exclusively weight 700 (bold) -- every headline hits with billboard force. UberMoveText body and UI text uses 400-500, creating a clear visual hierarchy through weight contrast.
+- **Tight heading line-heights**: All headlines use line-heights between 1.22-1.40 -- compact and punchy, designed for scanning rather than reading.
+- **Functional typography**: There is no decorative type treatment anywhere. No letter-spacing, no text-transform, no ornamental sizing. Every text element serves a direct communication purpose.
+- **Two fonts, strict roles**: UberMove is exclusively for headings. UberMoveText is exclusively for body, buttons, links, and UI. The boundary is never crossed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Black (CTA)**
+- Background: Uber Black (`#000000`)
+- Text: Pure White (`#ffffff`)
+- Padding: 10px 12px
+- Radius: 999px (full pill)
+- Outline: none
+- Focus: inset ring `rgb(255,255,255) 0px 0px 0px 2px`
+- The primary action button -- bold, high-contrast, unmissable
+
+**Secondary White**
+- Background: Pure White (`#ffffff`)
+- Text: Uber Black (`#000000`)
+- Padding: 10px 12px
+- Radius: 999px (full pill)
+- Hover: background shifts to Hover Gray (`#e2e2e2`)
+- Focus: background shifts to Hover Gray, inset ring appears
+- Used on dark surfaces or as a secondary action alongside Primary Black
+
+**Chip / Filter**
+- Background: Chip Gray (`#efefef`)
+- Text: Uber Black (`#000000`)
+- Padding: 14px 16px
+- Radius: 999px (full pill)
+- Active: inset shadow `rgba(0,0,0,0.08)`
+- Navigation chips, category selectors, filter toggles
+
+**Floating Action**
+- Background: Pure White (`#ffffff`)
+- Text: Uber Black (`#000000`)
+- Padding: 14px
+- Radius: 999px (full pill)
+- Shadow: `rgba(0,0,0,0.16) 0px 2px 8px 0px`
+- Transform: `translateY(2px)` slight offset
+- Hover: background shifts to `#f3f3f3`
+- Map controls, scroll-to-top, floating CTAs
+
+### Cards & Containers
+- Background: Pure White (`#ffffff`) on white pages; no distinct card background differentiation
+- Border: none by default -- cards are defined by shadow, not stroke
+- Radius: 8px for standard content cards; 12px for featured/promoted cards
+- Shadow: `rgba(0,0,0,0.12) 0px 4px 16px 0px` for standard lift
+- Cards are content-dense with minimal internal padding
+- Image-led cards use full-bleed imagery with text overlay or below
+
+### Inputs & Forms
+- Text: Uber Black (`#000000`)
+- Background: Pure White (`#ffffff`)
+- Border: 1px solid Black (`#000000`) -- the only place visible borders appear prominently
+- Radius: 8px
+- Padding: standard comfortable spacing
+- Focus: no extracted custom focus state -- relies on standard browser focus ring
+
+### Navigation
+- Sticky top navigation with white background
+- Logo: Uber wordmark/icon at 24x24px in black
+- Links: UberMoveText at 14-18px, weight 500, in Uber Black
+- Pill-shaped nav chips with Chip Gray (`#efefef`) background for category navigation ("Ride", "Drive", "Business", "Uber Eats")
+- Menu toggle: circular button with 50% border-radius
+- Mobile: hamburger menu pattern
+
+### Image Treatment
+- Warm, hand-illustrated scenes (not photographs for feature sections)
+- Illustration style: slightly stylized people, warm color palette within illustrations, contemporary vibe
+- Hero sections use bold photography or illustration as full-width backgrounds
+- QR codes for app download CTAs
+- All imagery uses standard 8px or 12px border-radius when contained in cards
+
+### Distinctive Components
+
+**Category Pill Navigation**
+- Horizontal row of pill-shaped buttons for top-level navigation ("Ride", "Drive", "Business", "Uber Eats", "About")
+- Each pill: Chip Gray background, black text, 999px radius
+- Active state indicated by black background with white text (inversion)
+
+**Hero with Dual Action**
+- Split hero: text/CTA on left, map/illustration on right
+- Two input fields side by side for pickup/destination
+- "See prices" CTA button in black pill
+
+**Plan-Ahead Cards**
+- Cards promoting features like "Uber Reserve" and trip planning
+- Illustration-heavy with warm, human-centric imagery
+- Black CTA buttons with white text at bottom
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
+- Button padding: 10px 12px (compact) or 14px 16px (comfortable)
+- Card internal padding: approximately 24-32px
+- Section vertical spacing: generous but efficient -- approximately 64-96px between major sections
+
+### Grid & Container
+- Max container width: approximately 1136px, centered
+- Hero: split layout with text left, visual right
+- Feature sections: 2-column card grids or full-width single-column
+- Footer: multi-column link grid on black background
+- Full-width sections extending to viewport edges
+
+### Whitespace Philosophy
+- **Efficient, not airy**: Uber's whitespace is functional -- enough to separate, never enough to feel empty. This is transit-system spacing: compact, clear, purpose-driven.
+- **Content-dense cards**: Cards pack information tightly with minimal internal spacing, relying on shadow and radius to define boundaries.
+- **Section breathing room**: Major sections get generous vertical spacing, but within sections, elements are closely grouped.
+
+### Border Radius Scale
+- Sharp (0px): No square corners used in interactive elements
+- Standard (8px): Content cards, input fields, listboxes
+- Comfortable (12px): Featured cards, larger containers, link cards
+- Full Pill (999px): All buttons, chips, navigation items, pills
+- Circle (50%): Avatar images, icon containers, circular controls
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, solid background | Page background, inline content, text sections |
+| Subtle (Level 1) | `rgba(0,0,0,0.12) 0px 4px 16px` | Standard content cards, feature blocks |
+| Medium (Level 2) | `rgba(0,0,0,0.16) 0px 4px 16px` | Elevated cards, overlay elements |
+| Floating (Level 3) | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | Floating action buttons, map controls |
+| Pressed (Level 4) | `rgba(0,0,0,0.08) inset` (999px spread) | Active/pressed button states |
+| Focus Ring | `rgb(255,255,255) 0px 0px 0px 2px inset` | Keyboard focus indicators |
+
+**Shadow Philosophy**: Uber uses shadow purely as a structural tool, never decoratively. Shadows are always black at very low opacity (0.08-0.16), creating the bare minimum lift needed to separate content layers. The blur radii are moderate (8-16px) -- enough to feel natural but never dramatic. There are no colored shadows, no layered shadow stacks, and no ambient glow effects. Depth is communicated more through the black/white section contrast than through shadow elevation.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use true black (`#000000`) and pure white (`#ffffff`) as the primary palette -- the stark contrast IS Uber
+- Use 999px border-radius for all buttons, chips, and pill-shaped navigation elements
+- Keep all headings in UberMove Bold (700) for billboard-level impact
+- Use whisper-soft shadows (0.12-0.16 opacity) for card elevation -- barely visible
+- Maintain the compact, information-dense layout style -- Uber prioritizes efficiency over airiness
+- Use warm, human-centric illustrations to soften the monochrome interface
+- Apply 8px radius for content cards and 12px for featured containers
+- Use UberMoveText at weight 500 for navigation and prominent UI text
+- Pair black primary buttons with white secondary buttons for dual-action layouts
+
+### Don't
+- Don't introduce color into the UI chrome -- Uber's interface is strictly black, white, and gray
+- Don't use rounded corners less than 999px on buttons -- the full-pill shape is a core identity element
+- Don't apply heavy shadows or drop shadows with high opacity -- depth is whisper-subtle
+- Don't use serif fonts anywhere -- Uber's typography is exclusively geometric sans-serif
+- Don't create airy, spacious layouts with excessive whitespace -- Uber's density is intentional
+- Don't use gradients or color overlays -- every surface is a flat, solid color
+- Don't mix UberMove into body text or UberMoveText into headlines -- the hierarchy is strict
+- Don't use decorative borders -- borders are functional (inputs, dividers) or absent entirely
+- Don't soften the black/white contrast with off-whites or near-blacks -- the duality is deliberate
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | 320px | Minimum layout, single column, stacked inputs, compact typography |
+| Mobile | 600px | Standard mobile, stacked layout, hamburger nav |
+| Tablet Small | 768px | Two-column grids begin, expanded card layouts |
+| Tablet | 1119px | Full tablet layout, side-by-side hero content |
+| Desktop Small | 1120px | Desktop grid activates, horizontal nav pills |
+| Desktop | 1136px | Full desktop layout, maximum container width, split hero |
+
+### Touch Targets
+- All pill buttons: minimum 44px height (10-14px vertical padding + line-height)
+- Navigation chips: generous 14px 16px padding for comfortable thumb tapping
+- Circular controls (menu, close): 50% radius ensures large, easy-to-hit targets
+- Card surfaces serve as full-area touch targets on mobile
+
+### Collapsing Strategy
+- **Navigation**: Horizontal pill nav collapses to hamburger menu with circular toggle
+- **Hero**: Split layout (text + map/visual) stacks to single column -- text above, visual below
+- **Input fields**: Side-by-side pickup/destination inputs stack vertically
+- **Feature cards**: 2-column grid collapses to full-width stacked cards
+- **Headings**: 52px display scales down through 36px, 32px, 24px, 20px
+- **Footer**: Multi-column link grid collapses to accordion or stacked single column
+- **Category pills**: Horizontal scroll with overflow on smaller screens
+
+### Image Behavior
+- Illustrations scale proportionally within their containers
+- Hero imagery maintains aspect ratio, may crop on smaller screens
+- QR code sections hide on mobile (app download shifts to direct store links)
+- Card imagery maintains 8-12px border radius at all sizes
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Button: "Uber Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Button Text (on black): "Pure White (#ffffff)"
+- Button Text (on white): "Uber Black (#000000)"
+- Secondary Text: "Body Gray (#4b4b4b)"
+- Tertiary Text: "Muted Gray (#afafaf)"
+- Chip Background: "Chip Gray (#efefef)"
+- Hover State: "Hover Gray (#e2e2e2)"
+- Card Shadow: "rgba(0,0,0,0.12) 0px 4px 16px"
+- Footer Background: "Uber Black (#000000)"
+
+### Example Component Prompts
+- "Create a hero section on Pure White (#ffffff) with a headline at 52px UberMove Bold (700), line-height 1.23. Use Uber Black (#000000) text. Add a subtitle in Body Gray (#4b4b4b) at 16px UberMoveText weight 400 with 1.50 line-height. Place an Uber Black (#000000) pill CTA button with Pure White text, 999px radius, padding 10px 12px."
+- "Design a category navigation bar with horizontal pill buttons. Each pill: Chip Gray (#efefef) background, Uber Black (#000000) text, 14px 16px padding, 999px border-radius. Active pill inverts to Uber Black background with Pure White text. Use UberMoveText at 14px weight 500."
+- "Build a feature card on Pure White (#ffffff) with 8px border-radius and shadow rgba(0,0,0,0.12) 0px 4px 16px. Title in UberMove at 24px weight 700, description in Body Gray (#4b4b4b) at 16px UberMoveText. Add a black pill CTA button at the bottom."
+- "Create a dark footer on Uber Black (#000000) with Pure White (#ffffff) heading text in UberMove at 20px weight 700. Footer links in Muted Gray (#afafaf) at 14px UberMoveText. Links hover to Pure White. Multi-column grid layout."
+- "Design a floating action button with Pure White (#ffffff) background, 999px radius, 14px padding, and shadow rgba(0,0,0,0.16) 0px 2px 8px. Hover shifts background to #f3f3f3. Use for scroll-to-top or map controls."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Reference the strict black/white palette -- "use Uber Black (#000000)" not "make it dark"
+3. Always specify 999px radius for buttons and pills -- this is non-negotiable for the Uber identity
+4. Describe the font family explicitly -- "UberMove Bold for the heading, UberMoveText Medium for the label"
+5. For shadows, use "whisper shadow (rgba(0,0,0,0.12) 0px 4px 16px)" -- never heavy drop shadows
+6. Keep layouts compact and information-dense -- Uber is efficient, not airy
+7. Illustrations should be warm and human -- describe "stylized people in warm tones" not abstract shapes
+8. Pair black CTAs with white secondaries for balanced dual-action layouts
+
+## 10. Voice & Tone
+
+Uber's voice is **mobility-platform-direct and dual-audience-aware.** Two parallel audiences — riders ("차량 서비스") and drivers ("운전") — with distinct CTAs. Pure black `#000` primary CTA + 999px pill nav signals "modern mobility company."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Sign up to ride", "Sign up to drive", "Get started" |
+| Marketing | Dual-audience. Rider page ≠ Driver page |
+| Documentation | Sparse — consumer product |
+| Error | Polite. "Pickup location unavailable. Try a different address." |
+
+**Voice samples**
+- Marketing nav (KR): *"차량 서비스"* / *"운전"* <!-- verified: uber.com/kr/ko 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary mobility". Aggressive Lyft-comparison framing.
+
+## 11. Brand Narrative
+
+Uber was founded **2009** in San Francisco — originally as **UberCab** — by **Garrett Camp** (Canadian entrepreneur, **co-founder of StumbleUpon**) and **Travis Kalanick** ([Travis Kalanick — Wikipedia](https://en.wikipedia.org/wiki/Travis_Kalanick), [Garrett Camp — Wikipedia](https://en.wikipedia.org/wiki/Garrett_Camp)). **Camp had become frustrated with SF taxis and expensive black-car services**, conceived a smartphone-app to hail luxury vehicles directly; discussed with Kalanick who joined as "mega advisor." Neither founder wanted to run the company directly; **Ryan Graves brought on as launch CEO** for **10 months** before being replaced by **Kalanick** (Camp + Graves transferred a large portion of shares to Kalanick on transition). Pioneered ride-hailing → expanded to **Eats / Freight / Delivery**. **2018 rebrand by Wolff Olins** + Uber in-house team — 10 months development, introduced bespoke **Uber Move** typeface + monochrome black-on-white identity + bespoke **Safety Blue** accent ([Design Week — Uber rebrand 2018](https://www.designweek.co.uk/issues/17-23-september-2018/uber-rebrand-looks-to-reflect-how-the-taxi-app-is-changing/), [Dezeen — Uber brings back the U](https://www.dezeen.com/2018/09/14/uber-rebrand-wolff-olins-black-white-wordmark-logo-typography/), [Wolff Olins — Views](https://www.wolffolins.com/views/the-medias-take-on-ubers-new-brand)). **NYSE IPO May 10 2019** under ticker **UBER** at **$45/share** raising **$8.1B** at **~$75B valuation** — biggest IPO of 2019, top-10 ever; closed first day at **$41.57 = biggest first-day dollar loss in U.S. IPO history** ([Uber IR — IPO pricing](https://investor.uber.com/news-events/news/press-release-details/2019/Uber-Announces-Pricing-of-Initial-Public-Offering/default.aspx), [Bloomberg — Uber drops after $8.1B IPO](https://www.bloomberg.com/news/articles/2019-05-10/uber-drops-after-raising-8-1-billion-in-biggest-ipo-of-2019)). The brand evolution post-2017 shifted from aggressive growth-at-all-costs to "platform for mobility" with operational + safety focus — **Dara Khosrowshahi** (current CEO, ex-Expedia) succeeded Kalanick **August 2017**.
+
+## 12. Principles
+
+1. **Dual-audience.** Riders and drivers are first-class. *UI implication:* segment nav clearly separated.
+2. **Pure black `#000` primary.** *UI implication:* preserve achromatic primary; don't introduce brand color.
+3. **999px pill nav.** *UI implication:* nav buttons fully pill on white.
+4. **Black + white dual-action.** *UI implication:* paired CTAs use black/white for balance.
+5. **Warm illustrations.** *UI implication:* never abstract shapes; warm humans.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Uber user segments (urban riders, drivers, business travelers), not individual people.*
+
+**Sofia Park, 31, Seoul.** Daily Uber rider. Cares about ETA accuracy + driver rating.
+
+**Marcus Webb, 38, San Francisco.** Business traveler. Uber for client meetings + airport transfers.
+
+**Henrik Nielsen, 45, Copenhagen.** Part-time Uber driver. Cares about earnings transparency + cancellation fees.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no rides)** | "Request your first ride" CTA |
+| **Empty (no driver activity)** | "Go online" CTA for drivers |
+| **Loading (matching)** | Real-time map with car icon |
+| **Loading (price)** | Surge indicator if active |
+| **Error (no drivers)** | "No drivers nearby. Try Uber Comfort instead." |
+| **Error (payment)** | "Payment failed. Try a different method." |
+| **Success (booked)** | Driver info + ETA + map |
+| **Success (rated)** | Subtle confirmation |
+| **Skeleton (ride history)** | Black/white placeholders |
+| **Disabled (account verification)** | Verify link |
+| **Loading (long match)** | Persistent progress with cancel option |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-map-tracking` | continuous | Real-time map updates |
+
+Standard cubic-bezier; no bounce — operational register. `prefers-reduced-motion: reduce` removes map auto-pan.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 60 — Apple-tier)
+**Tier 1 sources:** uber.com/kr/ko home + /about (live DOM via playwright — **all-pill 999px chrome with three-fill canvas-awareness**: Header `#000` Black + `#fff` text 999px / 36-38px / 10×12 / 14px·500; Header Inverse `#fff` + `#000` text (Sign-up); Hero `#addec9` **Uber Mint Green** + `#000` text 999px / 48px / 14×16 / 16px·500 soft-pastel signature).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/rebrand/IPO):** Wikipedia (Travis Kalanick, Garrett Camp), Britannica, Design Week / Dezeen / Wolff Olins Views (2018 rebrand), Uber IR (IPO pricing), Bloomberg (2019-05-10 first-day loss), CNBC.
+**Style ref:** `apple` (luxury minimal). **Conflicts unresolved:** none. **Earlier addition:** Inverse White Sign-up + Mint Green `#addec9` hero accent + 48px hero tier missed by prior pass.

package/skills/to-html/designs/upstage.DESIGN.md

@@ -0,0 +1,232 @@
+---
+id: upstage
+name: Upstage
+display_name_kr: 업스테이지
+country: KR
+category: ai
+homepage: "https://www.upstage.ai"
+primary_color: "#d2ff95"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=upstage.ai&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Upstage Brand Resource Center
+  url: "https://www.upstage.ai/resources/brand-resource-center"
+  type: brand
+  description: "Upstage's brand resource hub — logo / symbol assets + IP rights statement. Token spec lives only in production CSS (Geist + Espeak proprietary face + violet #5B52FF × plum #3C043B + Solar accent #D2FF95)."
+  og_image: "https://cdn.prod.website-files.com/6743d5190bb2b52f38e99e37/680a25ee07a17eed6deeff74_OG.avif"
+---
+
+# Upstage — DESIGN.md
+
+> Reference research only. Brand assets, logo, and the proprietary Espeak display face are property of Upstage Co., Ltd. (주식회사 업스테이지). No verbatim taglines, marketing copy, or asset binaries are reproduced. Token values quoted below are factual CSS custom property values observed via live runtime inspection of the public `www.upstage.ai` surface, under analytical fair-use.
+
+## 1. Visual Theme & Atmosphere
+
+Upstage looks like an enterprise AI company that decided to spend its visual budget on **one purple, one display face, and one rotating word** — and then on absolutely nothing else. The home surface ships in a deep plum hero canvas (`#3C043B`, exposed as `--colors--grey-background`), pairs it with a near-mint Solar accent (`#D2FF95`, a vivid mid-step of the `--colors--green-yellow-*` ladder), and reserves a single interactive violet (`#5B52FF`, observed 55 times across CTAs and links) as the only chromatic gesture that ever does work. The page is built on Webflow, layers Untitled UI and Spark Library tokens underneath an Upstage-namespaced override layer (74 `--*` custom properties on `:root`), and exposes the seams honestly — `_sub---untitled-ui--*`, `_sub---spark-library--*`, and `_sub---elements-webflow-library--*` all coexist on the document root, with the `--colors--*` and `--style--*` prefixes representing the brand's actual decisions. Type is even more disciplined: **Geist** runs 869 of ~930 sampled text elements (~93%), a single custom display face called **Espeak** lights up the hero H1 at 57.6px / weight 600, and the variable industry word inside the hero (`Insurance`, `Healthcare`, `Manufacturing`, `Financial Services`) shifts to a humble **monospace** mid-sentence — a typographic gesture that says *this slot is configurable* without spending a single color or weight to mark it. Radius is binary (797 elements at 0px, 134 at 8px, nothing meaningful between), elevation is effectively zero (the underlying Webflow library exposes one 10%-alpha shadow token, almost never applied), and rhythm comes from surface-color shifts band to band — plum hero → white product band → dark industry grid → white customer band → dark deployment matrix → near-black footer (`#191722`, slightly violet-tinted, not pure black). The atmosphere reads *competent, technical, restrained* — the visual equivalent of an enterprise pitch deck that knows it doesn't need to shout.
+
+**Atmospheric anchors**:
+- **Plum-violet axis, not blue.** Where most enterprise AI brands default to a corporate blue, Upstage commits to violet primary (`#5B52FF`) on a plum canvas (`#3C043B`) — distinguishable in a sea of cobalt competitors.
+- **Solar yellow-green as scarcity asset.** `#D2FF95` appears only adjacent to the Solar product narrative — never as a default button surface or section background.
+- **One body family, one display face, one swap.** 93% Geist coverage + Espeak-only hero + monospace industry word = three families, three jobs, no overlap.
+- **Type-as-imagery on industry cards.** Each high-stakes industry (Insurance / Healthcare / Manufacturing / Financial Services) presents as a giant industry word on a dark surface — no stock photography, no industry icons.
+- **Binary geometry.** Sharp (0px) for sections, cards, hero, footer; soft (8px) only for pressable controls and a few content chips. Nothing in between.
+
+## 2. Color System
+
+### Brand
+| Token | Hex | Live source | Role |
+|---|---|---|---|
+| Upstage Violet (primary) | `#5B52FF` | live computed `rgb(91,82,255)` on `.button.is-secondary` × 2 sampled CTAs; 55 element occurrences | Interactive foreground; link; secondary-button text; filled-primary button background variant |
+| Violet pressed | `#1E116E` | `--_sub---spark-library--foreground-interactive-hover` | Hover / pressed state of primary |
+| Violet deep | `#281CA5` | `--elements-webflow-library--secondary--color-1` | Emphasis / filled-button alt |
+| Solar yellow-green | `#D2FF95` | mid-step of `--colors--green-yellow-*` (50 = `#f6ffe5`); live-observed as decorative accent | **Single-use chromatic accent** tied to the Solar product narrative |
+
+### Ink (text)
+| Token | Hex | Frequency in DOM | Role |
+|---|---|---|---|
+| Body gray | `#70757F` | **428 elements (dominant text color)** | Default body, paragraph, muted subhead |
+| Near-black | `#0A0D14` | 58 elements | Headings on light surfaces |
+| Muted purple-gray | `#6E7191` | 20 elements | Secondary muted / footnote |
+| White | `#FFFFFF` | 213 elements | Text & UI on dark surfaces |
+| White @50% | `rgba(255,255,255,0.5)` | 14 elements | Muted secondary copy on dark hero |
+
+### Surface
+| Token | Hex | Role |
+|---|---|---|
+| Page white | `#FFFFFF` | Default page background |
+| Subtle band | `#F9FAFB` | `--colors--base--subtle` — light section break |
+| Footer near-black | `#191722` | Footer band — *intentionally violet-tinted, not pure `#000`* |
+| Plum decorative | `#3C043B` | `--colors--grey-background` — hero canvas. **Non-obvious choice**: a deep plum named as "grey" in the token system. |
+| Lavender interactive | `#F0ECFD` | `--_sub---spark-library--background--interactive` — active/hover surface |
+| Purple-100 | `#DDE3FF` | `--colors--purple-100` — cool tint for chips / info |
+
+### Border
+| Token | Hex | Role |
+|---|---|---|
+| Default hairline | `#EEEEEE` | `--border-color--border-primary` |
+| Neutral subtle | `#F7F7FC` | `--_sub---elements-webflow-library--neutral--200` |
+
+### Ladders observed (under-layer)
+Untitled UI primary scale (`#fcfaff 25 / #f9f5ff 50 / #f4ebff 100 / #d6bbfb 300 / #6941c6 700`) and Untitled UI gray scale (`#eaecf0 200 / #475467 600 / #101828 900`) sit underneath the Upstage-namespaced surface tokens. Treat them as inherited primitives, not Upstage decisions.
+
+## 3. Typography
+
+| Slot | Family | Size / Weight | Live evidence |
+|---|---|---|---|
+| Hero H1 | **Espeak**, Arial, sans-serif | 57.6px / 600 | 3 sampled hero phrases |
+| Hero H1 industry swap word | **monospace** (browser default) | 48px / 600 | 4 industry-word swaps |
+| Section H2 | Geist | ~36-48px / 600 | "High-performance AI built by experts" et al. |
+| Body large | Geist | 18px / 400 | **603 elements (dominant body size)** |
+| Body | Geist | 16px / 400 | 115 elements |
+| Button | Geist | 16-18px / 500 | `.button.is-secondary` + inline arrow CTA |
+| Caption / small | Geist | 14px / 400 | 30 elements |
+| Micro / legal | Geist | 12px / 400 | 23 elements |
+
+**Weight discipline** (observed): 400 = 786 elements, 500 = 129 (buttons + nav + emphasised body), 600 = 15 (all headings), 700 = 8 (stat/proof labels). **Six weights are not the system — four are.**
+
+**Critical voice rule on type**: the hero rotates `Insurance / Finance / Healthcare / Manufacturing` by changing the *font family* mid-sentence (Espeak → monospace), not the color or weight. Any port that wants to reproduce this rotating-vertical hero must keep the typographic shift as the variable-slot signal.
+
+## 4. Radius & Geometry
+
+| Value | Frequency | Role |
+|---|---|---|
+| `0px` | 797 elements | Sections, cards, hero, footer, images |
+| `8px` | 134 elements | Buttons, content chips, hero secondary surfaces |
+| `100%` | 5 elements | Avatar / icon circles |
+| `100px` | 1 element | Single pill |
+| `50%` | 1 element | One round element |
+
+**Binary rule**: Upstage's geometry encodes pressability. Sharp = layout. 8px = "you can click this." Nothing in between, no `4px / 12px / 16px` middle terms. Token: `--style--radius-8px: 8px`.
+
+## 5. Elevation
+
+Effectively **zero box-shadow** on observed elements. The underlying Webflow library exposes `--_sub---elements-webflow-library--general--shadow-03: #14142b1a` (violet-black 10%), but production almost never invokes it. Depth = surface-color contrast (plum → white → dark → near-black) + hairline borders. *Do not import drop-shadow card patterns from neighbour systems if porting this brand — Upstage doesn't ship them.*
+
+## 6. Spacing & Layout
+
+- **Canvas**: 1280px desktop sweet spot; `--style--max-full-width: 100vw`.
+- **No `--space-*` ladder** exposed on `:root`. Section vertical rhythm appears to use ~64-96px band gaps with 16/24/32 internal step (Webflow class-driven, not token-driven).
+- **Hero alignment**: left-aligned starting ~10% from canvas edge, not centered.
+- **Vertical rhythm = surface flips**: each H2 section change is also a background-color change. The rhythm is *chromatic*, not numerical.
+
+## 7. Interactive Components
+
+### Primary CTA — multiple variants, one violet
+1. **`Try now`** — persistent top-right of nav. Filled violet `#5B52FF` background, white text, 8px radius, weight 500.
+2. **`Try demo`** — hero inline arrow. Transparent background, white text, `→` arrow glyph, 18px / 500.
+3. **`Learn more →`** — repeated inline across every product / solution card. Text-color inherits section surface (white on dark, violet on light), 18px / 500, no chrome.
+4. **`.button.is-secondary`** (e.g. *Developer Console*, *Learn more* on solution cards) — white pill surface, violet text `#5B52FF`, 8px radius, weight 500. 16px.
+
+### Nav (top)
+Transparent over hero, white below. Five primary categories (Products / Solutions / Resources / Company / Pricing) + persistent `Try now` filled CTA on the right.
+
+### Card
+Product / solution / customer cards: 8px radius, transparent background, `#70757F` body paragraph, no drop shadow, inline `Learn more →` link as the only interactive affordance.
+
+### Industry card (signature)
+Giant industry word (`Insurance` / `Healthcare` / `Manufacturing` / `Financial Services`) at 48px+ as the entire card front. **Typography is the imagery.**
+
+## 8. Motion (partially captured)
+
+CDP single-pass did not extract transition durations or cubic-bezier curves. Inferred from observed `--_sub---spark-library--background--interactive: #F0ECFD` hover surface: standard Webflow ~150-200ms ease for interactive state changes. **Flagged for UPDATE pass** — exact motion tokens not authoritative here.
+
+## 9. Accessibility (observed)
+
+- **Body gray `#70757F` on white** ≈ 4.6:1 — passes WCAG AA for normal text (≥4.5:1).
+- **Violet `#5B52FF` on white** (secondary-button text) ≈ 5.2:1 — passes AA comfortably.
+- **White on plum `#3C043B`** = ≥10:1 — strong pass for hero copy.
+- **White @ 50% on plum hero** = ≈5:1 — at AA edge; acceptable for ≥18px text but borderline for finer hero subhead at smaller weights. Flagged as observed-as-shipped trade-off, not a guideline.
+- **No landmark / role inventory verified** in this CDP pass — `<header>`, `<footer>`, `<nav>` are used semantically (positive), but a deeper axe-style audit is out of scope.
+
+## 10. Voice & Microcopy (analyst characterisation, no verbatim copy)
+
+Upstage's marketing voice is **declarative, enterprise-confident, lightly punchy**. Sentences are short. Heroes state a verb-object intent rather than a feature list. Industry callouts are single nouns (`Insurance`, `Healthcare`) — the brand trusts the reader to fill in the relevance. Section H2s read as engineering-credible category claims ("High-performance AI built by experts", "Flexible deployment, enterprise-ready anywhere") — proof-of-capability framing, not benefit framing.
+
+**Tone vector**: technically grounded · enterprise-formal · zero-hype · pragmatic-bilingual (Korean root, English-first marketing).
+
+**Fresh OmD-derivation alternatives** (not Upstage copy — illustrative shape-only):
+- *Build the AI. Ship the workflow. We bring the model.*
+- *Enterprise-grade Solar. Deploy where your data lives.*
+- *One model. Four industries. Production-ready.*
+
+**Do NOT reproduce** any verbatim Upstage hero, button label, or proof statement in derivative work — voice is the shape only.
+
+## 11. Brand Narrative (factual)
+
+Upstage Co., Ltd. (주식회사 업스테이지) is a Korean LLM and enterprise AI company headquartered in Gangnam, Seoul, with offices at the Korea Science and Technology Center (한국과학기술회관 2관, 스파크플러스 강남5호점 812-817호, 22 Teheran-ro 7-gil, Gangnam-gu). CEO is **Sunghun Kim (김성훈)**. Business Registration No. 830-88-01918. The company's flagship is the **Solar** family of LLMs (Solar Pro 3 / Pro 2 / Mini) and the **Syn Pro** Japanese-locally-trained LLM. Product surface includes **Document Parse** (PDF/scan → structured), **Information Extract** (key-value structuring), **Studio** (build/deploy agents), **AI Space**, and the **Upstage Marketplace**. Deployment matrix spans API, on-premise, and marketplace channels. Stated industry focus: insurance, healthcare, manufacturing, financial services. Source: live capture of the home + footer + brand-resource-center surfaces on 2026-05-15.
+
+Founding-year, total-funding, headcount, and investor list **not verified in this pass** — public profiles (Crunchbase / TheVC) were not consulted to keep scope tight. Flagged for UPDATE.
+
+## 12. Personas (inferred — verify before reuse)
+
+These are reasoned inferences from the surface IA and proof bands, not user research:
+
+- **Enterprise IT decision-maker** — insurance/healthcare/manufacturing CIO or VP of Engineering. Comes in via the Solutions tab, leaves via *Contact us* or *Try demo*. Cares about: deployment options (on-prem vs API), customer logos, compliance posture.
+- **AI/ML engineer** — practitioner evaluating Solar models for production. Comes in via Products → Solar Pro 3 → Developer Console, leaves via Documentation. Cares about: benchmark numbers, pricing per token, latency, fine-tuning paths.
+- **Procurement / partnership lead** — coming in via Partners / Public tenders. Cares about: business credentials (KR business-info disclosure), Newsroom signals, certifications.
+
+`[FILL IN]` named personas, demographics, and motivations require Upstage-internal data — left as placeholders.
+
+## 13. Anti-Patterns (what NOT to import)
+
+1. **Do not introduce a third type family**. Geist + Espeak + monospace-swap is the entire system. A fourth face breaks the rotating-word gesture.
+2. **Do not import drop-shadow card chrome.** Upstage achieves depth via surface-color contrast and hairline borders. Adding `box-shadow: 0 8px 24px rgba(0,0,0,0.08)` will read as a different system entirely.
+3. **Do not soften the binary radius.** Adding `4px` / `12px` / `16px` middle terms erases the layout-vs-pressable distinction.
+4. **Do not over-saturate the Solar yellow-green.** `#D2FF95` works *because* it appears once, near the Solar narrative. Repeating it as a default highlight color cheapens it.
+5. **Do not default to blue.** Cobalt primary is the enterprise-AI cliche Upstage is consciously avoiding. If porting, stay on the violet-plum axis or pick a different non-blue.
+6. **Do not center-align the hero.** Left-aligned hero with the typographic-swap industry word is the brand-defining composition.
+
+## 14. References & Citations
+
+- **Live capture, home**: `https://www.upstage.ai/` — 44 curated DOM samples, 930+ element frequency sweep, 74 `:root` CSS custom properties, viewport 1280×713 dpr=1, captured 2026-05-15. Method: Chrome DevTools Protocol :9222 / `Runtime.evaluate getComputedStyle`. Browser: Chrome/148.0.7778.97. Raw artifacts in `references/upstage/assets/_reference/_root-vars.json`, `_raw-capture.json`, `_curated-samples.json`, `_structure-raw.json`.
+- **Live capture, Tier-1 brand surface**: `https://www.upstage.ai/resources/brand-resource-center` — HTTP 200, H1 "Brand Resource Center", categories Brand Identity / Product Identity / Media kit / Our leadership, asset distribution only (no token specs). Captured 2026-05-15. Artifact: `_brand-resource-center.json`.
+- **Tier-1 negative**: `design.upstage.ai`, `brand.upstage.ai`, `www.upstage.ai/brand`, `www.upstage.ai/brand-resources` — all 000/404 (verified 2026-05-15 via curl).
+- **Tier-1 codebase negative**: `github.com/UpstageAI` — 12 public repos, all AI/research/cookbook (`UpstageAI/cookbook`, `UpstageAI/Gym`, `UpstageAI/mcp-upstage`, `UpstageAI/opencode`, `UpstageAI/solar-prompt-cookbook`, `UpstageAI/vllm`, …). **Zero design-system / Storybook / token-library repo** as of 2026-05-15.
+- **Tier-2 indexes**: `getdesign.md/upstage` → 200 but no curated entry; `styles.refero.design/?q=upstage` → 200 search shell, no result cards. Both verified 2026-05-15.
+- **Business factual**: `https://www.upstage.ai/resources/brand-resource-center` footer block — KR-mandated business-information disclosure (CEO, registration number, address) reproduced as factual reference, not promotional.
+
+## 15. Verification Footer
+
+**Verification date**: 2026-05-15
+**Verification method**: live CDP :9222 + Tier 1/2 URL probes + GitHub org enumeration
+**Live-inspect proof**: `references/upstage/assets/_reference/.live-inspect-proof.json` (8 raw_samples, ≥5 required floor)
+**Confidence per section**:
+- §1 Visual theme & §2 Color & §3 Typography & §4 Radius & §5 Elevation & §7 Interactive: **High** (live computed-style evidence)
+- §6 Spacing: **Medium** (no `--space-*` ladder exposed; observations are visual not token-derived)
+- §8 Motion: **Low** — single-pass CDP did not capture transition tokens; flagged UPDATE
+- §9 A11y: **Medium** — contrast computed, but no landmark/role audit run
+- §10 Voice: **High** (analyst characterisation only — no verbatim reproduction)
+- §11 Brand narrative: **High** for HQ / CEO / registration / product names (sourced from public footer); **Low** for funding/headcount/founding-year (not verified this pass)
+- §12 Personas: **Low** (inferred — `[FILL IN]` required before product reuse)
+- §13 Anti-patterns: **High** (derived from live evidence)
+
+**Flags (carry into audit row)**:
+1. Tier-1 official DS = **partial-positive** (asset distribution surface exists; token specification does not).
+2. Tier-2 indexes both empty for `upstage` — consistent with the systemic KR-coverage gap.
+3. Espeak display face is a proprietary commissioned typeface — reference-only; substitute with a tonally similar open display in any derivative work.
+4. Solar yellow-green `#D2FF95` is a single-use chromatic accent — repeating it broadly will read as a different brand.
+5. The rotating-industry hero word ships as a **typographic shift (monospace mid-sentence)**, not a color or weight shift — preserve that gesture or the hero composition breaks.
+6. Motion tokens and component-state coverage incomplete — UPDATE pass recommended on a product detail page (e.g. `/products/solar-pro-3`) and Documentation surface.
+
+**IP guardrails confirmed**: brand assets reference-only (logos / Espeak face not redistributed); no verbatim Upstage marketing copy quoted; §10 voice samples are fresh OmD-derived shape-only alternatives; KR business-information block reproduced as factual disclosure, not promotion.
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve interactive violet #5B52FF as the only chromatic gesture that does work — links, CTAs, and secondary-button text, the way it appears across its 55 sampled occurrences
+- Anchor the brand on the plum canvas #3C043B (the '--colors--grey-background' hero) paired with violet primary, staying on the violet-plum axis instead of any cobalt default
+- Build vertical rhythm from surface-color flips band to band (plum hero to white product band to dark industry grid to near-black footer #191722), not from drop shadows or a numeric spacing ladder
+- Keep type to the three-family, three-job system: Geist for ~93% of body and headings, Espeak only on the hero H1 at 57.6px/600, and a monospace mid-sentence swap for the rotating industry word
+- Encode the binary radius literally — 0px for sections, cards, hero, and footer; 8px ('--style--radius-8px') only for pressable controls and content chips
+- Set body copy in Geist gray #70757F (the dominant 428-element text color) at 18px/400, the way most paragraph text ships
+
+### Don't
+- Spread the Solar yellow-green #D2FF95 broadly — keep it as a single-use accent adjacent to the Solar product narrative, never a default button surface or section background
+- Introduce a fourth type family beyond Geist, Espeak, and the monospace swap, which would break the rotating-word gesture
+- Soften the binary geometry with 4px, 12px, or 16px middle radii, which erases the layout-versus-pressable distinction
+- Import drop-shadow card chrome like 'box-shadow: 0 8px 24px rgba(0,0,0,0.08)' — Upstage ships effectively zero elevation and builds depth from surface contrast and #EEEEEE hairlines
+- Default to a corporate blue primary, the enterprise-AI cliche Upstage consciously avoids in favor of the violet-plum axis
+- Center-align the hero or signal the rotating industry word with color or weight — keep it left-aligned with the typographic monospace shift as the variable-slot cue