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
24tokens
9type steps
2radius steps
4pxspacing base
Kik, in one page
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
@mentionsand 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
Do's and don'ts
Do
- Lead with the modern Kik Blue
#00B0F0— outgoing bubble, buttons, tabs, Kik Code plate - Keep Kik Green
#82BC23strictly 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 —
@handleseverywhere, 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
#00B0F0bubble/button — use dark-cyan ink#002A36/#00323Ffor 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
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 Kik design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Kik Blue: #00b0f0
- Kik Green: #82bc23
- Kik Blue Deep: #0093c8
- Kik Blue Pressed: #0086b8
- Kik Cyan: #4fcbf7
- Kik Green (Heritage): #82bc23
- Canvas White: #ffffff
- Incoming Bubble: #e9eaec
- Surface Gray: #f3f4f6
- Row Pressed: #e7e8eb
Type:
- families: Brand, Inter, Open Sans, Recommended Free Substitute
- scale: 11, 13, 14, 15, 16, 17, 22, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 16, 22
Spacing: 4, 8, 13
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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 (
#6C6F77light /#9CA0A8dark): Previews, timestamps, "D" receipt. - Text Tertiary (
#9A9DA5light /#686C74dark): 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 (
#0093C8light /#4FCBF7dark): Inline links inside bubbles. - Selection Highlight (
#00B0F0@ 18%): Text selection within a bubble.
S / D / R Receipt Color Matrix
| State | Letter | Color (Light) | Color (Dark) | Meaning |
|---|---|---|---|---|
| Sent | S | #9A9DA5 | #686C74 | Left device, reached Kik servers |
| Delivered | D | #6C6F77 | #9CA0A8 | Arrived on recipient's device |
| Read | R | #00B0F0 | #00B0F0 | Recipient opened the chat |
| Sending | … | #9A9DA5 | #686C74 | In flight (pre-S) |
| Failed | ! | #F0473E | #F0473E | Not delivered — tap to retry |
Type scaleRead the full spec
Font Family
- Brand: Kik's house humanist sans (proprietary; not redistributable).
- Recommended Free Substitute:
Inter(by Rasmus Andersson, SIL OFL) — closest clean humanist; orOpen 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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | Inter | 32pt | 800 | 1.2 | -0.4pt | "Chats" list title |
| Screen Title | Inter | 26pt | 800 | 1.2 | -0.3pt | "New Chat" / sheet headers |
| Title 3 | Inter | 22pt | 700 | 1.25 | -0.2pt | Username on profile / large header |
| Headline | Inter | 17pt | 700 | 1.3 | -0.2pt | @username in chat header |
| Row Title | Inter | 15pt | 700 | 1.3 | -0.1pt | Conversation name / group name in list |
| Body / Bubble | Inter | 14pt | 400 | 1.32 | 0pt | Message text (outgoing 500 for ink legibility) |
| Body Emphasis | Inter | 14pt | 600 | 1.32 | 0pt | @mentions in group bubbles |
| Preview | Inter | 13pt | 500 | 1.35 | 0pt | Last-message preview in chat list |
| Footnote | Inter | 13pt | 600 | 1.35 | 0pt | Section labels, profile meta |
| Caption | Inter | 11pt | 600 | 1.35 | 0.1pt | Timestamps, "BOT" tag, S/D/R label |
| Button | Inter | 16pt | 700 | 1.0 | 0pt | Primary buttons |
| Receipt Letter | Inter | 11pt | 700 | 1.0 | 0.2pt | The S / D / R single glyph |
| Tab Label | Inter | 11pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
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:
@handlealways weight 700, the@never dimmed or detached. - Dark-cyan ink on Blue bubble is non-negotiable for WCAG AA — never white text on
#00B0F0.
Components and layoutRead the full spec
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:
#E9EAEClight /#25282Ddark - Text:
#16181B/#F1F2F4, Inter 14pt w400 - Corner radius: 16pt, bottom-left corner at 5pt (tail)
- Alignment: leading; in group chats, sender
@usernamein 14pt w600#0093C8above 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,
#00B0F0outline) - 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
dividerbottom - Leading: 48pt avatar — circular for people, rounded-square (14pt) for bots
- Mid: name/
@username(15pt w700) + a "BOT" tag (11pt w700,surfacepill) for bot accounts; preview (13ptsecondaryLabel, 1-line, "@mentioner: …" in groups) - Trailing meta column: timestamp (11pt
tertiaryLabel) above either the unread count (Blue pill,#00323Fink) or the outgoing S/D/R letter
Kik Code
- A circular scannable identity glyph: a solid
#00B0F0rounded-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
dividerbottom - Leading: back chevron (
chevron.left17pt#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 =
#00B0F0filled 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/#25282Dfill, placeholder "Type a message"tertiaryLabel - Trailing: text "Send" label, Inter 14pt w700
#00B0F0(dimmedtertiaryLabelwhen empty)
Search Bar
- Height: 36pt,
#F3F4F6/#25282D, 10pt radius - Leading
magnifyingglass15pttertiaryLabel, placeholder "Search for people, groups, bots"
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max ~300pt; compact list rows |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above header |
| iPhone 15/16 Pro Max | 430pt | Wider bubbles (~344pt), larger Kik Code plate |
| iPad (portrait) | 768pt | Split: conversation list (~340pt) + thread; content max ~680pt centered |
| iPad (landscape) | 1024pt+ | Persistent list + thread; Kik Code shown larger on profile pane |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-kik {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121316;
--heading-color: #121316;
--link-color: #0075a0;
--link-hover-color: #00506d;
--border-color: #d4d5d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,19,22,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,19,22,0.12);
--header-bg: #121316;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656668;
--button-bg: #00b0f0;
--button-text-color: #000000;
--button-hover-bg: #008bbd;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121316;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d5d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121316;
--base-font: var(--font-inter);
--heading-font: var(--font-open-sans);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- skype 79.9%
- tidal 77.0%
- seibundo 74.3%
- plenty of fish 72.5%
- fitbit 71.9%
Where this came from
- Source document
ios/design-md/messaging/kik/DESIGN.md· 25.1 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.