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.

Adaptive
Chameleon 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.

Motion
Expressive 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.

Real
Real, 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.

Clarity
Clarity & 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.

System
One 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 typeface roles, 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: Inter

Our main typeface for all Latin text — headlines, body, navigation, and display. Clean, neutral, and highly legible at any size.

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: Noto Sans KR

Korean companion typeface. Pairs with Inter for bilingual layouts, maintaining visual harmony across languages in headings and body text.

Heading / Bold / 24px

효과적인 광고

Body / Regular / 16px

사용자 혜택과 광고주 성공이 만나는 곳. 깔끔하고 가독성 높은 한국어 타이포그래피.

Mono: Anonymous Pro / 나눔고딕코딩

Monospace is a brand decision, not a technical default. It signals data precision and trust — core to how Buzzvil communicates authority. You'll see it in dashboards, metrics, kickers, labels, and code.

Kicker / Bold / 14px

Product Backend Team

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

Imagery

“Ideas in motion, teams in tension”

Why Motion Comes First

Whether you're building a deck, designing a campaign, or drafting a blog post — these principles help anyone creating visual content for Buzzvil stay consistent and on-brand.

  • Motion-first: vector, Lottie, and code-driven visuals capture the energy of the Buzzvil brand.
  • Photography and screenshots are powerful when they show something real — our product, our people, our space.

Vector & Lottie First

For presentations, marketing pages, and product visuals — prioritize SVG, vector artwork, and Lottie animations. They're scalable, brand-native, and always crisp.

Real Product, Real Trust

When showcasing what we build, use actual screenshots and interfaces. Real product visuals build credibility far better than polished mockups.

Buzzvil team in the office

Authentic People & Places

Photos of our team and office reflect who we actually are — candid, natural, and genuine. Authenticity is a brand value, not just a design preference.

Don't: Stock photography — doesn't reflect our actual team and culture

Don't: Stock photography — doesn't reflect our actual team and culture

Don't: Staged scenes — audiences can tell, and it undermines trust

Don't: Staged scenes — audiences can tell, and it undermines trust

Don't: Generic illustrations — they dilute what makes the brand distinctive

Don't: Generic illustrations — they dilute what makes the brand distinctive

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)