/* ============================================================================ design.css — THE DESIGN SOURCE OF TRUTH FOR THIS APP ============================================================================ FOR CLAUDE CODE / ANY DEVELOPER READING THIS: This file owns every visual decision in the app: colour, type, spacing, shape, motion, and component appearance. It is maintained separately from application logic and is replaced wholesale when the design changes. HOW TO WIRE IT UP (do this once): 1. Save this file at: public/design.css 2. In public/index.html, DELETE the entire inline block in , and replace it with this single line: 3. Change nothing else. Every class name below already matches the markup the app renders, so no HTML or JS needs to change. RULES GOING FORWARD: - Do NOT add new CSS to index.html, and do NOT add inline style="" attributes for anything visual. If a new element needs styling, add a class here instead. Keeping design in one file is the whole point. - When a new design version of this file arrives, replace this file entirely. Do not merge by hand. - Logic, data, routing, and API code stay in index.html / src/index.js. This file never contains behaviour. --------------------------------------------------------------------------- CONTENTS 1. Tokens .................. colour, type, motion values 2. Base .................... reset, page shell 3. Motion .................. press feedback, keyframes, reduced motion 4. Feed .................... video slides, caption, action rail, author 5. Chrome .................. top bar, feed tabs 6. Bottom nav .............. tab pill + round action button 7. Pages ................... page shell, headings, forms, rows 8. Sheets .................. comment sheet, gift sheet, backdrop 9. Comments ................ comment rows, replies, reactions 10. Profile, lists, gifts ... stats, follow buttons, gift grid, coin packs 11. Bits ................... toast, grid, spinner, empty states ========================================================================= */ /* ============================================================================ 1. TOKENS Change a value here and it moves everywhere it is used. Prefer editing these over hard-coding a colour further down. ========================================================================= */ :root { /* --- Surfaces (the app body is near-black; chrome floats white on top) --- */ --bg: #000; /* app background */ --surface: #121212; /* cards, inputs, seg buttons */ --raised: #1C1C1C; /* avatars, grid cells */ --border: #2C2C2E; /* hairlines */ /* --- Text --- */ --text: #fff; --muted: #8E8E93; /* secondary text, labels */ --faint: #5C5C5E; /* tertiary */ /* --- Floating chrome (white pills that sit over video) --- */ --chrome: #fff; --chip: #F0EBE0; --on-chrome: #111; --on-chrome-muted: #8A8A8E; /* Secondary text on a WHITE sheet (comment names, timestamps, Reply). #8A8A8E only reaches 3.4:1 on white, which is genuinely hard to read at 12–13px; this darker grey reaches 5.1:1 and still stays quiet. */ --on-sheet-muted: #6E6E73; /* --- Accent: the orange the app icon is made of ----------------------- Sampled off the icon rather than picked to sit near it: #FF6018 is its single most common tone and the top of the gradient the mark runs down. The amber that used to be here belonged to nothing — a product whose own colour appears nowhere on its own mark reads as two products. The gradient's other end (#F5135E, magenta) is deliberately NOT the accent: it lands on top of the heart red, and an accent a user cannot tell apart from "you liked this" is an accent that says nothing. Still a light colour, so the old rule holds unchanged — anything placed ON the accent uses near-black (--on-accent), never white. #111 on this reaches 6.2:1, and the accent as text on the black page reaches 6.9:1. */ --accent: #FF6018; --accent-soft: #3A3A3C; /* the sliding highlight behind the active tab */ --accent-ink: #FF6018; /* accent used as text/icon colour */ --on-accent: #111; /* text/icons placed on top of --accent */ /* --- Dark nav chrome (nav pill + round button) --- */ --nav-bg: #1C1C1E; --nav-inactive: #9A9A9E; /* --- Type ------------------------------------------------------------ display = headings and usernames; sans = everything else; mono = numbers (counts, durations, money) so digits line up. */ --sans: 'Inter', system-ui, sans-serif; --display: 'Space Grotesk', system-ui, sans-serif; --mono: 'IBM Plex Mono', monospace; /* --- Motion ---------------------------------------------------------- Every duration sits between .18s and .32s: fast enough to feel responsive, slow enough to read as movement. */ --press: .18s cubic-bezier(.34,1.56,.64,1); /* springy, slight overshoot */ --settle: .28s cubic-bezier(.22,.61,.36,1); /* decelerating, for arrivals */ --slide: .3s cubic-bezier(.4,0,.2,1); /* the nav highlight */ } /* ============================================================================ 2. BASE ========================================================================= */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); overscroll-behavior: none; } body { font-family: var(--sans); color: var(--text); } /* Nothing here doubles as a document to read and select from — a name, a button label, a message preview are all tap targets, never copy source. Without this, a slightly-too-long tap on any of them (a name in the inbox, a thread preview — see the "Voice message" row) is read by mobile Chrome/Safari as a text-selection gesture instead of a tap: it highlights the word, pops the native dictionary/"Web Search" card up from the bottom, and eats the tap that was supposed to open the conversation. The compose box is the one real exception — typing needs a cursor and selection to work normally, so it's opted back in explicitly. */ * { -webkit-user-select: none; -webkit-touch-callout: none; user-select: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } ::-webkit-scrollbar { display: none; } input, textarea { font-family: inherit; } #app { position: fixed; inset: 0; overflow: hidden; } /* ============================================================================ 3. MOTION One system, applied globally, so the whole app feels tactile without styling each control individually. ========================================================================= */ /* Every button springs when pressed. */ button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; transition: transform var(--press), opacity .18s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button:active { transform: scale(.9); opacity: .85; } /* Things that are tappable but aren't