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

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

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

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.

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

15. Motion & Easing

Durations:

Easings:

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.