oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/autopedia/DESIGN.md

@@ -0,0 +1,382 @@
+---
+id: autopedia
+name: "Dr.Cha (Autopedia)"
+display_name_kr: 닥터차(오토피디아)
+country: KR
+category: automotive
+homepage: "https://company.autopedia.co.kr/"
+primary_color: "#7A00FF"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=company.autopedia.co.kr&sz=128"
+verified: "2026-07-02"
+added: "2026-07-02"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-07-02"
+  note: "primary = live brand violet #7A00FF (rgb 122,0,255), used as the active-nav accent and the full-bleed brand-statement band; near-shadowless high-contrast black/white system on Pretendard; corners are mostly sharp (0px), with 8px only on the CI asset-download buttons."
+  colors:
+    primary: "#7A00FF"
+    ink: "#000000"
+    canvas: "#ffffff"
+    on-primary: "#ffffff"
+    muted: "#4B5563"
+    hairline: "#E5E7EB"
+  typography:
+    family: { body: "Pretendard" }
+    display:    { size: 34, weight: 600, lineHeight: 1.44, tracking: -1.36, use: "Display / brand-statement headlines" }
+    section:    { size: 26, weight: 600, lineHeight: 1.54, tracking: -1.04, use: "Business/feature section titles" }
+    subsection: { size: 22, weight: 600, lineHeight: 1.55, tracking: -0.88, use: "Sub-headings, partnership prompts" }
+    nav:        { size: 16, weight: 700, lineHeight: 1.50, use: "Top nav items, CI button labels" }
+    body:       { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text, Pretendard" }
+    caption:    { size: 14, weight: 400, lineHeight: 1.43, use: "Footer links, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 36, xxl: 48, section: 96 }
+  rounded: { sharp: 0, md: 8, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    nav-link: { type: tab, fg: "#000000", font: "16px / 700 Pretendard", active: "violet #7A00FF text on active item", use: "Top navigation item (회사소개·사업소개·소식)" }
+    button-outline-dark: { type: button, fg: "#000000", border: "1px solid #000000", radius: "8px", padding: "18px 0px", height: "63px", font: "16px / 700 Pretendard", use: "CI / brand-asset download button — transparent bg, black hairline outline" }
+    button-outline-light: { type: button, fg: "#ffffff", border: "3px solid #ffffff", radius: "0px", padding: "8px 24px", height: "47px", font: "16px / 400 Pretendard", use: "Hero / partnership CTA (문의하기) on dark image scrim" }
+    button-solid-white: { type: button, bg: "#ffffff", fg: "#000000", radius: "0px", padding: "12px 36px", height: "49px", font: "16px / 600 Pretendard", use: "In-section homepage-link CTA (홈페이지 바로가기) on dark / violet band" }
+    brand-band: { type: card, bg: "#7A00FF", fg: "#ffffff", radius: "0px", use: "Full-bleed violet brand-statement section" }
+    feature-card: { type: card, bg: "#ffffff", fg: "#000000", border: "1px solid #E5E7EB", radius: "0px", use: "Business/feature card (닥터차·퀀텀모빌리티·부품유통·AI) with hairline, no shadow" }
+    footer-link: { type: listItem, fg: "#000000", font: "14px / 400 Pretendard", use: "Footer navigation link (제휴문의·사업소개·블로그)" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Dr.Cha (Autopedia)
+
+## 1. Visual Theme & Atmosphere
+
+Autopedia (오토피디아) — the company behind the 닥터차(Dr.Cha) automotive-aftermarket platform — presents itself with a stark, high-contrast corporate identity that reads as engineering-forward rather than consumer-cute. The canvas is pure white (`#ffffff`) and the type is pure black (`#000000`) — no softened near-blacks, no tinted greys for headings. Against that black-and-white foundation a single vivid violet (`#7A00FF`) does all the brand work: it colors the active navigation item, and, most dramatically, fills an entire full-bleed brand-statement band ("오토피디아는 기술로써 모빌리티의 진화를 이끌어 냅니다" — "Autopedia drives the evolution of mobility through technology"). The violet is reserved and deliberate; the eye learns that this one saturated hue means "Autopedia."
+
+The typographic voice is unmistakably Korean-corporate-modern: **Pretendard** throughout, with display headlines at 34px weight 600 and a tight `-1.36px` letter-spacing that compresses the hangul into confident, declarative blocks. Navigation is set noticeably heavier — 16px at weight 700 — so the chrome feels bold and structural, while body copy relaxes to 16px weight 400 at a comfortable 24px line-height. Secondary labels drop to a cool grey (`#4B5563`). The system never reaches for a display serif or a decorative face; Pretendard's neutral geometric sans carries both the persuasion and the reading.
+
+What distinguishes Autopedia from softer fintech-adjacent peers is its refusal of decoration. Live inspection found `box-shadow: none` across the nav, hero, headings, buttons, and cards — this is a genuinely shadowless system. Separation comes from flat color blocking (white sections, black image sections with a `rgba(0, 0, 0, 0.6)` scrim, and the violet band) and thin `#E5E7EB` hairlines, never from elevation. Geometry is mostly sharp: corners sit at 0px by default, and the only rounding in the system is the modest 8px on the CI asset-download buttons. The result is a flat, editorial, almost architectural aesthetic — a mobility-technology company that wants to look precise and industrial, not playful.
+
+**Key Characteristics:**
+- Pretendard everywhere — 34px/600 display, 16px/700 nav, 16px/400 body — no secondary display face
+- Single saturated violet (`#7A00FF`) as the only brand accent — active nav + a full-bleed statement band
+- Pure black (`#000000`) text on pure white (`#ffffff`) — maximum contrast, no tinted heading greys
+- Shadowless: `box-shadow: none` across the whole system; separation via color blocks and `#E5E7EB` hairlines
+- Sharp geometry — 0px corners by default; 8px only on CI download buttons
+- Dark photographic sections overlaid with a `rgba(0, 0, 0, 0.6)` scrim, white outline CTAs on top
+- Tight negative tracking that scales with size (-1.36px at 34px, -1.04px at 26px, -0.88px at 22px)
+- Cool grey (`#4B5563`) for secondary/label text below the pure-black primary
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Autopedia Violet** (`#7A00FF`): The single brand accent. Colors the active navigation item and fills the full-bleed brand-statement band. A vivid electric violet (rgb 122, 0, 255) — the only saturated hue in the system.
+
+### Ink & Canvas
+- **Pure Black** (`#000000`): Primary text, headings, nav labels, and the background of dark photographic sections. Autopedia uses true black, not a softened navy.
+- **Pure White** (`#ffffff`): Page background, card surfaces, and text/outline color on black or violet backgrounds. Also the `on-primary` color for content that sits over the violet band.
+
+### Text Hierarchy
+- **Pure Black** (`#000000`): Primary text, headings, strong nav labels.
+- **Muted Grey** (`#4B5563`): Secondary text, sub-labels, captions, and fine print — the one grey in the ladder (rgb 75, 85, 99).
+
+### Surface & Border
+- **Hairline** (`#E5E7EB`): Thin card outlines and dividers — the primary separation device in this shadowless system (rgb 229, 231, 235).
+- **Scrim**: A `rgba(0, 0, 0, 0.6)` black overlay sits over hero/section photography so white headlines and outline CTAs stay legible.
+
+## 3. Typography Rules
+
+### Font Family
+- **Body & Display**: `Pretendard` (with `Pretendard Fallback`) — the document default and the only typeface. Weight 600 (SemiBold) at display sizes, 700 (Bold) for navigation, 400 (Regular) for body.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Pretendard | 34px (2.13rem) | 600 | 1.44 (49px) | -1.36px | Brand-statement headlines, on white or dark |
+| Section | Pretendard | 26px (1.63rem) | 600 | 1.54 (40px) | -1.04px | Business/feature titles (퀀텀모빌리티, 부품 유통) |
+| Sub-section | Pretendard | 22px (1.38rem) | 600 | 1.55 (34px) | -0.88px | Sub-headings, partnership prompts |
+| Nav | Pretendard | 16px (1.00rem) | 700 | 1.50 (24px) | normal | Top navigation, CI button labels |
+| Body | Pretendard | 16px (1.00rem) | 400 | 1.50 (24px) | normal | Standard reading text |
+| Caption | Pretendard | 14px (0.88rem) | 400 | 1.43 (20px) | normal | Footer links, fine print |
+
+### Principles
+- **One typeface, weight-driven hierarchy**: Pretendard carries everything; the jump from 400 (body) to 600 (display) to 700 (nav) is the primary hierarchy signal, not a font swap.
+- **Tight tracking scales with size**: -1.36px at 34px, -1.04px at 26px, -0.88px at 22px; body and captions stay at normal tracking.
+- **Heavy, structural navigation**: nav sits at weight 700 — heavier than the display copy's 600 — giving the chrome a bold, architectural read.
+- **Hangul-first sizing**: body at 16px with a 24px line-height is generous for dense Korean reading; display line-heights stay open (1.44–1.55) so tall hangul stacks breathe.
+
+## 4. Component Stylings
+
+### Navigation
+- Text: `#000000`
+- Font: 16px Pretendard weight 700
+- Height: 24px per link
+- Active: violet `#7A00FF` text on the active item
+- Use: Top horizontal nav (회사소개, 사업소개, 소식, 블로그↗)
+
+### Buttons
+
+**CI Download (Outline Dark)**
+- Text: `#000000`
+- Border: 1px solid `#000000`
+- Radius: 8px
+- Padding: 18px 0px
+- Height: 63px
+- Font: 16px Pretendard weight 700
+- Use: Brand-asset download buttons on the CI guide (JPG/PNG/브랜드 가이드 다운 받기) — transparent fill, black hairline outline
+
+**Hero CTA (Outline Light)**
+- Text: `#ffffff`
+- Border: 3px solid `#ffffff`
+- Radius: 0px
+- Padding: 8px 24px
+- Height: 47px
+- Font: 16px Pretendard weight 400
+- Use: 문의하기 CTA sitting on a dark image scrim in the hero / partnership sections
+
+**In-Section Link (Solid White)**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 0px
+- Padding: 12px 36px
+- Height: 49px
+- Font: 16px Pretendard weight 600
+- Use: 홈페이지 바로가기 CTA on the dark / violet product bands (Dr.Cha page)
+
+### Cards & Containers
+
+**Feature Card**
+- Background: `#ffffff`
+- Text: `#000000`
+- Border: 1px solid `#E5E7EB`
+- Radius: 0px
+- Use: Business/feature cards (닥터차, 퀀텀모빌리티, 부품유통, AI 기술 플랫폼) — hairline outline, no shadow
+
+**Brand Band**
+- Background: `#7A00FF`
+- Text: `#ffffff`
+- Radius: 0px
+- Use: Full-bleed violet brand-statement section ("오토피디아는 기술로써 모빌리티의 진화를 이끌어 냅니다")
+
+### Footer
+- Links: `#000000`, 14px Pretendard weight 400
+- Use: Footer navigation (제휴문의, 사업소개, 블로그)
+
+---
+
+**Verified:** 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces)
+**Tier 1 sources:** https://company.autopedia.co.kr/ ; https://company.autopedia.co.kr/about/ci-guide ; https://company.autopedia.co.kr/business/doctor-cha ; https://medium.com/autopedia
+**Tier 2 sources:** getdesign.md/autopedia (SPA fallback — no KR coverage) ; styles.refero.design/?q=autopedia (not listed)
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: ~4px, doubling through 8 / 12 / 16 / 24 / 36 / 48
+- Notable: section-level padding is generous (the partnership block measured 96px vertical), giving the flat layout room to breathe between full-width bands
+
+### Grid & Container
+- Full-width horizontal bands stacked vertically — white content sections alternate with black photographic sections and the violet brand band
+- Business offerings (닥터차 / 퀀텀모빌리티 / 부품유통 / AI) presented as large tappable feature cards in a row
+- Centered single-column measure for display headlines; text is set left- or center-aligned within each band
+
+### Whitespace Philosophy
+- **Blocked, not layered**: content separates by full-width color blocking (white / black / violet), not by elevation or nested cards.
+- **Generous vertical rhythm**: large gaps between bands keep the high-contrast surfaces from feeling cramped.
+- **Sharp edges**: the near-total absence of rounding makes the layout read as architectural and precise.
+
+### Border Radius Scale
+- Sharp (0px): the default — nav, hero CTAs, feature cards, brand band
+- Medium (8px): the single exception — CI asset-download buttons
+- Full (9999px): reserved only for incidental circular elements (avatars/icons)
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Everything — page, cards, buttons, bands |
+| Color block (Level 1) | White / black / `#7A00FF` full-width section fill | Primary separation device |
+| Scrim (Level 2) | `rgba(0, 0, 0, 0.6)` over photography | Keeps white headlines/CTAs legible on image sections |
+| Hairline (Level 3) | 1px solid `#E5E7EB` | Feature-card outlines and dividers |
+
+**Shadow Philosophy**: Autopedia is a strictly shadowless system — live inspection returned `box-shadow: none` on the nav, hero, headings, buttons, and cards without exception. Depth is communicated entirely through flat, full-width color blocking (white, pure black `#000000`, and the violet `#7A00FF` band), a dark `rgba(0, 0, 0, 0.6)` scrim over photography, and thin `#E5E7EB` hairlines on cards. This is a deliberate industrial-modern choice: it keeps the mobility-technology brand looking engineered and confident rather than soft. When emphasis is needed the system reaches for contrast (black-on-white, white-on-violet), never for elevation.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Pretendard for everything — 34px/600 display, 16px/700 nav, 16px/400 body
+- Reserve violet (`#7A00FF`) as the single brand accent — active nav and the full-bleed statement band
+- Set primary text in pure black (`#000000`) on pure white (`#ffffff`) for maximum contrast
+- Keep the system shadowless — separate with color blocks and `#E5E7EB` hairlines
+- Use sharp 0px corners by default; reserve 8px only for CI/brand-asset buttons
+- Overlay photographic sections with a `rgba(0, 0, 0, 0.6)` scrim and use white outline CTAs on top
+- Set navigation heavier (weight 700) than display copy (weight 600) — the chrome is structural
+- Apply tight negative tracking on headlines (-1.36px at 34px, scaling down with size)
+
+### Don't
+- Add drop shadows for elevation — Autopedia is a flat, shadowless system
+- Spread violet across many elements — it must stay the single "Autopedia" signal
+- Use softened near-black or tinted grey for headings — primary text is pure black `#000000`
+- Round corners freely — geometry is sharp (0px), 8px is the only exception
+- Introduce a second accent color or a decorative display face — Pretendard and one violet do all the work
+- Set body headlines at a light weight — display is always SemiBold (600), nav is Bold (700)
+- Put dark text on the violet band or the dark image sections — use white (`#ffffff`)
+- Use positive letter-spacing at display sizes — Autopedia tracks tight
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, display headline compresses, feature cards stack |
+| Tablet | 640-1024px | Moderate padding, 2-up feature cards |
+| Desktop | 1024-1440px | Full-width bands, feature cards in a row, centered display measure |
+
+### Touch Targets
+- CI download buttons at 63px height — comfortably tappable
+- In-section solid-white CTA at 49px height with 12px 36px padding
+- Hero outline CTA at 47px height with 8px 24px padding
+
+### Collapsing Strategy
+- Display headlines: 34px scale down on mobile, weight 600 maintained
+- Feature-card row: multi-column → stacked single column
+- Full-width color bands (white / black / violet): maintain full-bleed treatment, reduce internal padding
+- Dark photographic sections keep the `rgba(0, 0, 0, 0.6)` scrim at all sizes
+
+### Image Behavior
+- Hero/section photography carries the dark scrim at every breakpoint so white text stays legible
+- Cards and images stay sharp-cornered and shadowless across sizes
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand accent (active nav, brand band): Autopedia Violet (`#7A00FF`)
+- Primary text / dark sections: Pure Black (`#000000`)
+- Background / text-on-dark: Pure White (`#ffffff`)
+- Secondary text: Muted Grey (`#4B5563`)
+- Hairline / card border: `#E5E7EB`
+- Photo scrim: `rgba(0, 0, 0, 0.6)`
+
+### Example Component Prompts
+- "Create a hero band with a background photo under a rgba(0,0,0,0.6) scrim. Headline at 34px Pretendard weight 600, line-height 49px, letter-spacing -1.36px, color #ffffff. One outline CTA: transparent background, #ffffff text, 3px solid #ffffff border, 0px radius, 8px 24px padding — '문의하기'."
+- "Design a feature card: white #ffffff background, 1px solid #E5E7EB border, 0px radius, no shadow. Title 26px Pretendard weight 600, letter-spacing -1.04px, #000000. Body 16px Pretendard weight 400, #4B5563."
+- "Build a full-bleed brand band: #7A00FF background, white #ffffff text. Statement headline 34px Pretendard weight 600, letter-spacing -1.36px, centered."
+- "Create top nav: white header, Pretendard 16px weight 700 links in #000000, violet #7A00FF text on the active item."
+- "Design a CI download button: transparent background, #000000 text, 1px solid #000000 border, 8px radius, 18px 0px padding, 16px Pretendard weight 700."
+
+### Iteration Guide
+1. Pretendard for every element; weight 600 display / 700 nav / 400 body
+2. Violet (`#7A00FF`) is the single accent — active nav and the brand band only
+3. No shadows — separate with color blocks and `#E5E7EB` hairlines
+4. Sharp 0px corners by default; 8px only on CI buttons
+5. Text is pure black `#000000` on white `#ffffff`; secondary is `#4B5563`
+6. Dark image sections use a `rgba(0, 0, 0, 0.6)` scrim + white outline CTAs
+7. Negative tracking on headlines, normal on body
+
+---
+
+## 10. Voice & Tone
+
+Autopedia's voice is **confident, mission-framed, and technology-first** — a mobility company that speaks about "the evolution of mobility" and "mobility assets" rather than simply "car repair." The brand-band statement "오토피디아는 기술로써 모빌리티의 진화를 이끌어 냅니다" ("Autopedia drives the evolution of mobility through technology") sets the register: declarative, ambitious, framed around technology and change rather than discount or urgency. Product copy is plain and functional at the offering level (닥터차, 퀀텀모빌리티, 부품 유통, AI 기술 플랫폼) but rises to vision language in the brand sections.
+
+| Context | Tone |
+|---|---|
+| Brand-statement bands | Declarative, visionary. "오토피디아는 기술로써 모빌리티의 진화를 이끌어 냅니다." Ambitious, not hype. |
+| Business/offering titles | Plain, categorical. "퀀텀모빌리티", "부품 유통", "AI 기술 플랫폼". |
+| Product framing (Dr.Cha) | Benefit-framed. "닥터차는 고객의 '모빌리티 자산'을 관리하는 최적의 서비스입니다." |
+| CTAs | Direct, low-pressure. "문의하기", "홈페이지 바로가기", "제휴문의". |
+| Corporate / CI | Formal and precise. "오토피디아의 CI를 소개합니다." |
+
+**Voice samples (verbatim from live surfaces):**
+- "오토피디아는 기술로써 모빌리티의 진화를 이끌어 냅니다." — full-bleed violet brand band (mission-framed). *(verified live 2026-07-02)*
+- "닥터차는 고객의 '모빌리티 자산'을 관리하는 최적의 서비스입니다." — Dr.Cha product page lead. *(verified live 2026-07-02)*
+- "오토피디아는 첨단 AI 기술로 운전자들에게 새로운 차원의 경험을 제공합니다." — AI section headline. *(verified live 2026-07-02)*
+
+**Forbidden register**: discount-driven urgency, fear-based repair-scare messaging, undefined automotive jargon left unexplained, exclamation-heavy hype. Autopedia positions as a technology company, so copy stays visionary and measured.
+
+## 11. Brand Narrative
+
+Autopedia (오토피디아) is a Korean mobility-technology company — corporate registration 236-86-01261, represented by CEO 김병근 (Kim Byung-geun) per the company's own CI page — building an ecosystem around the automotive aftermarket. Its founding observation, stated across the homepage brand bands, is that while cars have woven themselves ever deeper into daily life ("집에 갈 때, 쇼핑을 할 때, 여행을 갈 때 — 자동차는 이미 우리의 일상 깊숙이"), *the way people drive and manage those cars has barely changed* ("차를 운전하고 관리하는 방식은 달라지지 않았습니다"). Autopedia's premise is to close that gap with technology.
+
+That mission fans out into four business lines shown on the site: **닥터차 (Dr.Cha)**, the flagship automotive-aftermarket management platform for owners; **퀀텀모빌리티 (Quantum Mobility)**, specialist repair for imported brands (BMW, Audi, Benz, Tesla); **부품 유통 (Parts Distribution)**, an efficient supply network delivering imported-car parts to repair shops; and an **AI 기술 플랫폼 (AI platform)** for vehicle-problem diagnosis, prediction, and consultation. The unifying frame is "모빌리티 자산" (mobility assets) — Autopedia treats a car not as a repair ticket but as an asset to be managed over its life.
+
+What Autopedia refuses, visible in its design: the cluttered, promotion-heavy chrome of legacy auto-repair marketing (no shadow-stacked coupons, no alarmist red banners) and the softness of consumer-cute apps. What it embraces: a stark black-and-white technology aesthetic, a single decisive violet, bold Pretendard headlines that speak in mission terms, and a flat, architectural layout that signals precision and engineering seriousness.
+
+## 12. Principles
+
+1. **Technology over transaction.** Autopedia frames itself as driving "the evolution of mobility," not selling repairs. *UI implication:* lead with mission bands and capability, keep pricing/promotion out of the hero; the violet band carries vision, not a discount.
+2. **The car is a managed asset.** The "모빌리티 자산" framing treats a vehicle as something owned and tended over time. *UI implication:* favor management/overview surfaces (status, history, prediction) over one-off transactional flows.
+3. **One accent, decisive.** Violet (`#7A00FF`) means "Autopedia." *UI implication:* reserve the saturated violet for the active state and the brand band; never dilute it across ordinary UI.
+4. **Flat and precise.** Engineering seriousness reads as clarity, not decoration. *UI implication:* no shadows; separate with color blocks and `#E5E7EB` hairlines; keep corners sharp.
+5. **High contrast, no hedging.** Pure black on pure white. *UI implication:* commit to `#000000`/`#ffffff` for maximum legibility; use the grey `#4B5563` only for genuine secondary text.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable Autopedia / Dr.Cha user and partner segments (imported-car owners, repair-shop operators, parts buyers), not individual people.*
+
+**정민호, 38, 서울.** An imported-car owner (BMW) who distrusts opaque dealer service pricing. Uses Dr.Cha to track his car's maintenance history and get transparent diagnosis. Values that Autopedia treats his vehicle as an asset to manage, not a repair to upsell.
+
+**이수경, 45, 경기.** Runs an independent import-specialist repair shop. Sources parts through Autopedia's distribution network because the supply is faster and more reliable than the fragmented channels she used before. Trusts a partner that looks engineered and organized.
+
+**박재현, 33, 부산.** A software-minded early adopter drawn to the AI diagnosis platform. Reads Autopedia's Medium blog for the technology story and believes the "evolution of mobility" framing literally rather than as marketing.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no vehicles/records yet)** | White canvas. Single pure-black (`#000000`) line at body size explaining nothing is registered yet, with one CTA to add a vehicle. No illustration clutter. |
+| **Empty (no parts results)** | Muted Grey (`#4B5563`) single line stating no matching parts, plus a path to adjust the search. Honest and plain. |
+| **Loading (diagnosis/compute)** | Flat pulse blocks on white at final dimensions, sharp 0px corners. No shadow shimmer — consistent with the shadowless system. |
+| **Loading (list fetch)** | Hairline-bordered (`#E5E7EB`) placeholder cards; previous content stays visible during in-place refresh. |
+| **Error (diagnosis failed)** | Inline message in pure black with a plain-language explanation and a retry. No bare "오류가 발생했습니다" — states what to do next. |
+| **Error (form validation)** | Field-level message below the input describing what is valid, not just "필수". |
+| **Success (inquiry submitted)** | Brief inline confirmation in a calm, technical tone; next-step / contact detail linked immediately below. No celebratory emoji. |
+| **Skeleton** | White blocks at final dimensions, sharp corners, flat pulse — no elevation. |
+| **Disabled** | Muted Grey (`#4B5563`) text on reduced-opacity surface; violet actions fade rather than turn a different color, preserving the single-accent read. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-fast` | 120ms | Hover, nav active-state change, button press |
+| `motion-standard` | 220ms | Card/section reveal, band transition, dropdown |
+| `motion-slow` | 360ms | Page-level transitions, brand-band reveal |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — sections, cards, bands |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
+
+**Motion rules**: Motion is restrained and purposeful — consistent with the flat, high-contrast, engineering-forward aesthetic. Full-width bands (white / black / violet) reveal with a quiet fade-up at `motion-standard / ease-enter` as they scroll into view; the active nav item transitions to violet (`#7A00FF`) at `motion-fast`. No bounce or spring — a mobility-technology brand signals precision and steadiness, not playfulness. Under `prefers-reduced-motion: reduce`, all transitions collapse to instant and the interface stays fully functional.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 live inspect (2026-07-02) via playwright getComputedStyle across three surfaces:
+- https://company.autopedia.co.kr/ (homepage: nav, display headlines, full-bleed violet #7A00FF brand band, business feature cards, partnership CTA)
+- https://company.autopedia.co.kr/about/ci-guide (CI page: asset-download buttons, company registry — 대표 김병근, 사업자등록번호 236-86-01261, contact@autopediacar.com)
+- https://company.autopedia.co.kr/business/doctor-cha (Dr.Cha product page: "모빌리티 자산" framing, in-section homepage-link CTA)
+
+Token-level claims (§1-9) are sourced from this live inspection (see .verification.md Proof block).
+
+Voice samples (§10) are verbatim from the live surfaces (violet brand band, Dr.Cha lead, AI section headline).
+
+Brand narrative (§11): Company registry facts (CEO 김병근, registration 236-86-01261, contact email) are
+read directly from the company's own CI page. The four business lines (닥터차 / 퀀텀모빌리티 / 부품 유통 /
+AI 기술 플랫폼) and the "모빌리티 자산" / "모빌리티의 진화" framing are quoted from the live homepage and
+Dr.Cha page. Broader company-history details beyond these on-site statements are not independently
+verified in this turn.
+
+Personas (§13) are fictional archetypes informed by publicly observable Autopedia/Dr.Cha user and
+partner segments (imported-car owners, repair-shop operators, parts buyers). Names are illustrative;
+they do not refer to real people.
+
+Interpretive claims (e.g., "technology over transaction", "the car as a managed asset", "one accent,
+decisive", "flat and precise as engineering seriousness") are editorial readings connecting Autopedia's
+observed design and copy to its positioning, not directly sourced Autopedia statements.
+-->

package/web/references/aws-cloudscape/DESIGN.md

@@ -0,0 +1,241 @@
+---
+id: aws-cloudscape
+name: AWS Cloudscape
+country: US
+category: backend-devops
+homepage: "https://cloudscape.design/"
+primary_color: "#295eff"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=cloudscape.design&sz=128"
+verified: "2026-07-13"
+omd: "0.1"
+ds:
+  name: Cloudscape Design System
+  url: "https://cloudscape.design/"
+  type: system
+  description: AWS's open-source design system for cloud application experiences.
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: marketing, url: "https://cloudscape.design/", inspected: "2026-07-13" }
+    - { id: components, kind: documentation, url: "https://cloudscape.design/components/", inspected: "2026-07-13" }
+    - { id: about, kind: corporate, url: "https://cloudscape.design/about/", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://cloudscape.design/", captured: "2026-07-13" }
+    - { id: components-live, kind: official-doc, url: "https://cloudscape.design/components/", captured: "2026-07-13" }
+    - { id: about-live, kind: product-surface, url: "https://cloudscape.design/about/", captured: "2026-07-13" }
+    - { id: typography-doc, kind: official-doc, url: "https://cloudscape.design/foundation/visual-foundation/typography/", captured: "2026-07-13" }
+    - { id: global-styles-doc, kind: official-doc, url: "https://cloudscape.design/get-started/for-developers/global-styles/", captured: "2026-07-13" }
+    - { id: components-license, kind: license, url: "https://github.com/cloudscape-design/components/blob/main/LICENSE", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.link": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.canvas": *home
+    "tokens.colors.foreground": *home
+    "tokens.colors.muted": *home
+    "tokens.colors.border": *home
+    "tokens.typography.family.sans": *home
+    "tokens.typography.display.size": *home
+    "tokens.typography.display.weight": *home
+    "tokens.typography.display.lineHeight": *home
+    "tokens.typography.display.tracking": *home
+    "tokens.typography.display.use": *home
+    "tokens.typography.heading.size": *home
+    "tokens.typography.heading.weight": *home
+    "tokens.typography.heading.lineHeight": *home
+    "tokens.typography.heading.tracking": *home
+    "tokens.typography.heading.use": *home
+    "tokens.typography.body.size": *home
+    "tokens.typography.body.weight": *home
+    "tokens.typography.body.lineHeight": *home
+    "tokens.typography.body.use": *home
+    "tokens.spacing.xs": *home
+    "tokens.spacing.sm": *home
+    "tokens.spacing.md": *home
+    "tokens.spacing.lg": *home
+    "tokens.spacing.xl": *home
+    "tokens.rounded.sharp": *home
+    "tokens.rounded.control": *home
+    "tokens.rounded.card": *home
+    "tokens.shadow.flat": *home
+    "tokens.components.component-directory-card.type": &components { surface_id: components, source_id: components-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.component-directory-card.fg": *components
+    "tokens.components.component-directory-card.radius": *components
+    "tokens.components.component-directory-card.height": *components
+    "tokens.components.component-directory-card.font": *components
+    "tokens.components.component-directory-card.use": *components
+tokens:
+  source: live-extract
+  extracted: "2026-07-13"
+  colors:
+    link: "#295eff"
+    canvas: "#ffffff"
+    foreground: "#0f141a"
+    muted: "#424650"
+    border: "#8c8c94"
+  typography:
+    family: { sans: "Open Sans" }
+    display: { size: 42, weight: 400, lineHeight: 48, tracking: -1.26, use: "Observed public home display text" }
+    heading: { size: 20, weight: 600, lineHeight: 24, tracking: -0.2, use: "Observed repeated heading and card-title text" }
+    body: { size: 14, weight: 400, lineHeight: 20, use: "Observed public documentation and about-page body/list text" }
+  spacing: { xs: 4, sm: 8, md: 12, lg: 20, xl: 40 }
+  rounded: { sharp: 0, control: 8, card: 12 }
+  shadow:
+    flat: "none"
+  components:
+    component-directory-card: { type: card, fg: "#0f141a", radius: 0, height: 272, font: "14px / 400 Open Sans", use: "Static component-directory card; selector surface-2::div, class card" }
+  components_harvested: true
+---
+
+# Design System Inspiration of AWS Cloudscape
+
+## 1. Visual Theme & Atmosphere
+
+AWS Cloudscape is an open-source design system for cloud application experiences, created for and used by AWS services since 2016. Its recognisable expression is deliberately operational rather than ornamental: white and near-white working surfaces, near-black information text, a clear blue link/action accent, Open Sans hierarchy, and compact geometry for navigating dense technical material. Cloudscape says that it has evolved through customer feedback and research, adding responsiveness, accessibility, usability, visual modes, theming, and content-density options; it also describes a more approachable visual identity intended to extend beyond a solely technical audience. This reference records a bounded public slice of that system—the Cloudscape home, component directory, and About page—without treating an AWS authenticated product console, a generic AWS marketing site, or an unobserved theme as the same surface. [About Cloudscape](https://cloudscape.design/about/) · [Cloudscape home](https://cloudscape.design/)
+
+**Key characteristics:**
+- Near-black `#0f141a` text on a measured `#ffffff` canvas, with `#8c8c94` border use.
+- `#295eff` is the repeated public link/accent color in the supplied capture; it is not promoted as an unmeasured solid CTA fill.
+- Open Sans is both the observed loaded public-web family and the system's documented default typeface.
+- Observed typography pairs a 42px display sample with 20px/600 headings and 14px/400 body/list text.
+- The observed static component-directory card is sharp and flat; 8px and 12px corners occur elsewhere in the captured public routes.
+
+## 2. Color Palette & Roles
+
+### Observed public-route palette
+
+- **Cloudscape link accent** (`#295eff`): repeated text and border color across the home, component directory, and About surfaces.
+- **Working canvas** (`#ffffff`): measured public background surface.
+- **Operational foreground** (`#0f141a`): repeated text and border color across all three captured routes.
+- **Supporting text** (`#424650`): observed secondary text/border value.
+- **Control boundary** (`#8c8c94`): observed border color on public control chrome.
+
+Cloudscape's official color guidance says most of the UI is built from white and grayscale, with colorful calls to action and status indicators. It also asks implementers to use design tokens for visual-mode-compliant work. That is system guidance; the canonical values above remain only the values actually measured in the supplied public-route evidence. [Colors](https://cloudscape.design/foundation/visual-foundation/colors/)
+
+## 3. Typography Rules
+
+### Evidence classes
+
+**Official product-use.** Cloudscape's typography documentation names Open Sans as its primary and default font, and documents normal, bold, and light use in the system. The developer installation guide says the global-styles package includes Open Sans. These are system/product facts, separate from the computed capture. [Typography](https://cloudscape.design/foundation/visual-foundation/typography/) · [Using components](https://cloudscape.design/get-started/for-developers/using-cloudscape-components/)
+
+**Live computed surface-use.** The supplied 2026-07-13 evidence reports Open Sans as loaded with high confidence and 865 visible uses across body, button, card, dialog, heading, input, list-item, and text roles. Representative observed styles include 42px/400/48px display text with -1.26px tracking, 20px/600/24px headings with -0.2px tracking, and 14px/400/20px documentation/list text.
+
+**Official distributed brand asset.** Cloudscape's global-styles documentation says its package ships `@font-face` Open Sans files, and the design-resources page offers Open Sans for designers. The exact captured webfont URLs are public Cloudscape-hosted assets; this supports availability on the captured web surfaces, not a substitute for the loaded family. [Global styles](https://cloudscape.design/get-started/for-developers/global-styles/) · [Design resources](https://cloudscape.design/get-started/for-designers/design-resources/)
+
+**Declared-only.** The artifact records `amazonEmber`, `amazonEmber Fallback`, and `openSans Fallback` as declared but with zero visible uses in these three routes. They are not UI-family tokens.
+
+**Unresolved.** `Times` appears in a small number of dialog/text capture records with unresolved, low-confidence status. It is neither a Cloudscape type token nor a fallback substitute here.
+
+## 4. Component Stylings
+
+### Component directory card
+
+**Default — static documentation card**
+- Text: `#0f141a`
+- Radius: 0px
+- Height: 272px
+- Font: 14px / 400 / Open Sans
+- Use: Static component-directory card; selector `surface-2::div`, class `card`, on https://cloudscape.design/components/.
+
+The supplied artifact records 36 instances of this 305px-wide, 272px-high default card geometry on the component-directory surface. Its computed background is transparent, border width is 0px, padding is 0px, and box shadow is `none`; those measured properties explain why this token preserves only the stable default geometry and text treatment rather than inventing a filled or elevated card. Dialog-opening interaction capture exists on all three routes, but it does not provide a hover, focus, pressed, disabled, or error state for this static card.
+
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** [Cloudscape home](https://cloudscape.design/), [Components](https://cloudscape.design/components/), [About Cloudscape](https://cloudscape.design/about/), [Typography](https://cloudscape.design/foundation/visual-foundation/typography/), [Global styles](https://cloudscape.design/get-started/for-developers/global-styles/)
+**Tier 2 sources:** getdesign attempt: https://getdesign.md/aws-cloudscape (web safety layer rejected direct open); Refero attempt: https://styles.refero.design/?q=Cloudscape (web safety layer rejected direct open).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+The captured routes repeatedly use 4, 8, 12, 20, and 40px spacing values. Treat these as a public-route rhythm, not as a complete grid or breakpoint contract. The component directory's repeated 305px-wide static cards show information-dense cataloging without requiring added elevation; their measured default card is 272px high in the representative variant.
+
+Cloudscape's official documentation describes responsive design, visual modes, and density settings, but this packet has no cross-viewport comparison. Keep public information layouts clear and structured, then obtain a dedicated viewport capture before asserting AWS-specific mobile columns, navigation collapse, or density transitions.
+
+## 6. Depth & Elevation
+
+The representative static component-directory card measures `box-shadow: none`, 0px border width, and a transparent background. Its hierarchy comes from typography, spacing, and the enclosing page structure rather than a tokenized raised surface. Use `none` only for this observed flat treatment; dialog overlays and other floating layers are not collapsed into a shared shadow token.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Open Sans where implementing the bounded captured Cloudscape public-web pattern.
+- Preserve the `#0f141a` / `#ffffff` information contrast and use `#295eff` as the observed link/accent treatment.
+- Keep the component-directory card flat and sharp when applying its measured default geometry.
+- Use official Cloudscape documentation as system context while retaining selector-backed public-route values as the token source.
+- Treat visual modes, density, responsive guidance, and accessibility as documented system capabilities rather than unmeasured values in this packet.
+
+### Don't
+- Do not replace Open Sans with Amazon Ember, a declared fallback, or a system font and call it observed Cloudscape use.
+- Do not turn the observed `#295eff` link treatment into an unmeasured global solid-button token.
+- Do not invent hover, focus, pressed, disabled, error, or selected values for the static card token.
+- Do not transfer Cloudscape documentation measurements to an authenticated AWS console or unrelated AWS marketing surface.
+- Do not infer a shadow, card fill, mobile breakpoint, or density-specific geometry that the supplied evidence did not measure.
+
+## 8. Responsive Behavior
+
+The evidence packet covers three public routes at one captured desktop viewport and records no viewport comparison. Cloudscape officially supports responsive design and content-density modes, but no exact breakpoint, reflow, or compact-mode values are promoted here. Preserve normal accessible reflow in implementation and collect a separate comparison before representing it as a Cloudscape-specific responsive contract.
+
+## 9. Agent Prompt Guide
+
+### Quick reference
+- Public foreground/canvas: `#0f141a` on `#ffffff`; supporting text `#424650`; control boundary `#8c8c94`.
+- Public link accent: `#295eff`.
+- Typography: Open Sans; 42px/400/48px display, 20px/600/24px heading, 14px/400/20px body.
+- Static component-directory card: sharp, 272px high, 14px/400 Open Sans, no shadow.
+
+### Boundary-aware prompt
+- "Build a Cloudscape-inspired public documentation card using only the captured default: `#0f141a` text, Open Sans 14px/400, 0px radius, 272px height, and no shadow. Keep it inside a white public-documentation context; do not add a fill, hover, focus, pressed, disabled, or error style because none was captured for this card."
+
+## 10. Voice & Tone
+
+Cloudscape's public materials use direct, instructional language for designers and developers: get started, explore components, use patterns, and apply global styles. The system frames its goal as building intuitive, engaging, and inclusive experiences at scale. For a Cloudscape-aligned public documentation surface, favor concrete task labels, compact technical nouns, and explanatory support text over promotional superlatives. [Get started](https://cloudscape.design/get-started/) · [About Cloudscape](https://cloudscape.design/about/)
+
+| Context | Treatment |
+|---|---|
+| Primary action | Use a short verb-led label that names the task. |
+| Component guidance | State the component purpose, then the usage constraint. |
+| Technical note | Be specific about behavior, scope, or configuration; do not imply unverified capability. |
+
+Voice samples are illustrative writing patterns, not first-party quotations: “View component guidance”; “Choose a pattern for this task”; “This setting changes the current density.”
+
+## 11. Brand Narrative
+
+Cloudscape describes itself as an open-source system for cloud application experiences at scale. AWS created it in 2016 to improve experience consistency across AWS service web applications and help teams implement them faster; its public account says customers and research have continued to shape the system. [About Cloudscape](https://cloudscape.design/about/)
+
+Its current evolution is practical and inclusive: Cloudscape documents added responsiveness, accessibility, usability, light/dark modes, theming, and content-density options, alongside a more approachable look and feel. It publishes guidelines, React components, design resources, patterns, and demos so designers and developers can work from the same public system. [Cloudscape home](https://cloudscape.design/) · [Start designing](https://cloudscape.design/get-started/for-designers/start-designing/)
+
+## 12. Principles
+
+1. **Build cloud experiences at scale.** Cloudscape presents itself as a shared foundation of guidelines, resources, and front-end components. *UI implication:* use repeatable patterns and explicit hierarchy before adding decorative variation.
+2. **Keep complex work approachable.** Cloudscape says its visual identity has adapted toward a more approachable feel while serving technical tasks. *UI implication:* pair dense information with clear grouping, readable type, and direct action labels.
+3. **Design inclusively and responsively.** The system describes accessibility, responsiveness, and configurable modes as core features. *UI implication:* respect semantic structure and reflow, but do not invent this packet's missing breakpoint values.
+4. **Let implementation and guidance meet.** Cloudscape publishes components, patterns, playgrounds, and design resources together. *UI implication:* preserve the distinction between official intent and the selector-backed values actually observed on a route.
+
+## 13. Personas
+
+Cloudscape's first-party materials identify designers and developers as primary users of its resources, and describe cloud-product builders as the broader intended community. The following are evidence-bounded roles, not invented demographic personas.
+
+- **Cloud-product designer** — uses the visual foundation, component library, and patterns to move from wireframe to prototype while maintaining accessible, consistent application structure.
+- **React application developer** — installs Cloudscape packages, uses component APIs and global styles, and relies on documented testing, responsiveness, and accessibility guidance.
+
+## 14. States
+
+| State | Evidence boundary |
+|---|---|
+| Component-directory card — default | Observed static card: `#0f141a` text, 0px radius, 272px height, 14px/400 Open Sans, no shadow. |
+| Component-directory card — hover | Not captured; intentionally unspecified. |
+| Component-directory card — focus | Not captured; intentionally unspecified. |
+| Component-directory card — pressed | Not captured; intentionally unspecified. |
+| Component-directory card — disabled | Not captured; intentionally unspecified. |
+| Component-directory card — error | Not captured; intentionally unspecified. |
+| Dialog — open | Three dialog-opening interactions were captured across home, components, and About; no dialog token is promoted because a stable dialog shell was not selected. |
+| Loading | Not captured; intentionally unspecified. |
+| Empty | Not captured; intentionally unspecified. |
+| Success | Not captured; intentionally unspecified. |
+| Skeleton | Not captured; intentionally unspecified. |
+
+## 15. Motion & Easing
+
+The supplied evidence identifies dialog-open interactions but contains no measured duration, easing curve, transition property, reduced-motion behavior, or motion token. Do not derive a motion scale from a static card or from general Cloudscape documentation. **[FILL IN: selector-backed or official-token motion values after dedicated evidence collection.]**