App

# DESIGN.md — Rumor Mobile > Generated by `/figma-ds-sync` (code-side only — no Figma URL this pass; see the reconciliation > note below). Source: `tailwind.config.js` + `src/components/ui/*`, read 2026-07-01. Tokens are > stated as **NativeWind classes** so generated code copies them directly. Every value here exists > in `token-map.json` — nothing here is invented. ## 1. Visual Theme & Atmosphere Clean, editorial, near-monochrome — the same language as Rumor's web product. Crisp white canvas, near-black ink, generous whitespace, soft hairline dividers. Restrained and premium; color is an accent, not a field. Two accents carry brand energy: warm stone (`warm-stone`) for quiet emphasis, and an electric lime (`rumor-lime`) used sparingly — never as a large field or text-on-white. Tags: minimal · editorial · high-contrast · warm-neutral accents. ## 2. Color System - **Canvas / ink:** `bg-background` (#fff) · `text-foreground` (#1f1f1f). - **Primary (actions, emphasis):** `bg-primary` / `text-primary` (#1f1f1f), on-primary `text-primary-foreground` (#fff). - **Secondary / muted surfaces:** `bg-secondary` (#eee) · `bg-muted` (#f7f7f7) with `text-muted-foreground` (#a2a1a1). - **Accent (warm):** `bg-accent` (#f3eeea) · `text-accent-foreground` (#a28b7f) · `bg-warm-stone` / `text-warm-stone` (#cdbab1). - **Brand:** `bg-rumor-lime` (#b7ff00) — accent only, never large fields or text-on-white. - **Links:** `text-support-global-link` (#a28b7f, stone) — matches web's resolved link color. - **Status:** success `text-success` (#167e60) on `bg-success-bg`; warning `text-warning` (#d9a21f) on `bg-warning-bg`; danger `text-danger` (#9d0d11) on `bg-danger-bg`; info `text-info` (#0d729d) on `bg-info-bg` — each pairs with a matching `*-border` token. - **Lines:** `border-border` (#e1e1e1), softer `border-divider-soft` (#e5e5e5). - **Neutral content scale:** `text-content-neutral` (#b5b5b5) → `text-content-neutral-body` (#838282) for secondary text, `text-content-neutral-disabled` (#9c9c9c) for disabled, `text-content-neutral-placeholder` (#a2a1a1) for placeholders. - **Neutral surfaces:** `bg-surface-muted` (#efefef) · `bg-surface-warm` (#e8e0db). **Reconciliation note:** every value above is confirmed identical to web's `content/design.md` in the `rumor-design-system` microsite (background, foreground, border, warm-stone, all four status colors, ABC Diatype + Romie fonts). Brand tokens are shared across platforms; nothing here was picked independently. `tailwind.config.js` carries real duplicate-token debt beyond what's listed (a dozen+ near-identical grays, dozens of one-off pixel-matched values) — see `token-map.json`'s `$excludedAsNoise` for the full list of what was deliberately left out of the closed vocabulary. ## 3. Typography - **Sans (UI/body):** ABCDiatype — `font-dia-light` / `font-dia` / `font-dia-medium` / `font-dia-bold`. - **Serif (display/editorial):** RomieTrial — `font-romie` / `font-romie-medium` / `font-romie-bold`. Reserved for large display titles and editorial moments — never body copy, same rule as web. - **Scale:** `text-xxs` (8px) · `text-11` · `text-13` · base · `text-16` · `text-18` · `text-title` (26px) · `text-stat-display` (40px). - **Display titles:** pair large sizes with tight tracking — `tracking-tight-s` (-0.5px) / `tracking-tight-m` (-0.75px) / `tracking-tight-xl` (-2px) — and `leading-snug-x` (1.2). Body uses `leading-relaxed-x` (1.4). - Prefer `ThemedText` (`@/components/themed-text`) over the raw `Text` primitive — it composes the shared `Text` and provides the design-system typography variants + `muted` support out of the box (per this repo's own `CLAUDE.md`). ## 4. Components & Patterns Real, shipped primitives in `src/components/ui/*` (46 files) — build from these, never re-implement one: - **Structure:** `app-header` (title + composed `BackButton` — the same "app header with back button" signature pattern as web), `bottom-sheet` (blur-backed, via `expo-blur`'s `BlurView` — the native equivalent of web's `glass` elevation token), `bottom-sheet-actions`, `bottom-action-bar`, `dialog`. - **Selection & input:** `segmented-control` (typed `SegmentedOption<T>[]`, optional count badges — the native equivalent of web's Guest/Host segmented toggle), `select`, `checkbox`, `switch` (a documented compact `sm` variant: 24×16 track, 12px thumb — sized directly off Figma, per the component's own code comment), `compact-switch`, `date-time-sheet`, `otp-input`, `phone-input`, `text-input` / `controlled-input`, `form-field`. - **Feedback:** `toast`, `toast-badge`, `banner`, `action-banner`, `notification-badge`, `badge` (pill geometry — `rounded-rumor-full`, shared with web's signature pill shape), `skeleton`. - **Content:** `text` / `typography` / `themed-text` (see §3), `accordion`, `collapsible`, `fading-divider`, `separator`, `horizontal-scroll-fade`, `reorderable-list`, `swipeable-row`, `map-preview`, `pdf-view`, `rich-text-editor` / `rich-text-toolbar`. - **Overlays:** `anchored-popover`, `anchored-tooltip`, `info-tooltip`, `tooltip`, `link-sheet`, `leave-without-saving-sheet`, `dropdown-menu`. - Compound components over polymorphic children (`Button` + composed `Text`, not a `string | ReactNode` prop) — already the pattern in `button.tsx`. - Use the existing `Dialog`/bottom-sheet primitives for sheet-style overlays before adding a native sheet dependency (per `CLAUDE.md`). ## 5. Spacing & Layout - Use the spacing scale via padding/`gap` classes: `p-2.5`=10, `p-3`=12, `p-3.75`=15, `p-4.5`=18, `p-5.5`=22, `p-7.5`=30, `p-15`=60. **`gap` for space-between, padding for space-within** — not child margins. - Radii: cards/sheets `rounded-2.5` (10) / `rounded-2.5xl` (20) / `rounded-3xl` (24) / `rounded-5xl` (32); pills `rounded-rumor-full` (128px — identical to web's signature pill radius). Pair `borderRadius` with `borderCurve: 'continuous'` for the native squircle look. - Respect safe areas; hairline borders at `border` width or the `1.5` variant. ## 6. Motion & Interaction - Reanimated, native-thread, 60fps. Animate **only GPU props** (transform/opacity); derive visuals from ground-truth state via interpolation — never store `scale`/`opacity` in state. - Scroll position via shared values, never `useState`. Press feedback via Gesture/Pressable, not JS state churn. - **Known gap:** unlike web (`design.md` §Motion: `200ms` / `cubic-bezier(0.4, 0, 0.2, 1)`), there are no duration/easing tokens in `tailwind.config.js` today — these conventions live only as prose in `AGENTS.md`. Tokenizing them is a deliberate future addition, not something this sync can invent. ## Rationale Near-monochrome + one warm accent + one electric accent reads premium and keeps focus on content, matching web exactly at the brand-token level. The dual type system (Diatype sans + Romie serif) gives editorial contrast without a third family, again shared with web. ## Accessibility - Every interactive element needs an `accessibilityRole` + `accessibilityLabel` (also what behavior tests query by). - Maintain contrast: body text at `text-foreground`/`text-content-neutral-body`, never the fainter `content-neutral` for primary copy. - Hit targets ≥ 44pt; honor reduced-motion for the animation layer. ## Known gaps (see `token-map.json` `$knownGaps`) - **No 5-step elevation scale** — only two ad-hoc shadow keys exist (`bottom-cta-shadow`, `bottom-large`). Web's five-tier `xs/s/m/l/xl` elevation system has no mobile equivalent yet. - **No motion tokens** — duration/easing exist only as prose guidance, not as tailwind config values. - **No Figma reconciliation this pass** — this sync ran code-side only (`tailwind.config.js` + `src/components/ui/*`), no Figma URL. `code-connect.json` is intentionally absent; re-run with a Figma file URL once the design-system-of-record question (which Figma file maps to mobile) is settled to add Code Connect mapping and cross-check against Figma variables.