Kik DESIGN.md

1. Visual Theme & Atmosphere

Kik is a username-based messenger whose entire product premise — and therefore its design — is anonymity without a phone number. You sign up with a username, not a digit; you find people by @handle, group code, or Kik Code (a circular dotted scannable glyph); and conversations never expose a phone number. This shapes every screen: the chat list leads with @usernames and group names, the search bar invites "people, groups, bots", and the contact surface is a username directory rather than a phone address book. The atmosphere is clean, light, and youthful — Kik's audience skews teen/young-adult, so the UI is friendly, rounded, and bot-and-discovery-forward.

Kik's brand color today is a bright sky Kik Blue #00B0F0 (the modern rebrand). Its heritage color is the original Kik Green #82BC23 — the lime-green that defined Kik for years and still appears as a legacy/heritage accent and in older brand assets. The current system leads with Blue: it's the logomark, the outgoing message bubble, primary buttons, the tab selection, and the Kik Code background; Green is a respectful nod, not the lead. The canvas is white (#FFFFFF) in light mode and a neutral near-black (#121316) in dark mode so the bright Blue stays vivid.

Conversations are a vertical stack of rounded bubbles: outgoing in Kik Blue #00B0F0 with dark-cyan ink #002A36 (for WCAG AA on the bright fill) and a small ~5pt tail on the bottom-right; incoming in light gray #E9EAEC (light) / #25282D (dark) with primary text and a tail on the bottom-left. Bubbles use a ~16pt radius. Kik's single most distinctive affordance is its S / D / R receipt: a tiny single-letter status — S (Sent, light gray), D (Delivered, gray), R (Read, Kik Blue) — shown beside the outgoing message and in the chat-list row. This terse one-letter system (rather than checkmarks or "Read 9:41") is uniquely Kik.

The other pillars: bots are first-class — the chat list flags bot accounts with a "BOT" tag and a rounded-square avatar, and a Bot Shop / Discover surface lets users add automated accounts (sketch bots, quiz bots, brand bots). Kik Codes are the QR-like circular scannable identity glyphs used to add friends, join groups, or follow bots without sharing a username verbally. Add the anonymous-username directory, group chats with @mentions, and a Discover/Bot tab, and you have Kik's complete identity. Color beyond Blue is minimal — Green as heritage, red #F0473E for destructive/errors, neutral grays for chrome. Typography is a clean, friendly humanist sans (Kik's brand face; the closest free substitute is Inter or Open Sans), with heavy weights for titles and the username headline.

Key Characteristics:

