Identity System 26.1

Expressive in Motion. Iconic in Context.

Guided by product behavior, our brand comes to life through interaction, allowing its form, motion, and identity to adapt without losing its essence.

Brand Principles

Our core brand principles that guide every decision, interaction, and experience we create. These fundamental values ensure consistency and authenticity across all touchpoints.

PrincipleAlignment questionDescription
AdaptiveChameleon by Design

Does this feel like Buzzvil in any context?

The brand adapts to its context—logo color, partner environments, light or dark—without losing identity. We default to monochrome for a clean aesthetic but allow expression in partner contexts. Form and identity stay recognizable across every touchpoint.
MotionExpressive in Motion

Would this be stronger in motion?

Our brand comes to life through interaction and motion. Guided by product behavior, we prioritize vector, Lottie, and code-driven visuals over static imagery. Motion adds clarity and delight; static is a last resort.
RealReal, Not Stock

Is this unmistakably ours?

Imagery must be real: our product, our people, our space. Actual screenshots and flows, candid photos, authentic visuals. No stock photography. Trust and authenticity come from showing what we truly build and who we are.
ClarityClarity & Contrast

Is it legible and confident at a glance?

We aim for a high-contrast, clean look: grayscale as primary palette, accent used sparingly. Typography is legible and confident; clearspace and hierarchy are non-negotiable. The brand should read at a glance.
SystemOne Coherent System

Does this fit our system?

Brand guidelines, tokens, and conventions ensure one coherent system across all platforms and touchpoints. From logo usage to color, typography, and voice—consistency is how we build recognition and trust.

Colors

Grayscale

Our primary palette. We aim for a high-contrast, clean look using almost exclusively black and white tones.

White
#FFFFFF
Gray 5
#FAFAFA
Gray 10
#F5F5F5
Gray 20
#E5E5E5
Gray 30
#D4D4D4
Gray 40
#A3A3A3
Gray 50
#737373
Gray 60
#525252
Gray 70
#404040
Gray 80
#262626
Gray 90
#171717
Gray 100
#0A0A0A
Gray 110
#050505
Black
#000000

Accent Red

Used sparingly for primary actions or critical alerts. Aim for <10% usage in any composition.

Red 10
#FEF2F2
Red 20
#FECACA
Red 30
#FCA5A5
Red 40
#F87171
Red 50
#EF4444
Red 60
#DC2626
Red 70
#B91C1C
Red 80
#991B1B
Red 90
#7F1D1D
Red 100
#450A0A

Accent Orange

Secondary accent color, complements the red. Use for banners or highlights.

Orange 10
#FFF7ED
Orange 20
#FFEDD5
Orange 30
#FED7AA
Orange 40
#FDBA74
Orange 50
#FB923C
Orange 60
#F97316
Orange 70
#EA580C
Orange 80
#C2410C
Orange 90
#9A3412
Orange 100
#7C2D12

Typography

Design System 26.1 — Typography

Every word carries
intention.

Three typefaces, one voice. From bold headlines to quiet labels, our typography is calibrated to feel calm, precise, and unmistakably Buzzvil.

Live Metrics
실시간
노출수 IMPRESSIONS0
클릭률 CTR0.0%
수익 REVENUE (K)$0.0
세션 SESSIONS0
00:0024h Trend24:00

Primary: Pretendard / Inter

Pretendard for Korean, Inter for Latin. Our main typeface for its cleanliness, readability, and modern aesthetic. Works well in both headings and body text.

Heading 1 / Bold / 48px

Ads That Work

Heading 2 / Semibold / 36px

Where user benefit meets advertiser success

Body / Regular / 16px

Our logo is a chameleon. It can take any color from our customer/partners. By default and in the context of our brand, it takes the black or white depending on background.

Secondary: Nanum Gothic Coding / Anonymous Pro

Monospace typefaces that signal precision, accuracy, and a data-centric mindset. Rooted in our tech-first DNA, they reinforce the trust our partners place in our numbers. Use for kickers, labels, metrics, code snippets, or technical data.

Kicker / Bold / 14px

Product Backend Team

Data / Regular / 14px
const config = {
  theme: 'dark',
  version: 2.0
};

Display: Nunito (EN only)

English-only typeface for navigation, hero headlines, and high-impact display text. Rounded and approachable, it adds warmth to key touchpoints.

Header / Extrabold / 36px

buzzvil / design

Imagery

“Ideas in motion, teams in tension”

Motion Over Stills

Our brand is built to move. Static imagery is a last resort. When we do use it, every pixel must be real, purposeful, and unmistakably ours.

  • Vector, Lottie, and code-driven visuals come first.
  • Photos and screenshots earn their place only when they show something real. Our actual product, our actual people, our actual space.

Vector & Lottie First

SVG, vector artwork, and Lottie animations are our default. Clean, scalable, and brand-native. Used for illustrations, icons, diagrams, motion assets, and any visual that supports our design system.

Product Screenshots

Pixel images earn their place when showing real products. Actual screenshots, flows, and interfaces, not mockups. Trust comes from showing what we truly build.

Buzzvil team in the office

Our People & Space

Real photos of our office and members. Candid, unstaged, authentic. No stock photography. No getty images. Ever.

Don't: Stock photography

Don't: Stock photography

Don't: Staged scenes

Don't: Staged scenes

Don't: Generic illustrations

Don't: Generic illustrations

Downloads

Logo Generator

Customize and download the official brand assets. Select the type, choose a color, and get a high-resolution PNG.

Icon Generator

Search and generate consistent iconography. Optimized for reward, points, and game-related interfaces.

Coins

Isometric Projection

Generate an orthographic isometric projection of the logo mark. Outputs remain brand-safe, repeatable, and legible at small sizes.

512 × 512 (export: 1536 × 1536)
Want to meet us over coffee?