데이블 DESIGN.md

Design System Inspiration of Dable

Overview

Visual Theme & Atmosphere

Dable (데이블) is Korea's leading content-discovery and native-advertising platform, and its site reads like a confident, technology-forward adtech product rather than a busy media page. The canvas is pure white (#ffffff) broken up by full-bleed dark cinematic hero bands (#212121) and light-grey content surfaces (#efefef), giving the page a clean, spacious, presentation-like rhythm. Body copy sits in a soft near-black (#3d3d3d) — never a harsh pure-black wall of text — while headings drop to true black (#000000) for maximum authority. The single saturated brand anchor is a clear, trustworthy blue (#0071ce), reserved almost exclusively for the pill call-to-action, so the eye learns to read that one color as "the action."

The typographic personality is a deliberate two-font split. Display moments — the full-screen hero feature words "Personalization", "Machine learning", "Auto-optimization" — run in Poppins at a large 56px, a geometric sans that gives the technology story a modern, engineered feel. Body and product-page content shift to Open Sans at a quiet 14px / weight 400, the workhorse reading font, with section titles at 26px and feature sub-heads at 18px weight 700. Poppins also carries the CTA labels (14px) and the top-nav links (13px weight 600), so the interactive chrome always speaks in the geometric display voice while the explanatory copy stays calm in Open Sans.