• Username-first identity — @handles, no phone number; find via username / group code / Kik Code
• Modern Kik Blue (#00B0F0) is the brand; heritage Kik Green (#82BC23) survives as a legacy accent
• White canvas (#FFFFFF) light / neutral near-black (#121316) dark
• Rounded ~16pt bubbles: outgoing Kik Blue with dark-cyan ink, incoming gray (#E9EAEC / #25282D), ~5pt tail
• S / D / R receipt — single-letter status: S (sent, gray), D (delivered, gray), R (read, Blue)
• Bots are first-class — "BOT" tag + rounded-square avatar; Bot Shop / Discover surface
• Kik Codes — circular dotted scannable identity glyphs for adding friends / groups / bots
• Anonymous-username directory instead of a phone contact list
• Group chats with @mentions and member usernames
• Discover / Bot tab — automated-account marketplace
• Clean friendly humanist sans (Kik brand face → Inter / Open Sans), heavy titles
• Bottom tab bar: Chats / People / Discover / Kik Code with bright-Blue active tint

2. Color Palette & Roles

Primary (Interactive)

• Kik Blue (#00B0F0): The modern brand. Outgoing bubble, primary buttons, tab selection, Kik Code bg, links, send.
• Kik Blue Deep (#0093C8): Filled surfaces needing more contrast, gradients, hover.
• Kik Blue Pressed (#0086B8): Pressed state of Blue controls.
• Kik Cyan (#4FCBF7): Lighter accent, gradient top stop, links/outline text on dark.
• Kik Green (Heritage) (#82BC23): Legacy brand accent — heritage badges, "classic" theming, older assets only.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Thread + list background, primary light canvas.
• Incoming Bubble (#E9EAEC): Light gray incoming bubble.
• Surface Gray (#F3F4F6): Grouped list background, search field.
• Row Pressed (#E7E8EB): Pressed conversation/list rows.
• Divider (#E1E2E5): Hairline separators between conversation rows.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#121316): Neutral near-black thread + list background.
• Dark Surface 1 (#1B1D21): Nav/input/tab bar, elevated surfaces.
• Dark Surface 2 (#25282D): Incoming bubble, search field, bot tags, sheets.
• Dark Divider (#31343A): Hairline separators on dark.

Text

• Text Primary Light (#16181B): Incoming bubble text, usernames, primary labels.
• Text on Blue (#002A36): Outgoing bubble text — dark-cyan ink for WCAG AA on bright #00B0F0.
• Text Secondary (#6C6F77 light / #9CA0A8 dark): Previews, timestamps, "D" receipt.
• Text Tertiary (#9A9DA5 light / #686C74 dark): Placeholder, disabled, "S" receipt.
• Text Primary Dark (#F1F2F4): Incoming bubble text and labels on dark.

Semantic

• Error / Destructive (#F0473E): Delete, block, report, failed-message.
• Success (#82BC23): Success toast (reuses heritage green), "added" confirmation.
• Link (#0093C8 light / #4FCBF7 dark): Inline links inside bubbles.
• Selection Highlight (#00B0F0 @ 18%): Text selection within a bubble.

S / D / R Receipt Color Matrix

3. Typography Rules

Font Family

• Brand: Kik's house humanist sans (proprietary; not redistributable).
• Recommended Free Substitute: Inter (by Rasmus Andersson, SIL OFL) — closest clean humanist; or Open Sans (SIL OFL) for a slightly friendlier match.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Numerals: proportional by default; tabular in timestamps.
• Usernames render in the brand face (not monospace), weight 700, with the leading @ kept same-weight.

Hierarchy

Principles

• Clean and youthful: heavy 700/800 titles and username headlines feel confident and approachable.
• Body stays light: 14pt regular incoming; outgoing bumps to 500 so the dark-cyan ink stays crisp on bright Blue.
• Dynamic Type supported: titles, headline, row title, body, previews scale; timestamps, tab labels, the S/D/R glyph, "BOT" tag stay fixed.
• Username is the identity: @handle always weight 700, the @ never dimmed or detached.
• Dark-cyan ink on Blue bubble is non-negotiable for WCAG AA — never white text on #00B0F0.

4. Component Stylings

Buttons

Primary Button

• Shape: Pill, 22pt corner radius
• Background: #00B0F0
• Text: #00323F (dark-cyan ink for AA), Inter 16pt weight 700
• Padding: 13pt vertical, 28pt horizontal
• Pressed: #0086B8 + scale 0.98
• Disabled: #00B0F0 @ 35% opacity

Outline Button (secondary)

• Background: transparent
• Border: 1.5pt #00B0F0
• Text: #0093C8 (light) / #4FCBF7 (dark), Inter 15pt weight 700
• Corner radius: 22pt
• Pressed: #00B0F0 @ 10% fill

Heritage Button (legacy/optional)

• Background: #82BC23 (the original Kik Green), text #1B2A06, Inter 15pt w700, 22pt radius
• Used only for explicitly "classic"/heritage theming — not the default CTA

Text Button

• Background: transparent
• Text: #0093C8 / #4FCBF7, Inter 15pt weight 600 ("Scan Kik Code", "Add Username")
• Pressed: opacity 0.5

Send Affordance

• Kik uses a text "Send" label (Inter 14pt w700 #00B0F0) at the trailing edge of the input bar rather than a circular icon button (heritage Kik pattern); a + attachment glyph leads the bar

Message Bubble (the core atom)

Outgoing Bubble

• Background: #00B0F0
• Text: #002A36 (dark-cyan ink), Inter 14pt w500
• Padding: 8pt vertical, 13pt horizontal
• Corner radius: 16pt, bottom-right corner at 5pt (tail) when last in a same-sender run
• Alignment: trailing, max width ~80% of thread
• Footer: timestamp 10pt + S/D/R letter, right-aligned

Incoming Bubble

• Background: #E9EAEC light / #25282D dark
• Text: #16181B / #F1F2F4, Inter 14pt w400
• Corner radius: 16pt, bottom-left corner at 5pt (tail)
• Alignment: leading; in group chats, sender @username in 14pt w600 #0093C8 above the first bubble

Grouping

• Same sender consecutive: 4pt gap, only last bubble shows the tail
• Sender change: 8pt gap
• Day separator: centered 11pt caption, secondaryLabel, 8pt vertical margin

States

• Sending: … glyph in place of the receipt letter, bubble ~70% opacity
• Failed: red !, tap to resend
• Bot reply: may include inline buttons / suggested-reply chips (rounded, #00B0F0 outline)
• Reply / forward: a thin Blue left-bar + quoted snippet inside the bubble

S / D / R Receipt

• A single uppercase letter beside the timestamp (in the bubble footer) AND in the chat-list row's meta column
• S — Sent: #9A9DA5 / #686C74
• D — Delivered: #6C6F77 / #9CA0A8
• R — Read: #00B0F0 (Kik Blue) in both modes — the one moment color enters the receipt
• Inter 11pt w700, +0.2pt tracking; transitions S → D → R by swapping the glyph (no animation, instant)

Conversation List Row

• Height: 72pt, hairline divider bottom
• Leading: 48pt avatar — circular for people, rounded-square (14pt) for bots
• Mid: name/@username (15pt w700) + a "BOT" tag (11pt w700, surface pill) for bot accounts; preview (13pt secondaryLabel, 1-line, "@mentioner: …" in groups)
• Trailing meta column: timestamp (11pt tertiaryLabel) above either the unread count (Blue pill, #00323F ink) or the outgoing S/D/R letter

Kik Code

• A circular scannable identity glyph: a solid #00B0F0 rounded-square plate containing a dotted ring and a central glyph/photo
• Used to add a friend, join a group, or follow a bot by scanning (no username typed)
• Appears on the profile screen, the dedicated Kik Code tab, and in share sheets
• Rounded-square plate radius ~24pt; the dotted ring is white on the Blue plate

Navigation

Chat List Header

• Large title "Chats" (26–32pt w800), trailing actions: new-chat (plus) + camera/scan, tinted #00B0F0
• Search field below: 36pt, #F3F4F6 / #25282D, 10pt radius, placeholder "Search for people, groups, bots"

Chat Header

• Height: 56pt + safe area, hairline divider bottom
• Leading: back chevron (chevron.left 17pt #00B0F0)
• Center: @username (Inter 17pt w700) or group name; small member-count subtitle for groups
• Trailing: profile/avatar tap → user/group settings (no call icons — Kik is text/bot-first, not call-first)

Bottom Tab Bar

• Height: 50pt + safe area, background #FFFFFF / #1B1D21, hairline top divider
• Tabs (4): Chats, People, Discover (bots), Kik Code
• Icon 22pt; active = #00B0F0 filled glyph + label; inactive = #9A9DA5 / #686C74
• Labels: Inter 11pt w600 always shown; unread badge on Chats (Blue pill)

Input Fields

Compose Bar

• Background: #FFFFFF / #1B1D21, hairline top divider, 8/16pt padding
• Leading: + 22pt attachment (camera, gallery, GIF, web, Kik content)
• Center: pill field — 18pt radius, #F3F4F6 / #25282D fill, placeholder "Type a message" tertiaryLabel
• Trailing: text "Send" label, Inter 14pt w700 #00B0F0 (dimmed tertiaryLabel when empty)

Search Bar

• Height: 36pt, #F3F4F6 / #25282D, 10pt radius
• Leading magnifyingglass 15pt tertiaryLabel, placeholder "Search for people, groups, bots"

Distinctive Components

S / D / R Receipt — Kik's terse single-letter status (Sent / Delivered / Read), Blue at "R"; the most-recognized Kik affordance.

Anonymous Username Identity — @handles everywhere, no phone number; the product's whole premise.

Kik Code — circular dotted scannable identity glyph on a Blue rounded-square plate; add-by-scan.

Bot Accounts — "BOT" tag + rounded-square avatar in lists; inline bot reply buttons / suggested-reply chips.

Discover / Bot Shop — a marketplace tab for adding automated accounts.

Group Chat with @mentions — username-based group rooms; preview shows "@mentioner: …".

Username Directory (People) — the contact surface is a searchable username list, not a phone book.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 14, 16, 20, 24, 32, 44
• Same-sender bubble gap: 4pt
• Sender-change gap: 8pt
• Thread horizontal inset: 14pt, bubble max width ~80%
• Bubble internal padding: 8pt vertical / 13pt horizontal
• List row height: 72pt; avatar 48pt

Grid & Container

• iPhone: full-width thread + list, 14–16pt gutters; bubble max ~80%
• Kik Code: a fixed ~120pt rounded-square plate, centered on profile/scan screens
• iPad: split — conversation list (~340pt) + thread; content max ~680pt centered
• Headers, search, tab bar: full-width, safe-area aware

Whitespace Philosophy

• Friendly density: 4pt within a run, 8pt on sender change — conversational and youthful
• Blue is the only saturated surface: chrome is neutral so the bright Blue bubble and CTAs pop
• Username-forward whitespace: the list leads with @handles; previews are single-line so identity reads fast
• Bots are visually distinct: rounded-square avatars + "BOT" tag break the circular-avatar rhythm so automation is obvious at a glance

Border Radius Scale

• Square (0pt): full-bleed media (rare)
• Tail (5pt): the pinched bubble corner on the sender's edge
• Subtle (10pt): search bar, list thumbnails
• Standard (14pt): bot avatars, reply-quote container, suggested-reply chips
• Bubble (16pt): the message bubble body radius
• Pill (22pt / 500pt): primary buttons, unread badges
• Plate (24pt): the Kik Code rounded-square plate
• Circle (50%): person avatars, presence-free identity circles

6. Depth & Elevation

Kik is mostly flat with soft neutral shadows on floating surfaces; the Blue brand and gradient identity circles carry visual interest instead of heavy elevation.

Shadow Philosophy: Kik uses soft neutral shadows only on truly floating surfaces (menus, FAB, sheets); content (bubbles, list rows, the Kik Code plate) stays flat. Identity avatars use Blue/cyan gradients as the visual-interest layer instead of shadows. On dark mode shadows fade, so floating surfaces gain a faint 1pt divider border. The Kik Code plate is intentionally flat and high-contrast so it scans reliably.

Motion

• Bubble send: outgoing bubble slides up + scales 0.88 → 1.0 from the input field, spring(response: 0.32, damping: 0.8) + light haptic
• Receipt change: S → D → R swaps the letter instantly (no animation); the R recolor to Blue is the only color event
• List row update: new message bumps the row to the top with a 0.25s ease-out reorder; unread badge pops in
• Bot reply buttons: suggested-reply chips fade + 4pt slide-up in 0.2s
• Kik Code scan: scanner overlay; on match, the Kik Code plate pulses once and the chat opens with a push transition
• Tab switch: instant; active-icon fill + color crossfade 0.15s
• Typing: "typing…" text in the chat-header subtitle
• Attachment sheet: slides up from bottom, 0.3s ease-out
• Haptics: light impact on send, soft on bot-button tap, success on Kik Code match / friend added

7. Do's and Don'ts

Do

• Lead with the modern Kik Blue #00B0F0 — outgoing bubble, buttons, tabs, Kik Code plate
• Keep Kik Green #82BC23 strictly as a heritage/legacy accent — never the default CTA
• Use white (#FFFFFF) light canvas / neutral near-black (#121316) dark — neutral keeps Blue vivid
• Render outgoing bubbles Kik Blue with dark-cyan ink #002A36 (AA), incoming gray (#E9EAEC / #25282D), ~16pt radius with a ~5pt tail
• Use the S / D / R single-letter receipt; turn it Blue only at "R" (Read)
• Make identity username-first — @handles everywhere, never surface a phone number
• Flag bots distinctly — rounded-square avatar + "BOT" tag in the list
• Provide Kik Codes — a Blue rounded-square plate with a dotted ring, flat and high-contrast for scanning
• Make the People tab a searchable username directory, not a phone contact list
• Use a clean friendly humanist sans (Kik brand face → Inter/Open Sans), heavy 700/800 titles
• Use a text "Send" label at the input trailing edge (heritage Kik pattern)

Don't

• Don't lead with Kik Green — the modern brand is Blue; Green is heritage-only
• Don't put white text on the bright #00B0F0 bubble/button — use dark-cyan ink #002A36/#00323F for AA
• Don't tint incoming bubbles Blue — they're neutral gray; only outgoing is brand Blue
• Don't tint the dark canvas — Kik's dark mode is a neutral near-black #121316
• Don't expose phone numbers anywhere — Kik's premise is username-only anonymity
• Don't use circular avatars for bots — rounded-square + "BOT" tag is the bot signifier
• Don't replace S/D/R with checkmarks or "Read 9:41" — the single-letter system is uniquely Kik
• Don't add a second brand accent — Blue is it; Green is heritage, red is destructive only
• Don't put call/video icons in the header — Kik is text/bot-first, not call-first
• Don't shadow the Kik Code plate or bubbles — they're flat; the plate must stay high-contrast to scan
• Don't animate the receipt change — S/D/R swaps instantly; only the R-to-Blue recolor reads as an event

8. Responsive Behavior

Device Sizes

Dynamic Type

• Titles, headline, row title, body, previews: full scale
• Timestamps, tab labels, the S/D/R glyph, "BOT" tag: FIXED
• Kik Code plate: fixed ~120pt (must keep scan geometry)

Orientation

• Conversation supports rotation; bubbles reflow keeping the ~80% cap
• iPad keeps split view in both orientations; Kik Code plate stays fixed-size and centered

Touch Targets

• + attachment / "Send" label: 44pt hit
• Bubble: full bubble is the long-press (copy/forward/reply) target
• List row / tab / bot suggested-reply chip: full-row / full-cell / ≥44pt
• Kik Code plate (tappable to enlarge/share): full plate

Safe Area Handling

• Top: header respects safe area + Dynamic Island
• Bottom: input bar + tab bar respect home indicator; thread scrolls above keyboard
• Keyboard: compose bar + attachment sheet ride above the keyboard
• Sides: 14–16pt gutters; full-bleed only for media

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #121316 (neutral near-black)
• Kik Blue (brand): #00B0F0
• Kik Blue deep: #0093C8
• Kik Green (heritage only): #82BC23
• Outgoing bubble: #00B0F0, text #002A36
• Incoming bubble: #E9EAEC light / #25282D dark
• Text primary: #16181B light / #F1F2F4 dark
• Text secondary: #6C6F77 light / #9CA0A8 dark
• Receipt S: #9A9DA5 / #686C74
• Receipt D: #6C6F77 / #9CA0A8
• Receipt R: #00B0F0 (both modes)
• Error: #F0473E
• Link: #0093C8 / #4FCBF7

Example Component Prompts

• "Build a Kik outgoing bubble in SwiftUI: background #00B0F0, text #002A36 (dark-cyan ink for WCAG AA on bright blue) Inter 14pt weight 500, padding 8pt vertical / 13pt horizontal, corner radius 16pt with .bottomTrailing at 5pt (tail) when last in a same-sender run. Right-aligned, max width 80%. Footer: timestamp 10pt + the single S/D/R receipt letter. Incoming variant: background #E9EAEC (light) / #25282D (dark), text label 14pt w400, tail on .bottomLeading."

• "Create the Kik S/D/R receipt: a single uppercase letter beside the timestamp. S = Sent #9A9DA5/#686C74; D = Delivered #6C6F77/#9CA0A8; R = Read #00B0F0 (Kik Blue, both modes). Inter 11pt w700, +0.2pt tracking. Transition S → D → R by swapping the glyph instantly (no animation); only the R recolor to Blue reads as a moment. Show the same letter in the chat-list row's meta column."

• "Render a Kik conversation row: 72pt tall, hairline divider. Leading 48pt avatar — a circle for people, a 14pt rounded-square for bots. Mid: name/@username Inter 15pt w700 (with a 'BOT' tag — 11pt w700 surface pill — for bots) + 1-line preview 13pt secondaryLabel ('@mentioner: …' in groups). Trailing meta column: timestamp 11pt tertiaryLabel above either an unread count (Kik Blue pill, #00323F ink) or the outgoing S/D/R letter."

• "Build a Kik Code: a flat #00B0F0 rounded-square plate (~120pt, 24pt corner radius) containing a white dotted ring and a central glyph/photo. Keep it flat and high-contrast (no shadow) so it scans reliably. Used to add a friend / join a group / follow a bot by scanning — appears on the profile, the Kik Code tab, and share sheets."

• "Create the Kik compose bar: background #FFFFFF/#1B1D21, hairline top divider. Leading + 22pt attachment. Center: pill field 18pt radius, #F3F4F6/#25282D fill, placeholder 'Type a message' tertiaryLabel. Trailing: a text 'Send' label (Inter 14pt w700 #00B0F0, dimmed tertiaryLabel when empty) — Kik uses a text label, not a circular icon button."

• "Render the Kik bottom tab bar: 50pt + safe area, background #FFFFFF/#1B1D21, hairline top divider. Tabs: Chats, People, Discover, Kik Code. Icon 22pt; active = bright #00B0F0 filled glyph + label; inactive = #9A9DA5/#686C74. Labels Inter 11pt w600 always shown; Kik Blue unread badge on Chats. No tint pill — icon fill + color change only. No call/video icons anywhere (Kik is text/bot-first)."

Iteration Guide

1. The modern brand is Kik Blue #00B0F0; Kik Green #82BC23 is heritage-only — never the default CTA
2. Put dark-cyan ink #002A36/#00323F on the bright Blue bubble/button — never white text (WCAG AA)
3. Dark canvas is a neutral near-black #121316 — NOT color-cast; neutral keeps Blue vivid
4. Incoming bubbles are neutral gray #E9EAEC / #25282D; only the outgoing bubble is brand Blue
5. The S/D/R single-letter receipt is uniquely Kik — Sent/Delivered gray, Read turns Blue; swap instantly, never animate
6. Identity is username-first: @handles everywhere, no phone number ever surfaced — it's the product's premise
7. Bots are first-class and visually distinct — rounded-square avatar + "BOT" tag break the circular rhythm
8. Kik Codes are flat high-contrast Blue rounded-square plates with a dotted ring — add-by-scan, must scan reliably
9. No call/video chrome — Kik is text + bot + Discover-first, not call-first; the People tab is a username directory
10. Typography is a clean friendly humanist sans (Inter/Open Sans substitute) with heavy 700/800 titles; bubbles flat ~16pt with a ~5pt tail; "Send" is a text label