Design System Inspiration of Buzzvil

1. Visual Theme & Atmosphere

Buzzvil (버즈빌) is Korea's reward-advertising and adtech platform, and its homepage reads like a confident, AI-forward product company rather than a media-buying middleman. The flagship surface (www.buzzvil.com) alternates two moods: bright, airy white (#ffffff) and cool-grey (#f2f5f7) bands for informational content, and immersive dark navy (#0e171f) sections — paired with a dark slate card surface (#2a3f4d) — for the persuasive, atmospheric moments. Text is set in pure black (#000000) and a deep near-black navy ink (#0e171f), never softened, which gives the marketing copy a crisp, declarative weight. The single saturated brand accent is a coral red (#f44336) — the exact hue of the Buzzvil brandmark — reserved almost entirely for the "문의하기" (contact) call-to-action, so the eye learns that red means "talk to us."

The typographic personality is unmistakably Korean-premium and entirely Pretendard, the de-facto hangul product font, carried at a wide weight range. Headlines run enormous and heavy — the hero "모두가 사랑하는 방식의 광고" ("Advertising that everyone loves") lands at 78px / weight 800 (ExtraBold) — while section heads step down through 56px, 48px, and 32px at weight 700, and the lead subhead sits quiet at 24px / 400. Body and UI text drop to 16px / 400, with navigation labels at 16px / 600 SemiBold. There is exactly one font family doing every job; hierarchy comes from size and weight, not from a second typeface.

