oh-my-design-cli 1.0.2 → 1.1.0

package/{references → web/references}/toss/DESIGN.md

@@ -91,60 +91,312 @@ What defines Toss visually is its OKLCH-based color system, rebuilt from scratch
 
 ### Buttons
 
-**Primary (Fill)**
-- Background: `#3182f6` (blue500)
+Toss `<Button>` is a 2-axis component: **variant** × **color** × size. Default size is `xlarge` (the values below); see the size-scale paragraph at the end for `small`/`medium`/`large`. Verified against `tossmini-docs.toss.im/tds-mobile/components/button` (TDS Mobile, public docs).
+
+**Fill / Primary**
+- Background: `#3182f6`
+- Text: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Pressed: dim overlay via `--button-pressed-background-color` + `--button-pressed-opacity`
+- Disabled: bg opacity scaled by `--button-disabled-opacity-color`
+- Loading: 3-dot indicator replacing label, button width preserved
+- Use: Primary CTA on light surfaces (송금하기, 확인) — 56px tall
+
+**Fill / Dark**
+- Background: `#4e5968`
 - Text: `#ffffff`
-- Radius: `var(--button-border-radius)` (typically 8px-12px)
-- Font: 16px weight 600
-- Pressed: dimmed overlay (opacity reduction)
-- Loading: 3-dot animation replacing text
-- Disabled: reduced opacity via `--button-disabled-opacity-color`
-- Display modes: `inline` (auto-width), `block` (full-width with line break), `full` (fills parent)
-- Sizes: `tiny`, `medium`, `large`, `big` (default)
-- Colors: `primary`, `dark`, `danger`, `light`
-- Use: Primary CTAs ("송금하기", "확인")
-
-**Secondary (Weak)**
-- Background: `#e8f3ff` (blue50) or `#f2f4f6` (grey100)
-- Text: `#3182f6` (blue500) or `#191f28` (grey900)
-- Use: Less prominent CTAs, secondary actions
-
-**Dark**
-- Background: `#191f28` (grey900)
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Strong action where blue would feel too playful (admin/settings CTA)
+
+**Fill / Danger**
+- Background: `#f04452`
 - Text: `#ffffff`
