Craft
Principles
The shared rules that keep Buzzvil coherent across brand and product.
| Principle | Alignment question | Description |
|---|---|---|
| Simple | Designs should be immediately understandable. “Could a first-time user do 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 other designers admire. A screen that could belong to any competitor needs more work. |
| Delightful | Make interactions feel enjoyable. “Is this genuinely fun and engaging?” | Delight 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?” | 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 is too small for the effort, or the benefit is hard to see, we are wasting everyone's time. |
| Trustworthy | Users should always feel safe, oriented, and confident. “Would a first-time user trust this flow from start to finish?” | Our experiences span app surfaces, web, and hybrid transitions. The design must stay unified and reliable so users always know they are in the same product. Trust comes from consistency, smoothness, tone, and predictable behavior. |
“Could a first-time user do 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 other designers admire. A screen that could belong to any competitor needs more work.
“Is this genuinely fun and engaging?”
Delight 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?”
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 is too small for the effort, or the benefit is hard to see, we are wasting everyone's time.
“Would a first-time user trust this flow from start to finish?”
Our experiences span app surfaces, web, and hybrid transitions. The design must stay unified and reliable so users always know they are in the same product. Trust comes from consistency, smoothness, tone, and predictable behavior.
Foundations
The shared base every Buzzvil surface stands on: tokens, voice and 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). 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.
Payments partner
Publisher brand expression in PointHub.
Financial app partner
Themed via Chameleon to match publisher identity.
Bank partner
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, SDK docs, brand Storybook) and brand comms.
Tokens and the brand kit for mobile surfaces, with Chameleon theming. The component tier is frozen, and product surfaces build with components in their own repos.
B2B components for ads-center and admin tools.
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 changes between them is visual values and surface-specific patterns. The underlying structure stays the same.
Brand surfaces
External readers, communicators, partners. Buzzvil's public face.
Surfaces
buzzvil-web (homepage, design portal, tech blog, SDK docs, brand Storybook), PPTs, communication assets
Today
@buzzvil/components + @buzzvil/layouts, the brand-mediums packages. Storybook live.
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 inside many partner apps, buzzbenefit, demand surfaces, Frontier products and the SDK rendering layer.
Today
Tokens and the brand kit in @buzzvil/design-library (component tier frozen). Product surfaces build with components in their own repos.
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.
Self-serve
Buzzvil's customers: advertisers, publishers and internal operators.
Surfaces
Admin tools. ads-center leads, and other admin tools follow over time.
Today
ads-center components, which live in the ads-center repo.
Long-run
A self-serve package shared across admin tools.
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) with an intentional B2B contrast (light primary blue). These surfaces face admins, so they skip Chameleon-style partner theming.
Brand
Buzzvil's public identity, and the trait that makes it flexible.
Chameleon
Buzzvil is a chameleon brand. Being themed is core to who we are. The trait comes from how our end-user products are built: each publisher carries its own brand on the same structural foundation. The parent brand now presents itself the same way.
Variables
Our products serve many 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, color extraction only)
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.
Violet & Rose
Six accents for orbs, illustrations, fine lines, and small details. Keep surfaces, body text, and everyday logos in grayscale.
Blend Violet into Rose at 115° for our orbs and animated lines. Keep the same colors; let the form fit each medium.
Use Violet Ink for accent text on light surfaces and Lilac on dark. Reserve red for errors and negative examples.
Identity System 26.2: 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. It signals data precision and trust, which are 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.
Authentic People & Places
Photos of our team and office reflect who we actually are: candid, natural and genuine. Authenticity is a brand value.
Don't: Stock photography. Show our real team and culture.
Don't: Staged scenes. Audiences notice them, and trust drops.
Don't: Generic illustrations. They blur what makes the brand distinctive.
Voice
Five principles for how Buzzvil sounds.
Confident
State the position. Skip hedging.
Specific
Concrete numbers and names.
Direct
Get to the point in the first sentence.
Human
Sound like a person talking to a person.
Playful
Wit that fits the moment.
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.
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 packages behind our brand surfaces, is live.
Storybook live