designmd-forge 1.2.0

package/dist/data/designs/ios-kik.md

@@ -0,0 +1,392 @@
+# Design System Inspiration of Kik (iOS)
+
+## 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
+
+| 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 |
+
+## 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
+
+| 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**: `@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.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Bubbles, list rows, thread content |
+| Raised (Level 1) | `rgba(0,0,0,0.10) 0 2px 8px` | Floating new-chat FAB, raised cards |
+| Floating (Level 2) | `rgba(0,0,0,0.16) 0 6px 20px` (light) / 1pt border on dark | Context menu, attachment popover |
+| Sheet (Level 3) | `rgba(0,0,0,0.20) 0 -4px 24px` | Attachment sheet, share, Kik Code share |
+| Modal Overlay | `rgba(0,0,0,0.5)` dim | Behind modals and sheets |
+
+**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
+| 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
+
+## 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