-- Use: Actions on light backgrounds where blue would be too playful
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Destructive confirmation (계좌 삭제, 거래 취소)
+
+**Fill / Light**
+- Background: `#ffffff`
+- Text: `#1b64da`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: CTA on dark / colored surfaces (sits on non-white bg to be legible)
+
+**Weak / Primary**
+- Background: `rgba(100, 168, 255, 0.15)`
+- Text: `#2272eb`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Secondary action paired with Fill / Primary on the same screen
+
+**Weak / Dark**
+- Background: `rgba(2, 32, 71, 0.05)`
+- Text: `#4e5968`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Neutral / cancel-style secondary (취소, 닫기)
+
+**Weak / Danger**
+- Background: `rgba(251, 136, 144, 0.15)`
+- Text: `#e42939`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Subtle destructive action (archive instead of delete)
+
+**Weak / Light**
+- Background: `rgba(255, 255, 255, 0.15)`
+- Text: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Secondary on dark / colored surfaces
+
+Display modes — `inline` (auto-width), `block` (full-width with line break), `full` (fills parent). Size scale (height · font · radius): `small` 32px · 13px / 600 · 8px; `medium` 38px · 15px / 600 · 10px; `large` 48px · 17px / 600 · 14px; `xlarge` (default) 56px · 17px / 600 · 16px. CSS-var customization: `--button-color`, `--button-background-color`, `--button-pressed-background-color`, `--button-pressed-opacity`, `--button-disabled-opacity-color`, `--button-loader-color`, `--button-loading-background-color`, `--button-gradient-color`.
+
+### Inputs
+
+Toss `<TextField>` has 4 variants: `box` (default), `line`, `big`, `hero`. `hasError` toggles error state. Verified at `tossmini-docs.toss.im/tds-mobile/components/TextField/text-field`.
+
+**Box (default)**
+- Background: `rgba(0, 23, 51, 0.02)`
+- Text: `#333d4b`
+- Border: 1px solid `rgba(2, 32, 71, 0.05)`
+- Radius: 14px
+- Padding: 14px 16px
+- Font: 17px / 400 / Toss Product Sans
+- Placeholder: `#b0b8c1`
+- Focus: border `#3182f6`
+- Use: Standard form input — most-used variant
+
+**Line**
+- Background: transparent
+- Text: `#333d4b`
+- Border: 1px solid `#e5e8eb` (bottom only)
+- Radius: 0px
+- Padding: 0px 0px 4px
+- Font: 17px / 400 / Toss Product Sans
+- Use: Underline-style input on dense forms
+
+**Big**
+- Background: transparent
+- Text: `#333d4b`
+- Border: 1px solid `#e5e8eb` (bottom only)
+- Radius: 0px
+- Padding: 0px 0px 4px
+- Font: 22px / 600 / Toss Product Sans
+- Use: Highlighted single-line input (amount, name)
+
+**Hero**
+- Background: transparent
+- Text: `#333d4b`
+- Border: 1px solid `#e5e8eb` (bottom only)
+- Radius: 0px
+- Padding: 0px 0px 4px
+- Font: 30px / 600 / Toss Product Sans
+- Use: Eye-catching hero input — large amount entry, sign-up moment
+
+**Error**
+- Background: `rgba(0, 23, 51, 0.02)` (box variant base)
+- Text: `#333d4b`
+- Border: 1px solid `#f04452`
+- Radius: 14px
+- Padding: 14px 16px
+- Font: 17px / 400 / Toss Product Sans
+- Use: `hasError` state — paired with inline help message in `#f04452`
+
+`SplitTextField` (OTP), `SecureKeypad` (financial PIN with randomised digit positions), and `TextArea` are documented separately under TDS but reuse the same focus ring and base radii.
+
+### Cards
+
+**Standard**
+- Background: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 20px
+- Shadow: `0px 2px 8px rgba(0,0,0,0.08)`
+- Use: Account, transaction, balance — the workhorse surface
+
+**Featured**
+- Background: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 24px
+- Shadow: `0px 2px 8px rgba(0,0,0,0.08)`
+- Use: Hero/promotional cards on the home tab
+
+**Compact**
+- Background: `#ffffff`
+- Border: 1px solid `#e5e8eb`
+- Radius: 8px
+- Padding: 12px
+- Shadow: none
+- Use: Inline list items where a softer 1px edge replaces shadow
 
-**Danger**
-- Background: `#f04452` (red500)
+### Badges
+
+Toss `<Badge>` is a 3-axis component: **variant** × **color** × **size**. Variants `fill | weak`. Colors `blue | teal | green | red | yellow | elephant`. Sizes `xsmall | small | medium | large` (each shifts radius/font/padding). Verified at `tossmini-docs.toss.im/tds-mobile/components/badge`.
+
+**Fill / Blue (medium default)**
+- Background: `#3182f6`
+- Text: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Primary status / category emphasis ("NEW", "BEST")
+
+**Fill / Green**
+- Background: `#22c55e`
 - Text: `#ffffff`
