BAZZIBA!

Overview

BAZZIBA! is a vibrant, community-powered contest and video platform celebrating Italian entertainment, music, and creative talent. The brand embodies a playful, energetic aesthetic rooted in 'Vibrant Minimalism'—where a bold, saturated primary red (#ce1e1e) cuts through a clean, light neutral canvas (rgb(246, 246, 246)), creating an immediate sense of excitement and urgency. The interface prioritizes clarity and accessibility, with generous whitespace and a warm, approachable tone that invites participation. Users feel welcomed to share, vote, and celebrate creative work in a judgment-free environment.

The brand voice is enthusiastic yet grounded: conversational, encouraging, and never condescending. Vocabulary leans toward action-oriented language ('Accedi'—Log In, 'Contest in corso'—Contest Underway) paired with emojis (📣) to signal energy and immediacy. Tone example: 'Vota il tuo preferito e fai sentire la tua voce'—Vote for your favorite and make your voice heard. The personality is that of a trusted friend who celebrates your creativity and makes participation feel effortless.

Colors

The color system is anchored by a high-saturation primary red (#ce1e1e, rgb(206, 30, 30)) used exclusively on primary CTAs ('Accedi' button), active states, and brand-critical interactive elements. This red is warm, confident, and impossible to ignore—it signals 'click me' without aggression. Secondary blue (#0d6efd) supports informational elements, links, and secondary actions, providing visual contrast and hierarchy. Tertiary gray (#6c757d) grounds the system as a neutral accent for metadata, disabled states, and supporting UI.

The surface stack is deliberately light and airy: surface-bright (#ffffff) for cards and elevated content, surface (#f6f6f6) as the page background, and surface-container-high (#efefef) for hover states and subtle depth. On-surface text is a near-black (#212529,

Typography

The type system pairs Poppins (display, headlines, labels) with Lato (body, metadata) to create a dynamic yet readable hierarchy. Poppins at 600–700 weight conveys energy and authority in headlines (40px, 28px, 20px) and labels (14px, 12px), while Lato's 400 weight at 15–18px ensures body text remains warm and approachable. Letter-spacing is tightened on display and headlines (-0.04em to -0.01em) to increase visual impact, while body text uses +0.01–0.02em for breathing room. Line heights are generous (1.5–1.7x) to support scannability on mobile. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (12px) overlaid on video thumbnails or dark backgrounds to ensure contrast without sacrificing elegance.

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive structure that adapts from desktop (4-column video grids) to tablet (3 columns) to mobile (1 column). The page background is surface (#f6f6f6), providing a soft, neutral canvas that makes content cards and video thumbnails pop. Spacing follows a semantic scale: lg (40px) separates major sections ('TENDENZE', contest blocks), md (24px) is used for card padding and internal component spacing, and sm (12px) for tight groupings within cards. The header uses a semi-transparent white (rgba(255, 255, 255, 0.7)) with 22.5px vertical padding to float above content without blocking it. Container gutters are 24px on desktop, collapsing to 12px on mobile to maximize content width on small screens.

Elevation & Depth

Depth is achieved through subtle, layered shadows and strategic use of borders rather than dramatic drop-shadows. Base cards use elevation-sm (0 2px 4px rgba(0, 0, 0, 0.1)) to separate from the background, creating a gentle lift. On hover, cards transition to elevation-md (0 4px 8px rgba(0, 0, 0, 0.2)) and shift up 2px (transform: translateY(-2px)) over 200ms, signaling interactivity without jarring movement. Video grid items have a 1px solid border in outline (#dee2e6) paired with the sm shadow for definition. Badges and overlays (like the rank and like-count badges on video thumbnails) use n

Shapes

The shape language is 'Friendly Precision'—combining soft, approachable curves with clean, intentional geometry. Primary CTAs use border-radius: 9999px (full pill shape) to signal warmth and approachability; secondary buttons use 0px (sharp corners) to denote utility and secondary importance. Input fields and search boxes use 35px border-radius (nearly full) to match the primary button aesthetic, creating a cohesive interaction zone. Cards and standard containers use 0.75rem (12px) border-radius for a balanced, modern feel—soft enough to feel contemporary, sharp enough to maintain clarity. Bad

Components

Action Elements Primary buttons use #ce1e1e background, white text, 13.125px Poppins 600, 35px border-radius, and 8px 24px padding (40px height). On hover, background shifts to #b01818 with a subtle scale(1.02) transform over 150ms, creating tactile feedback. Secondary buttons (e.g., 'Reset') use #111111 background, white text, 12.75px Poppins 600, 0px border-radius, and 3px 7.5px padding (28px height) for a compact, utilitarian feel. Ghost buttons have transparent background, primary red text, 1px primary border, and primary-container hover state. All buttons use cursor: pointer and transition: all 0.15s ease-in-out for consistency.

Containers & Surfaces Cards use white background (#ffffff), 12px border-radius, 24px padding, 1px #dee2e6 border, and elevation-sm shadow (0 2px 4px

Do's and Don'ts

**Do**

• Do use the primary red (#ce1e1e) exclusively on CTAs and active states—it's the brand's signature accent and must remain rare and impactful.
• Do pair Poppins headlines with Lato body text to create a dynamic, energetic hierarchy that feels both modern and approachable.
• Do apply generous whitespace (lg spacing: 40px) between major sections to maintain clarity and reduce cognitive load on the light background.
• Do use pill-shaped buttons (border-radius: 9999px) for primary actions to signal warmth and lower friction for user participation.
• Do layer shadows subtly (elevation-sm on cards, elevation-md on hover) with 200ms transitions to create tactile, responsive feedback without visual noise.

**Don't**

• Don't use the primary red on secondary elements, backgrounds, or decorative accents—reserve it for high-priority CTAs only to maintain visual hierarchy.
• Don't apply heavy shadows (box-shadow: 0 16px 40px) or blur effects; BAZZIBA! is clean and direct, not atmospheric or glassmorphic.
• Don't mix border-radius styles within the same component family (e.g., don't use 0px and 9999px on different primary buttons)—consistency builds trust.
• Don't reduce padding or line-height below the specified minimums (5.625px padding on inputs, 1.5x line-height on body) to maintain accessibility and scannability.
• Don't override the Poppins/Lato pairing with system fonts or serif typefaces—the specific font combination is core to the brand's energetic, modern voice.