Design System Inspiration of Dr.Cha (Autopedia)

Overview

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

Primary tasks

• Read what the company does across its four business lines
• Track a car’s maintenance history and get a transparent diagnosis
• Get an imported car repaired by a brand specialist
• Source imported-car parts for a repair shop

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.

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.

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.

Colors

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.

Typography

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

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.

Layout

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)

Responsive Behavior

Breakpoints

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

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

Durations:

Easings:

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:

• (homepage: nav, display headlines, full-bleed violet #7A00FF brand band, business feature cards, partnership CTA)
• (CI page: asset-download buttons, company registry — 대표 김병근, 사업자등록번호 236-86-01261, contact@autopediacar.com)
• (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. –>

Components

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 (제휴문의, 사업소개, 블로그)

States

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

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.

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.

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