| Principle | Alignment question | Description |
|---|---|---|
| Simple | Designs should be immediately understandable. “Could my grandma use this without help?” | And if there are two ways to do something, pick the simpler. Users should never need prior knowledge, hidden tricks, or obsessive attention to navigate our product. Simple means clean, accessible, and predictable. Even with rich interactions or multi-mission flows, the path should stay obvious. |
| Iconic | Distinctive, high-quality, and instantly recognizable. “Is this something people would share or reference?” | We aim for designs that feel modern, confident, and relevant to our core audience, and that make other designers quietly jealous. If a screen looks like it could belong to any competitor, it is not finished. |
| Delightful | Make interactions feel enjoyable, not mechanical. “Is this genuinely fun and engaging?” | Delight is not decoration. It is well-timed motion, playful feedback, and micro-moments that make users feel rewarded and engaged. It should never get in the way of speed or clarity. |
| Purposeful | Every experience must deliver clear, meaningful value. “Is this worth the user's time, or are we just manufacturing effort for no reason?” | Time and effort spent by users must be worth it. We operate in a reward-driven ecosystem. Value must be obvious, immediate, and fair. If a flow feels like work, the reward doesn't justify it, or the benefit is not visible enough, we are wasting everyone's time. |
| Trustworthy | Users should always feel safe, oriented, and confident. “Would a normal user trust this flow from start to finish, or does it feel like we teleported them into a different product?” | Our experiences span app surfaces, web, and hybrid transitions. The design must stay unified and reliable so users never wonder if they've been dropped into a sketchy third-party zone. Trust comes from consistency, smoothness, tone, and predictable behavior. |
“Could my grandma use this without help?”
And if there are two ways to do something, pick the simpler. Users should never need prior knowledge, hidden tricks, or obsessive attention to navigate our product. Simple means clean, accessible, and predictable. Even with rich interactions or multi-mission flows, the path should stay obvious.
“Is this something people would share or reference?”
We aim for designs that feel modern, confident, and relevant to our core audience, and that make other designers quietly jealous. If a screen looks like it could belong to any competitor, it is not finished.
“Is this genuinely fun and engaging?”
Delight is not decoration. It is well-timed motion, playful feedback, and micro-moments that make users feel rewarded and engaged. It should never get in the way of speed or clarity.
“Is this worth the user's time, or are we just manufacturing effort for no reason?”
Time and effort spent by users must be worth it. We operate in a reward-driven ecosystem. Value must be obvious, immediate, and fair. If a flow feels like work, the reward doesn't justify it, or the benefit is not visible enough, we are wasting everyone's time.
“Would a normal user trust this flow from start to finish, or does it feel like we teleported them into a different product?”
Our experiences span app surfaces, web, and hybrid transitions. The design must stay unified and reliable so users never wonder if they've been dropped into a sketchy third-party zone. Trust comes from consistency, smoothness, tone, and predictable behavior.
Foundations
The shared substrate every Buzzvil surface stands on — tokens, voice, conventions.
Token model
Every Buzzvil surface uses the same 3-layer token cascade: primitives → semantic intent → component-specific. Values differ per medium (PointHub mobile-first, ads-center customer-facing, buzzvil-web brand expression), but the structure is shared.
Primitives
--bzv-color-primary-500Semantic intent
--bzv-color-action-primaryComponent
--button-bg-defaultWhen a designer or agent reads tokens in any consuming repo, the shape is the same. What changes is the brand or product context.
This is what makes Chameleon work — a single token cascade that can retheme any surface by swapping the semantic layer.
One token, every context
The source token carries no brand value. As it flows into each ecosystem, the semantic layer hydrates it with the right context: Buzzvil identity, the publisher brand a Mobile xp surface lives inside, or the B2B treatment of the admin layer. Same structure, different values.
Source token
--bzv-color-primaryBrand
Mobile xp
Self-serve
Buzzvil brand
Used across web, comms, PPTs.
Kakaopay
Publisher brand expression in PointHub.
Monimo
Themed via Chameleon to match publisher identity.
Naver Pay
Same structure, different brand values.
ads-center
Intentional B2B blue for admin density.
Components
Each ecosystem has its own component library. They consume the same token cascade and follow the same conventions, but split by context for meaningful reasons: brand surfaces serve content-rich web and comms, Mobile xp ships into publisher apps with Chameleon-driven theming, and self-serve carries B2B density. Three libraries, one architecture.
Layouts and primitives powering buzzvil-web (homepage, design portal, tech blog, KB, SDK docs) and brand comms.
Mobile-first components with Chameleon themability for PointHub publishers and demand surfaces.
Buzzvil internal · access requiredB2B components for ads-center and consolidating Dash modules.
Ecosystems
Three pillars, one architecture.
All three pillars consume the same token system, follow the same principles, and adopt similar API conventions where it makes sense. What flexes between them is visual values and surface-specific patterns — not the underlying structure.
Brand surfaces
External readers, communicators, partners. Buzzvil's public face.
Surfaces
buzzvil-web (homepage, design portal, tech blog, KB, design-library docs, SDK docs), PPTs, communication assets
Today
@buzzvil/components + @buzzvil/layouts (the brand-mediums packages, separate from the mobile design library). Storybook in progress.
Long-run
Consolidating into one brand-mediums package.
Shared with other pillars
Token architecture, 5 design principles, voice.
Distinct
Components for content-heavy, brand-forward surfaces. Logo and brand identity primitives live here.
Mobile xp
End users on mobile. Wherever Buzzvil meets a person's phone.
Surfaces
PointHub (kakaopay, kakaobank, kbank, kbstar, monimo, samsung-wallet), buzzbenefit, demand surfaces, Frontier products, and the SDK rendering layer.
Today
@buzzvil/design-library — covers product surfaces. Does not yet cover SDK primitives.
Long-run
One mobile-xp package, top to bottom: SDK primitives → product compositions → interaction modules.
Shared with other pillars
Token architecture, design principles, similar API conventions where useful.
Distinct
Mobile-first sizing, multi-publisher Chameleon themability, interaction modules. Chameleon as a brand trait was inspired by this pillar's reality.
Buzzvil internal · access required
Self-serve
Buzzvil's customers — advertisers, publishers, internal operators.
Surfaces
Dash family. ads-center is the consolidating seed; other Dash modules absorb over time.
Today
ads-center components (in the ads-center repo, not yet extracted as a shared package).
Long-run
A self-serve package consumed across all Dash surfaces.
Shared with other pillars
Token architecture, design principles, similar API conventions (Button, Input, Card exist in all three but tailored).
Distinct
Dense data tables, dashboards, B2B UI density. Identity-linked to the brand layer (logo, typeface) while keeping intentional B2B contrast (light primary blue). Chameleon-style theming intentionally not needed — admin-facing, not partner-themed.
Brand
Buzzvil's externally exposable identity — and the trait that makes it flexible.
Chameleon
Buzzvil is a chameleon brand. Being themed is core to who we are, not a feature bolted on. The trait was inspired by how our end-user products are built — each publisher carrying its own brand on the same structural foundation — and has flowed back up into how the parent brand presents itself.
Variables
Our products serve hundreds of partners, each with their own brand. Chameleon is our token-driven theming strategy: a single, structured set of design tokens that powers every surface. Colors, spacing, radii, shadows, typography. Fully customizable, always consistent.
Theme presets
Grab from URL (alpha, AI not connected)
Token set
color / theme
color / primary-opacity
Live preview
스카이라인 피트니스
인스타 팔로우하기
모닝브루 커피
앱 다운로드하면
블루웨이브 트래블
카카오톡 채널 추가하면
The Chameleon
The logo is chameleon-like. It adapts to its environment, taking on black or white depending on the background. While it can take on primary or secondary colors in specific partner contexts, we default to the monochrome usage to maintain our clean brand aesthetic.
Partner Context Examples
Logo Treatment
Masking (Image & Video)
As part of our chameleon philosophy, we allow image, illustration, or video injection inside our logo shape. Ensure sufficient contrast with the background.
3D Guidelines
We allow isometric 3D transformations to add depth. The aesthetic must remain abstract, simple, and tonal. Avoid free-form 3D distortion.
Clearspace
Always maintain generous clearspace around the logo to ensure legibility and impact.
Unacceptable Usage
To maintain brand integrity, avoid manipulating the logo in ways that compromise its legibility or form.
Grayscale
Our primary palette. We aim for a high-contrast, clean look using almost exclusively black and white tones.
Accent Red
Used sparingly for primary actions or critical alerts. Aim for <10% usage in any composition.
Accent Orange
Secondary accent color, complements the red. Use for banners or highlights.
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.
Primary: Inter
Our main typeface for all Latin text — headlines, body, navigation, and display. Clean, neutral, and highly legible at any size.
Ads That Work
Where user benefit meets advertiser success
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.
효과적인 광고
사용자 혜택과 광고주 성공이 만나는 곳. 깔끔하고 가독성 높은 한국어 타이포그래피.
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.
Product Backend Team
theme: 'dark',
version: 2.0
};
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.
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: Staged scenes — audiences can tell, and it undermines trust
Don't: Generic illustrations — they dilute what makes the brand distinctive
Voice
Five principles for how Buzzvil sounds.
Confident
State the position. Skip hedging.
Specific
Concrete numbers and names. Not generalities.
Direct
Get to the point in the first sentence.
Human
Sound like a person, not a press release.
Playful
Earned wit beats forced cleverness.
Tools
Generate brand assets directly: logos, icons, isometric mockups. Outputs match the tokens, type, and color rules above.
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.
Isometric Projection
Generate an orthographic isometric projection of the logo mark. Outputs remain brand-safe, repeatable, and legible at small sizes.
Brand expression in production. The Storybook for @buzzvil/components and @buzzvil/layouts (the brand-mediums packages, not the mobile design library) is being built.
Storybook in progress