--- id: heydealer name: Heydealer display_name_kr: 헤이딜러 country: KR category: consumer-tech homepage: "https://www.heydealer.com/" primary_color: "#396eff" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=heydealer.com&sz=128" verified: "2026-07-02" added: "2026-07-02" omd: "0.1" tokens: source: live-extract extracted: "2026-07-02" note: "primary = live product CTA blue (#396eff, rgb 57,110,255) on 바로 구매예약; secondary action is pure black (#000000). Text is near-black ink #0d0d0e, never a soft grey. Shadowless system — separation via #e9eaec hairlines + low-alpha #70727c neutral tint. Sharp 4px radius is the workhorse." colors: primary: "#396eff" ink: "#0d0d0e" ink-pure: "#000000" ink-navy: "#272e40" chip-dark: "#0f1014" muted: "#37383d" muted-alt: "#2d2e32" muted-grey: "#858892" surface: "#70727c" canvas: "#ffffff" on-dark: "#f8f8f9" hairline: "#e9eaec" typography: family: { sans: "spoqaHanSansNeo" } display: { size: 32, weight: 700, lineHeight: 1.38, tracking: -0.32, use: "Largest section display, Spoqa Han Sans Neo Bold" } section: { size: 20, weight: 700, lineHeight: 1.40, tracking: -0.32, use: "Section titles (색상, 옵션)" } card-head: { size: 18, weight: 700, lineHeight: 1.44, tracking: -0.25, use: "Card / feature heads (비슷한 차)" } emphasis: { size: 15, weight: 700, lineHeight: 1.47, tracking: -0.195, use: "Bold labels, button text, spec emphasis" } body: { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text, listing copy" } meta: { size: 15, weight: 400, lineHeight: 1.47, tracking: -0.195, use: "Secondary / meta text (muted)" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, section: 48 } rounded: { sm: 2, md: 4, lg: 16, full: 9999 } shadow: none: "none" components: button-primary: { type: button, bg: "#396eff", fg: "#f8f8f9", radius: "4px", height: "52px", padding: "0 24px", font: "15px / 700 spoqaHanSansNeo", use: "Primary blue CTA — 바로 구매예약 (book purchase)" } button-secondary: { type: button, bg: "#000000", fg: "#f8f8f9", radius: "4px", height: "52px", padding: "0 24px", font: "15px / 700 spoqaHanSansNeo", use: "Black secondary action — 인증 리포트 (certified report)" } nav-link: { type: tab, fg: "#0d0d0e", font: "16px / 400 spoqaHanSansNeo", active: "text #0d0d0e", use: "Top nav item; inactive links drop to #37383d at 60% alpha" } filter-chip: { type: badge, bg: "#70727c", fg: "#0d0d0e", border: "1px solid #000000", radius: "4px", padding: "8px 12px", font: "16px / 400 spoqaHanSansNeo", use: "Selected spec filter chip on low-alpha #70727c tint" } card-white: { type: card, bg: "#ffffff", fg: "#0d0d0e", border: "1px solid #e9eaec", radius: "4px", use: "White listing / content card, hairline separated, no shadow" } card-thumb: { type: card, bg: "#70727c", radius: "4px", use: "Photo thumbnail tile, neutral #70727c surface at ~5% alpha" } search-input: { type: input, bg: "#000000", fg: "#f8f8f9", radius: "16px", font: "16px / 400 spoqaHanSansNeo", use: "Rounded overlay search field" } components_harvested: true --- # Design System Inspiration of Heydealer ## 1. Visual Theme & Atmosphere Heydealer (헤이딜러) is Korea's app-first used-car platform — a reverse-auction sell-my-car service and certified buy-a-car marketplace operated by PRND — and its web surface reads like a fast, engineered product tool rather than a glossy automotive brochure. The canvas is pure white (`#ffffff`), text sits in a near-black ink (`#0d0d0e`) that is deliberately not a soft grey, and the entire interface is built on razor-sharp `4px` corners. A single saturated electric blue (`#396eff`) is reserved almost exclusively for the primary "do this" action — the `바로 구매예약` (book purchase) button — so the eye is trained to read that one hue as commitment. The result feels closer to a financial dashboard than a car dealership: dense, confident, and information-forward. The typographic voice is unmistakably Korean-product: everything runs in **Spoqa Han Sans Neo** (`spoqaHanSansNeo`), the widely-used open-source hangul family. Emphasis and headings are set **Bold (weight 700)** with tight negative tracking (`-0.32px` at 20px, `-0.252px` at 18px, `-0.195px` at 15px), while body and listing copy stay at a quiet **weight 400 / 16px**. Button labels are Bold 15px. This bold-head / regular-body split is the system's core hierarchy signal — heydealer never leans on color or size alone; weight carries the structure. There is no oversized hero display type on the web marketplace; the largest recurring display size is a restrained 32px. What most distinguishes Heydealer is its refusal of depth. Live inspection found `box-shadow: none` across the nav, listing cards, chips, and CTAs — this is a near-shadowless system. Separation comes entirely from thin `#e9eaec` hairlines and a low-alpha neutral tint built on `#70727c` (used around 5–8% opacity) for surface blocks and photo thumbnails. Secondary actions go pure black (`#000000`); a near-black `#0f1014` and a dark navy `#272e40` appear on immersive dark blocks, with off-white `#f8f8f9` as the text-on-dark color. The overall impression is engineered flatness — a used-car service that looks like a precise instrument, not a showroom. **Key Characteristics:** - Spoqa Han Sans Neo throughout — Bold (700) for heads/labels, Regular (400) for body - Single saturated blue (`#396eff`) reserved for the primary purchase CTA — the one "action" color - Near-black ink (`#0d0d0e`) for text instead of a soft grey — crisp, high-contrast, product-grade - Pure black (`#000000`) for the secondary action button, distinct from the blue primary - Shadowless system — `#e9eaec` hairlines and low-alpha `#70727c` tint do all the separating - Sharp `4px` radius as the universal workhorse; `2px` on fine elements, `16px` on the search field, full `100px` pills on a few chips - Tight negative tracking that scales with size (`-0.32px` → `-0.195px`) - Muted neutral ladder (`#37383d` → `#2d2e32` → `#858892`) for de-emphasized text - Dark blocks use near-black `#0f1014` / navy `#272e40` with off-white `#f8f8f9` text ## 2. Color Palette & Roles ### Primary - **Heydealer Blue** (`#396eff`): Primary brand and action color. The saturated electric blue on the `바로 구매예약` purchase CTA and a heavily-used interactive/link accent — the system's single "commit" color. - **Ink** (`#0d0d0e`): Primary text and heading color. A near-black that carries maximum legibility for dense listing data — used instead of a soft grey. - **Pure Black** (`#000000`): The secondary action button background (e.g. `인증 리포트`) and selected-chip border; a deliberate second dark distinct from the blue primary. ### Neutral & Surface - **Canvas White** (`#ffffff`): Page background and white card surfaces. - **Neutral Surface** (`#70727c`): The base of the low-alpha tint (~5–8%) used for surface blocks, photo thumbnail tiles, and filter chips — the primary flat-separation device. - **Hairline** (`#e9eaec`): Thin borders, dividers, and white-card outlines — the separation device given the shadow-free system. - **On-Dark** (`#f8f8f9`): Off-white text/foreground used on black and dark blocks. ### Dark Blocks - **Chip Dark** (`#0f1014`): Near-black background for immersive dark tiles and dark chips. - **Ink Navy** (`#272e40`): Dark navy surface used on select immersive blocks and the sell-flow hero. ### Text Hierarchy - **Ink** (`#0d0d0e`): Primary text, headings, labels, active nav. - **Muted** (`#37383d`): Secondary / inactive text (rendered around 60% alpha for inactive nav items). - **Muted Alt** (`#2d2e32`): Dark de-emphasized text (rendered around 88% alpha). - **Muted Grey** (`#858892`): Tertiary text, captions, metadata, fine print. ## 3. Typography Rules ### Font Family - **Sans**: `spoqaHanSansNeo` (Spoqa Han Sans Neo), with system fallbacks (`-apple-system`, `system-ui`, `sans-serif`). This single family carries display, UI, and body — there is no separate display face. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Display | Spoqa Han Sans Neo | 32px (2.00rem) | 700 | 1.38 (44px) | -0.32px | Largest section display | | Section Heading | Spoqa Han Sans Neo | 20px (1.25rem) | 700 | 1.40 (28px) | -0.32px | Section titles (색상, 옵션) | | Card / Feature Head | Spoqa Han Sans Neo | 18px (1.13rem) | 700 | 1.44 (26px) | -0.252px | Card heads (비슷한 차) | | Emphasis / Button | Spoqa Han Sans Neo | 15px (0.94rem) | 700 | 1.47 (22px) | -0.195px | Bold labels, CTA text, spec emphasis | | Body | Spoqa Han Sans Neo | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text, listing copy | | Meta | Spoqa Han Sans Neo | 15px (0.94rem) | 400 | 1.47 (22px) | -0.195px | Secondary / muted metadata | ### Principles - **Weight is the hierarchy**: Bold (700) marks every heading, label, and CTA; Regular (400) carries every paragraph. The weight contrast — not size or color — is the primary signal. - **One family, every job**: Spoqa Han Sans Neo runs display through fine print. There is no separate display font; consistency is the point. - **Tight tracking scales with size**: -0.32px at 20px, -0.252px at 18px, -0.195px at 15px. Headings compress; body stays at normal tracking. - **Restrained display sizes**: The web marketplace tops out around 32px — heydealer favors dense, scannable data over big hero type. ## 4. Component Stylings ### Buttons **Primary Purchase CTA** - Background: `#396eff` - Text: `#f8f8f9` - Radius: 4px - Padding: 0px 24px - Height: 52px - Font: 15px Spoqa Han Sans Neo weight 700 - Use: Primary blue action — `바로 구매예약` (book purchase now), the single commit CTA **Black Secondary** - Background: `#000000` - Text: `#f8f8f9` - Radius: 4px - Padding: 0px 24px - Height: 52px - Font: 15px Spoqa Han Sans Neo weight 700 - Use: Secondary action — `인증 리포트` (view certified report) **Nav Text Button** - Background: transparent - Text: `#0d0d0e` - Radius: 4px - Padding: 8px - Font: 15px Spoqa Han Sans Neo weight 700 - Use: Header nav actions (내차사기, 내차팔기); inactive items drop to `#37383d` at 60% alpha ### Inputs & Forms **Overlay Search** - Background: `#000000` - Text: `#f8f8f9` - Radius: 16px - Font: 16px Spoqa Han Sans Neo weight 400 - Use: Rounded overlay search field (softer 16px corner vs the 4px workhorse) ### Cards & Containers **White Listing Card** - Background: `#ffffff` - Text: `#0d0d0e` - Border: 1px solid `#e9eaec` - Radius: 4px - Use: White listing / content card, hairline separated, no shadow **Photo Thumbnail Tile** - Background: `#70727c` - Radius: 4px - Use: Vehicle photo thumbnail tile — neutral `#70727c` surface at ~5% alpha (외부 / 실내 galleries) ### Badges **Selected Filter Chip** - Background: `#70727c` - Text: `#0d0d0e` - Border: 1px solid `#000000` - Radius: 4px - Padding: 8px 12px - Font: 16px Spoqa Han Sans Neo weight 400 - Use: Selected spec filter chip (e.g. `2.0 가솔린`) on a low-alpha `#70727c` tint **Blue Info Strip** - Text: `#0d0d0e` - Radius: 4px - Padding: 12px - Use: Reassurance strip on a `#396eff` tint at ~4% alpha (`모든 차량 1년 무료 보증`, `단순 변심도 무료 환불 가능`) ### Navigation - Background: `#ffffff` - Text: `#0d0d0e` - Font: 16px Spoqa Han Sans Neo weight 400 - Active: `#0d0d0e` ink on the active item - Inactive: `#37383d` at 60% alpha - Use: Top horizontal nav (헤이딜러 홈, 내차사기, 내차팔기, 폐차 견적받기, 중고차 숨은 이력) --- **Verified:** 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces) **Tier 1 sources:** https://www.heydealer.com/ , https://www.heydealer.com/market/cars/gQ60AKy0 , https://www.heydealer.com/sell , https://medium.com/prnd **Tier 2 sources:** getdesign.md/heydealer (0 DESIGN.md files — not listed); styles.refero.design/?q=heydealer (no heydealer style — generic browse grid only) **Conflicts unresolved:** none ## 5. Layout Principles ### Spacing System - Base unit: 4px - Scale: 4px, 8px, 12px, 16px, 24px, 48px - Notable: Button horizontal padding lands at 24px; chip padding at 8px 12px — compact, data-dense hit areas suited to a marketplace grid ### Grid & Container - Dense listing/marketplace grid is the dominant pattern — vehicle cards tiled with hairline separation - Car detail pages stack a photo gallery (thumbnail tiles) over spec sections and a sticky purchase CTA - Sections separate by white (`#ffffff`) vs low-alpha `#70727c` tint bands rather than by borders or elevation - Cards use the sharp 4px radius and group related specs/listings ### Whitespace Philosophy - **Dense but breathable**: a data-heavy marketplace kept scannable through consistent 4px-grid rhythm and hairline separation, not padding bloat. - **Flat segmentation**: blocks separate by background tint and `#e9eaec` hairlines, never by shadow. - **Action anchored**: the blue CTA is spatially isolated (often sticky) so the next step is unambiguous amid dense listings. ### Border Radius Scale - Fine (2px): fine-grained inner elements - Standard (4px): buttons, cards, chips, tiles — the universal workhorse - Soft (16px): the overlay search field - Pill (100px): a few rounded chips/badges - Circle (50%): avatars and circular controls ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, inline text, most surfaces | | Tint (Level 1) | Low-alpha `#70727c` background shift | Card/section/thumbnail separation without elevation | | Hairline (Level 2) | `1px solid #e9eaec` border | White card outlines, dividers | **Shadow Philosophy**: Heydealer is a near-shadowless system. Live inspection found `box-shadow: none` across the nav, listing cards, filter chips, and CTAs. Depth and grouping are communicated entirely through flat low-alpha `#70727c` tints and thin `#e9eaec` hairlines. This is a deliberate modern-flat choice that keeps a data-dense used-car marketplace feeling fast and app-native, avoiding the heavy card-stack look of legacy classified sites. When emphasis is needed, the system reaches for color (blue `#396eff`) or a dark block (`#0f1014` / `#272e40`), never elevation. ## 7. Do's and Don'ts ### Do - Use Spoqa Han Sans Neo throughout — Bold (700) for heads/labels/CTAs, Regular (400) for body - Reserve blue (`#396eff`) for the primary purchase CTA — keep it the single "action" color - Use pure black (`#000000`) for the secondary action button, distinct from the blue primary - Use near-black ink (`#0d0d0e`) for text instead of a soft grey - Separate sections with low-alpha `#70727c` tint and `#e9eaec` hairlines, not shadows - Keep the sharp 4px radius as the default on buttons, cards, chips, and tiles - Apply tight negative tracking on headings (-0.32px at 20px) - Use off-white `#f8f8f9` text on black/dark blocks (`#0f1014`, `#272e40`) ### Don't - Use drop shadows for elevation — heydealer is a flat, shadow-free system - Spread blue across many elements — it dilutes the single-action signal - Use a soft grey for body text — reserve the crisp near-black `#0d0d0e` - Use large pill radii on primary buttons — the CTA is a sharp 4px, not a pill - Set body copy in Bold — Bold (700) is reserved for heads, labels, and CTAs - Introduce a second saturated accent hue — blue is the only vivid color - Use positive letter-spacing on headings — heydealer tracks tight - Rely on color alone for hierarchy — weight (700 vs 400) does the structural work ## 8. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Single-column listing feed, sticky bottom CTA, chips wrap/scroll | | Tablet | 640-1024px | 2-up card grid, moderate padding | | Desktop | 1024-1440px | Multi-column marketplace grid, side spec panels on detail pages | ### Touch Targets - Primary CTA at 52px height, full-width sticky on mobile — an unmistakable target - Secondary black button at 52px height with 24px horizontal padding - Filter chips at ~36px height with 8px 12px padding — compact but tappable ### Collapsing Strategy - Marketplace grid: multi-column → single-column feed on mobile - Car detail: side-by-side gallery + spec panel → stacked, with the purchase CTA pinned to the bottom - Filter chip rows wrap/scroll horizontally on narrow viewports - Tint/white alternating bands maintain full-width treatment ### Image Behavior - Vehicle photos sit in 4px-radius tiles on the neutral `#70727c` tint with no shadow at any size - Thumbnail galleries (외부/실내) maintain the sharp 4px radius across breakpoints ## 9. Agent Prompt Guide ### Quick Color Reference - Primary CTA: Heydealer Blue (`#396eff`) - Secondary button: Pure Black (`#000000`) - Background: Canvas White (`#ffffff`) - Neutral surface tint: `#70727c` (used at ~5–8% alpha) - Heading / body text: Ink (`#0d0d0e`) - Secondary text: Muted (`#37383d`) - Metadata text: Muted Grey (`#858892`) - Text on dark: On-Dark (`#f8f8f9`) - Dark blocks: Chip Dark (`#0f1014`), Ink Navy (`#272e40`) - Hairline: `#e9eaec` ### Example Component Prompts - "Create a purchase CTA: #396eff background, #f8f8f9 text, 4px radius, 0 24px padding, 52px height, 15px Spoqa Han Sans Neo weight 700. Next to it a black secondary button: #000000 background, #f8f8f9 text, same geometry." - "Design a white listing card: #ffffff background, 1px solid #e9eaec border, 4px radius, no shadow. Title 18px Spoqa Han Sans Neo weight 700, -0.252px tracking, #0d0d0e. Meta 15px weight 400, #858892." - "Build a spec filter chip: low-alpha #70727c tint, #0d0d0e text, 4px radius, 8px 12px padding, 16px weight 400; when selected add a 1px solid #000000 border." - "Create top nav: white background, 16px Spoqa Han Sans Neo weight 400 links, #0d0d0e for the active item and #37383d at 60% for inactive. No shadow — separate with a #e9eaec hairline." ### Iteration Guide 1. Spoqa Han Sans Neo everywhere; Bold (700) for heads/labels/CTAs, Regular (400) for body 2. Blue (`#396eff`) is the single action color — don't spread it 3. Secondary action goes pure black (`#000000`), not a second blue 4. No shadows — separate with `#70727c` tint and `#e9eaec` hairlines 5. Sharp 4px radius is the default; 16px only on the search field 6. Text is `#0d0d0e` near-black ink, never a soft grey 7. Tight negative tracking on headings, normal on body 8. Off-white `#f8f8f9` for text on `#0f1014` / `#272e40` dark blocks --- ## 10. Voice & Tone Heydealer's voice is **plain, reassuring, and pro-consumer** — a service that takes an anxiety-heavy transaction (selling or buying a used car) and makes it feel controlled and fair. Copy is direct and functional Korean, action-first, and stripped of dealership sales-speak. The register treats the user as someone who deserves transparency and protection, not a mark to be worked. Reassurance is stated as concrete guarantees ("모든 차량 1년 무료 보증", "단순 변심도 무료 환불 가능") rather than adjectives. | Context | Tone | |---|---| | Primary CTAs | Direct, low-pressure imperatives. "바로 구매예약", "내차팔기". | | Nav / section labels | Plain and functional. "내차사기", "폐차 견적받기", "중고차 숨은 이력". | | Trust / warranty copy | Concrete guarantees, stated plainly. "모든 차량 1년 무료 보증", "인증 리포트". | | Spec / listing data | Neutral, dense, factual. Year, trim, fuel — no embellishment. | | Reassurance strips | Benefit-first, protection-framed. "단순 변심도 무료 환불 가능". | **Voice samples (verbatim from live surfaces):** - "바로 구매예약" — primary purchase CTA on a car detail page (direct, low-pressure). *(verified live 2026-07-02)* - "모든 차량 1년 무료 보증" — warranty reassurance strip (concrete guarantee). *(verified live 2026-07-02)* - "헤이딜러 – 인증중고차, 내차팔기, [번호판]시세" — homepage title meta (scope: certified cars, sell-my-car, plate valuation). *(verified live 2026-07-02)* **Forbidden register**: high-pressure dealership urgency, vague hype adjectives ("최고의", "혁신적인") in place of concrete terms, undefined jargon, exclamation-heavy marketing, anything that hides fees or conditions. ## 11. Brand Narrative Heydealer (헤이딜러) is a Korean used-car platform operated by **PRND** (피알앤디컴퍼니), launched around **2015**. Its founding premise reframed 내차팔기 (selling your car) from an opaque, dealer-favoring process into a transparent **reverse auction**: an owner registers a vehicle once, verified dealers compete with bids, and the owner picks the best offer — the market working for the seller rather than against them. Heydealer became a defining Korean startup story in **2016**, when a proposed amendment to the automobile-management law (popularly nicknamed the "헤이딜러 방지법" / "anti-Heydealer law") would have effectively banned online-only used-car dealers by requiring large physical premises. Public backlash over a regulation that seemed to punish a consumer-friendly innovation led to the rule being reconsidered — a widely-cited case study in Korean tech about regulation lagging digital business models. The service survived, then expanded from sell-my-car into a certified **buy-a-car marketplace** (내차사기) with 1-year free warranty, return-on-change-of-mind, and inspection reports, plus adjacent tools like scrap-car quotes (폐차) and hidden-history checks. What Heydealer refuses, visible in its design: the heavy chrome, stock photography, and hard-sell urgency of legacy classified and dealership sites. What it embraces: a flat, fast, app-native interface; a single trustworthy blue; crisp near-black data; and copy that states guarantees plainly instead of selling with adjectives. ## 12. Principles 1. **The market should work for the owner.** The reverse-auction model exists to make dealers compete for the seller. *UI implication:* surface competing offers clearly and neutrally; never visually privilege one bid without disclosure. 2. **Protection stated as fact, not adjective.** Trust is built with concrete guarantees. *UI implication:* render warranty/refund promises as plain reassurance strips (1년 무료 보증, 무료 환불), not decorative badges. 3. **One action, one color.** Blue (`#396eff`) means "commit." *UI implication:* reserve the saturated blue for the primary purchase/sell CTA so the next step is never ambiguous. 4. **Flat and fast.** App-native clarity beats decorative depth. *UI implication:* no shadows; separate with `#70727c` tint and `#e9eaec` hairlines; keep the grid quick to scan. 5. **Weight carries the structure.** *UI implication:* use Spoqa Han Sans Neo Bold (700) for what matters and Regular (400) for everything else; don't lean on size or color alone. ## 13. Personas *Personas below are fictional archetypes informed by publicly observable Heydealer user segments (Korean owners selling used cars, budget-conscious used-car buyers), not individual people.* **김민재, 33, 서울.** Selling his first car before an upgrade. Distrusts walking into a dealership and haggling; values registering once and letting dealers bid. Chose Heydealer because the reverse auction felt like the market working for him. **이서연, 41, 경기.** Buying a certified used car for the family. Reads the 인증 리포트 and cares most about the 1-year warranty and free-return policy. Trusts the calm, guarantee-first copy over showroom sales talk. **박준호, 28, 부산.** Comparison-shops trims and prices in the marketplace grid. Appreciates the dense, scannable listing layout and that specs are stated factually without embellishment. ## 14. States | State | Treatment | |---|---| | **Empty (no listings match filters)** | White canvas. Single Ink (`#0d0d0e`) line explaining no matching cars, with a path to relax filters. No illustration clutter. | | **Empty (no saved cars yet)** | Muted Grey (`#858892`) single line: nothing saved yet, plus a link back to the marketplace. Calm and honest. | | **Loading (listing fetch)** | Skeleton tiles on the low-alpha `#70727c` tint at final card dimensions, 4px radius. Flat pulse — no shadow shimmer, consistent with the shadowless system. | | **Loading (bid/quote compute)** | Inline progress within the action area; previously loaded listings stay visible. | | **Error (fetch failed)** | Inline message in Ink (`#0d0d0e`) with a plain-language explanation and a retry. Never a bare "오류가 발생했습니다" — states what to do next. | | **Error (form validation)** | Field-level message below the input; describes what's valid, not just "필수". | | **Success (purchase reserved / car registered)** | Brief inline confirmation in calm tone; next-step detail (delivery, dealer contact) linked immediately below. No celebratory emoji. | | **Skeleton** | `#70727c`-tint blocks at final dimensions, 4px radius, flat pulse. | | **Disabled** | Muted Grey (`#858892`) text on a reduced-opacity surface; the blue CTA fades rather than turning grey to preserve brand read. | ## 15. Motion & Easing **Durations**: | Token | Value | Use | |---|---|---| | `motion-fast` | 120ms | Hover, chip/press, focus | | `motion-standard` | 200ms | Card/section reveal, sheet, dropdown | | `motion-slow` | 320ms | Page-level transitions, gallery open | **Easings**: | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — sheets, cards, chips | | `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 functional and quiet — consistent with the flat, fast, data-dense aesthetic. Listing cards and spec sheets fade-in from below at `motion-standard / ease-enter`; chips respond to press with a subtle scale/opacity shift. No bounce or spring — a used-car transaction platform signals steadiness and trust, not playfulness. Under `prefers-reduced-motion: reduce`, all transitions collapse to instant; the marketplace remains fully functional. --- Source: https://oh-my-design.kr/design-systems/heydealer · Raw twin of references/heydealer/DESIGN.md Install 400 verified references for your AI coding agent: npx oh-my-design-cli install-skills