admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d8be643ec75429c718fd96752f3cc35e347cb4f1
workbuddy_skills/open-design/design-systems/xiaohongshu/tokens.css
T

193 lines
13 KiB
CSS
Raw Normal View History

术语更名第一步：执行会话／任务会话 ⇒ 项目会话（口径块 ＋ 触发词表）＋ 落地 9 份"说人话"新稿
2026-10-08 22:10:12 +08:00
/* ─────────────────────────────────────────────────────────────────────────
* 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;
}
Reference in new issue Copy Permalink