VERSION 1.0.0

BuzzVibe Theme Documentation

Welcome to the definitive guide for implementing and scaling the BuzzVibe design system. High-energy, scroll-stop UI for the modern web.

bolt

Quick Start

Copy the Tailwind config and start building immersive layouts in seconds.

Getting Started

Installation

The BuzzVibe theme requires Tailwind CSS v3 and the latest Material Symbols library. Follow these steps to initialize the environment:

# 1. Install Tailwind CSS via CDN or NPM

# 2. Add the Material Symbols stylesheet to <head>

Minimum Requirements

Modern Browser (Chrome 90+, Safari 14+)
Tailwind CSS Configuration Support
Material Symbols connectivity

Recommended Setup

Dark Mode preferred (class="dark")
Viewport with min-width 320px
Anton Font family for headings

Design System

BuzzVibe's identity is built on a foundation of High-Contrast Bold and Glassmorphism.

Typography Hierarchy

Display-2xl (Anton)

SCROLL STOP.

Headline-lg (Anton)

VIRAL CONTENT ONLY

Body-lg (Be Vietnam Pro)

The future of now—fast, immersive, and highly shareable content for the next generation.

Visual Depth

We utilize Tonal Layering and Glassmorphism instead of drop shadows.

Level 1: Base Canvas

Level 2: Surface Card

Level 3: Overlay/Modal

Customization

Modifying the Tokens

To adjust the brand colors, modify the `tailwind.config` located in the header of your document. Use the following mapped keys for global updates:

Primary

#ecb2ff (Electric Purple)

Secondary

#ffb1c3 (Neon Pink)

Tertiary

#00dbe9 (Cyber Cyan)

Font Swapping

To change fonts, update the `fontFamily` object in the Tailwind config and update the Google Fonts link in your head. Default mapping:

Class Key	Default Font	Best Alternative
font-headline-*	Anton	Inter Black, Impact
font-body-*	Be Vietnam Pro	Inter, Roboto

UI Components

TopNavBar Shell

Sticky glassmorphism header with reactive navigation links and branded elevation.

Bento Modules

Asymmetric grid layouts designed for rapid scanning and diverse content types.

Component Rules

check_circle
Prohibit Borders: Navigation shells should not use `border-t` or `border-b` for separation; use tonal shifts or glows instead.
check_circle
Active State: Highlight the current active tab with the primary gradient and a pulse animation.
check_circle
Glass Integrity: All interactive cards must feature a 1px white border at 10% opacity.

FAQs & Credits

Is this theme fully responsive? expand_more

Yes. The theme follows a single-column flow for mobile (optimized for vertical scrolling) and a 12-column grid for desktop. Navigation shells automatically pivot from BottomBar (Mobile) to TopBar (Desktop).

Which browsers are supported? expand_more

BuzzVibe leverages standard CSS Grid, Flexbox, and Backdrop Filter properties. It is supported by all modern versions of Chrome, Safari, Edge, and Firefox.

Can I use this for commercial projects? expand_more

BuzzVibe is licensed for commercial use as long as the original copyright remains intact in the documentation and source files.

Credits

Typography

Headers: Anton (Google Fonts)

Body: Be Vietnam Pro (Google Fonts)

Visuals

Icons: Material Symbols Outlined

Imagery: Unsplash (Creative Commons)

System: Champion Design Lab