zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/hyperconnect/DESIGN.md

@@ -1,393 +0,0 @@
----
-id: hyperconnect
-name: Hyperconnect
-country: KR
-category: consumer-tech
-homepage: "https://hyperconnect.com"
-primary_color: "#00dd99"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=hyperconnect.com&sz=128"
-verified: "2026-06-09"
-added: "2026-06-09"
-omd: "0.1"
-tokens:
-  source: live-extract
-  extracted: "2026-06-09"
-  components_harvested: true
-  colors:
-    primary: "#00dd99"
-    primary-bright: "#18da9e"
-    ink: "#222222"
-    ink-soft: "#333333"
-    canvas: "#ffffff"
-    surface: "#f8f8f8"
-    surface-alt: "#f4f4f4"
-    dark: "#1c1c1c"
-    heading-on-dark: "#ffffff"
-    body: "#696969"
-    label: "#858585"
-    muted: "#b4b4b4"
-    blue-accent: "#3860be"
-    blue-tint: "#cddcf2"
-    on-primary: "#ffffff"
-    hairline: "#bbbbbb"
-  typography:
-    family: { display: "Poppins", body: "noto-sans", ui: "Inter" }
-    hero:       { size: 62, weight: 700, lineHeight: 1.17, tracking: 0, use: "Mission hero headline on dark imagery" }
-    section:    { size: 46, weight: 700, lineHeight: 1.20, tracking: 0, use: "Section titles, e.g. Grow Rapidly & Expand Globally" }
-    body-lg:    { size: 18, weight: 400, lineHeight: 1.45, tracking: 0, use: "Intro and standard reading text" }
-    body:       { size: 16, weight: 400, lineHeight: 1.50, tracking: 0, use: "Paragraph copy, Inter UI text" }
-    nav:        { size: 16, weight: 700, lineHeight: 1.63, tracking: 0, use: "Primary nav item, Poppins bold" }
-    link:       { size: 14, weight: 400, lineHeight: 1.86, tracking: 0, use: "Secondary nav / footer links" }
-    eyebrow:    { size: 13, weight: 400, lineHeight: 1.17, tracking: 0, use: "Small eyebrow labels, e.g. Serviced in" }
-    button:     { size: 14, weight: 700, lineHeight: 1.00, tracking: 0.144, use: "Primary button label, uppercase-ish weight" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 30, xxl: 48, section: 64 }
-  rounded: { sm: 2, md: 8, lg: 17, full: 9999 }
-  shadow:
-    none: "none"
-    soft: "rgba(0,0,0,0.08) 0px 4px 16px"
-    raised: "rgba(0,0,0,0.12) 0px 10px 30px"
-  components:
-    button-primary: { type: button, bg: "#222222", fg: "#ffffff", radius: "2px", padding: "12px 30px", font: "14px / 700", use: "Primary action — Apply, submit; near-black solid, 1px #222222 border" }
-    button-secondary: { type: button, bg: "#222222", fg: "#ffffff", radius: "2px", padding: "10px 30px", font: "13px / 600", use: "Dialog action — Confirm, Reject All" }
-    button-filter: { type: button, bg: "#3860be", fg: "#ffffff", radius: "17px", padding: "8px 16px", font: "14px / 600", use: "Pill filter toggle, 1px #bbbbbb border" }
-    nav-item: { type: tab, bg: "#ffffff", fg: "#222222", font: "16px / 700", use: "Top nav item, Poppins bold", active: "#00dd99 text on active/hover" }
-    link-footer: { type: badge, bg: "#ffffff", fg: "#858585", font: "14px / 400", use: "Footer / sub-nav link, gray #858585" }
-    card: { type: card, bg: "#ffffff", fg: "#222222", radius: "8px", use: "Content card on #f8f8f8 surface, soft shadow rgba(0,0,0,0.08)" }
-    card-tint: { type: card, bg: "#cddcf2", fg: "#222222", radius: "8px", use: "Tinted info/stat card, blue #cddcf2 wash" }
-    input-text: { type: input, bg: "#ffffff", fg: "#222222", radius: "2px", font: "16px / 400", use: "Form field, 1px #bbbbbb border, focus #00dd99" }
-    eyebrow-label: { type: badge, bg: "#ffffff", fg: "#b4b4b4", font: "13px / 400", use: "Small eyebrow / metadata label — Serviced in" }
-    dialog-cookie: { type: dialog, bg: "#ffffff", fg: "#333333", radius: "8px", use: "Cookie consent dialog with #222222 action buttons" }
----
-
-# Design System Inspiration of Hyperconnect
-
-## 1. Visual Theme & Atmosphere
-
-Hyperconnect's corporate site reads as a confident, globally-minded engineering company that happens to build social video at planetary scale. The atmosphere is bright, clean, and editorial: large stretches of pure white (`#ffffff`) and near-white surfaces (`#f8f8f8`, `#f4f4f4`) carry the layout, punctuated by full-bleed dark hero imagery where the mission headline lands in pure white over photography. The signature note is a single electric mint-green (`#00dd99`) used sparingly as the interactive and brand-identity accent — it appears on active navigation, key links, and brand moments, never as a flood. The result feels like a hybrid of a Korean tech employer-brand site and a Silicon Valley product company: optimistic, human, and technically credible.
-
-Typography does the heavy lifting. Headlines are set in `Poppins` at heavy weight 700 and large sizes (the mission hero at 62px, section titles at 46px), giving the page a geometric, rounded, friendly authority. Body and UI text drop to `noto-sans` and `Inter` at weight 400, which keeps long-form copy quiet and readable, especially for the bilingual Korean/English audience. The pairing — geometric heavy display over neutral humanist body — is the backbone of the brand's voice: bold claims, calm explanation.
-
-The chrome is deliberately restrained. Buttons are near-black (`#222222`) solid blocks with a tight 2px radius and a slightly tracked, bold 14px label — corporate and decisive rather than playful. Where the UI needs lightness, it reaches for pill-shaped filter toggles (17px radius) and a secondary blue accent (`#3860be`) for utility controls. Shadows are minimal; the design earns depth from whitespace and the light/dark hero cadence rather than heavy elevation.
-
-**Key Characteristics:**
-- Electric mint accent (`#00dd99`) used surgically for brand identity, active nav, and key links — never as a background flood
-- `Poppins` weight 700 display type (62px hero, 46px sections) over `noto-sans` / `Inter` weight 400 body
-- Near-black (`#222222`) solid buttons with tight 2px radius and a bold, lightly-tracked 14px label
-- Bright white and near-white canvas (`#ffffff`, `#f8f8f8`, `#f4f4f4`) with full-bleed dark hero imagery
-- Secondary blue (`#3860be`) reserved for utility controls like pill filter toggles (17px radius)
-- Restrained elevation — depth comes from whitespace and light/dark cadence, not heavy shadows
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Hyperconnect Mint** (`#00dd99`): The brand's defining accent. Active navigation, key interactive links, brand-identity moments. A bright, slightly-cool spring green that signals energy and connection.
-- **Mint Bright** (`#18da9e`): A near-twin of the primary used on certain hover/emphasis states and brand decorations — interchangeable in feel, marginally brighter.
-- **Pure White** (`#ffffff`): Page background, card surfaces, hero headline text over dark imagery.
-
-### Ink & Action
-- **Ink** (`#222222`): The near-black workhorse — primary button backgrounds, strong headings, nav text. Not pure black, slightly softened.
-- **Ink Soft** (`#333333`): Default body ink (rendered as `rgba(0,0,0,0.8)` on the live page) for paragraph copy.
-- **Dark** (`#1c1c1c`): Deep section/footer backgrounds for immersive dark moments.
-
-### Surface & Neutrals
-- **Surface** (`#f8f8f8`): Primary off-white surface for alternating sections and card backgrounds.
-- **Surface Alt** (`#f4f4f4`): Secondary light surface for nested panels and subtle banding.
-- **Body** (`#696969`): Secondary reading text, descriptions.
-- **Label** (`#858585`): Footer links, sub-navigation, captions.
-- **Muted** (`#b4b4b4`): Eyebrow labels, the quietest metadata text (e.g. "Serviced in").
-- **Hairline** (`#bbbbbb`): Borders on inputs and pill controls.
-
-### Secondary Accent
-- **Blue Accent** (`#3860be`): Utility controls — pill filter toggles, secondary interactive chrome. A muted royal blue that stays out of the brand-mint's way.
-- **Blue Tint** (`#cddcf2`): Soft blue wash for tinted info/stat cards.
-
-### On-Color
-- **On Primary** (`#ffffff`): White text/icons on mint and dark surfaces.
-- **Heading on Dark** (`#ffffff`): Hero headlines over photographic dark backgrounds.
-
-## 3. Typography Rules
-
-### Font Family
-- **Display**: `Poppins` — geometric sans, used at weight 700 for all headlines and primary nav. Fallbacks: `Inter, system-ui, sans-serif`.
-- **Body**: `noto-sans` — humanist neutral for long-form and bilingual KR/EN copy. Fallbacks: `sans-serif, serif`.
-- **UI**: `Inter` — used for compact UI paragraph text. Fallbacks: `system-ui, sans-serif`.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Tracking | Notes |
-|------|------|------|--------|-------------|----------|-------|
-| Hero | Poppins | 62px | 700 | 1.17 | 0 | Mission headline, white on dark imagery |
-| Section | Poppins | 46px | 700 | 1.20 | 0 | Section titles ("Grow Rapidly & Expand Globally") |
-| Nav | Poppins | 16px | 700 | 1.63 | 0 | Primary nav items |
-| Body Large | noto-sans | 18px | 400 | 1.45 | 0 | Intro and standard reading text |
-| Body | Inter / noto-sans | 16px | 400 | 1.50 | 0 | Paragraph copy |
-| Link | noto-sans | 14px | 400 | 1.86 | 0 | Footer / sub-nav links, gray |
-| Eyebrow | Poppins | 13px | 400 | 1.17 | 0 | Small labels ("Serviced in") |
-| Button | noto-sans | 14px | 700 | 1.00 | 0.144px | Primary button label |
-
-### Principles
-- **Heavy geometric display, quiet humanist body.** Poppins 700 owns the headlines; body text steps all the way down to weight 400 so claims read as bold and explanations read as calm.
-- **Two-family split by job.** Poppins for anything that should feel branded and structural (hero, sections, nav); noto-sans / Inter for anything that should disappear into reading.
-- **Minimal tracking.** Letter-spacing is near-zero everywhere except button labels, which carry a faint `0.144px` track to read as deliberate and corporate.
-- **Big jumps, few steps.** The scale leaps from 62px hero to 46px section down to 16–18px body — there is no crowded middle. Hierarchy is created by size and weight, not by many intermediate tiers.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Ink)**
-- Background: `#222222`
-- Text: `#ffffff`
-- Padding: 12px 30px
-- Radius: 2px
-- Border: `1px solid #222222`
-- Font: 14px noto-sans weight 700, tracking 0.144px
-- Use: Primary actions — "Apply", form submit
-
-**Dialog Action**
-- Background: `#222222`
-- Text: `#ffffff`
-- Padding: 10px 30px
-- Radius: 2px
-- Font: 13px weight 600, tracking 0.13px
-- Use: Modal/consent actions — "Confirm My Choices", "Reject All"
-
-**Filter Pill (Blue)**
-- Background: `#3860be`
-- Text: `#ffffff`
-- Radius: 17px (pill)
-- Border: `1px solid #bbbbbb`
-- Use: Utility toggle controls
-
-### Cards & Containers
-- Background: `#ffffff` on `#f8f8f8` / `#f4f4f4` surfaces
-- Radius: 8px
-- Tinted variant: `#cddcf2` blue wash for stat/info cards
-- Shadow (soft): `rgba(0,0,0,0.08) 0px 4px 16px`
-- Shadow (raised): `rgba(0,0,0,0.12) 0px 10px 30px`
-
-### Navigation
-- White header, Poppins 16px weight 700 nav items in `#222222`
-- Active/hover state shifts item text to mint `#00dd99`
-- Sub-nav and footer links drop to noto-sans 14px weight 400 in `#858585`
-
-### Inputs & Forms
-- Border: `1px solid #bbbbbb`
-- Radius: 2px
-- Text: `#222222`, 16px
-- Focus: mint `#00dd99` accent
-
-### Badges / Eyebrows
-- Eyebrow label: `#b4b4b4` text, 13px Poppins, e.g. "Serviced in"
-- Footer link badge: `#858585` text, 14px
-
----
-
-**Verified:** 2026-06-09 (live DOM inspect)
-**Tier 1 sources:** https://hyperconnect.com, https://hyperconnect.com/about/hyperconnect
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 8px, 12px, 16px, 24px, 30px, 48px, 64px
-- Notable: 30px horizontal button padding is a recurring rhythm value, giving buttons a wide, confident footprint
-
-### Grid & Container
-- Centered single-column hero with full-bleed dark imagery
-- Multi-column feature/stat grids on `#f8f8f8` surfaces
-- Generous side margins keep content centered on wide desktop viewports
-- Alternating white / near-white bands create vertical rhythm
-
-### Whitespace Philosophy
-- **Bright and open.** The page breathes — large white gaps separate sections, and headlines are given room rather than crowded by chrome.
-- **Light/dark cadence.** Full-bleed dark hero and immersive sections (`#1c1c1c`) alternate with bright white content bands for a cinematic rhythm.
-- **Content over decoration.** Few borders, minimal shadow; structure comes from spacing and the type scale.
-
-### Border Radius Scale
-- Tight (2px): Buttons, inputs — corporate, decisive
-- Comfortable (8px): Cards, dialogs
-- Pill (17px): Filter toggles and chip controls
-- Full (9999): Circular avatars / icon buttons
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (0) | No shadow | Page background, inline text, hero over imagery |
-| Soft (1) | `rgba(0,0,0,0.08) 0px 4px 16px` | Cards, raised panels |
-| Raised (2) | `rgba(0,0,0,0.12) 0px 10px 30px` | Dialogs, popovers, sticky headers |
-| Focus | mint `#00dd99` accent ring | Keyboard focus, active input |
-
-**Shadow Philosophy:** Hyperconnect treats elevation as a quiet last resort. Most depth is created through the light/dark band cadence and whitespace rather than shadow. When shadow appears, it is a soft, neutral black at low opacity — never colored, never dramatic. The brand's drama lives in photography and the mint accent, not in floating UI.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use mint `#00dd99` surgically — active nav, key links, brand moments only
-- Set headlines in `Poppins` weight 700 at large sizes (46px+) for branded authority
-- Keep body copy quiet in `noto-sans` / `Inter` weight 400
-- Use near-black `#222222` solid buttons with tight 2px radius
-- Alternate bright white (`#ffffff`) and near-white (`#f8f8f8`) bands with dark hero imagery
-- Reserve blue `#3860be` for utility controls, pill toggles
-- Let whitespace and photography carry the page; keep shadows soft and neutral
-
-### Don't
-- Don't flood large areas with mint — it is an accent, not a background
-- Don't use pill-radius on primary buttons — the 2px corner is the corporate signal
-- Don't set body copy in Poppins or at heavy weight — keep explanation calm
-- Don't introduce colored or heavy shadows — elevation stays soft black, low opacity
-- Don't crowd the middle of the type scale — jump from display to body
-- Don't let blue `#3860be` compete with mint for brand identity — blue is utility only
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, hero type reduced, nav collapses to menu |
-| Tablet | 640-1024px | 2-column grids, moderate padding |
-| Desktop | 1024-1440px | Full layout, multi-column stat/feature grids |
-| Large | >1440px | Centered content with generous side margins |
-
-### Touch Targets
-- Buttons use wide padding (12px 30px) for comfortable tap area
-- Nav items at 16px weight 700 with generous spacing
-- Pill filter toggles sized for thumb taps
-
-### Collapsing Strategy
-- Hero: 62px display compresses toward 36–40px on mobile, weight 700 maintained
-- Navigation: horizontal Poppins nav collapses to a menu toggle
-- Feature/stat grids: multi-column to 2-column to single stacked
-- Dark hero imagery maintains full-bleed treatment, reduces internal padding
-
-### Image Behavior
-- Full-bleed hero photography scales to cover at all sizes
-- Cards maintain 8px radius across breakpoints
-- Brand decorations using mint simplify on small screens
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Brand accent: Mint (`#00dd99`)
-- Primary button: Ink (`#222222`), white text
-- Background: White (`#ffffff`), surfaces `#f8f8f8` / `#f4f4f4`
-- Heading: Ink (`#222222`) / white on dark
-- Body text: `#696969`, ink-soft `#333333`
-- Label / link: `#858585`, muted `#b4b4b4`
-- Utility: Blue (`#3860be`), blue tint `#cddcf2`
-- Dark section: `#1c1c1c`
-
-### Example Component Prompts
-- "Create a hero on full-bleed dark imagery. Headline in Poppins 62px weight 700, line-height 1.17, white (#ffffff). Below it, body in noto-sans 18px weight 400, color rgba(255,255,255,0.85)."
-- "Design a section on #f8f8f8. Title in Poppins 46px weight 700, color #222222. Cards: white background, 8px radius, soft shadow rgba(0,0,0,0.08) 0px 4px 16px."
-- "Build a primary button: #222222 background, white text, 2px radius, 12px 30px padding, noto-sans 14px weight 700, tracking 0.144px. Label 'Apply'."
-- "Create top nav: white header, Poppins 16px weight 700 items in #222222, active/hover item shifts to mint #00dd99."
-- "Design a filter pill: #3860be background, white text, 17px radius, 1px solid #bbbbbb border."
-
-### Iteration Guide
-1. Mint `#00dd99` is an accent — apply it to one or two interactive elements per view, never as a fill
-2. Poppins 700 for display and nav; noto-sans / Inter 400 for everything readable
-3. Buttons are `#222222` solid, 2px radius, wide 30px horizontal padding
-4. Use whitespace and the light/dark band cadence for depth before reaching for shadow
-5. Blue `#3860be` is utility chrome only — keep it subordinate to mint
-6. Keep the type scale bimodal: big display, calm body, no crowded middle
-
----
-
-## 10. Voice & Tone
-
-Hyperconnect's voice is mission-forward, globally ambitious, and quietly technical — an engineering company that frames social video as human connection. Headlines make broad, optimistic claims ("Our Mission", "Grow Rapidly & Expand Globally") while body copy stays measured and explanatory. As a Korea-headquartered company operating worldwide, the register is bilingual-aware: English-first on the global corporate site, with copy that reads cleanly for non-native speakers. There is pride in scale and reach, expressed through concrete numbers (markets served, downloads) rather than hype adjectives.
-
-| Context | Tone |
-|---|---|
-| Hero / mission | Aspirational, declarative. "Our Mission." Broad but sincere. |
-| Section titles | Outcome-oriented, confident. "Grow Rapidly & Expand Globally." |
-| Product (Azar) | Plain capability framing — what it does, where it's used. |
-| Careers / culture | Warm, talent-focused, emphasizes global team and engineering depth. |
-| Stats / metrics | Concrete numbers presented matter-of-factly, no superlatives. |
-| Legal / consent | Formal, clear, compliance-grade (cookie/consent dialogs). |
-
-**Forbidden register.** Avoid hype stacking ("revolutionary", "game-changing"), exclamation-heavy CTAs, and emoji on the corporate site. Avoid vague platitudes untethered to a concrete number or capability. The brand earns trust through scale figures and engineering credibility, not adjectives.
-
-## 11. Brand Narrative
-
-Hyperconnect is a Korea-founded technology company best known for **Azar**, a video-based social discovery app that connects people across languages and borders through real-time video and AI-powered translation/matching. Founded in Seoul, the company built deep expertise in real-time WebRTC video, on-device machine learning, and global-scale matching infrastructure, growing Azar into one of the most-downloaded social-video apps worldwide across the Middle East, Europe, Asia, and the Americas. The brand story is one of Korean engineering reaching a global consumer audience: the corporate site foregrounds the mission of connecting people and the global footprint of its products.
-
-The company became part of **Match Group** following a landmark acquisition, anchoring Match's video and AI capabilities — a milestone frequently cited as one of the largest exits for a Korean app company. That heritage shapes the brand: it presents as both a proud Korean tech success story and a globally operating consumer-internet company, balancing local engineering roots with worldwide product reach.
-
-The design system reflects this duality. The bright, optimistic palette and friendly geometric Poppins headlines signal a consumer-facing, human brand; the disciplined near-black buttons, restrained shadows, and quiet body type signal engineering seriousness. The single mint accent ties it together — energetic and modern without being loud.
-
-## 12. Principles
-
-1. **Connection is the mission.** The product exists to connect people across language and distance; the brand's optimism is in service of that, not decoration.
-2. **Global by default.** Built for a worldwide audience from the start — English-first corporate voice, bilingual awareness, concrete reach metrics.
-3. **Engineering credibility, consumer warmth.** Real-time video and AI depth underneath; a friendly, bright surface on top. Both are true.
-4. **Accent, not flood.** The mint identity color earns its power by scarcity — one or two touches per view.
-5. **Scale spoken in numbers.** Trust is built with figures (markets, downloads), not hype adjectives.
-6. **Calm explanation under bold claims.** Heavy display headlines, quiet humanist body — the rhythm of confidence followed by clarity.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by publicly observable Hyperconnect/Azar audience and stakeholder segments (global app users, engineers, recruiters, partners), not individual people.*
-
-**Mehmet Yılmaz, 24, Istanbul.** Heavy Azar user who values real-time translation to talk with people he'd never otherwise meet. Judges the app by how natural the video connection feels and how quickly matching works. The corporate brand's optimistic, global framing matches why he uses the product.
-
-**Jiyeon Park, 33, Seoul.** Senior backend engineer evaluating Hyperconnect as an employer. Reads the careers and tech pages for evidence of real-time/WebRTC and ML engineering depth. Reassured by the disciplined, credible visual tone — bright but serious — over a flashy startup look.
-
-**Sara Lindholm, 41, Stockholm.** Partnerships lead at a media company assessing Hyperconnect/Match for a video collaboration. Needs the corporate site to communicate scale and reliability quickly; values the concrete reach numbers and the clean, professional presentation.
-
-**Daniel Okafor, 29, London.** Mobile growth marketer studying Azar's global expansion. Notices the bilingual-aware, English-first copy and the consumer-warm-yet-engineering-credible brand balance as a model for cross-border consumer apps.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (list / no results)** | White canvas, single quiet line in body `#696969` at 16px. One ink `#222222` CTA if an action recovers the state. No illustration clutter. |
-| **Loading** | Neutral skeleton blocks in `#f4f4f4` at final dimensions; soft fade. No spinner drama. |
-| **Error (form validation)** | Field-level message below the input; concise, plain-language. Input border draws attention; brand mint reserved for the valid/focus state, not error. |
-| **Success (action saved)** | Brief inline confirmation in body text; optional mint `#00dd99` check accent. No emoji, no exclamation. |
-| **Focus** | Mint `#00dd99` accent ring / border on the focused control. |
-| **Disabled** | Reduced opacity on surface and label together; ink button fades rather than switching to gray. |
-| **Consent / cookie** | White dialog (8px radius), clear copy in `#333333`, ink `#222222` action buttons ("Confirm My Choices", "Reject All"). Compliance-grade and unambiguous. |
-
-## 15. Motion & Easing
-
-**Durations**
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-fast` | 120ms | Hover, focus, nav item color shift to mint |
-| `motion-standard` | 240ms | Dropdown, dialog, card reveal |
-| `motion-slow` | 400ms | Section / hero crossfades, band transitions |
-
-**Easings**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Most UI transitions |
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving panels, dialogs |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-
-**Signature motions.**
-1. **Nav accent shift.** On hover/active, nav item text crossfades from ink `#222222` to mint `#00dd99` over `motion-fast` — the one place the brand color animates.
-2. **Light/dark band reveal.** Section bands fade in on scroll with `motion-slow / ease-enter`; headlines settle, imagery does the cinematic work.
-3. **Reduce motion.** Under `prefers-reduced-motion: reduce`, transitions collapse to near-instant; the page stays fully functional without ambient motion.
-
-## 16. Do's and Don'ts (Quick Reference)
-
-### Do
-- Lead with `Poppins` 700 display headlines over bright white or dark imagery
-- Use mint `#00dd99` as a scarce, deliberate accent for brand and interactivity
-- Keep buttons ink `#222222`, 2px radius, wide 30px horizontal padding
-- Let whitespace and the light/dark cadence create depth before shadow
-- Express scale and credibility through concrete numbers and clean layout
-
-### Don't
-- Don't flood the layout with mint or use it as a background
-- Don't round primary buttons into pills — 2px is the corporate signal
-- Don't set body copy heavy or in Poppins — keep explanation calm in noto-sans / Inter
-- Don't add colored or dramatic shadows — soft neutral black only
-- Don't let utility blue `#3860be` compete with mint for brand identity