What distinguishes Dable from heavier adtech dashboards is its restraint with depth. Live inspection found box-shadow: none across the hero, nav, headings, and every button — this is a flat system where separation comes from full-width color bands (#212121 dark / #efefef grey / #ffffff white) rather than elevation. Interactive chrome leans hard into the pill: every CTA is a fully rounded 50px capsule, whether it is the primary blue (#0071ce), the distinctive secondary mint (#56cfc2), a white ghost pill on a dark hero, or a muted grey pill (#e8e8e8). The result is a fast, mobile-native, slide-like aesthetic — engineered and approachable at once.

Key Characteristics:

• Poppins for display headlines (56px hero words) and interactive chrome (buttons, nav)
• Open Sans weight 400 at 14px for body and dense product copy
• Single saturated blue (#0071ce) reserved for the primary pill CTA
• Distinctive mint/teal (#56cfc2) as the one secondary-action accent
• Near-black body (#3d3d3d) with true-black (#000000) headings — warm, readable
• Flat depth: no shadows; full-width #212121 dark / #efefef grey / #ffffff bands do the separating
• Pill-everything geometry — 50px capsules on every button
• Cool neutral ladder (#464646 → #8a8a8a → #cccccc) for text hierarchy

Primary tasks

• Create an advertising account to start a native campaign
• Check a basic quote for a native ad buy
• Evaluate content-discovery widgets for a regional media network
• Justify the media buy internally using the platform's scale numbers

Brand Narrative

Dable (데이블) was founded in 2015 by 이채현 (Lee Chae-hyun, CEO) and three co-founders who had built the RecoPick recommendation venture inside SK Planet. The name itself encodes the thesis — "Data" + "able", doing everything possible with data. Lee, a POSTECH computer-science graduate with a background in big-data processing and recommendation algorithms, framed the company around a single mission: to "connect users, media, and content" (사용자와 미디어, 콘텐츠를 연결하자).

The product grew into two linked engines: Dable News, a personalized content-discovery widget that recommends articles to readers on media sites, and Dable Native Ad, described as Asia's largest native ad exchange. Together they process the behavior of 500 million-plus monthly users through machine learning, powering personalized recommendations and auto-optimized native campaigns. By 2021 Dable had passed 3,000 media partnerships and expanded across 10+ Asia-Pacific markets — Korea, Japan, Taiwan, Indonesia, Vietnam, Malaysia, Thailand, Hong Kong, Singapore, and beyond — before being acquired by Yanolja.

What Dable's design refuses, visible in the site: the cluttered, banner-heavy chrome of legacy ad networks and the dark-pattern urgency of performance marketing. What it embraces: a flat, cinematic, presentation-like interface; two disciplined brand hues (blue for action, mint for the alternate); geometric Poppins display over calm Open Sans copy; and a technology story told through capability words and hard numbers rather than superlatives.

Principles

1. Lead with capability. The homepage is three technology words, not a slogan. UI implication: let the feature word and the metric carry the section; keep decoration minimal.
2. One action, one color. Blue (#0071ce) means "do this." UI implication: reserve the saturated blue exclusively for the primary CTA so the next step is unambiguous; the mint (#56cfc2) is the single sanctioned alternate.
3. Flat and fast. Cinematic clarity beats decorative depth. UI implication: no shadows; separate sections with full-width color bands and let color do the work.
4. Two voices, two fonts. UI implication: Poppins for feature words and interactive chrome; Open Sans for the reading layer — never blend the two roles.
5. Prove it with numbers. Trust in adtech comes from scale. UI implication: surface concrete counts (users, media partners, markets) rather than adjectives.

Personas

Personas below are fictional archetypes informed by publicly observable Dable user segments (performance advertisers, media/publisher partners, adtech buyers across APAC), not individual people.

정민수, 34, 서울. A performance marketer at a mid-size ecommerce brand buying native campaigns. Cares that auto-optimization actually lowers his cost-per-acquisition and that the reporting is legible. Chose Dable because the pitch led with the machine-learning capability and concrete results, not with hype.

Aria Tan, 29, Singapore. A publisher-side partnerships lead evaluating content-discovery widgets for a regional media network. Values that Dable is present across APAC and integrates cleanly; wants a partner whose product looks engineered, not like a legacy banner network.

김서연, 41, 판교. A marketing director allocating budget across channels. Uses Dable's scale numbers (media partners, monthly users) to justify the buy internally. Trusts the calm, capability-first brand tone over urgency-driven ad tooling.

Colors

Primary

• Dable Blue (#0071ce): Primary brand color and CTA background — the saturated blue on the pill call-to-action, the system's single "action" color.
• Link Blue (#0b7ed1): A slightly brighter blue used for inline links and text-level emphasis.
• Accent Mint (#56cfc2): The secondary-action teal, used for the one alternate CTA ("기본 견적 확인"). The only saturated hue besides the blue.

Ink & Text Hierarchy

• Ink Black (#000000): Primary heading color — true black for section titles and hero copy.
• Ink Soft (#181818): Near-black for smaller feature-card titles (targeting options).
• Body Grey (#3d3d3d): The dominant body-copy color across the site.
• Slate (#464646): Secondary section sub-headings and stronger captions.
• Muted (#8a8a8a): Tertiary text, metadata, and de-emphasized labels.
• Faint (#cccccc): Lowest-emphasis text, disabled labels, and hairline-weight greys.

Neutral & Surface

• Pure White (#ffffff): Page background, white content bands, and text on blue/dark.
• Surface Grey (#efefef): The light-grey content band used to alternate against white.
• Dark Band (#212121): Near-black background for the cinematic full-width hero sections.
• Neutral Button (#e8e8e8): Light-grey background for tertiary/muted pill buttons.
• Neutral Button Text (#6f6f6f): Text color inside the light-grey neutral pill.
• Outline Text (#2b2b2b): Dark label color inside the white ghost pill on dark heroes.
• On Primary (#ffffff): White text sitting on the blue and mint CTAs.

Typography

Font Family

• Display: Poppins — used for hero feature words, CTA labels, and top-nav links. Geometric sans, weights 400 (display/buttons) and 600 (nav).
• Body: Open Sans (the document default) — used for body copy, product-page section titles, and footer headings at weight 400, with feature-card titles at weight 700.

Hierarchy

Principles

• Two fonts, two jobs: Poppins is the geometric display + interactive voice; Open Sans is the functional reading voice. They never swap roles.
• Weight over size for emphasis: within Open Sans, hierarchy is signalled by weight (700 feature titles vs 400 body) more than by dramatic size jumps.
• Quiet body: body copy holds a dense, readable 14px / 400 with 1.5 line-height — information-forward, never shouting.
• Poppins for the chrome: every tappable label (CTA, nav) is Poppins, so the interactive layer is visually distinct from explanatory Open Sans copy.

Layout

Spacing System

• Base unit: ~4px, scaling 4px → 8px → 16px → 24px → 44px → 64px
• Notable: CTA pills use a generous asymmetric 17px vertical / 29–44px horizontal padding, giving the capsules a comfortable, tappable hit area

Grid & Container

• Full-screen cinematic hero bands anchor the page, each a single dark (#212121) slide with a large Poppins feature word
• Product/feature sections alternate white (#ffffff) and light-grey (#efefef) full-width bands
• Content is centered and generously spaced — a slide-deck cadence rather than dense dashboard packing
• CTAs are grouped as horizontal rows of pills beneath section copy

Whitespace Philosophy

• Presentation rhythm: the layout reads like a scroll-driven deck — one idea per band, generous vertical breathing room between sections.
• Flat segmentation: sections separate by background color (#212121 / #efefef / #ffffff), never by shadow or heavy borders.
• Pill cadence: the repeated 50px capsule creates a consistent horizontal rhythm across every call-to-action.

Border Radius Scale

• Square (0px): content blocks, image tiles, section bands
• Pill (50px): every button and CTA — the system's defining geometry
• Full (9999px): circular play buttons and icon frames

Responsive Behavior

Breakpoints

Touch Targets

• CTA pills at 48px height with 17px vertical padding — comfortably tappable
• Compact contact pill at 39px height for dense footer bands
• Nav links spaced for touch across the top bar

Collapsing Strategy

• Hero: 56px Poppins feature word scales down on mobile, weight maintained
• Pill rows: wrap or stack on narrow viewports
• Feature bands: multi-column → stacked single column
• Dark/grey/white alternating bands maintain full-width treatment

Image Behavior

• Product screenshots and illustrations carry no shadow at any size, consistent with the flat system
• Content blocks stay square-cornered across breakpoints; only buttons and circular play frames round

Elevation & Depth

Shadow Philosophy: Dable is a near-shadowless system. Live inspection found box-shadow: none across the hero, nav, headings, and every pill button. Depth and grouping are communicated entirely through full-width color bands — cinematic dark (#212121), light grey (#efefef), and white (#ffffff) — rather than elevation. This is a deliberate flat, presentation-like choice that keeps the adtech story feeling fast and modern. When emphasis is needed, the system reaches for color (blue #0071ce or mint #56cfc2) or a dark band, never a drop shadow.

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 presentation-driven and quiet — the site scrolls like a deck, with full-screen hero bands revealing one idea at a time at motion-slow / ease-standard. Pills respond to press with a subtle scale/opacity shift; section content fades in from below at motion-standard / ease-enter. No bounce or spring — an adtech platform signals steadiness and precision, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the hero bands snap into place; the product stays fully functional.

Components

Buttons

Primary CTA (Blue)

• Background: #0071ce
• Text: #ffffff
• Radius: 50px
• Padding: 17px 44px
• Font: 14px / 400 / Poppins
• Height: 48px
• Use: Primary call-to-action pill ("자세히 보기", "광고계정 생성하기", "시작하기")

Secondary CTA (Mint)

• Background: #56cfc2
• Text: #ffffff
• Radius: 50px
• Padding: 17px 29px
• Font: 14px / 400 / Poppins
• Height: 48px
• Use: Alternate secondary action ("기본 견적 확인")

Ghost Pill (White on Dark)

• Background: #ffffff
• Text: #2b2b2b
• Radius: 50px
• Padding: 17px 44px
• Font: 14px / 400 / Poppins
• Height: 48px
• Use: White pill sitting over a dark hero band ("서비스 문의하기", "광고주 지원")

Neutral Pill (Grey)

• Background: #e8e8e8
• Text: #6f6f6f
• Radius: 50px
• Padding: 17px 29px
• Font: 14px / 400 / Poppins
• Height: 48px
• Use: Tertiary / muted action ("콘텐츠 검토 가이드")

Small Pill (on Blue band)

• Background: #0071ce
• Text: #ffffff
• Radius: 50px
• Padding: 10px 40px
• Font: 13px / 400 / Poppins
• Height: 39px
• Use: Compact contact pill in dark footer band ("Contact Us")

Cards & Containers

Flat Feature Block

• Background: #ffffff
• Text: #000000
• Use: Feature/content block on a white band — flat, no shadow, no border

Grey Surface Band

• Background: #efefef
• Text: #3d3d3d
• Use: Alternating light-grey full-width content band

Navigation

• Background: transparent over #212121 dark hero
• Text: #ffffff
• Font: 13px / 600 / Poppins
• Active: blue #0071ce text on the active item
• Use: Top horizontal nav ("Advertisers", "Publishers", "Support", "Resources", "About")

Footer

• Headings: #ffffff, 15px / 400 / Open Sans
• Background: #212121
• Use: Footer section headings ("Seoul Office", "Careers", "Privacy Policy")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://dable.io/ko/, https://dable.io/ko/advertising/, https://teamdable.github.io/techblog Tier 2 sources: getdesign.md/dable (SPA shell — no dable coverage); styles.refero.design/?q=dable (query returned default gallery, no dable-specific match) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use Poppins for display feature words (56px) and all interactive chrome (buttons, nav)
• Use Open Sans weight 400 at 14px for body and product copy
• Reserve blue (#0071ce) for the primary pill CTA — keep it the single "action" color
• Use the mint (#56cfc2) only for the one secondary/alternate CTA
• Use near-black (#3d3d3d) for body text and true black (#000000) for headings
• Separate sections with full-width color bands (#212121 / #efefef / #ffffff), not shadows
• Use pill geometry — every button is a 50px capsule
• Put white ghost pills (#ffffff bg, #2b2b2b text) on dark hero bands for contrast

Don't

• Use drop shadows for elevation — Dable is a flat, shadow-free system
• Spread the blue across many elements — it dilutes the single-action signal
• Introduce a third saturated accent — blue and mint are the only two hues
• Use sharp/square corners on buttons — every CTA is a full pill
• Set body copy in pure black — reserve #000000 for headings, use #3d3d3d for text
• Mix the display and body fonts — Poppins owns chrome, Open Sans owns reading
• Use the mint (#56cfc2) for primary CTAs — the primary action is always blue

Voice & Tone

Dable's voice is clear, technical, and quietly confident — an adtech company that leads with capability, not hype. The homepage opens on three single-word promises ("Personalization", "Machine learning", "Auto-optimization") and a mission line about connecting "사용자와 미디어, 콘텐츠" (users, media, and content). Copy treats the reader as a professional — an advertiser or publisher — who wants to know what the technology does and what results it produces, stated plainly with concrete numbers (500M+ monthly users, 3,000+ media partners).

Voice samples (verbatim from live surfaces):

• "네이티브 광고와 콘텐츠 디스커버리" — homepage title (category positioning). (verified live 2026-07-02)
• "인공 지능 기반의 네이티브 광고를 통한 적합한 고객 발견" — advertising product title. (verified live 2026-07-02)
• "글로벌 프리미엄 미디어 네트워크에 광고하세요" — product hero heading (scope claim). (verified live 2026-07-02)

Forbidden register: buzzword-stacking without substance, fear-based marketing, undefined jargon left unexplained, exclamation-heavy hype. Dable's authority comes from stated capability and numbers, not adjectives.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Dable Blue (#0071ce)
• Secondary CTA: Accent Mint (#56cfc2)
• Inline link: Link Blue (#0b7ed1)
• Heading: Ink Black (#000000), small feature titles Ink Soft (#181818)
• Body text: Body Grey (#3d3d3d)
• Muted text: Muted (#8a8a8a), faint (#cccccc)
• Dark band: #212121, grey surface: #efefef, white: #ffffff
• Neutral pill: #e8e8e8 bg / #6f6f6f text; ghost pill text #2b2b2b

Example Component Prompts

• "Create a full-screen dark hero band: #212121 background, a large 56px Poppins weight 400 feature word in white. Below it a blue pill CTA — #0071ce background, white text, 50px radius, 17px 44px padding, 14px Poppins — and a white ghost pill (#ffffff bg, #2b2b2b text, 50px radius)."
• "Design a feature section on a white band: #ffffff background, no shadow. Section title 26px Open Sans weight 400, #000000. Feature-card titles 18px Open Sans weight 700, #181818. Body 14px Open Sans weight 400, #3d3d3d."
• "Build an alternating grey band: #efefef background, full-width. A mint secondary CTA — #56cfc2 background, white text, 50px radius, 17px 29px padding — and a neutral grey pill (#e8e8e8 bg, #6f6f6f text)."
• "Create a top nav over the dark hero: transparent bar, Poppins 13px weight 600 links in #ffffff, blue #0071ce on the active item."

Iteration Guide

1. Poppins for feature words + chrome; Open Sans 400 for body
2. Blue (#0071ce) is the single primary action; mint (#56cfc2) is the one secondary
3. No shadows — separate with #212121 / #efefef / #ffffff bands
4. Pill geometry throughout — every button is a 50px capsule
5. Body text is #3d3d3d near-black; headings are true #000000
6. Keep to two hues — a third saturated color breaks the system
7. White ghost pills (#2b2b2b text) belong on dark hero bands

---

Governance

Known Gaps

• Contrast, button-mint. Text #ffffff on #56cfc2 measures 1.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-neutral. Text #6f6f6f on #e8e8e8 measures 4.10:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.