open-design/design-systems/xiaohongshu/tokens.css

/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/xiaohongshu/tokens.css
 *
 * Structured token bindings for "Design System Inspired by Xiaohongshu"
 * (小红书 / RED) — the Chinese lifestyle UGC discovery platform.
 *
 * The visual baseline is *daily-ness*: a near-white masonry canvas that
 * functions as a transparent picture frame for user-uploaded breakfasts,
 * lipstick swatches, and hotel sofas. Brand red (`#FF2442`) is the
 * single saturated voice the system permits — one accent per screen,
 * never two. Neutrals are translucent overlays (`rgba(0,0,0, .05/.08/
 * .27/.45/.62/.80)`) rather than discrete grey steps so the same fill
 * lands believably on white card, photo, or sheet.
 *
 * Brand identity in three sentences:
 *   1. Canvas is `#F5F5F5`; the white card (`#FFFFFF`) lifts above it
 *      by color contrast, not by elevation. Shadows are essentially
 *      absent — depth comes from rounding and spacing.
 *   2. Type is PingFang SC throughout (no separate display face) with
 *      the documented Hiragino Sans GB / Microsoft YaHei / Noto Sans SC
 *      fallback chain so 标记我的生活 reads the same on macOS, Windows,
 *      and Linux. Tracking is zero everywhere; the heading scale caps
 *      at 32px per DESIGN.md §3 ("no 48/64 hero").
 *   3. Brand red is the singular accent — used on CTAs, hearts, active
 *      tabs, and tag-on-trending. Danger has no independent token in
 *      RED's production system, so `--danger` aliases to the same red
 *      (DESIGN.md §2: "danger reuses --primary"). Skill authors should
 *      differentiate destructive intent via outline + leading icon when
 *      the difference matters.
 *
 * Schema decisions:
 *   - --bg: #f5f5f5 (canvas behind cards);  --surface: #ffffff (card).
 *   - --surface-warm: #fafafa (info background, DESIGN.md --bg0-lighter).
 *   - --fg: rgba(0, 0, 0, 0.8) (title — soft black, never #000);
 *     --fg-2: rgba(0, 0, 0, 0.62) (paragraph); --muted: 0.45 (caption);
 *     --meta:  rgba(0, 0, 0, 0.27) (disabled / placeholder).
 *   - --border: rgba(0, 0, 0, 0.08) (hairline separator);
 *     --border-soft: rgba(0, 0, 0, 0.05) (fill1 — group line).
 *   - --accent: #ff2442 (token red, default); --accent-hover: #ff2e4d
 *     (component-layer red — slightly pinker / lighter, doubles as the
 *     natural hover state for solid-fill primary CTAs).
 *   - --danger: #ff2442 (reuses brand red — DESIGN.md §2 explicit).
 *   - Font stacks lead with PingFang SC then the CJK fallback chain —
 *     RED is CJK-primary, so Latin fallbacks (`-apple-system`, etc.)
 *     come after.
 *   - Type scale ceiling at 32px (--text-4xl). DESIGN.md §3 forbids
 *     48/64 hero type; --text-3xl bumps to 28px so the marketing
 *     hero has a usable intermediate above section headings.
 *   - --radius-md: 12px (feed card), --radius-lg: 16px (feature card),
 *     --radius-pill: 9999px (buttons are pill, always).
 *   - --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08) — DESIGN.md §6
 *     "Subtle (1)", used only on PC card hover in the live system.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ──────────────────────────────────────────────────────
   * Canvas → Card → Subtle. The grey canvas IS the separation device
   * for white cards; cards do not need shadows to feel lifted. */
  --bg:           #f5f5f5;             /* Canvas — page background behind cards (DESIGN.md --bg0) */
  --surface:      #ffffff;             /* Surface — the white card / modal (DESIGN.md --bg) */
  --surface-warm: #fafafa;             /* Subtle — information background (DESIGN.md --bg0-lighter) */

  /* ─── Foreground ───────────────────────────────────────────────────
   * Four translucent black tiers. Pure #000 is never used for text;
   * even the title sits at 0.8 alpha so it reads as "soft black"
   * against the white card. */
  --fg:    rgba(0, 0, 0, 0.8);         /* Title — DESIGN.md --title */
  --fg-2:  rgba(0, 0, 0, 0.62);        /* Paragraph — DESIGN.md --paragraph */
  --muted: rgba(0, 0, 0, 0.45);        /* Description — DESIGN.md --description */
  --meta:  rgba(0, 0, 0, 0.27);        /* Disabled / placeholder — DESIGN.md --disabled */

  /* ─── Border ───────────────────────────────────────────────────────
   * Hairlines via alpha — the same line drops onto white card, onto
   * photo, or onto a sheet without recoloring. No opaque grey borders
   * by default. */
  --border:      rgba(0, 0, 0, 0.08);  /* Separator hairline — DESIGN.md --separator */
  --border-soft: rgba(0, 0, 0, 0.05);  /* Fill1 — group / row line that should not visually compete */

  /* ─── Accent ───────────────────────────────────────────────────────
   * One saturated voice for the whole system. The hover slot maps to
   * the documented component-layer red (#FF2E4D, slightly pinker /
   * lighter) — the same divergence that appears on .reds-button-new
   * .primary in production, repurposed as the natural hover state for
   * a token-driven primary CTA. */
  --accent:        #ff2442;            /* RED brand red (DESIGN.md --primary / --color-red) */
  --accent-on:     #ffffff;            /* White text on red CTA */
  --accent-hover:  #ff2e4d;            /* Component-layer red — slightly pinker; reads as a lift on hover */
  --accent-active: #e6203a;            /* Pressed — darker, more saturated red */

  /* ─── Semantic ─────────────────────────────────────────────────────
   * Success / warn lifted from DESIGN.md §2 (the platform's
   * --success / --warning tokens; nearly invisible in the consumer
   * flow but tokenized for B2B console contexts). Danger has no
   * independent token in RED — it reuses --primary; aliasing here
   * preserves that explicit DESIGN.md decision. */
  --success: #02b940;                  /* DESIGN.md --success (#EAF8EF bg variant lives in components) */
  --warn:    #ff7d03;                  /* DESIGN.md --warning */
  --danger:  #ff2442;                  /* Reuses brand red — DESIGN.md §2 "danger reuses --primary" */

  /* ─── Typography ───────────────────────────────────────────────────
   * CJK-primary brand: PingFang SC leads, then the documented
   * Hiragino Sans GB / Microsoft YaHei / Noto Sans SC chain, then
   * the Apple/Helvetica Latin fallback. No separate display face —
   * every Typography-FontFamily-* in production resolves to PingFang SC.
   * --font-mono inherits the schema default (RED Number is intentionally
   * NOT referenced here per DESIGN.md §3 — end users don't have it). */
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale — DESIGN.md §3 PC web tokens (h1=32 → c2=12).
   * The ceiling is deliberately compact: DESIGN.md forbids 48/64 hero
   * type, so --text-4xl tops out at 32px. --text-3xl interpolates at
   * 28px so a marketing hero has visual lift above section headings. */
  --text-xs:   12px;                   /* c2 — small caption */
  --text-sm:   14px;                   /* b2 / t3 — body standard, secondary label */
  --text-base: 16px;                   /* b1 / t2 — body large, the marketing reading size */
  --text-lg:   18px;                   /* t1 — strong label */
  --text-xl:   20px;                   /* h3 — card heading */
  --text-2xl:  24px;                   /* h2 — section heading */
  --text-3xl:  28px;                   /* intermediate display — between h1 and h2 */
  --text-4xl:  32px;                   /* h1 — display ceiling (DESIGN.md "no 48/64 hero") */

  /* Leading + tracking — DESIGN.md §3.
   * Body rides on 1.5 (24px on 16px b1). Headings tighten to 1.25
   * (40px on 32px h1). Tracking is 0 everywhere; only component-level
   * Chinese overrides hand-tune -0.3 to -0.64px and that stays out
   * of the token system. */
  --leading-body:     1.5;
  --leading-tight:    1.25;
  --tracking-display: 0;               /* DESIGN.md: "Every --Typography-Spacing-* token is 0" */

  /* ─── Spacing ──────────────────────────────────────────────────────
   * 8pt grid, stops 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 per DESIGN.md
   * §5. Section-level gaps (48 / 64) live in the rhythm tier below. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ─── Section rhythm ───────────────────────────────────────────────
   * The masonry feed itself is dense (cards 7–10px apart) but section
   * gaps on marketing surfaces breathe at 48–64px desktop, stepping
   * down to 32px on phone where vertical real estate is scarce. */
  --section-y-desktop: 64px;
  --section-y-tablet:  48px;
  --section-y-phone:   32px;

  /* ─── Radius ───────────────────────────────────────────────────────
   * Generous everywhere: 8px on inputs and tags, 12px on feed cards,
   * 16px on feature / hero cards, full pill on every button. The
   * pill radius is functionally mandatory — a square-cornered CTA
   * reads as wrong in this brand. */
  --radius-sm:   8px;                  /* Inputs, tags, small chips */
  --radius-md:   12px;                 /* Feed card (DESIGN.md §4 "Cards") */
  --radius-lg:   16px;                 /* Larger feature card, bottom-sheet top corners */
  --radius-pill: 9999px;               /* Buttons — always */

  /* ─── Elevation ────────────────────────────────────────────────────
   * Three sanctioned levels, used sparingly. Default is flat — depth
   * comes from canvas color contrast and rounding. The raised tier
   * lands on PC card hover only; modal shadow is one-off on .modal
   * and stays in components. */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);   /* DESIGN.md §6 "Subtle (1)" — PC card hover */

  /* ─── Focus ────────────────────────────────────────────────────────
   * Brand red at 30% opacity. The schema default formula works for
   * the RED accent without override. */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  /* ─── Motion ───────────────────────────────────────────────────────
   * Standard durations. RED's interaction language is soft and quiet;
   * no aggressive bouncing curves. Defaults are appropriate. */
  --motion-fast:   150ms;
  --motion-base:   200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ───────────────────────────────────────────────────────
   * 1200px container width — comfortably wider than the note-detail
   * two-pane (~1100px) for marketing surfaces. Phone gutter is tighter
   * (12px) so the masonry feed runs nearly edge-to-edge per DESIGN.md
   * §5 "Mobile Two-Column". */
  --container-max:            1200px;
  --container-gutter-desktop: 24px;
  --container-gutter-tablet:  16px;
  --container-gutter-phone:   12px;
}