package/.opencode/oh-my-design/web/references/hyundaicard/.verification.md

@@ -1,25 +0,0 @@
-# Hyundai Card — Verification Notes (2026-06-01)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-01
-**Method:** playwright getComputedStyle (live DOM) + raw source-file fetch
-**Sources:**
-- https://www.hyundaicard.com
-- https://dive.hyundaicard.com
-- https://newsroom.hyundaicard.com
-
-### Raw samples
-- live dive.hyundaicard.com: body bg rgb(255,255,255) = #FFFFFF (ground)
-- live dive.hyundaicard.com: body text rgb(0,0,0) = #000000 (ink)
-- live dive.hyundaicard.com: body font 'Noto Sans KR' 13px
-- live dive.hyundaicard.com: display fonts YouandiNewKrHEB / YouandiNewKrTR / YouandiNewKrHB (proprietary Youandi, confirmed in DOM)
-- live dive.hyundaicard.com: heading 26px / 600
-- live dive.hyundaicard.com: button border-radius 24px, height 48px (minimal pill)
-- live dive.hyundaicard.com: category accent rgb(243,100,100) = #F36464 (functional content tag)
-- live dive.hyundaicard.com: category accent rgb(21,169,31) = #15A91F (functional content tag)
-
-## Tier 2 — cross-check
-- getdesign.md/hyundaicard — NOT LISTED. refero — not listed. Note: hyundaicard.com main site is security-plugin-walled; DIVE (dive.hyundaicard.com) is the accessible brand surface and carries the same Youandi/monochrome identity.
-
-## Country + regional sources
-- country KR; brand-owned regional sources (≥2 non-Western): https://www.hyundaicard.com (homepage), https://dive.hyundaicard.com (DIVE culture/design platform — primary live-inspect surface), https://newsroom.hyundaicard.com (brand newsroom). All three are Hyundai Card-owned Korean-domain sources, satisfying the KR ≥2 regional-source requirement.