-- Use: Destructive actions, alert confirmations
-
-### Cards & Containers
-- Background: `#ffffff` (layeredBackground)
-- Border: 1px solid `#e5e8eb` (grey200) or no border
-- Radius: 12px (standard), 16px (featured), 8px (compact)
-- Shadow: `0px 2px 8px rgba(0,0,0,0.08)` -- single-layer, minimal
-- Financial cards: prominent number display with amount in 700 weight, currency label in 400
-
-### Inputs & Forms
-- Background: `#f2f4f6` (grey100) for contained variant
-- Border: 1px solid `#e5e8eb`, focus: 2px solid `#3182f6`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Success / completion state (입금 완료, 송금 성공)
+
+**Fill / Red**
+- Background: `#ef4444`
+- Text: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Negative / blocking state (실패, 차단)
+
+**Fill / Yellow**
+- Background: `#eab308`
+- Text: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Caution / pending (검토 중, 보류)
+
+**Weak / Blue**
+- Background: `rgba(100, 168, 255, 0.15)`
+- Text: `#2272eb`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Subtle informational badge
+
+**Weak / Green**
+- Background: `rgba(34, 197, 94, 0.15)`
+- Text: `#16a34a`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Subtle success state
+
+**Weak / Red**
+- Background: `rgba(239, 68, 68, 0.15)`
+- Text: `#dc2626`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Subtle negative state
+
+**Weak / Elephant**
+- Background: `rgba(2, 32, 71, 0.05)`
+- Text: `#4e5968`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Neutral metadata badge
+
+Size scale (height · font · radius · padding): `xsmall` 21px · 10px / 600 · 9px · 3px 7px; `small` 24px · 12px / 700 · 11px · 3px 7px; `medium` 26px · 13px / 700 · 12px · 3px 7px; `large` 29px · 14px / 700 · 13px · 4px 8px. Color also supports `teal` and full mapping for each color name; values above show the most-used 4 fills + 4 weaks at medium size.
+
+### Tabs
+
+**Bottom Tab (Active)**
+- Background: `#ffffff`
+- Text: `#191f28`
+- Border: 1px solid `#e5e8eb` (top border only)
+- Active: `#3182f6` (icon and label)
+- Disabled: `#b0b8c1` (icon) + `#8b95a1` (label)
+- Font: 11px / 500 / Toss Product Sans
+- Use: Bottom navigation bar — fixed white background, no shadow
+
+**Segmented**
+- Background: `#f2f4f6`
+- Text: `#8b95a1`
+- Border: none
+- Radius: 12px
+- Padding: 8px 16px
+- Active: `#ffffff` background + `#191f28` text + `0px 2px 4px rgba(0,0,0,0.06)` shadow
+- Font: 14px / 600 / Toss Product Sans
+- Use: Section switching within a screen (월/주/일 전환)
+
+### Toasts
+
+**Default**
+- Background: `#191f28`
+- Text: `#ffffff`
+- Border: none
 - Radius: 8px
-- Text: `#191f28`, Placeholder: `#b0b8c1` (grey400)
-- Error border: `#f04452` (red500)
-- Special: SplitTextField for OTP, SecureKeypad for financial input
-
-### Navigation
-- Bottom tab bar: white background, top border `#e5e8eb`
-- Active: `#3182f6` icon + `#191f28` text, Inactive: `#b0b8c1` icon + `#8b95a1` text
-- Top app bar: white, sticky, optional backdrop blur
-- Segmented control for section switching
-
-### Overlays
-- Bottom Sheet: `#ffffff`, 16px top radius, managed via `overlay-kit`
-- Dialog: centered modal, AlertDialog and ConfirmDialog variants
-- Toast: floating notification, subtle shadow, auto-dismiss
-- Tooltip: `#191f28` background, white text, arrow pointer
+- Padding: 12px 16px
+- Shadow: `0px 4px 12px rgba(0,0,0,0.12)`
+- Font: 14px / 500 / Toss Product Sans
+- Use: Auto-dismissing transient notification ("복사되었습니다"). Money-moved success is a dedicated screen, never a toast.
+
+### Dialogs
+
+**Centered Modal**
+- Background: `#ffffff`
+- Text: `#191f28`
+- Border: none
+- Radius: 16px
+- Padding: 24px
+- Shadow: `0px 4px 12px rgba(0,0,0,0.12)`
+- Use: AlertDialog / ConfirmDialog for confirmation prompts
+
+**Bottom Sheet**
+- Background: `#ffffff`
+- Text: `#191f28`
+- Border: none
+- Radius: 16px (top corners only)
+- Padding: 24px 20px
+- Shadow: `0px -4px 12px rgba(0,0,0,0.08)`
+- Use: Bottom-attached overlay for selection, picker, secondary form (managed via `overlay-kit`)
+
+### Toggles
+
+**Default**
+- Background: `#3182f6` (on) / `#d1d6db` (off)
+- Border: none
+- Radius: 9999px
+- Thumb: `#ffffff` 18px circle with `0px 1px 2px rgba(0,0,0,0.1)` shadow
+- Use: Boolean settings (알림 켜기, 자동 송금)
+
+---
+
+**Verified:** 2026-05-08 (full-depth, A1 loop)
+**Tier 1 sources:** tossmini-docs.toss.im/tds-mobile (TDS Mobile spec docs — Button/TextField/Badge), toss.im (live DOM via playwright — `.p-button` web variants `#3182f6` / 7px radius / 15px / 600, distinct from TDS Mobile geometry; nav links `#4e5968` 8px transparent; App Store/Play CTA `rgba(0,12,30,0.8)` / 7px / 17px·600)
+**Tier 2 sources:** getdesign.md/toss — no record. styles.refero.design — no record (?q=Toss returns 0 hits).
+**Tier 2b status:** unavailable; Tier 1 (TDS Mobile docs + live web inspect) treated as authoritative per pipeline.
+**Surface split:** §4 above documents the **TDS Mobile (app)** system. The marketing web (toss.im) uses a **distinct `.p-button` system** — Primary `#3182f6` / 7px / 15px·600 / 11×16 / 40px height; Secondary Light Blue `#e8f3ff` bg / `#1b64da` text / 7px (parallel geometry). Both retained as parallel systems.
+**Conflicts unresolved:** none. TDS Mobile geometry (16px radius, 17px·600) and web `.p-button` (7px, 15px·600) coexist on different surfaces and were not in conflict.
 
 ## 5. Layout Principles
 
