Kick DESIGN.md

1. Visual Theme & Atmosphere

Kick's iOS app has one of the most aggressive, single-minded color identities of any major app: a near-black canvas (#0E0E10) with a single electric, almost-radioactive lime green (#53FC18) doing absolutely everything. Kick is a live-streaming platform — a creator-friendly Twitch competitor — and its whole visual language is built to feel fast, loud, and live. The green isn't a tasteful accent dropped in occasionally; it is the brand. It owns the logo, every primary CTA (Follow, Subscribe, Go Live), the active bottom-tab icon, links, online-avatar rings, and progress states. Everything else is a tightly controlled greyscale (#0E0E10 → #161618 → #1F1F23 → #2A2A2E), specifically so the green reads like a neon sign in a dark room. The canvas is #0E0E10 rather than pure #000000 on purpose — #53FC18 on true black vibrates uncomfortably, so the slight lift tames it just enough.

The signature screen is the live-stream watch page. It has three stacked parts: (1) the video player on top (16:9, with a LIVE pill, viewer count, and minimal overlay controls); (2) a streamer bar — avatar with a green online ring, streamer name with a green verified check, category + viewer count, and a green Follow button; and (3) the chat panel, which fills the rest of the screen and is, along with the green, the second pillar of Kick's identity. Kick's chat is dense, fast, and role-colored: usernames render in different colors by role (moderator #3EA6FF, subscriber #FFC700, VIP #FF4FD8, regular users in a randomized green-leaning palette), each prefixed by a tiny badge chip (MOD / a sub-month number / VIP / OG / VERIFIED), with custom emote sprites rendered inline at ~18pt. The chat input sits at the bottom with a green send button. This watch screen — video + streamer bar + live chat — is what makes a Kick clone recognizably Kick.

The atmosphere is streamer-first, fast, and a little raw. Kick deliberately positions itself as the less-corporate streaming platform, and the UI reflects that: high contrast, big bold weights, no soft gradients on chrome, no rounded-pastel friendliness — just black, white, grey, and that one screaming green. Browse/Home is a grid of live channel cards (16:9 thumbnail with a red LIVE tag + viewer count, streamer avatar, title, category). Typography is a tight grotesque (Inter is the closest free analog): heavy 800–900 weights for titles and the wordmark, 600/400 for chat (username semibold, message regular), ALL-CAPS tracked micro-labels for LIVE/badges. The result feels like a broadcast control surface — minimal, monochrome, and electric.

Key Characteristics:

• Near-black canvas (#0E0E10) — not pure black (keeps the green from vibrating); dark-only, no light mode
• A single electric lime green (#53FC18) does everything — logo, all primary CTAs, active tab, links, online rings
• Strictly monochrome everywhere else (greys #161618/#1F1F23/#2A2A2E) so the green screams
• Signature screen = video player + streamer bar + live chat panel stacked vertically
• Role-colored chat usernames — mod #3EA6FF, sub #FFC700, VIP #FF4FD8, regular randomized green-ish
• Tiny badge chips before usernames — MOD / sub-month number / VIP / OG / VERIFIED
• Custom emote sprites rendered inline in chat (~18pt)
• Red #FF1F44 LIVE pill + white viewer-count chip on every stream and channel card
• Green Follow / Subscribe buttons; green online ring around live streamers' avatars
• Live channel cards — 16:9 thumbnail + LIVE tag + viewer count + avatar + title + category
• Heavy, tight grotesque type (800–900 titles); chat username 600 / message 400
• Bottom tabs: Home / Browse / Following / Clips / Profile — active icon Kick Green

2. Color Palette & Roles

Primary (Brand & Interactive)

• Kick Green (#53FC18): THE brand color — logo, Follow/Subscribe/Go-Live buttons, active tab icon, links, online-avatar ring, progress, focus. Text on it is #0E0E10.
• Kick Green Pressed (#45D912): Pressed state of green buttons.
• Kick Green Deep (#00E701): Alternate/legacy green for subtle accents, "Live" emphasis, hover lift.

Canvas & Surfaces (Dark — the only mode)

• Canvas Near-Black (#0E0E10): Primary app background (NOT pure black — that makes the green vibrate).
• Surface 1 (#161618): Cards, the streamer bar, list rows, sheets.
• Surface 2 (#1F1F23): Elevated surfaces, the chat input field, pressed rows, chips.
• Surface 3 (#2A2A2E): Highest elevation — menus, popovers, modals, outline-button borders.
• Divider (#2D2D31): Hairline separators (chat header underline, streamer-bar border, list rows).

Text

• Text Primary (#FFFFFF): Titles, streamer names, chat message body, primary content.
• Text Secondary (#A6A6AD): Category lines, metadata, chat header, secondary labels.
• Text Tertiary (#6E6E76): Placeholders, timestamps, disabled, very low-emphasis.
• Chat Body (#E4E4E9): Chat message text (slightly softer than pure white so usernames pop).
• Text On-Green (#0E0E10): Text on green buttons/badges (the canvas near-black).

Chat Role Colors (a defining system)

Semantic & Accent

• Live Red (#FF1F44): The universal LIVE pill (player, channel cards) — always red, never green.
• Success Green (#53FC18): Reuses Kick Green for "Followed", "Subscribed" confirmations.
• Error Red (#FF4A4A): Stream errors, failed actions, destructive confirms.
• Highlight / Mention (#53FC18 at 12% behind a chat line): when you're @-mentioned, the message row gets a faint green wash + a 2pt green left border.

Note on Theme

Kick ships dark-only. There is no light mode; the near-black canvas is the brand environment (it's tuned specifically so #53FC18 doesn't strobe). Do not invent a light palette — defer to the OS for system surfaces.

3. Typography Rules

Font Family

• Primary: Inter (by Rasmus Andersson, SIL OFL) — the closest free analog to Kick's tight, modern grotesque brand face. Heavy weights (800–900) reproduce the bold, broadcast feel of the wordmark and titles.
• Alternative: Archivo (Google Fonts, SIL OFL) — acceptable substitute, slightly more geometric.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Numerals: Tabular figures for viewer counts and sub-month badge numbers so they don't jitter as they tick.

Hierarchy

Principles

• Heavy and broadcast-loud: titles and the wordmark are 800–900 — Kick's type is bold and confident, never light or delicate.
• Chat is the type-density workhorse: username 700 + message 400 at 13pt with 1.35 line-height — optimized for fast-scrolling readability, not elegance.
• ALL CAPS for status only: LIVE, MOD, VIP, OG are uppercase + positively tracked (+0.5pt); message text and titles are sentence case.
• Tabular numerals for counts: viewer counts and sub-month numbers use tabular figures so they don't shift as they update live.
• Cool neutral secondary: metadata is #A6A6AD (a neutral cool grey) — the only "color" besides green/role colors is the role-coded chat.
• Dynamic Type: titles, body, descriptions scale; chat text scales to L then truncates the username if needed; LIVE/badge/viewer/tab labels stay FIXED.

4. Component Stylings

Buttons

Primary Button (Follow / Go Live)

• Shape: Rounded rectangle, 6pt corner radius (Kick uses tighter radii than most streamers)
• Background: #53FC18 (Kick Green)
• Text: #0E0E10, Inter 15pt weight 800
• Height: 44–48pt; padding 13pt vertical, 28pt horizontal
• Pressed: background #45D912 + scale 0.98
• Followed state: fills #1F1F23, text #FFFFFF, 1pt #2A2A2E border, label "Following"

Subscribe Button (high-value action)

• Background: #1F1F23
• Border: 1pt #53FC18
• Text: #53FC18, Inter 14pt weight 800 (often with a star/gem leading glyph)
• Corner radius: 6pt; height 44pt
• Pressed: background #252529
• Active "Subscribed": solid #53FC18, #0E0E10 text

Secondary / Outline Button (Share / Clip / Settings)

• Background: transparent
• Border: 1pt #2A2A2E
• Text + icon: #FFFFFF, Inter 14pt weight 700
• Corner radius: 6pt; height 44pt
• Pressed: background #1F1F23

Text Button (Go Live / See All / Watch Replay)

• Font: Inter 14pt weight 700
• Color: #53FC18
• No background, no underline
• Pressed: opacity 0.7

Chat Send Button

• 38×38pt, #53FC18 fill, 8pt radius, #0E0E10 paper-plane glyph 16pt
• Disabled (empty field): #1F1F23 fill, #6E6E76 glyph

Core Atoms

Chat Message (a defining unit)

• Inline flow: optional badge chip(s) → username (role-colored, 13pt weight 700) → : → message text (#E4E4E9 13pt weight 400) with inline emote sprites (~18×18pt, 3pt radius)
• 9pt vertical gap between messages, 14pt horizontal padding
• Badge chip: ~8–10pt weight 900 text, 1–3pt padding, 3pt radius, role fill (see role table)
• @-mention of you: row gets #53FC18 @ 12% background + 2pt #53FC18 left border
• System line (e.g. "X subscribed for 6 months"): centered, #A6A6AD 12pt, faint #1F1F23 pill
• Long-press a message → context sheet (Reply, Mention, Timeout/Ban if mod, Copy)

Live Channel Card

• 16:9 thumbnail, 8pt corner radius
• Top-left LIVE tag: #FF1F44 fill, white 8pt weight 800 caps, 2×6pt padding, 3pt radius
• Bottom-left viewer count chip: rgba(0,0,0,0.6) fill, white 9pt weight 700, "24.8K"
• Below: a row of 30pt avatar (green online ring) + VStack of title (13pt weight 700, 1 line) + "Streamer · Category" (11pt #A6A6AD)
• Pressed: thumbnail scales 0.98, brief

Streamer Bar (watch page)

• 40pt circular avatar with a 2pt #53FC18 online ring
• Streamer name 16pt weight 700 + green verified check (13pt)
• Category + viewer line 12pt #A6A6AD
• Trailing green Follow button
• 0.5pt #2D2D31 bottom border

Video Player Overlay

• Top-left LIVE pill: #FF1F44 fill, white dot + "LIVE" 10pt weight 800
• Top-right viewer chip: rgba(0,0,0,0.55), eye glyph + count
• Bottom controls: play/pause, volume, spacer, fullscreen — white 18pt glyphs, fade after 3s idle
• Tap toggles controls; double-tap seeks (VOD) / nothing (live)

Badge Chip (standalone)

• MOD #3EA6FF/#06121F, SUB+# #FFC700/#1A1500, VIP #FF4FD8/#2A0022, OG #53FC18/#0E0E10, VERIFIED #2A2A2E/#FFFFFF
• 10pt weight 900, 3px 9px padding, 4pt radius (standalone) / tighter inline

Navigation

Bottom Tab Bar

• Height: 52pt + safe-area home indicator
• Background: rgba(14,14,16,0.96) with backdrop-filter: blur(20px) saturate(180%), 0.5pt top border #2D2D31
• Tabs (5): Home, Browse, Following, Clips, Profile
• Icon size: 22pt; label Inter 10pt weight 600
• Active: icon + label in #53FC18, icon filled
• Inactive: #6E6E76
• No pill indicator — color + fill change only

Top Nav (Home / Browse)

• Leading: KICK wordmark (logo green block + white "KICK")
• Trailing: search + notifications (white 22pt) — or a "Go Live" green text button for creators
• #0E0E10 background, no border until scrolled

Watch Page Nav

• Minimal: the video itself is the top; a back chevron + share/cast float over the player (white 24pt, in 32pt rgba(0,0,0,0.4) circular scrims)

Input Fields

Search Bar

• Height: 44pt; background #1F1F23; corner radius 8pt
• Leading magnifyingglass 16pt #6E6E76
• Placeholder "Search channels, categories" 14pt #6E6E76
• Text #FFFFFF 15pt; focus → 1.5pt #53FC18 border

Chat Input

• Height: 38pt; background #1F1F23; corner radius 8pt; 12pt horizontal padding
• Placeholder "Send a message" 13pt #6E6E76
• Trailing green send button (see Chat Send Button)
• Above it (optional): emote/sticker picker toggle 18pt #A6A6AD

Distinctive Components

Live Chat Panel (the signature surface)

• Header: "STREAM CHAT" 12pt weight 800 caps #A6A6AD + a settings gear (chat modes: sub-only, slow, emote-only)
• Scrolling message list (auto-scroll to bottom unless user scrolled up → "↓ More messages" pill in green)
• Input dock with green send. The role-colored usernames + badge chips + inline emotes ARE the signature.

Role Badge System

• The MOD/SUB#/VIP/OG/VERIFIED chip + matching username color, applied consistently in chat, viewer list, and on profiles — Kick's most distinctive micro-system.

Emote Sprite

• Custom per-channel/global emotes rendered inline in chat and in the emote picker at ~18pt, 3pt radius; the picker is a grid sheet with channel/global tabs.

Online Avatar Ring

• A 2pt #53FC18 ring around a streamer's avatar means "live now" — used on the streamer bar, following list, and channel cards.

Live Channel Grid (Browse/Home)

• Two-column grid of Live Channel Cards (see atom), grouped by "Following · Live", "Categories", "Recommended".

Subscribe Sheet

• Bottom sheet: streamer header, tier options (cards with price + perks), a big green "Subscribe" CTA, "Use Kick Coins" secondary; confirm → #53FC18 check + haptic.

Clip Card

• 16:9 thumbnail with a play glyph + duration chip, title, streamer, view count — used in the Clips tab and shared deep-links.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 6, 8, 9, 12, 14, 16, 20, 24, 32, 40, 48
• Screen horizontal inset: 16pt
• Chat horizontal padding: 14pt; message vertical gap: 9pt
• Live-card grid gutter: 12pt; 2 columns on phone
• Streamer bar padding: 12pt vertical, 14pt horizontal

Grid & Container

• Watch page: full-bleed 16:9 video → streamer bar → chat fills remaining height (chat is a flexible-height region, never fixed)
• Browse/Home: 2-column live-card grid, 12pt gutter, 16pt screen inset
• Landscape watch: video left (~65%) + chat docked right (~35%) as a side panel
• iPad: 3-column live-card grid; watch page can show video + persistent side chat in portrait too

Whitespace Philosophy

• Chat density is the point: messages are tightly packed (9pt gap) — a fast live chat should show many lines; this is deliberate, not cramped.
• Monochrome restraint: the UI is intentionally sparse and grey so the single green and the role colors carry all the visual energy — don't add decorative color.
• Video first: the player is always the largest element on the watch page; chrome is minimal and fades.
• Cards breathe a little: the browse grid has comfortable 12pt gutters so thumbnails read clearly, but stays edge-to-edge dense.

Border Radius Scale

• Square (0pt): video player edges, dividers
• Tiny (3pt): badge chips, emote sprites, LIVE/viewer tags
• Small (6pt): buttons (tighter than most streamers — a Kick trait), pills
• Standard (8pt): cards, thumbnails, search/chat input, chat-send button
• Comfortable (12pt): bottom sheets, modals (top corners)
• Pill (500pt): "↓ More messages" pill, filter chips
• Circle (50%): avatars, the online ring, the live dot

6. Depth & Elevation

Kick is flat and high-contrast. Elevation is conveyed by surface lightening on the near-black field; shadows are minimal (the aesthetic is a flat broadcast UI, not a soft layered one). The green never casts a glow on chrome — it's a flat fill.

Shadow Philosophy: Kick's surfaces are flat broadcast panels — hierarchy comes from the greyscale step and the green, not from soft shadows. Shadows appear only on genuinely floating UI (sheets, the emote picker, context menus). The video overlay uses a subtle bottom vignette for control legibility, nothing more.

Motion

• New chat message: messages append at the bottom with a 120ms fade-in + tiny 4pt slide-up; the list auto-scrolls (spring, 200ms) unless the user has scrolled up
• "↓ More messages" pill: appears when scrolled up; tap → smooth-scroll to bottom (300ms) + fade pill out
• Follow tap: button morphs to "Following" with a 200ms cross-fade + scale 1→1.06→1 + soft haptic; green confirm flash
• Subscribe confirm: sheet CTA → ✓ with a 250ms spring, brief full-green flash + success haptic
• Live pill: the red dot can do a subtle 1.5s pulse (opacity 0.6↔1.0) to signal "live"
• Player controls: tap toggles with 200ms fade; auto-hide after 3s idle
• Tab switch: instant content swap; active icon animates color to green + fill over 200ms
• Emote picker: bottom sheet slides up 300ms ease-out
• Card press: thumbnail scales to 0.98 over 120ms, releases on tap-up
• Stream join: tapping a card cross-fades into the watch page over ~300ms; chat starts streaming immediately
• Haptics: soft impact on Follow/Subscribe confirm and chat send; selection tick on tab switch

7. Do's and Don'ts

Do

• Use the near-black canvas (#0E0E10) — NOT pure #000000 (true black makes #53FC18 vibrate)
• Make Kick Green (#53FC18) do everything brand/action — logo, all primary CTAs, active tab, links, online rings
• Keep everything else strictly monochrome grey so the green screams
• Build the watch page as video → streamer bar → live chat stacked
• Color-code chat usernames by role (mod #3EA6FF, sub #FFC700, VIP #FF4FD8, OG/regular green-ish)
• Prefix usernames with tiny role badge chips (MOD / sub-month # / VIP / OG / VERIFIED)
• Render custom emote sprites inline in chat at ~18pt
• Use a red #FF1F44 LIVE pill + viewer-count chip on every stream and channel card
• Put a 2pt green online ring around live streamers' avatars
• Use tighter radii (6pt buttons, 8pt cards) — Kick is less rounded than most streamers
• Pack chat densely (9pt gaps) — a fast live chat should show many lines
• Use tabular numerals for viewer counts and sub-month numbers

Don't

• Don't add a light mode — Kick is dark-only; defer to OS for system sheets
• Don't use pure black #000000 — it makes the green strobe; stay at #0E0E10
• Don't introduce extra accent colors — green + role colors only; the monochrome restraint is the identity
• Don't make the LIVE indicator green — it's always red #FF1F44 (green is for actions/brand)
• Don't render chat usernames all one color — role coloring is a defining system
• Don't drop the badge chips or inline emotes — they ARE Kick's chat
• Don't use big soft radii or pastel friendliness — Kick is tight, bold, raw
• Don't space chat messages loosely — density is intentional for a fast live chat
• Don't put a glow/shadow on the green — it's a flat fill, not a neon bloom on chrome
• Don't use warm grey for metadata — neutral cool grey #A6A6AD
• Don't bury the video — it's always the largest element on the watch page
• Don't animate chat heavily — 120ms fades; the chat must stay fast and legible

8. Responsive Behavior

Device Sizes

Dynamic Type

• Screen titles, body, descriptions, streamer name: full scale
• Chat username + message: scale to L, then truncate the username with ellipsis (keep messages readable)
• LIVE/role badges, viewer count, tab labels: FIXED (layout-sensitive, must stay compact)

Orientation

• Phone: watch page is portrait-primary (video + chat stacked); rotate → fullscreen video with chat as a slide-over drawer
• iPad: landscape gets the side-by-side video + docked chat
• Browse grid reflows column count by width

Touch Targets

• Chat message: full row long-press target (≥36pt tall effective)
• Chat send button: 38pt (acceptable; expand hit-area to 44pt)
• Follow/Subscribe buttons: ≥44pt tall
• Tab bar icons: 22pt glyph, 52pt row, full-segment tap
• Live card: full card tappable
• Player controls: 44pt hit areas around 18pt glyphs

Safe Area Handling

• Top: video bleeds under the status bar / Dynamic Island; floating back/share avoid the notch
• Bottom: chat input dock + tab bar respect the home indicator; keyboard pushes the chat input up (chat list scrolls above it)
• Sides: 16pt content inset; chat at 14pt; video is full-bleed width
• Landscape: player controls and chat drawer avoid the notch side

9. Agent Prompt Guide

Quick Color Reference

• Canvas (near-black): #0E0E10 (NOT pure black)
• Surface 1 / 2 / 3: #161618 / #1F1F23 / #2A2A2E
• Divider: #2D2D31
• Kick Green: #53FC18 (pressed #45D912, deep #00E701) / text on it #0E0E10
• Live Red: #FF1F44
• Chat roles — Mod #3EA6FF, Sub #FFC700, VIP #FF4FD8, OG #53FC18, Verified chip #2A2A2E
• Text primary / secondary / tertiary: #FFFFFF / #A6A6AD / #6E6E76
• Chat body text: #E4E4E9
• Error: #FF4A4A

Example Component Prompts

• "Build the Kick watch page in SwiftUI: a 16:9 video player on top with a top-left LIVE pill (#FF1F44 fill, white dot + 'LIVE' Inter 10pt weight 800) and a top-right viewer chip (rgba(0,0,0,0.55), eye glyph + '24.8K'). Below: a streamer bar — 40pt circular avatar with a 2pt #53FC18 online ring, name Inter 16pt weight 700 + a #53FC18 verified check, 'Just Chatting · 24,812 watching' in Inter 12pt #A6A6AD, trailing a #53FC18 Follow button (6pt radius, #0E0E10 text weight 800). Below that, the chat panel fills the rest of the screen."

• "Create a Kick chat message row: horizontal flow of optional badge chip(s) → role-colored username (Inter 13pt weight 700) → ':' → message text (#E4E4E9 Inter 13pt weight 400) with inline 18×18pt emote sprites (3pt radius). 9pt vertical gap, 14pt horizontal padding. Badge chips: MOD #3EA6FF/#06121F, SUB-with-month-# #FFC700/#1A1500, VIP #FF4FD8/#2A0022 — 8pt weight 900, 1×4pt padding, 3pt radius. If the message @-mentions the current user, give the row a #53FC18 @ 12% background + 2pt #53FC18 left border."

• "Render a Kick live channel card: a 16:9 thumbnail with an 8pt radius, a top-left 'LIVE' tag (#FF1F44, white 8pt weight 800, 2×6pt padding, 3pt radius) and a bottom-left viewer chip (rgba(0,0,0,0.6), white 9pt weight 700 '24.8K'). Below: a row of a 30pt avatar with a 2pt #53FC18 ring + a VStack of title (Inter 13pt weight 700, 1 line, ellipsis) and 'NovaPlays · FPS' (Inter 11pt #A6A6AD). 2-column grid, 12pt gutter."

• "Build the Kick chat input dock: a 38pt-tall #1F1F23 field (8pt radius, 12pt horizontal padding, placeholder 'Send a message' Inter 13pt #6E6E76) with a trailing 38×38pt #53FC18 send button (8pt radius, #0E0E10 paper-plane glyph 16pt). Disabled state when empty: #1F1F23 button, #6E6E76 glyph. The dock has a 0.5pt #2D2D31 top border and pushes up above the keyboard."

• "Build the Kick bottom tab bar: 52pt + safe area, rgba(14,14,16,0.96) with backdrop-filter: blur(20px) saturate(180%), 0.5pt top border #2D2D31. Five tabs — Home, Browse, Following, Clips, Profile — 22pt icons, Inter 10pt weight 600 labels. Active tab icon + label #53FC18 with the icon filled; inactive #6E6E76. No pill indicator."

• "Create the Kick Follow button states: default #53FC18 fill, #0E0E10 text Inter 15pt weight 800, 6pt radius, 44pt tall — on tap it morphs to 'Following' with a 200ms cross-fade + scale 1→1.06→1 + soft haptic, becoming #1F1F23 fill, #FFFFFF text, 1pt #2A2A2E border. Pressed (while green): #45D912 + scale 0.98."

Iteration Guide

1. Canvas is near-black #0E0E10 — NEVER pure #000000 (true black makes the green strobe); dark-only
2. Kick Green #53FC18 does everything brand/action — logo, all primary CTAs, active tab, links, online rings — and almost nothing else
3. Everything non-green is strictly monochrome grey (#161618/#1F1F23/#2A2A2E) so the green screams
4. The signature screen is video → streamer bar → live chat panel stacked vertically
5. Chat usernames are role-colored (mod #3EA6FF, sub #FFC700, VIP #FF4FD8, OG/regular green-ish) with tiny badge chips before them
6. Render custom emote sprites inline in chat at ~18pt; chat is dense (9pt gaps) and fast
7. The LIVE indicator is always red #FF1F44 — never green; green is reserved for actions/brand
8. A 2pt #53FC18 ring around an avatar = "live now"
9. Radii are tight (6pt buttons, 8pt cards) — Kick is bolder/rawer/less rounded than other streamers
10. Bottom tabs Home / Browse / Following / Clips / Profile — active icon green #53FC18, no pill