package/.opencode/oh-my-design/web/references/hyundaicard/DESIGN.md

@@ -1,201 +0,0 @@
----
-id: "hyundaicard"
-name: "Hyundai Card"
-country: KR
-category: fintech
-homepage: "https://www.hyundaicard.com"
-primary_color: "#000000"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=hyundaicard.com&sz=128"
-verified: "2026-06-01"
-omd: "0.1"
-ds:
-  name: Hyundai Card Design Library
-  url: "https://newsroom.hyundaicard.com/front/board/Hyundai-Card-Design-Library?country=en"
-  type: brand
-  description: Hyundai Card's official Design Library — the brand's design philosophy, the proprietary Youandi typeface, and visual identity.
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  note: "deliberately monochrome — black IS the brand color; the only accents are functional content tags on DIVE"
-  colors:
-    ink: "#000000"
-    ground: "#ffffff"
-    tag-red: "#f36464"
-    tag-green: "#15a91f"
-  typography:
-    family: { sans: "Youandi", fallback: "Noto Sans KR" }
-    heading: { size: 26, weight: 600, use: "Section-level headings; pair with Youandi for brand moments" }
-    body:    { size: 13, weight: 400, use: "Running text, Noto Sans KR" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 8, lg: 24, full: 9999 }
-  shadow:
-    flat: "none"
-  components:
-    button-primary: { type: button, bg: "#ffffff", fg: "#000000", radius: 24, use: "Minimal monochrome pill, 48px tall, outline border" }
-    heading: { type: card, bg: "#ffffff", fg: "#000000", use: "Section heading, 26px/600, editorial spacing" }
-    page-surface: { type: card, bg: "#ffffff", fg: "#000000", use: "Base content canvas, white ground, generous whitespace" }
-    tag-red: { type: badge, fg: "#f36464", use: "Functional content category tag on DIVE only" }
-    tag-green: { type: badge, fg: "#15a91f", use: "Functional content category tag on DIVE only" }
-  components_harvested: true
----
-# Design System Inspiration of Hyundai Card
-
-## 1. Visual Theme & Atmosphere
-
-Hyundai Card is Korea's most design-celebrated credit-card brand, and its visual identity is an exercise in disciplined restraint: monochrome premium minimalism built almost entirely from ink black (#000000) on a clean white (#FFFFFF) ground. Color is not used as decoration here — it is withheld on purpose, treated as a luxury that the brand chooses not to spend, so that the absence of color becomes the statement. The signature element is typography itself: the proprietary "Youandi" (유앤아이) typeface carries the brand's voice, making letterforms the primary expressive medium rather than imagery or palette. The atmosphere is gallery-like and editorial — generous whitespace, high contrast, and a quiet confidence that reads as understated wealth rather than loud premium cues. Surfaces are flat and unadorned, headers are transparent, and every element earns its place. The result feels less like a banking product and more like a cultural design platform, which is exactly how the DIVE surface presents the brand. This is typography-as-identity, where the discipline of black, white, and a custom face does all the work.
-
-## 2. Color Palette & Roles
-The palette is deliberately monochrome. The ground is white (#FFFFFF) and the ink is black (#000000), and the brand color is essentially black itself — color is the thing that is held back, which is the entire point of the identity. The only chromatic accents appear as functional category tags on the DIVE content surface, never as primary brand expression.
-
-| Role | Value | Usage |
-| --- | --- | --- |
-| Ground | #FFFFFF | Page and surface background; the dominant field |
-| Ink | #000000 | Body text, headings, primary brand color; the monochrome anchor |
-| Accent — red (functional) | #F36464 | Content category tag on DIVE only |
-| Accent — green (functional) | #15A91F | Content category tag on DIVE only |
-
-The accents are strictly utilitarian. They classify content; they do not brand. Treat #F36464 and #15A91F as labeling tools confined to tags, and keep the rest of the experience in pure black-and-white.
-
-## 3. Typography Rules
-Typography is the brand. The display layer uses the proprietary "Youandi" typeface (confirmed in the DOM as YouandiNewKr, with HEB / TR / HB weights) for headings and branding — it is the signature element and should be reserved for moments that carry the brand's voice. Body text is set in Noto Sans KR for legibility across Korean and Latin content. The captured body size is 13px, and the heading size is 26px at weight 600, giving a clear two-step hierarchy: a confident editorial heading over a quiet, readable body.
-
-| Token | Value |
-| --- | --- |
-| Display / branding | Youandi (YouandiNewKr — HEB / TR / HB weights), proprietary |
-| Body | Noto Sans KR |
-| Body size | 13px |
-| Heading | 26px / 600 |
-
-Rule of thumb: let Youandi own the brand and headline moments; let Noto Sans KR carry running text at 13px; reserve the 26px/600 step for section-level headings.
-
-## 4. Component Stylings
-
-### Page Surface (DIVE)
-
-**Default**
-- Background: #FFFFFF
-- Text: #000000
-- Border: none
-- Padding: generous whitespace (editorial)
-- Height: full viewport
-- Font: 13px / 400 (Noto Sans KR)
-- Use: the base content canvas — white ground, black ink, maximal restraint
-
-### Heading
-
-**Section heading**
-- Background: transparent
-- Text: #000000
-- Border: none
-- Padding: editorial spacing above and below
-- Height: auto
-- Font: 26px / 600
-- Use: section-level titles; pair with Youandi for true brand moments
-
-### Button
-
-**Primary (minimal pill)**
-- Background: #FFFFFF
-- Text: #000000
-- Border: minimal outline (monochrome)
-- Radius: 24px
-- Padding: balanced for a 48px pill
-- Height: 48px
-- Font: body scale (Noto Sans KR)
-- Use: primary action; the rounded pill is the one soft gesture in an otherwise hard, flat system
-
-### Header
-
-**Transparent header**
-- Background: transparent
-- Text: #000000
-- Border: none
-- Padding: edge-aligned to the content grid
-- Height: auto
-- Font: Noto Sans KR
-- Use: lets the white ground read continuously from header into content; no chrome, no shadow
-
-### Content Tag
-
-**Category tag (red)**
-- Background: tag fill
-- Text: #F36464
-- Border: none
-- Radius: pill
-- Padding: compact
-- Height: compact label
-- Font: small body scale
-- Use: functional content classification on DIVE only — not brand color
-
-**Category tag (green)**
-- Background: tag fill
-- Text: #15A91F
-- Border: none
-- Radius: pill
-- Padding: compact
-- Height: compact label
-- Font: small body scale
-- Use: functional content classification on DIVE only — not brand color
-
-## 5. Layout Principles
-The layout is editorial and gallery-like, built on generous whitespace and a continuous white ground. The transparent header dissolves into the content so the page reads as one uninterrupted surface, and the absence of borders, fills, and chrome keeps attention on type and spacing. Black ink on white field creates the contrast that structures the page; there is no competing color to organize around. Hierarchy is established through the typographic step — 26px/600 headings over 13px body — and through the rhythm of negative space rather than through dividers or boxes. The pill button at 24px radius is the single soft moment in an otherwise crisp, rectilinear field. Treat layout as composition: align to a clean grid, let whitespace breathe, and resist the urge to add color or ornament.
-
-## 6. Depth & Elevation
-This is a flat system. There are no documented shadows, gradients, or elevation layers — the header is transparent and surfaces sit at a single plane on the white ground. Depth, to the extent it exists, comes from contrast (black ink against white) and from spacing, not from drop shadows or stacking. Keep elements coplanar; if separation is needed, use whitespace and the typographic hierarchy rather than introducing elevation. The only curvature in the system is the 24px button radius, which softens the action without implying lift. Restraint applies to depth exactly as it applies to color.
-
-## 7. Do's and Don'ts
-
-### Do
-- Keep the palette monochrome: #FFFFFF ground, #000000 ink.
-- Treat black (#000000) as the brand color — withholding color is the point.
-- Reserve Youandi (proprietary) for headings and branding moments.
-- Set body in Noto Sans KR at 13px; use 26px/600 for headings.
-- Use the 48px pill button with 24px radius as the soft action gesture.
-- Keep the header transparent and surfaces flat.
-
-### Don't
-- Introduce color as a brand element — the accents #F36464 and #15A91F are for functional content tags only.
-- Add shadows, gradients, or elevation; the system is flat.
-- Substitute a generic display face where Youandi carries the brand voice.
-- Crowd the layout — whitespace is structural.
-- Box content in borders or fills; let contrast and spacing do the work.
-
-## 8. Responsive Behavior
-The captured surface (DIVE) is a content/culture platform whose responsive logic follows its editorial, whitespace-driven layout: the continuous white ground and transparent header scale naturally from desktop to mobile, with the typographic hierarchy (26px/600 heading over 13px body) carrying structure at every width. The 48px pill button provides a comfortable touch target on mobile. Beyond these observed values, responsive specifics were not captured (the main banking site is security-plugin-walled), so adapt qualitatively: preserve generous whitespace, keep the monochrome contrast, maintain the flat single-plane surface, and let the type hierarchy — not added chrome — communicate structure as the viewport narrows.
-
-## 9. Agent Prompt Guide
-When generating UI in the Hyundai Card style, instruct the agent: "Design a monochrome, editorial interface — white (#FFFFFF) ground, black (#000000) ink, and treat black as the brand color. Withhold color entirely; the absence of color is the statement. Use a proprietary-feeling display typeface (Youandi, weights HEB/TR/HB) for headings and branding, and Noto Sans KR for body at 13px, with 26px/600 section headings. Keep everything flat — no shadows, no gradients, no elevation, transparent header. The only soft gesture is a 48px pill button with 24px radius, white fill, black text. Lean on generous whitespace and high black-on-white contrast for structure. If you must classify content, you may use red #F36464 or green #15A91F as small functional tag colors only — never as brand color." Emphasize restraint above all: when in doubt, remove rather than add.
-
-## 10. Voice & Tone
-The voice is quietly confident and editorial — the tone of a design gallery rather than a bank. It speaks with the assurance of a brand that has nothing to prove, letting restraint imply premium. There is no shouting, no urgency, no decorative flourish; the message lands through clarity and discipline. Like the monochrome palette, the language withholds: it says only what is needed, and it trusts the audience to read the sophistication in the negative space. The tone is cultured, deliberate, and self-assured.
-
-## 11. Brand Narrative
-Hyundai Card built its reputation as Korea's most design-celebrated credit-card brand by treating design as the product, not the packaging. The brand's central idea is that luxury is restraint: a monochrome world of black and white, anchored by a typeface it commissioned for itself — Youandi (유앤아이) — so that even the letters belong to the brand alone. Color is the resource it refuses to spend, turning absence into a signature. The DIVE platform extends this story from finance into culture and design, presenting the same monochrome, Youandi-led identity as a creative point of view rather than a transactional one. The narrative is consistent at every touchpoint: typography-as-identity, discipline-as-luxury, and the quiet confidence of a brand that lets what it leaves out speak as loudly as what it puts in.
-
-## 12. Principles
-- **Withhold color.** Black (#000000) on white (#FFFFFF) is the identity; color is deliberately held back.
-- **Typography is the brand.** Youandi (proprietary) carries the voice; let letterforms lead.
-- **Restraint as luxury.** Remove before you add; whitespace and contrast do the structural work.
-- **Flat and honest.** No shadows, no gradients, no chrome — a single clean plane.
-- **One soft gesture.** The 24px-radius, 48px pill button is the system's only concession to softness.
-- **Function over decoration.** The only accents (#F36464, #15A91F) exist to classify, never to brand.
-
-## 13. Personas
-- **The design-literate cardholder** — values craft and discretion over flash; reads the monochrome restraint as a marker of taste and expects the interface to feel like a curated space.
-- **The culture seeker on DIVE** — comes for design, art, and editorial content rather than banking, and responds to the gallery-like white-ground layout and Youandi typography.
-- **The premium minimalist** — wants the confidence of black-and-white sophistication, prefers whitespace to ornament, and trusts a brand that says less.
-
-## 14. States
-Observed component states are minimal by design — the system favors flat, high-contrast defaults over elaborate interactive feedback. From the captured values: the default surface is #FFFFFF ground with #000000 text; the primary button defaults to white fill, black text, 24px radius, 48px height; the header defaults to transparent. Hover, pressed, focus, disabled, and error states were not captured in the blob, so do not invent them — derive them qualitatively in keeping with the monochrome, flat philosophy (e.g., subtle black/white contrast shifts rather than colored state changes), and keep any feedback as restrained as the rest of the system. Functional content tags carry the red (#F36464) or green (#15A91F) accent to signal category, the closest thing to a "stateful" color in the system.
-
-## 15. Motion & Easing
-No motion or easing values were captured in the blob. In keeping with the brand's restraint, motion should be treated qualitatively: quiet, minimal, and unobtrusive — transitions that respect the gallery-like calm rather than drawing attention to themselves. The flat, monochrome system implies subtle, understated movement (gentle fades and clean transitions) over expressive or bouncy animation. Do not invent specific durations or curves; let any motion echo the same discipline as the visual identity — present only when it serves clarity, never as decoration.
-
----
-**Verified:** 2026-06-01
-**Tier 1 sources:** https://www.hyundaicard.com (homepage / brand context — main site security-plugin-walled), https://dive.hyundaicard.com (live DOM inspect — monochrome surface, Youandi display fonts, Noto Sans KR body, button + tag values), https://newsroom.hyundaicard.com (brand-owned regional source)
-**Tier 2 sources:** getdesign.md/hyundaicard — NOT LISTED. refero — not listed. Note: hyundaicard.com main site is security-plugin-walled; DIVE (dive.hyundaicard.com) is the accessible brand surface and carries the same Youandi/monochrome identity.
-**Conflicts unresolved:** none
-**Proof:** see .verification.md (## Proof block)