What distinguishes Buzzvil from heavier enterprise adtech peers is its flatness and its generous rounding. Live inspection found box-shadow: none across the hero, nav, cards, and buttons — depth is communicated by background color (white vs cool-grey #f2f5f7 vs navy #0e171f) and by thin #dce3e8 hairlines, never by elevation. Geometry leans soft: feature and stat cards use a large 32px radius, segmented "goal" filter pills go fully round (9999px), and the smaller header buttons sit at a tidy 4px. The cool-slate neutral ladder — body slate #3e5463, nav muted #5b7282, then #7a909e, #9fb1bd, and the faint #c1ccd6 used for inactive controls — gives text and UI a calm, engineered, blue-grey temperature. White CTA text (#ffffff) reads as on-primary against both the red and the navy.

Key Characteristics:

• Pretendard for everything — display ExtraBold (800) down to 16px body (400); hierarchy by size/weight, not by a second font
• Single saturated coral red (#f44336) reserved for the primary contact CTA — same hue as the brandmark
• Dual-mood layout: bright white/#f2f5f7 info bands vs immersive dark navy (#0e171f) / slate (#2a3f4d) sections
• Pure black (#000000) and near-black navy (#0e171f) text — crisp and declarative, never grey-softened headlines
• Flat depth: box-shadow: none; separation by background color and #dce3e8 hairlines
• Soft geometry: 32px rounded cards, fully-round (9999px) filter pills, 4px header buttons
• Cool blue-grey neutral ladder (#3e5463 → #5b7282 → #7a909e → #9fb1bd → #c1ccd6)

2. Color Palette & Roles

Primary

• Buzzvil Coral Red (#f44336): Primary brand color and the contact-CTA background. The saturated red that matches the Buzzvil brandmark — the system's single "action" hue.
• Ink Navy (#0e171f): Near-black navy used for dark hero/immersive section backgrounds and for strong heading text. Carries warmth and weight without going pure black.
• Pure Black (#000000): Body and headline text, the black header "광고센터" CTA background, and the language-toggle outline color.

Neutral & Surface

• Pure White (#ffffff): Page background, white feature cards, and on-primary text on red/navy/black.
• Surface Grey (#f2f5f7): Cool light-grey surface for alternating content bands and the secondary explore button.
• Surface Dark (#2a3f4d): Dark slate card surface used inside the navy sections.
• Hairline (#dce3e8): Thin borders and dividers — the primary separation device in this shadow-free system.

Text Hierarchy

• Pure Black (#000000): Primary headings and body copy at maximum contrast.
• Body Slate (#3e5463): Secondary body text and the secondary-button label color.
• Muted Slate (#5b7282): Top-nav link color, tertiary labels.
• Muted Alt (#7a909e): Alternate muted slate for captions and metadata.
• Faint Blue-Grey (#9fb1bd): Low-emphasis labels and quiet supporting text.
• Faint Alt (#c1ccd6): Inactive control text and borders (e.g. unselected filter pills).
• White (#ffffff): Text on dark navy, slate, red, and black surfaces.

3. Typography Rules

Font Family

• Sans (all roles): Pretendard (with sans-serif fallback) — the single family for headlines, navigation, buttons, and body. ExtraBold (800) at the hero, 700 for section heads, 600 for nav, 400 for body.

Hierarchy

Principles

• One family, full weight range: Pretendard does every job; the jump from ExtraBold 800 headlines to 400 body is the system's primary hierarchy signal.
• Headlines run large and heavy: the hero is 78px / 800 — a declarative, brand-forward scale that compresses on smaller viewports while keeping the weight.
• SemiBold for navigation: nav links sit at 16px / 600, a notch heavier than 400 body so the chrome reads as interactive.
• Hangul-first body: 16px / 400 with 1.5 line-height keeps dense Korean marketing copy legible and breathable.

4. Component Stylings

Buttons

Contact CTA (Primary)

• Background: #f44336
• Text: #ffffff
• Radius: 4px
• Padding: 12px 16px
• Height: 44px
• Font: 16px / 400 / Pretendard
• Use: Header "문의하기" contact call-to-action — the saturated coral-red action

Ad-Center CTA (Black)

• Background: #000000
• Text: #ffffff
• Radius: 4px
• Padding: 12px 16px
• Height: 44px
• Font: 16px / 400 / Pretendard
• Use: Header "광고센터 바로가기" — neutral high-contrast secondary action

Language Toggle (Outline)

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Radius: 4px
• Padding: 12px 16px
• Height: 44px
• Font: 16px / 400 / Pretendard
• Use: ENG / KOR language switch

Secondary Explore (Light)

• Background: #f2f5f7
• Text: #3e5463
• Border: 1px solid #f2f5f7
• Radius: 8px
• Padding: 16px 32px
• Height: 55px
• Font: 20px / 400 / Pretendard
• Use: "광고 상품 둘러보기" secondary explore button

Ghost on Dark

• Background: transparent
• Text: #f2f5f7
• Border: 1px solid #f2f5f7
• Radius: 8px
• Padding: 16px 32px
• Height: 55px
• Font: 20px / 400 / Pretendard
• Use: "광고 문의하기" ghost CTA over the dark navy hero

Tabs & Segmented Controls

Top Nav Link

• Text: #5b7282
• Font: 16px / 600 / Pretendard
• Active: #0e171f text on the selected/hover item
• Use: Top navigation (Products / Technologies / Resources / Company / Career)

Goal Filter Pill

• Background: transparent
• Text: #c1ccd6
• Border: 1px solid #c1ccd6
• Radius: 9999px
• Padding: 16px
• Height: 55px
• Font: 20px / 400 / Pretendard
• Active: #000000 text on #ffffff fill, weight 700
• Use: Goal segmented filter ("전체", "브랜드 알리기")

Cards & Containers

Feature / Stat Card

• Background: #ffffff
• Text: #0e171f
• Radius: 32px
• Padding: 80px 40px 40px
• Shadow: none
• Use: Large rounded feature/stat card (e.g. "39% 평균 클릭률", "x4 전환율", "82% 리텐션")

Dark Slate Card

• Background: #2a3f4d
• Text: #ffffff
• Radius: 32px
• Shadow: none
• Use: Dark feature card nested in the navy hero/immersive sections

Navigation

• Background: #ffffff
• Text: #5b7282 (active #0e171f)
• Font: 16px / 600 / Pretendard
• Height: 75px header row
• Use: Sticky top nav with right-aligned black "광고센터 바로가기" + red "문의하기" CTAs

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.buzzvil.com (homepage, live computed style — hero, nav, CTAs, cards, filter pills); https://tech.buzzvil.com/ (official Buzzvil Tech blog — brand-owned); https://tech.buzzvil.com/blog/design-system-at-buzzvil (official Buzzvil design-system post — brand-owned, design philosophy) Tier 2 sources: getdesign.md/buzzvil — 404 (not listed); styles.refero.design ?q=buzzvil — no Buzzvil-specific entry (generic catalog results only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 80px
• Notable: card interiors use a deliberate 80px top / 40px side pad (measured 80px 40px 40px), giving the big 32px-radius stat cards an airy, gallery-like presence

Grid & Container

• Centered single-column hero anchored by the 78px Pretendard ExtraBold headline over a dark navy (#0e171f) backdrop
• Goal-selector row of fully-round filter pills beneath the hero
• Content alternates full-width bands: white (#ffffff), cool-grey (#f2f5f7), and immersive navy (#0e171f)
• Stat/feature cards group at a 32px radius; nested dark cards use slate (#2a3f4d)

Whitespace Philosophy

• Airy over dense: despite being a data/performance product, the marketing surface is generous with vertical rhythm and large card padding.
• Color-band segmentation: sections separate by background color (white vs #f2f5f7 vs navy), not by borders or shadows.
• Round rhythm: the repeated 32px card radius and 9999px pills set a consistently soft horizontal cadence.

Border Radius Scale

• Small (4px): header buttons (contact, ad-center, language toggle)
• Medium (8px): hero secondary/ghost buttons
• Large (16px): inner white cards / media tiles
• XL (32px): feature and stat cards — the workhorse rounding
• Full (9999px): goal filter pills, round chips

6. Depth & Elevation

Shadow Philosophy: Buzzvil is a near-shadowless system. Live inspection found box-shadow: none across the hero, nav, headings, cards, and buttons. Depth and grouping are communicated entirely through background color (white, cool-grey #f2f5f7, and dark navy #0e171f) and thin #dce3e8 hairlines. When emphasis is needed, the system reaches for the coral red (#f44336) or a dark slate card (#2a3f4d), never elevation — keeping the adtech UI feeling clean, fast, and modern.

7. Do's and Don'ts

Do

• Use Pretendard for everything — ExtraBold (800) for the hero, 700 for section heads, 600 for nav, 400 for body
• Reserve coral red (#f44336) for the primary contact CTA — keep it the single "action" color
• Use pure black (#000000) and near-black navy (#0e171f) for text — crisp and declarative
• Alternate white, cool-grey (#f2f5f7), and dark navy (#0e171f) full-width bands for rhythm
• Keep the system flat — separate with color bands and #dce3e8 hairlines, never shadows
• Use large 32px rounding on feature/stat cards and full-round (9999px) filter pills
• Use the cool blue-grey neutral ladder (#3e5463 → #5b7282 → #7a909e → #9fb1bd → #c1ccd6) for text hierarchy
• Use a dark slate card (#2a3f4d) for grouping inside navy sections

Don't

• Spread coral red across many elements — it dilutes the single-action signal
• Add drop shadows for elevation — Buzzvil is a flat, shadow-free system
• Introduce a second display typeface — Pretendard owns every weight and role
• Soften headlines to a light weight — display is ExtraBold (800)
• Mix in a second saturated accent hue — coral red is the only one
• Use sharp corners on big cards — large 32px rounding is the brand geometry
• Use grey for inactive-only controls when the faint slate (#c1ccd6) is the system's quiet state

8. Responsive Behavior

Breakpoints

Touch Targets

• Header CTAs at 44px height with 12px 16px padding — comfortably tappable
• Hero secondary/ghost buttons at 55px height, 16px 32px padding
• Filter pills at 55px height, fully round for unmistakable targets

Collapsing Strategy

• Hero: 78px ExtraBold headline scales down on mobile, weight 800 maintained
• Filter-pill row: horizontal wrap/scroll on narrow viewports
• Feature/stat cards: multi-column → stacked single column, 32px radius retained
• White / grey / navy bands maintain full-width treatment

Image Behavior

• Product screenshots and illustrations carry no shadow at any size, consistent with the flat system
• Cards keep their 32px (feature) / 16px (inner) radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Buzzvil Coral Red (#f44336)
• Dark sections / strong text: Ink Navy (#0e171f)
• Body / headline text: Pure Black (#000000)
• Background: Pure White (#ffffff)
• Light surface / secondary button: Surface Grey (#f2f5f7)
• Dark card surface: Surface Dark (#2a3f4d)
• Secondary text: Body Slate (#3e5463)
• Nav / muted text: Muted Slate (#5b7282), #7a909e
• Faint / inactive: Faint Blue-Grey (#9fb1bd), #c1ccd6
• Hairline: #dce3e8
• On primary/dark: White (#ffffff)

Example Component Prompts

• "Create a sticky white top nav (75px). Pretendard 16px / 600 links in #5b7282, active #0e171f. Right-aligned: black #000000 'ad center' CTA and coral-red #f44336 'contact' CTA, white text, 4px radius, 12px 16px padding, 44px height."
• "Build a dark hero: #0e171f background. Headline 78px Pretendard weight 800, white text. Subhead 24px / 400 in #f2f5f7. Two buttons at 8px radius, 16px 32px padding, 55px height: light #f2f5f7 fill with #3e5463 text, and a ghost with 1px #f2f5f7 border and #f2f5f7 text."
• "Design a stat card: white #ffffff background, 32px radius, no shadow, 80px 40px 40px padding. Big number in #0e171f, label in #3e5463. Place three side by side in a band."
• "Create a goal filter row of fully-round pills (9999px, 55px height, 16px padding, 20px Pretendard). Inactive: transparent with 1px #c1ccd6 border and #c1ccd6 text. Active: #ffffff fill, #000000 text, weight 700."

Iteration Guide

1. Pretendard everywhere — 800 hero, 700 sections, 600 nav, 400 body
2. Coral red (#f44336) is the single action color — don't spread it
3. No shadows — separate with white / #f2f5f7 / #0e171f color bands and #dce3e8 hairlines
4. Round geometry — 32px cards, 9999px pills, 4px header buttons
5. Text is black #000000 / navy #0e171f; secondary slate #3e5463; muted #5b7282
6. Dark sections use navy #0e171f with slate #2a3f4d cards
7. White (#ffffff) is the on-primary text on red, navy, black, and slate

---

10. Voice & Tone

Buzzvil's voice is confident, benefit-first, and friendly-technical — an adtech company that frames advertising not as interruption but as something users genuinely welcome. The hero line "모두가 사랑하는 방식의 광고" ("Advertising that everyone loves") sets the register: optimistic, human-centered, and quietly bold. Performance is communicated through concrete numbers (CTR, CVR, retention) rather than hype adjectives, and the product story leans into "인터랙션 AI 에이전트" (interaction AI agents) as the next chapter.

Voice samples (verbatim from live brand surfaces):

• "모두가 사랑하는 방식의 광고" — homepage hero headline (mission-framed). (verified live 2026-06-26)
• "인터랙션 AI 에이전트를 기반으로, 고객에게 필요한 초개인화 된 경험을" — hero subhead (positioning). (verified live 2026-06-26)
• "Simplicity is key. By keeping things simple, more people will understand what you want to express." — Buzzvil design-system blog. (verified live 2026-06-26)

Forbidden register: interruption-framed ad language, fear-based or dark-pattern urgency, hollow superlatives without a metric, jargon left unexplained to non-marketers.

11. Brand Narrative

Buzzvil (버즈빌) was founded in 2012 by John Gwanwoo Lee (이관우, CEO) and co-founder Robert Seo, who named the company for the "buzz" they intended to create. The founding insight is famously concrete: Lee took the idea for lock-screen advertising from the platform screen doors at subway stations — an everyday surface people glance at constantly — and asked what a smartphone's first screen could become. From that came HoneyScreen (a reward lock-screen app) and then BuzzScreen, a B2B SDK that lets any partner app run a reward-advertising lock screen without shipping a separate app.

The company grew into a cross-border reward-advertising and adtech platform, acquiring the US lock-screen company SlideJoy in 2016 and operating offices across Korea, the US, Japan, and Taiwan. Its mission — to let advertisers and publishers engage users on the first screen in a way that rewards rather than interrupts — is captured on the homepage as "모두가 사랑하는 방식의 광고" (advertising everyone loves). The current chapter reframes the platform around "인터랙션 AI 에이전트" — interaction AI agents that deliver hyper-personalized experiences.

What Buzzvil refuses, visible in its design: the heavy, shadow-stacked chrome and interruption aesthetics of legacy adtech. What it embraces — echoed in its own design-system writing ("Simplicity is key… minimalism comes from this mindset") — is a flat, fast, Pretendard-set interface; a single trustworthy coral red; large soft rounding; and copy that backs claims with numbers.

12. Principles

1. Advertising people welcome. The brand exists to make ads rewarding, not interruptive. UI implication: lead with user benefit and concrete value (reward, relevance), never dark-pattern urgency.
2. One action, one color. Coral red (#f44336) means "do this / talk to us." UI implication: reserve the saturated red for the primary CTA so the next step is unambiguous.
3. Simplicity by design. Buzzvil's own design team states "simplicity is key… minimalism comes from this mindset." UI implication: fewer typefaces, flat depth, color-band layout; remove before adding.
4. Prove it with numbers. Performance claims are shown as metrics (CTR, CVR, retention). UI implication: pair every benefit headline with a measurable stat in a card.
5. Soft, modern, flat. Large rounding and shadow-free surfaces over heavy elevation. UI implication: 32px cards, pills, color bands and hairlines instead of drop shadows.

13. Personas

Personas below are fictional archetypes informed by publicly observable Buzzvil user segments (performance marketers, app publishers integrating reward ads, adtech partners), not individual people.

박지훈, 33, 서울. A performance marketer at a mid-size e-commerce brand. Buys reward-ad inventory through Buzzvil and judges every channel by CTR and CVR. Trusts the homepage because the claims come with numbers, not adjectives.

이서연, 29, 경기. A product manager at a consumer app integrating the BuzzScreen reward SDK. Wants a clean, well-documented surface and values that Buzzvil frames ads as user reward rather than interruption.

Daniel Kim, 41, San Francisco. A US partnerships lead evaluating cross-border reward-ad supply. Appreciates the bilingual (ENG/KOR) surface and the calm, metric-driven positioning over hype.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, matching the flat, fast aesthetic. Filter pills respond to press with a subtle scale/opacity shift; stat and feature cards fade-in from below at motion-standard / ease-enter. No bounce or spring — an adtech platform signals reliability, not gimmickry. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.