@@ -285,7 +537,9 @@ Toss speaks like a friend who happens to be a fiduciary: calm, unhurried, zero j
 
 ## 11. Brand Narrative
 
-Toss launched in 2015 as a single-feature money-transfer app in a Korean banking market dominated by legacy institutions — KB, Shinhan, Woori, Hana — each with institutional-indigo websites, 12-digit account numbers, Active-X plug-ins, and the presumption that handling money had to feel like filing taxes. The founding rejection was of that entire aesthetic vocabulary. The specific cerulean `#3182f6` was chosen because it was **not** the indigo of any incumbent bank. The optimism of the color was the whole thesis: money could feel light.
+Toss is the consumer brand of **Viva Republica** (비바리퍼블리카), founded by **Lee Seung-gun (이승건)** — a former dentist who [left a Samsung-owned hospital](https://en.wikipedia.org/wiki/Lee_Seung-gun) to build it ([Wikipedia: Viva Republica](https://en.wikipedia.org/wiki/Viva_Republica), [Fortune Asia, 2025](https://fortune.com/asia/2025/04/23/toss-founder-lee-seunggun-south-korea-viva-republica/)). Lee tried **eight failed ventures** before Toss; the Toss money-transfer product launched in 2014 ([Caproasia, 2025](https://www.caproasia.com/2025/07/26/south-korea-financial-app-toss-plans-united-states-ipo-in-2026)) into a Korean banking market dominated by legacy institutions — KB, Shinhan, Woori, Hana — each with institutional-indigo websites, 12-digit account numbers, Active-X plug-ins, and the presumption that handling money had to feel like filing taxes. The founding rejection was of that entire aesthetic vocabulary. The specific cerulean `#3182f6` was chosen because it was **not** the indigo of any incumbent bank. The optimism of the color was the whole thesis: money could feel light.
+
+Toss reached **20M+ users by 2021** (Wikipedia) and operates as a financial super-app spanning lending, payments, brokerage, insurance, and credit scoring. As of 2025, the company plans a **US IPO in 2026 at ~$15B valuation**, raising $2.5B (Caproasia, July 2025), with investors including Altos Ventures, Goodwater Capital, HongShan Capital, PayPal, GIC, and Korea Development Bank.
 
 Toss is not a neo-bank. It's a super-app: one interface holds transfers, investments, credit scoring, insurance, brokerage, and lending. The design's job is to flatten that complexity into **one gesture per screen**. That requires extreme restraint — shadows are single-layer black, palette is blue-and-neutral, type is one family in three weights. Every ornamental move costs clarity, and clarity is the entire brand promise.
 

package/{references → web/references}/uber/DESIGN.md

@@ -293,3 +293,76 @@ What makes Uber's design truly distinctive is its use of full-bleed photography
 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/{references → web/references}/vercel/DESIGN.md

@@ -183,6 +183,14 @@ What distinguishes Vercel from other monochrome design systems is its shadow-as-
 - Description below in gray body text
 - Shadow-bordered card container
 
+---
+
+**Verified:** 2026-05-08
+**Tier 1 sources:** vercel.com (live DOM via playwright — nav pill `9999px` / 0×12 / 32px / 13px·400 `#8a8f98`; Sign up CTA `#e5e5e6` / `#08090a` / 9999px / 32px / 13px·510; Skip-to-content button `#fff` / `#0072f5` / 6px)
+**Tier 2 sources:** styles.refero.design — no Vercel record at `?q=Vercel`. getdesign.md/vercel — directory only.
+**Tier 2 status:** unavailable; Tier 1 (vercel.com live inspect) authoritative.
+**Conflicts unresolved:** none. Vercel uses tight 32px-height nav pills (9999px) and Geist Sans throughout — confirmed.
+
 ## 5. Layout Principles
 
 ### Spacing System
@@ -335,7 +343,7 @@ Vercel's voice is engineer-terse, confident, and quietly clever. Headlines are s
 
 ## 11. Brand Narrative
 
-Vercel was founded in 2015 by Guillermo Rauch and originally called **ZEIT**; the company renamed to Vercel in April 2020, the same moment it raised its Series A to build the cloud infrastructure underneath Next.js, the open-source React framework it had shepherded since 2016. Vercel's founding thesis is that frontend developers should not have to think about infrastructure: the framework and the deployment target should be one cognitive object, not two.
+Vercel was founded in **2015** in San Francisco as **ZEIT** by **Guillermo Rauch** (CEO), **Tony Kovanen** (ex-CTO), and **Naoyuki Kanezawa** ([Vercel — Wikipedia](https://en.wikipedia.org/wiki/Vercel), [History of Vercel 2015–2020](https://medium.com/history-of-vercel/history-of-vercel-2015-2020-6-7-zeit-and-next-js-dc480a88e0b8)). Rauch's prior OSS — **Socket.IO** (real-time events) and **Mongoose** — preceded the company and built his developer-first reputation ([rauchg.com/about](https://rauchg.com/about)). **Next.js was released in October 2016**, just one year after founding, and quickly became the platform's flagship product. The company **renamed ZEIT → Vercel in April 2020**, retaining the triangular logo. Vercel raised **$250M in May 2024 at $3.25B valuation** ([BrandHistories](https://brandhistories.com/vercel/company-history)) and remains private as of 2026 with no announced IPO. Vercel's founding thesis is that frontend developers should not have to think about infrastructure: the framework and the deployment target should be one cognitive object, not two.
 
 The visual language — white canvas, near-black text (`#171717`), Geist Sans with aggressive negative letter-spacing, shadow-as-border throughout — is a design statement that mirrors the product thesis. It is **minimalism as engineering principle**, not minimalism as style choice. Every element on a Vercel marketing page has been through the same "does this justify its bytes?" discipline that a well-written Next.js component goes through. The Vercel Design team puts this explicitly: *"We design systems and systemize designs. Imbuing our work with care and craft as stewards of the Vercel Brand and Geist Design System."*
 

package/{references → web/references}/voltagent/DESIGN.md

@@ -321,3 +321,76 @@ When refining existing screens generated with this design system:
 5. For glow effects, specify "Emerald Signal Green (#00d992) as a drop-shadow with 2–8px blur radius"
 6. Always specify which font — system-ui for headings, Inter for body/UI, SFMono-Regular for code
 7. Keep animations slow and subtle — marquee scrolls at 25–80s, glow pulses gently
+
+## 10. Voice & Tone
+
+VoltAgent's voice is **TypeScript-AI-framework and developer-honest.** "Open Source TypeScript AI Agent Framework" — capability-driven, OSS-positioned. Marketing emphasizes the developer-tools-team behind getdesign.md / DESIGN.md ecosystem.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get Started", "Try VoltOps", "View on GitHub" |
+| Marketing | Code-first. Real TypeScript snippets in marketing |
+| Documentation | Type-aware, framework-deep |
+| Error | Stack-trace-friendly |
+
+**Voice samples**
+- Marketing CTA: *"Get Started"* / *"Try VoltOps"* <!-- verified: voltagent.dev homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary AI framework". Generic LangChain-comparison framing.
+
+## 11. Brand Narrative
+
+VoltAgent is the **open-source TypeScript AI agent framework** — a 2024-launched project providing memory, RAG, guardrails, tools, MCP, voice, and workflow primitives in one type-safe package, with **n8n-style observability** as the differentiator ([VoltAgent — voltagent.dev](https://voltagent.dev/), [GitHub: VoltAgent/voltagent](https://github.com/VoltAgent/voltagent), [Product Hunt — VoltAgent OSS AI Agent Framework](https://www.producthunt.com/products/voltagent-opensource-ai-agent-framework)). **MIT-licensed**. Founder: **Omer Aplak** (referenced across VoltAgent's GitHub org and community). **GitHub: ~8.7K stars** (live header confirms "Thank you! 8.7K" badge 2026-05). **Business model**: open-core — core framework always remains OSS; advanced enterprise features on the **observability side (VoltOps)** are monetized. The team also maintains the **getdesign.md ecosystem** (collection of DESIGN.md files for AI agents to reference — also referenced throughout this oh-my-design migration project). **Integrations confirmed**: Qdrant (vector DB), Hugging Face (`huggingface.co/voltagent`). Position: developer-first, type-safe, OSS-default.
+
+## 12. Principles
+
+1. **TypeScript-first.** *UI implication:* every code snippet shows .ts not .py.
+2. **Open source heritage.** *UI implication:* GitHub link prominent on landing.
+3. **Slow subtle animations.** Marquee 25-80s. *UI implication:* avoid fast/aggressive motion.
+4. **Three fonts.** system-ui / Inter / SFMono-Regular. *UI implication:* don't substitute.
+5. **Glow pulses gently.** *UI implication:* preserve subtle glow accent on hero.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by VoltAgent user segments (TS-first developers, AI agent builders, indie SaaS), not individual people.*
+
+**Sofia Russo, 30, Milan.** Indie SaaS founder. VoltAgent for typed agent infrastructure.
+
+**Marcus Chen, 35, San Francisco.** Senior TypeScript engineer. Migrated from LangChain JS for type safety.
+
+**Priya Krishnan, 27, Bengaluru.** AI engineer at startup. VoltOps for agent observability.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no agents)** | "Create first agent" CTA |
+| **Empty (no projects)** | "Try VoltOps" link |
+| **Loading (agent run)** | Per-step trace visible |
+| **Loading (compile)** | TypeScript checking indicator |
+| **Error (type)** | Inline TS error with line:column |
+| **Error (runtime)** | Stack trace visible |
+| **Success (agent ran)** | Result + trace expanded |
+| **Success (deployed)** | Endpoint visible |
+| **Skeleton (agent list)** | 6px placeholders |
+| **Disabled (no plan)** | Upgrade link |
+| **Loading (long task)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-marquee` | 25-80s | Background marquee |
+| `motion-glow` | 3000ms | Gentle glow pulse |
+
+Standard cubic-bezier; no bounce. **Slow subtle motion is the register.** `prefers-reduced-motion: reduce` removes marquee + glow.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 61 — Apple-tier)
+**Tier 1 sources:** voltagent.dev home + /docs (live DOM via playwright — Hero Primary `transparent` ghost + `#eeeeee` Off-White text 6px / 54px / 12×16 / 18px·**700**; Header Compact ghost 6px / 34px / 14px·500; **Brand accent `#2fd6a1` Voltage Green** (active states); Search variant `#00d992` Voltage Green Lighter; **Active Tab `#101010` Charcoal + Voltage Green text 0px** (terminal/IDE aesthetic); GitHub Star badge 9999px).
+**Tier 2 sources:** styles.refero.design / getdesign.md — directory-only (note: VoltAgent maintains the getdesign.md ecosystem).
+**Tier 2 (Philosophy):** voltagent.dev homepage, GitHub VoltAgent/voltagent (README/CONSOLE.md, MIT-license), Product Hunt, Medium (Gowtham), Qdrant integration, Hugging Face.
+**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier addition:** Voltage Green `#2fd6a1` brand accent + sharp-tab `#101010` Charcoal active state + search-variant lighter green `#00d992` + Star badge full-pill missed by prior pass.