Kick Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

18tokens

8type steps

2radius steps

9pxspacing base

Kick, in one page

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

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

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Kick design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Kick Green: #53fc18
- Kick Green Pressed: #45d912
- Kick Green Deep: #00e701
- Canvas Near-Black: #0e0e10
- Surface 1: #161618
- Surface 2: #1f1f23
- Surface 3: #2a2a2e
- Divider: #2d2d31
- Text Primary: #ffffff
- Text Secondary: #a6a6ad

Type:
- families: Inter, Archivo, Alternative, Fallback Stack
- scale: 10, 11, 13, 15, 16, 20, 24, 32
- weights: 400, 600, 700, 800, 900

Shape:
- radius: 6, 8

Spacing: 9, 12, 13, 14

Rules:
- 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)

Avoid:
- 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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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)

Role	Username Color	Badge Chip Fill	Badge Text
Moderator	`#3EA6FF` (Mod Blue)	`#3EA6FF`	`#06121F`
Subscriber	`#FFC700` (Sub Gold)	`#FFC700` (shows sub-month #)	`#1A1500`
VIP	`#FF4FD8` (VIP Pink)	`#FF4FD8`	`#2A0022`
OG / Founder	`#53FC18` (Kick Green)	`#53FC18`	`#0E0E10`
Verified / Broadcaster	`#FFFFFF` on `#2A2A2E` chip	`#2A2A2E`	`#FFFFFF`
Regular user	Randomized from a green-leaning palette (e.g. `#53FC18`, `#7CE7A4`, `#5AC8FA`, `#FF8A65`, `#C9C9D1`)	none	—

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.

Type scaleRead the full spec

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

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Inter	32pt	900	1.05	-0.5pt	"Go Live", onboarding headlines
Screen Title	Inter	24pt	800	1.15	-0.3pt	"Following", "Browse", page titles
Section	Inter	20pt	800	1.2	-0.2pt	"Live Channels", "Categories" rails
Streamer Name	Inter	16pt	700	1.2	0pt	Streamer name in the watch-page bar
Body	Inter	15pt	400	1.5	0pt	Stream descriptions, about, body copy
Card Title	Inter	13pt	700	1.2	0pt	Live-card stream titles (1 line, ellipsis)
Chat Username	Inter	13pt	700	1.35	0pt	Role-colored sender name
Chat Message	Inter	13pt	400	1.35	0pt	Message body `#E4E4E9`
Meta	Inter	13pt	400	1.3	0pt	"Just Chatting · 24,812 watching"
Button Label	Inter	15pt	800	1.0	0pt	Follow / Subscribe / Go Live
Viewer Count	Inter	11pt	700	1.0	0pt	"24.8K" chip (tabular)
Badge / LIVE	Inter	10pt	800	1.0	0.5pt	"LIVE", "MOD", "VIP" — ALL CAPS
Tab Label	Inter	10pt	600	1.0	0.1pt	Bottom tab labels

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.

Components and layoutRead the full spec

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

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Video ~211pt tall; chat fills the rest; 2-col cards tighter
iPhone 13/14/15	390pt	Standard: video ~219pt; chat region flexible-height
iPhone 15/16 Pro	393pt	Dynamic Island accommodated above the video
iPhone 15/16 Pro Max	430pt	Larger video (~242pt); more chat lines visible; 2-col cards
iPad (portrait)	768pt	Video + persistent side chat possible; 3-col browse grid
iPad (landscape)	1024pt+	Video left ~65% + docked chat panel right ~35%; 4-col browse grid

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-kick {--page-bg: #0e0e10;
  --page-bg-gradient: none;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #00e701;
  --link-hover-color: #00b401;
  --border-color: #39393b;
  --card-bg: #0e0e10;
  --card-shadow: 0 1px 2px rgba(255,255,255,0.06);
  --card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
  --header-bg: #212123;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #0e0e10;
  --footer-text-color: #ababab;
  --button-bg: #00e701;
  --button-text-color: #000000;
  --button-hover-bg: #00b401;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #1c1c1e;
  --button-secondary-text-color: #ffffff;
  --button-secondary-hover-bg: #2b2b2d;
  --button-secondary-border: 1px solid #39393b;
  --prompt-bg: #1a1a1c;
  --prompt-text-color: #ffffff;
  --base-font: var(--font-inter);
  --heading-font: var(--font-inter);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

peacock 80.5%
plex 78.9%
acorns 78.4%
happn 78.3%
peloton 77.1%

Where this came from

Source document: ios/design-md/video/kick/DESIGN.md · 26.6 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.