Kick

Overview

Kick is a high-energy live streaming platform built for the next generation of creators and viewers. The design system embraces a "Neon-Dark Minimalism" aesthetic—a bold fusion of deep charcoal backgrounds (rgb(9, 11, 15)) with electric lime-green accents (rgb(83, 252, 24)) and cyan highlights (rgb(0, 241, 255)) that evoke the intensity and immediacy of live gaming and creative content. The visual language prioritizes clarity and speed: every interaction feels responsive, every CTA pops with urgency, and the interface recedes to let content shine. The emotional response is one of excitement tempered by accessibility—users feel the energy without being overwhelmed.

Kick's voice is direct, irreverent, and community-focused. The tone avoids corporate polish in favor of authenticity: "Watch now," not "Explore our curated selection." Vocabulary leans into gaming and streaming culture ("LIVE," "Subscriber goal," "Chat"), and the brand personality celebrates the chaotic, unfiltered nature of live content. Example sentence in Kick's voice: "9.7K watching—jump in before the raid."

Colors

The color system is built on a dark-first philosophy with three strategic accent colors. **Primary (rgb(83, 252, 24) / #53fc18)** is the brand's signature neon-green, deployed on all CTAs ("Sign Up," "Watch now"), live badges, and interactive highlights. It commands attention without aggression—a color that feels earned, not forced. **Secondary (rgb(0, 241, 255) / #00f1ff)** is a vibrant cyan used for secondary actions, metadata highlights, and status indicators; it provides visual rhythm and prevents the interface from feeling monochromatic. **Tertiary (rgb(56, 96, 190) / #3860be)** is a deep blue reserved for tertiary UI elements and data visualization. The surface stack is anchored in near-black (rgb(9, 11, 15)) for the base, with carefully calibrated container layers (surface-container

Typography

The type system uses Inter exclusively, a geometric sans-serif that feels contemporary and legible at all sizes. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments and brand statements; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) introduces subsections; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry narrative content and descriptions. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) are used for UI labels, badges, and metadata. The hierarchy communicates urgency through weight and size: a "LIVE" badge in label-sm with 600 weight feels immediate, while body text at 400 weight recedes. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm) overlaid

Layout

Kick uses a 12-column fluid grid with a max-width of 1440px, allowing content to breathe on desktop while remaining responsive on mobile. The page rhythm is driven by a 16px gutter (spacing.gutter) between columns and 24px (spacing.md) for section separation. The left sidebar (248px fixed on desktop) houses navigation and recommended channels; the main content area expands to fill available space; the right sidebar (280px on desktop) shows live chat and event details. White-space is used strategically: 40px (spacing.lg) separates major sections (e.g., "Top Live Categories"), while 12px (spacing.sm) groups related elements (e.g., streamer name + game title). Container max-width of 1440px prevents the layout from becoming unwieldy on ultra-wide displays. The spacing scale is semantic: xs (4p

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic layering, not through color gradients. Level 1 (Base): the dark background (rgb(9, 11, 15)) with no shadow. Level 2 (Standard Cards): surface-container (rgb(23, 26, 28)) with a 1px border at rgba(71, 80, 84, 0.5) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). Level 3 (Elevated/Modals): surface-container-high (rgb(36, 39, 41)) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) and a 1px border at rgba(159, 166, 173, 0.3). Hover states on cards trigger a subtle lift: transform: translateY(-4px) with a transition of 200ms ease, acco

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used to soften the intensity of the dark theme and neon accents, but never so much that the interface feels playful or casual. Buttons use rounded.DEFAULT (0.5rem / 8px) for a modern, approachable feel; cards and containers use rounded.lg (1rem / 16px) to create breathing room; input fields use rounded.full (9999px) for a distinctive, pill-shaped appearance that signals interactivity. The search input at the top of the page exemplifies this: 50% border-radius with 6px 15px padding creates a welcoming, focused input zone. Stream thumb

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses rgb(83, 252, 24) background with rgb(11, 11, 12) text, 6px 12px padding, 32px height, and 4px border-radius. On hover (button-primary-hover), the background shifts to rgb(53, 168, 13) with a 200ms ease transition, signaling state change without jarring the user. The secondary button (button-secondary) is transparent with a 1px outline-variant border and primary text color; on hover, it gains a surface-container-high background. Both buttons use label-md typography (14px, 600 weight) for visual consistency.

Containers & Surfaces Cards (card) are the foundational container: surface-container background (rgb(23, 26, 28)), rounded.lg (1rem), 24px padding, and a 1px outline-variant b

Do's and Don'ts

**Do**

• Do use primary (rgb(83, 252, 24)) exclusively on CTAs and live indicators—it's the brand's most recognizable element and should never be diluted.
• Do apply the md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.1)) to cards at rest and the lg shadow (0 16px 40px rgba(0, 0, 0, 0.15)) on hover to create clear depth hierarchy.
• Do use Inter at 600 weight for all labels and buttons—the heavier weight signals interactivity and urgency.
• Do maintain the 16px gutter and 24px section spacing to ensure the layout breathes and doesn't feel cramped on any viewport.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to make the interface feel responsive and polished.

**Don't**

• Don't use secondary (rgb(0, 241, 255)) or tertiary (rgb(56, 96, 190)) as primary CTAs—they dilute the brand's signature neon-green identity.
• Don't apply shadows to elements on the dark background without a 1px border; the shadow alone will be invisible and the element will feel disconnected.
• Don't use rounded corners larger than 1.5rem (rounded.xl) on any component—it undermines the platform's technical credibility.
• Don't set text smaller than 12px (label-sm) or larger than 60px (display) without explicit design approval; the type scale is carefully calibrated for readability.
• Don't remove the 200ms ease transition from interactive elements; instant state changes feel broken and reduce perceived polish.