④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,402 @@
+# Design System Inspired by Xiaohongshu
+
+> Category: Media & Consumer
+> Lifestyle UGC social platform. Singular brand red, generous radius, content-first.
+
+## 1. Visual Theme & Atmosphere
+
+Xiaohongshu (小红书 / RED) is the visual opposite of a SaaS console. Open the app and you do not see "Xiaohongshu" — you see other people's breakfasts, hotel sofas, the lipstick they bought on the third try. That is by design. The entire UI tries to act as a transparent picture frame: white surfaces, low-noise components, no shadow stacks competing for attention. Everything yields to the user-uploaded image.
+
+The palette is brutally restrained. A near-white canvas (`#FFFFFF` / `#F5F5F5`) covers the majority of every page. Neutrals are built from translucent overlays (`rgba(48,48,52, 0.05~0.20)`) rather than discrete grey steps — the same fill drops onto white for hover, onto a card for divider, onto a button for disabled. The brand red `#FF2442` is the only saturated color the system permits, and it shows up only on tab indicators, the heart-active state, and primary CTAs. Semantic colors (success green, warning orange, info blue) exist as tokens but are nearly invisible in the consumer flow — danger is not a separate color, it just reuses brand red.
+
+Form is soft. Cards round at 12–16px. Buttons round all the way to pills (`border-radius: 9999px`). Shadows are essentially absent — depth comes from spacing and rounding, not elevation. The signature layout is a two-column (mobile) or 5-column (PC) waterfall masonry where rows do not align — image height drives card height, and that misalignment *is* the realism.
+
+Type is PingFang SC at medium weight throughout. There is no thin-light heroic display, no all-caps Latin headline. Hierarchy is compact (`H1: 32/600`, body: `14-16/400`), tracking is `0`, and digits use a custom `RED Number` family so counts on like buttons line up. The voice of the writing matches the visual: second person, conversational, never enterprise. "你的生活兴趣社区" — *your* lifestyle interest community, not "the platform".
+
+The result reads like a slightly worn lifestyle magazine with a few handwritten Post-its tucked between the pages. Not Apple-store cold-minimal. Not Lark efficiency-console. Definitely not any SaaS dashboard. The design baseline is *daily-ness* — the user should not feel they are using software, only flipping through someone else's life.
+
+**Key Characteristics:**
+- Singular brand red (`#FF2442` token, `#FF2E4D` at the component layer) — never two saturated colors at once
+- Translucent neutrals (`rgba(48,48,52, .05/.10/.20)`) instead of discrete grey steps
+- Generous rounding everywhere: cards 12–16px, buttons fully pill, sheets 16px top-only
+- Near-zero shadow — flat by default
+- PingFang SC at 400/500/600 only; no thin display weights
+- Content (user photos) is the color source — UI yields
+- Bottom sheet for secondary actions on mobile, never modal
+- Voice: second person, lifestyle, never SaaS-enterprise
+
+## 2. Color Palette & Roles
+
+All values below are sampled from production CSS at `https://www.xiaohongshu.com/explore` (inline `<style>` blocks for `:root, .force-light` and `:root[dark], .force-dark`).
+
+### Primary Brand
+- **Brand Red — Token** (`#FF2442`): `--primary` and `--color-red`. The design-system source of truth. Use for accents, active tabs, hearts, primary CTAs.
+- **Brand Red — Component** (`#FF2E4D`): hard-coded on `.reds-button-new.primary`, `.active-bar`, outlined-button border. Slightly pinker and marginally lighter — same red channel (`FF`), with `+10` on green (`24` → `2E`) and `+11` on blue (`42` → `4D`). The lifted green/blue raises overall lightness while the proportionally larger blue lift nudges the hue a touch toward pink, the net effect of which likely reduces visual sting on large button fills. Whether this divergence from `--primary` is intentional (accessibility / large-fill ergonomics) or historical drift (a hard-coded override that should eventually merge back to the token) is undocumented upstream. Use when emitting actual buttons or active-bar UI; see §9 *Brand Red Disambiguation* for the per-surface rule.
+- **Star Yellow** (`#FDBC5F`): bookmark / collect-active icon fill (sampled from `<symbol id="collected">` SVG). Only place yellow is allowed.
+
+### Neutrals (translucent overlay system)
+- **Surface** (`#FFFFFF`) — `--bg`. Cards, modals.
+- **Canvas** (`#F5F5F5`) — `--bg0`. Page background behind cards.
+- **Subtle** (`#FAFAFA`) — `--bg0-lighter` / `--color-information-background`. Information backgrounds.
+- **Fill 1** (`rgba(48,48,52,0.05)`) — `--fill1`. Lightest hover, group lines.
+- **Fill 2** (`rgba(48,48,52,0.10)`) — `--fill2`. Hover surface, disabled button bg, the "following" follow-button state.
+- **Fill 3** (`rgba(48,48,52,0.20)`) — `--fill3`. Pressed.
+- **Separator** (`rgba(0,0,0,0.08)`) — `--separator`. Hairline border.
+- **Separator Strong** (`rgba(0,0,0,0.20)`) — `--separator2`.
+- **Opaque Separator** (`#EAEAEA`) — `--opaque-separator`. When a real solid border is needed.
+
+### Text
+- **Title / Primary** (`rgba(0,0,0,0.80)`) — `--title`. Headings and titles. Soft black, never pure black.
+- **Paragraph / Secondary** (`rgba(0,0,0,0.62)`) — `--paragraph`. Body, secondary text.
+- **Description** (`rgba(0,0,0,0.45)`) — `--description`. Auxiliary captions.
+- **Disabled / Placeholder** (`rgba(0,0,0,0.27)`) — `--disabled` / `--placeholder`.
+
+### Semantic (token-level only — rarely visible in consumer UI)
+- **Success** (`#02B940`) — `--success`. Background variant `#EAF8EF` (`--success2`).
+- **Warning** (`#FF7D03`) — `--warning`. Background variant `#FFF2E6` (`--warning2`).
+- **Info** (`#3D8AF5`) — `--info` / `--color-blue`. Almost never appears in consumer flow.
+- **Link** (`#133667`) — `--link`. Deep navy, not a typical link blue. In practice, brand red is used for emphasis instead.
+- **Danger / Error**: no independent token — danger reuses `--primary` (brand red). Heads-up for skill authors: an emitted destructive action and an emitted primary CTA will therefore be visually identical out of the box (a "Delete account" button reads exactly like a "Follow" button). RED's production destructive treatment is not directly observable in this snapshot, so as a defensive default, differentiate destructive intent via outline-style + brand-red text, or a leading destructive icon, when the difference matters.
+
+### Functional Gradients (the only gradients allowed)
+Brand red itself is **never gradient**. The only gradients in the system are functional:
+- **Search Hotspot Hint** (`linear-gradient(90deg, #FF2543 0%, #FF5225 100%)`) — `--search-hotspot-hint`. Trending-search badge only.
+- **Video Player Mask** (`linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 50%, rgba(0,0,0,0.75))`) — `--mask-video-player-mask`. Top + bottom gradient on video tiles.
+
+### Dark Mode
+
+Dark mode follows `prefers-color-scheme: dark` with a manual override; both the `:root[dark]` attribute and the `.force-dark` class are honored in source.
+
+- **Surface** (`#19191E`) — purple-tinted near-black, not pure `#000`.
+- **Canvas** (`#0E0E11`) — deepest layer.
+- **Title** (`rgba(255,255,255,0.84)`).
+- **Paragraph** (`rgba(255,255,255,0.56)`).
+- **Brand Primary** (`#FF2E4D`) — slight pink shift vs. light mode (`#FF2442` → `#FF2E4D`) to lower visual sting in low light.
+- **Separator** (`rgba(255,255,255,0.07)`).
+
+## 3. Typography Rules
+
+All values sampled from production CSS at `https://www.xiaohongshu.com/`.
+
+### Font Family
+
+**Chinese (display + body, all levels):**
+```
+PingFang SC
+```
+Every `--Typography-FontFamily-*` variable resolves to `PingFang SC`. There is no separate display face.
+
+**Site-wide fallback chain:**
+```
+-apple-system, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+'Microsoft Yahei', Arial
+```
+
+**Numbers (custom):**
+```
+'RED Number' (Regular 400 / Medium 500 / Bold 700)
+```
+Used for like counts, follower counts, stat displays. Solves PingFang's non-tabular digit problem.
+
+**Mobile app embedded:** 方正悠黑 (`FZ YouHei`) ships in the iOS / Android app; users can fall back to system PingFang SC / Noto Sans CJK SC.
+
+### Hierarchy (PC web tokens)
+
+| Token | Size | Weight | Line-height | Role |
+|---|---|---|---|---|
+| `--h1` | 32px | 600 | 40px (125%) | Page hero title |
+| `--h2` | 24px | 600 | 32px (133%) | Section heading |
+| `--h3` | 20px | 600 | 28px (140%) | Card heading |
+| `--t1` | 18px | 600 | 26px (144%) | Strong label |
+| `--t2` | 16px | 500 | 24px (150%) | Medium label |
+| `--t3` | 14px | 500 | 20px (143%) | Secondary label |
+| `--b1` | 16px | 400 | 24px (150%) | Body large |
+| `--b1-loose` | 16px | 400 | 26px (162%) | Long-form body |
+| `--b2` | 14px | 400 | 20px (143%) | Body standard |
+| `--b2-loose` | 14px | 400 | 22px (157%) | Body long-form |
+| `--c1` | 13px | 400 | 20px (154%) | Caption |
+| `--c2` | 12px | 400 | 18px (150%) | Small caption |
+| `--c3` | 10px | 400 | 14px (140%) | Badge / smallest |
+
+`*-emphasized` variants (e.g. `--c1-emphasized`) bump the same size to weight 500.
+
+### Principles
+
+- **Compact heading scale.** Max display is 32/600 — there is no 48px / 64px hero type. Density wins over visual jumps.
+- **Three weights only.** 400 (Regular), 500 (Medium), 600 (Semibold). Weight 700 is reserved exclusively for `--number-emphasized-font-weight`. No thin / light.
+- **Tracking is zero.** Every `--Typography-Spacing-*` token is `0`. Component-level overrides (cookie banner, category title) hand-tune `-0.3px`–`-0.64px`, but base tokens are flat.
+- **Soft black, not pure black.** Title text is `rgba(0,0,0,0.80)`. Pure `#000` is never used for body or title text.
+- **Dedicated digit face.** Counts, stats, and follow-numbers always use `RED Number` for tabular alignment.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#FF2442` (or `#FF2E4D` when matching the live `.reds-button-new.primary` class)
+- Text: `#FFFFFF`, weight 500, 14px
+- Radius: **pill — `border-radius: 9999px`**
+- Padding: `8px 20px` small / `12px 32px` large
+- No shadow
+
+**Secondary (filled)**
+- Background: `rgba(48,48,52,0.10)` (`--fill2`) — soft grey
+- Text: `rgba(0,0,0,0.80)` (`--title`)
+- Same pill radius
+
+**Secondary (outlined)**
+- Background: `#FFFFFF`
+- Border: `1px solid #FF2E4D`
+- Text: `#FF2E4D`
+- Pill radius. Used for the unfollowed-state follow CTA on profile cards.
+
+**Icon button (like / collect / comment)**
+- Pure icon (24px) stacked over count (12px, `rgba(0,0,0,0.45)`)
+- No background plate
+- Active state: icon flips to `#FF2442` (heart) or `#FDBC5F` (star); count text matches
+
+### Follow Button — three-state (highest-recognition component)
+
+| State | Background | Label (Chinese / English) | Text | Shape |
+|---|---|---|---|---|
+| Not following | `#FF2442` | `+ 关注` (Follow) | white | pill |
+| Following | `rgba(48,48,52,0.10)` | `已关注` (Following) | `rgba(0,0,0,0.45)` | pill |
+| Mutual | `rgba(48,48,52,0.10)` | `互相关注` (Mutual) | `rgba(0,0,0,0.62)` | pill |
+
+Feed-card variant: `6px 14px` padding, 12px text. Profile-page variant: `8px 20px`, 14px text.
+
+### Cards (Feed / Note Card)
+
+- Radius **12px** (16px for larger feature cards)
+- **No box-shadow by default.** White card sits on `#F5F5F5` canvas — separation comes from the canvas color, not elevation.
+- Structure: image fills top edge-to-edge → title (1–2 lines, 12px padding) → footer (32px round avatar + nickname + heart + count)
+- Image clips to top corners only; bottom corners are square because the image fills to the bottom of the image region.
+- PC hover: subtle `translateY(-2px)` plus a very light shadow (`0 4px 12px rgba(0,0,0,0.08)`). Mobile: no hover state.
+
+### Inputs / Search
+
+- Background: `#F5F5F5`
+- Border: none (focus may add a `1px solid` of `--separator`)
+- Radius: pill (or 20px for taller fields)
+- Height: 36–40px
+- Inline magnifier icon at the leading edge
+
+### Tabs / Segmented Control
+
+- Text-only tabs with a **2px underline bar** — never pill background, never colored chip.
+- Active: text color shifts to `rgba(0,0,0,0.80)` and weight bumps to 600; underline bar uses `#FF2E4D`, width matches text width.
+- Inactive: text `rgba(0,0,0,0.45)`, weight 400.
+- Tab spacing: ~40px.
+
+### Tags / Topics
+
+- Pill rectangle, `padding: 4px 12px`, `font-size: 12px`
+- Default: `rgba(48,48,52,0.10)` bg + `rgba(0,0,0,0.62)` text
+- Trending / featured: `#FF2442` bg + white text
+
+### Badges / Counts
+
+- Numeric badge: `#FF2442` bg + white digit, min 16×16, pill
+- Pure red dot: 8px diameter, offset `-4px / -4px` from icon corner
+- HOT marker: small pill, `#FF6B35` or brand red, 10px white text
+
+### Avatars
+
+- Always circular (`border-radius: 50%`)
+- Feed: 28–32px. Profile hero: 80–96px.
+- No white stroke.
+- Verification badges sit on the lower-right at ~25–30% of the avatar diameter:
+  - Red V (creator)
+  - Blue V (enterprise)
+
+### Bottom Sheet (mobile only — replaces most modals)
+
+- Slides from screen bottom over a `rgba(0,0,0,0.5)` scrim
+- **Top-only radius `16px 16px 0 0`**
+- Drag handle: `4px × 36px`, `#E0E0E0`, centered, ~6px below top edge
+- Dismiss: drag-down past threshold, or tap scrim
+- Used for: share, report, more-actions, comment-compose — almost everything that would be a modal on PC.
+
+### PC Modal
+
+- Centered, white background, 12px radius
+- Light shadow (`0 8px 32px rgba(0,0,0,0.12)`) — the only place shadow is conspicuous
+
+## 5. Layout Principles
+
+### Spacing System (8pt grid)
+
+Base unit 8px. Common stops: `4 / 8 / 12 / 16 / 20 / 24 / 32`. Section gaps jump to `48 / 64`.
+
+### Responsive Waterfall (PC discover)
+
+Five-column masonry at the standard desktop width, stepping down on narrower viewports.
+
+| Viewport | Columns | Column gap |
+|---|---|---|
+| ≥ 960px | 5 | 10px |
+| 690–960px | 4 | 10px |
+| 500–690px | 3 | 10px |
+| < 500px | 2 | 10px |
+
+Implementation is JavaScript-positioned (`translate3d` + ResizeObserver), not CSS Grid, because card heights are unknown until images load. This also predates widespread CSS Masonry support (still behind flags in most browsers as of 2026); the JS approach buys cross-browser consistency at the cost of layout-shift risk on slow image loads. The masonry deliberately does not align rows — variable image height *is* the realism.
+
+### Mobile Two-Column
+
+- Two columns, each ~48.2% of viewport width
+- Row gap ~7px
+- Outer side margin `12rpx` per side (≈ 6px @ 375px)
+
+### Note Detail (PC)
+
+- Two-pane: left ~500px image carousel / right ~500px metadata + comments, total ~1100px
+- Image aspect chosen at upload time — vertical 3:4 / square 1:1 / horizontal 4:3
+- The carousel is the dominant visual; comments scroll independently on the right
+
+### Profile
+
+- 16:9 banner image at top
+- Circular avatar (80–96px) overlaps banner / content edge
+- Three-stat horizontal row (following / followers / likes-and-collects)
+- Tab strip below: Notes / Saved / Liked (笔记 / 收藏 / 赞过)
+
+### Creator / Ad Console (B2B)
+
+Standard left-nav console: 200–240px sidebar + ~1000–1100px content area. Top of content is a row of stat cards (impressions, likes, follower delta), below is a list or chart region. **No left-border accent on cards.** Surfaces are white, separation is by spacing.
+
+### Whitespace
+
+- The discover grid is dense — *content* density is the value proposition.
+- Section padding sits *between* feeds, not within them.
+- Cards do not have internal vertical padding above the image — image is flush to the top of the card.
+
+## 6. Depth & Elevation
+
+Three levels, used sparingly.
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat (0) | No shadow | Default — feed cards, tags, buttons (both modes) |
+| Subtle (1) | `0 4px 12px rgba(0,0,0,0.08)` | PC card hover (light mode only) |
+| Modal (2) | `0 8px 32px rgba(0,0,0,0.12)` | Centered modal on PC (light mode only) |
+| Dark mode | Drop shadows or replace with a `1px` hairline (`rgba(255,255,255,0.07)`) | `rgba(0,0,0,*)` shadows are invisible on the `#19191E` canvas; the scrim alone provides modal separation, and the PC card-hover `translateY(-2px)` is dropped entirely (motion + shadow both read as no-ops against the dark surface) |
+
+**Shadow is the exception, not the rule.** Depth comes from:
+1. Background color contrast (`#F5F5F5` canvas under `#FFFFFF` cards)
+2. Generous radius (cards visually float because corners are rounded)
+3. Whitespace between elements
+
+No neumorphism. No glassmorphism. No coloured shadows. Bottom sheet has no shadow at all — the scrim provides the separation. In dark mode, drop the PC card-hover effect (`translateY(-2px)` + alpha-on-black shadow) entirely; both motion and shadow read as no-ops against the dark canvas.
+
+## 7. Do's and Don'ts
+
+### Do
+- ✅ Treat brand red as singular. One CTA accent per screen, no second saturated color competing.
+- ✅ Use translucent fill overlays (`rgba(48,48,52,0.05/.10/.20)`) for hover / disabled / pressed — not separate grey shades.
+- ✅ Round generously: 12–16px on cards, full pill on buttons.
+- ✅ Set body text at `rgba(0,0,0,0.80)` for titles and `rgba(0,0,0,0.62)` for paragraphs — soft black always.
+- ✅ Use `RED Number` (or any tabular-numerals stack) for stats and counts.
+- ✅ Let user-uploaded images carry the color story. The UI is the picture frame.
+- ✅ Default to bottom-sheet for secondary actions on mobile; reserve centered modal for PC and confirmations only.
+- ✅ Tabs are text + 2px underline. Always.
+- ✅ Speak in second person, conversational. "what you just scrolled past" is more RED than "Discover trending content".
+
+### Don't
+- ❌ Don't use purple, deep blue, or black-gold as a primary color. Tech / fintech / luxury vocabulary is the wrong genre — RED is lifestyle.
+- ❌ Don't gradient the brand red itself. The only gradients are functional (search-hotspot badge, video mask).
+- ❌ Don't fill an entire hero with a brand-color background. Brand red is accent-only; a red-bordered hero reads as a sale poster, not a feed.
+- ❌ Don't fabricate the `小红书` wordmark or the RED logotype as artifact output. Tokens are not protectable; the wordmark is — that is the part of the brand identity with actual IP risk. When a logo placeholder is needed, emit a labelled grey block (e.g. an empty pill with `LOGO` in `rgba(0,0,0,0.45)`) and let the user drop in a licensed asset.
+- ❌ Don't use Inter, Helvetica, or Roboto as the Chinese display face. PingFang SC is the system — Latin fallback chains use `-apple-system` first.
+- ❌ Don't reference the `RED Number` family standalone in generated CSS. End users do not have it installed; without the PingFang fallback chain it silently falls back to whatever the OS picks, which breaks digit alignment. Always emit it inside a stack, e.g. `font-family: 'RED Number', PingFang SC, -apple-system, 'Helvetica Neue', Arial, sans-serif;`.
+- ❌ Don't ship light / thin weights at body sizes. Notes carry dense Chinese text; light weights destroy mobile legibility.
+- ❌ Don't add a left-border colored accent stripe to cards (the SaaS / dashboard tell). Cards separate via canvas color and radius, not colored chrome.
+- ❌ Don't drop heavy shadows. Concrete threshold: avoid alpha darker than `rgba(0,0,0,0.15)` or spread greater than `16px`. If the shadow is visible at arm's length on a phone, it is too strong for this system.
+- ❌ Don't pile glassmorphism, neumorphism, or 2020-era trend effects. The visual era reference is "lifestyle magazine", not "tech demo".
+- ❌ Don't write a "Trusted by 10,000+ teams" enterprise social-proof block. UGC trust comes from real people, not logo walls.
+- ❌ Don't write hero CTAs in all-caps Latin. Sentence-case Chinese, sentence-case Latin, no exceptions.
+- ❌ Don't use stock business photography (handshakes, laptop close-ups, conference rooms). Use real-life UGC-style imagery.
+- ❌ Don't use 3D isometric / blob / abstract-network illustrations. They are SaaS-marketing tells. RED uses real photos or hand-drawn editorial illustrations.
+- ❌ Don't write copy in third person ("the platform provides…"). Always second person ("what you want to see").
+- ❌ Don't surface unverifiable stat claims ("10× faster", "save N hours"). RED's brand voice is emotional resonance, not metric promises.
+- ❌ Don't use orange / yellow as a Toast emphasis color. Emphasis in this system is brand red, period.
+- ❌ Don't hard-pin every card to the same height. Variable card height across columns is the realism — don't "fix" it.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Discover columns | Notes |
+|---|---|---|---|
+| Mobile | < 500px | 2 | App-like density, edge-to-edge waterfall |
+| Tablet | 500–690px | 3 | Padding eases, tap targets stay 44px+ |
+| Small Desktop | 690–960px | 4 | Standard reading width |
+| Desktop | ≥ 960px | 5 | Full waterfall, sidebar visible |
+
+### Collapsing Strategy
+
+- **Discover**: 5 → 4 → 3 → 2 columns; column gap stays at 10px throughout.
+- **Note detail**: two-pane PC layout collapses to single-column stack on mobile (image carousel on top, body + comments below).
+- **Profile**: stat row stays horizontal at 3 columns down to mobile; tab strip remains horizontal with overflow scroll.
+- **Console (creator / ad)**: sidebar collapses to a hamburger drawer below ~768px; stat-card row wraps to 2-up.
+
+### Touch Targets
+
+- Minimum tap target 44×44px on mobile. Icon buttons render at 24px icon inside a 44×44 hit zone.
+- Pill buttons keep 36–40px height on mobile to honor this without growing radius.
+
+### Type at Mobile
+
+- Body sizes do not shrink below 14px. Small captions stay at 12px to preserve density without becoming illegible on Chinese characters.
+
+## 9. Agent Prompt Guide
+
+### Brand Red Disambiguation
+
+Two reds ship in the live system. They split by **surface**, not by mood — the wrong surface choice is the most common artifact-level slop in this design system, so the rule is explicit:
+
+- **Default — emit `#FF2442`** (`--primary` / `--color-red`) for everything that is *not* a pixel-for-pixel replica of an existing component: new CTAs, hearts, accent fills, tag-on-trending, page-token references.
+- **Pixel-replica — emit `#FF2E4D`** *only* when reproducing the live `.reds-button-new.primary` button fill, the `.active-bar` tab indicator, or the outlined follow-button border. Treat this as the production-fidelity value; do not generalize it to other components.
+- **Never mix the two on one component.** `background: #FF2442` next to `border: 1px solid #FF2E4D` on the same element is the failure mode this rule prevents — pick one surface category, then stay in it.
+
+The Component One-Liners block below is intentional: the primary CTA uses `#FF2442` (token red, default) while the tab indicator uses `#FF2E4D` (component red, pixel-replica). They are different surfaces, so they get different reds.
+
+### Quick Color Reference
+
+- Brand: `#FF2442` (token, default) / `#FF2E4D` (component layer, pixel-replica only — see disambiguation above)
+- Star (collect): `#FDBC5F`
+- Surface: `#FFFFFF`
+- Canvas: `#F5F5F5`
+- Title text: `rgba(0,0,0,0.80)`
+- Paragraph: `rgba(0,0,0,0.62)`
+- Description: `rgba(0,0,0,0.45)`
+- Hover / disabled fill: `rgba(48,48,52,0.10)`
+- Hairline: `rgba(0,0,0,0.08)`
+
+### Quick Type Reference
+
+- Family: `PingFang SC, -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft Yahei', Arial`
+- Stat / digit family: `RED Number`
+- Heading: 20–32px, weight 600, line-height 125–140%
+- Body: 14–16px, weight 400, line-height 143–150%
+- Tracking: 0
+
+### Component One-Liners
+
+- Primary CTA: `background: #FF2442; color: #FFF; border-radius: 9999px; padding: 8px 20px; font-weight: 500;`
+- Follow button (idle): same as primary CTA, label `+ 关注` (Follow)
+- Follow button (following): `background: rgba(48,48,52,0.10); color: rgba(0,0,0,0.45); border-radius: 9999px;` label `已关注` (Following)
+- Feed card: `background: #FFF; border-radius: 12px; box-shadow: none;` image flush to top
+- Tab indicator: 2px underline `#FF2E4D` matched to text width; active text `rgba(0,0,0,0.80)` weight 600
+- Search input: `background: #F5F5F5; border-radius: 9999px; padding: 8px 16px; height: 36–40px; border: none;`
+- Bottom sheet: `border-radius: 16px 16px 0 0; background: #FFF;` 4×36px drag handle `#E0E0E0` centered
+
+### Iteration Guide
+
+1. **Start from the picture, not the chrome.** Drop a generous photographic hero or pin grid first; build UI around it as quietly as possible.
+2. **One accent.** If you have used `#FF2442` once on a screen, you have used it enough.
+3. **Translucent neutrals.** Reach for `rgba(48,48,52, .10)` before reaching for a fresh grey hex.
+4. **Pill everything that's tappable.** If it looks like a square button, it is wrong.
+5. **No shadow until a hover or modal demands it.** Default elevation is flat.
+6. **Second person Chinese voice.** Even Latin copy should read like a friend talking, not a vendor pitching.
+7. **Variable card heights.** A 3:4 image next to a 4:5 image is the look — do not pad both to the same height.
+8. **Mobile-first density.** Two-column waterfall is the canonical layout; everything else is a response to a wider viewport.
@@ -0,0 +1,32 @@
+# Xiaohongshu Usage
+
+Design System 2.0 package guide for OpenDesign agents and reviewers.
+
+## Read Order
+
+1. Read this file first to understand the package contract.
+2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
+3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
+4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
+5. Inspect `preview/` pages when a visual sanity check is useful.
+
+## Design Highlights
+
+- Singular brand red (`#FF2442` token, `#FF2E4D` at the component layer) — never two saturated colors at once
+- Translucent neutrals (`rgba(48,48,52, .05/.10/.20)`) instead of discrete grey steps
+- Generous rounding everywhere: cards 12–16px, buttons fully pill, sheets 16px top-only
+- Near-zero shadow — flat by default
+
+## Do
+
+- Preserve the schema token names exactly so cross-brand switching stays reliable.
+- Use `--accent` for primary actions, links, focus states, and one clear focal element.
+- Reuse component groups from `components.manifest.json` before inventing new controls.
+- Treat `source/` files as audit evidence for the bundled fixture backfill.
+
+## Avoid
+
+- Avoid raw hex values outside the copied `:root` token block.
+- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
+- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
+- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
@@ -0,0 +1,865 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>小红书 / Xiaohongshu — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/xiaohongshu. Every visible
+        value comes from tokens.css. 小红书 / RED signature moves: grey
+        canvas + white card masonry, PingFang SC throughout, brand red
+        used exactly once per screen as accent, full-pill CTAs, soft
+        black text (rgba 0,0,0,.8), no shadow until hover."
+    />
+
+    <style>
+      :root {
+        --bg:           #f5f5f5;
+        --surface:      #ffffff;
+        --surface-warm: #fafafa;
+
+        --fg:    rgba(0, 0, 0, 0.8);
+        --fg-2:  rgba(0, 0, 0, 0.62);
+        --muted: rgba(0, 0, 0, 0.45);
+        --meta:  rgba(0, 0, 0, 0.27);
+
+        --border:      rgba(0, 0, 0, 0.08);
+        --border-soft: rgba(0, 0, 0, 0.05);
+
+        --accent:        #ff2442;
+        --accent-on:     #ffffff;
+        --accent-hover:  #ff2e4d;
+        --accent-active: #e6203a;
+
+        --success: #02b940;
+        --warn:    #ff7d03;
+        --danger:  #ff2442;
+
+        --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;
+
+        --text-xs:   12px;
+        --text-sm:   14px;
+        --text-base: 16px;
+        --text-lg:   18px;
+        --text-xl:   20px;
+        --text-2xl:  24px;
+        --text-3xl:  28px;
+        --text-4xl:  32px;
+
+        --leading-body:     1.5;
+        --leading-tight:    1.25;
+        --tracking-display: 0;
+
+        --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-y-desktop: 64px;
+        --section-y-tablet:  48px;
+        --section-y-phone:   32px;
+
+        --radius-sm:   8px;
+        --radius-md:   12px;
+        --radius-lg:   16px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+        --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+
+        --motion-fast:   150ms;
+        --motion-base:   200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max:            1200px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet:  16px;
+        --container-gutter-phone:   12px;
+      }
+
+      /* ─── Reset ─────────────────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      /* ─── Layout primitives ─────────────────────────────────── */
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border-soft); }
+      @media (max-width: 1023px) {
+        .container { padding-inline: var(--container-gutter-tablet); }
+        section { padding-block: var(--section-y-tablet); }
+      }
+      @media (max-width: 639px) {
+        .container { padding-inline: var(--container-gutter-phone); }
+        section { padding-block: var(--section-y-phone); }
+      }
+
+      /* ─── Typography — PingFang SC throughout, tracking 0 ───── */
+      h1, h2, h3 {
+        margin: 0;
+        color: var(--fg);
+        font-family: var(--font-display);
+        line-height: var(--leading-tight);
+        letter-spacing: var(--tracking-display);
+      }
+      h1 { font-size: var(--text-4xl); font-weight: 600; }
+      h2 { font-size: var(--text-2xl); font-weight: 600; }
+      h3 { font-size: var(--text-xl); font-weight: 600; }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        color: var(--fg-2);
+        line-height: var(--leading-body);
+        font-weight: 400;
+      }
+      .body-muted { color: var(--fg-2); }
+      .body-sm { font-size: var(--text-sm); }
+      /* Eyebrow stays sentence-case (not uppercase) — Chinese voice */
+      .eyebrow {
+        font-size: var(--text-xs);
+        color: var(--accent);
+        font-weight: 500;
+        font-family: var(--font-body);
+      }
+      .stack-2 > * + * { margin-block-start: var(--space-2); }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Top nav — soft pill segmented ─────────────────────── */
+      .topnav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-block: var(--space-4);
+        gap: var(--space-4);
+      }
+      .topnav-brand {
+        font-family: var(--font-display);
+        font-weight: 600;
+        font-size: var(--text-lg);
+        color: var(--fg);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+      .topnav-brand-mark {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: var(--radius-pill);
+        background: var(--accent);
+        color: var(--accent-on);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 0.04em;
+      }
+      .topnav-tabs {
+        display: flex;
+        align-items: center;
+        gap: var(--space-1);
+      }
+      .topnav-tabs a {
+        position: relative;
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--text-sm);
+        font-weight: 400;
+        color: var(--muted);
+        text-decoration: none;
+        transition: color var(--motion-fast) var(--ease-standard);
+      }
+      .topnav-tabs a:hover { color: var(--fg-2); }
+      .topnav-tabs a[aria-current="page"] {
+        color: var(--fg);
+        font-weight: 600;
+      }
+      /* DESIGN.md §4: tab indicator is a 2px underline at component-layer red, matched to text width */
+      .topnav-tabs a[aria-current="page"]::after {
+        content: "";
+        position: absolute;
+        left: var(--space-3);
+        right: var(--space-3);
+        bottom: 0;
+        height: 2px;
+        background: var(--accent-hover);
+        border-radius: var(--radius-pill);
+      }
+      .topnav-right { display: flex; align-items: center; gap: var(--space-3); }
+
+      /* ─── Buttons — full pill, no shadow ────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 20px;
+        border-radius: var(--radius-pill);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        border: 1px solid transparent;
+        text-decoration: none;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    color var(--motion-fast) var(--ease-standard),
+                    border-color var(--motion-fast) var(--ease-standard);
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn-primary {
+        background: var(--accent);
+        color: var(--accent-on);
+      }
+      .btn-primary:hover  { background: var(--accent-hover); }
+      .btn-primary:active { background: var(--accent-active); }
+      .btn-secondary {
+        background: var(--border);
+        color: var(--fg);
+      }
+      .btn-secondary:hover { background: rgba(0, 0, 0, 0.12); }
+      .btn-ghost {
+        background: transparent;
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      .btn-ghost:hover { background: var(--border-soft); }
+      /* Follow CTA: feed-card variant per DESIGN.md §4 "Follow Button — three-state" */
+      .btn-follow {
+        padding: 6px 14px;
+        font-size: var(--text-xs);
+        font-weight: 500;
+        border-radius: var(--radius-pill);
+        border: none;
+        cursor: pointer;
+        background: var(--accent);
+        color: var(--accent-on);
+      }
+      .btn-follow[aria-pressed="true"] {
+        background: rgba(0, 0, 0, 0.05);
+        color: var(--muted);
+      }
+
+      /* ─── Chips / tags — pill rectangle ─────────────────────── */
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 4px 12px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 400;
+        background: rgba(0, 0, 0, 0.05);
+        color: var(--fg-2);
+      }
+      .chip-trending {
+        background: var(--accent);
+        color: var(--accent-on);
+        font-weight: 500;
+      }
+      .chip-success {
+        background: color-mix(in oklab, var(--success), transparent 88%);
+        color: var(--success);
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      /* ─── Cards — 12px radius, flat by default ──────────────── */
+      .card {
+        background: var(--surface);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        transition: box-shadow var(--motion-base) var(--ease-standard),
+                    transform var(--motion-base) var(--ease-standard);
+      }
+      /* DESIGN.md §6 "Subtle (1)" — PC card hover only */
+      .card:hover {
+        box-shadow: var(--elev-raised);
+        transform: translateY(-2px);
+      }
+
+      /* ─── Feed card — image flush, footer with heart + count ─ */
+      .feed-card {
+        background: var(--surface);
+        border-radius: var(--radius-md);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        transition: box-shadow var(--motion-base) var(--ease-standard),
+                    transform var(--motion-base) var(--ease-standard);
+      }
+      .feed-card:hover {
+        box-shadow: var(--elev-raised);
+        transform: translateY(-2px);
+      }
+      .feed-card-cover {
+        width: 100%;
+        aspect-ratio: 3 / 4;
+        display: block;
+        background:
+          linear-gradient(135deg,
+            color-mix(in oklab, var(--accent), white 80%),
+            color-mix(in oklab, var(--accent), white 50%));
+        position: relative;
+      }
+      .feed-card-cover-tag {
+        position: absolute;
+        top: var(--space-3);
+        left: var(--space-3);
+        padding: 4px 10px;
+        border-radius: var(--radius-pill);
+        background: rgba(0, 0, 0, 0.45);
+        color: #ffffff;
+        font-size: var(--text-xs);
+        font-weight: 500;
+        backdrop-filter: blur(4px);
+      }
+      .feed-card-body {
+        padding: var(--space-3);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+      }
+      .feed-card-title {
+        font-size: var(--text-sm);
+        font-weight: 500;
+        color: var(--fg);
+        line-height: 1.43;
+        margin: 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      .feed-card-foot {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+        font-size: var(--text-xs);
+        color: var(--muted);
+      }
+      .feed-card-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: var(--radius-pill);
+        background: color-mix(in oklab, var(--accent), white 70%);
+        flex-shrink: 0;
+      }
+      .feed-card-author {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--fg-2);
+      }
+      .feed-card-likes {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+      }
+      .feed-card-likes .icon { color: var(--muted); }
+      .feed-card-likes[data-liked="true"] .icon { color: var(--accent); fill: var(--accent); }
+
+      /* ─── Inputs — F5F5F5 fill, pill, no border ─────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label {
+        font-size: var(--text-sm);
+        font-weight: 500;
+        color: var(--fg);
+      }
+      .field input, .field textarea {
+        background: var(--bg);
+        color: var(--fg);
+        border: 1px solid transparent;
+        border-radius: var(--radius-pill);
+        padding: 10px 16px;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard),
+                    box-shadow var(--motion-fast) var(--ease-standard),
+                    background-color var(--motion-fast) var(--ease-standard);
+      }
+      .field textarea {
+        border-radius: var(--radius-md);
+        padding: var(--space-3) var(--space-4);
+        resize: vertical;
+        min-height: 88px;
+        font-family: var(--font-body);
+      }
+      .field input::placeholder, .field textarea::placeholder { color: var(--meta); }
+      .field input:focus, .field textarea:focus {
+        background: var(--surface);
+        border-color: var(--border);
+        box-shadow: var(--focus-ring);
+      }
+      .field-help { font-size: var(--text-xs); color: var(--muted); }
+
+      /* ─── Hero meta sidecar (soft pink-tinted card) ─────────── */
+      .hero-meta {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        padding: var(--space-6);
+        border-radius: var(--radius-lg);
+        /* Soft pink-tinted surface — derived from accent at low alpha,
+           a brand-friendly tint without introducing a new token. */
+        background: color-mix(in oklab, var(--accent), white 92%);
+      }
+      .hero-meta-title {
+        font-size: var(--text-sm);
+        font-weight: 600;
+        color: var(--fg);
+        margin: 0;
+      }
+      .hero-meta-stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-3);
+      }
+      .hero-meta-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .hero-meta-stat-num {
+        font-size: var(--text-xl);
+        font-weight: 600;
+        color: var(--fg);
+        font-variant-numeric: tabular-nums;
+        line-height: 1.2;
+      }
+      .hero-meta-stat-label {
+        font-size: var(--text-xs);
+        color: var(--muted);
+      }
+      .hero-meta-foot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-3);
+        padding-block-start: var(--space-3);
+        border-top: 1px solid rgba(0, 0, 0, 0.06);
+      }
+
+      /* ─── Section layouts ───────────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.3fr 1fr;
+        gap: var(--space-12);
+        align-items: center;
+      }
+      @media (max-width: 1023px) {
+        .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
+      }
+      .hero-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-6);
+        flex-wrap: wrap;
+      }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+        margin-block-start: var(--space-8);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .feed-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: var(--space-3);
+        margin-block-start: var(--space-6);
+      }
+      @media (max-width: 1023px) { .feed-grid { grid-template-columns: repeat(3, 1fr); } }
+      @media (max-width: 639px)  { .feed-grid { grid-template-columns: repeat(2, 1fr); } }
+      .form-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-12);
+        align-items: start;
+      }
+      @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        padding: var(--space-6);
+        background: var(--surface);
+        border-radius: var(--radius-lg);
+        max-width: 480px;
+      }
+      .form-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-2);
+      }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+      .icon-lg { width: 18px; height: 18px; flex-shrink: 0; }
+      .row-between {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-3);
+      }
+      kbd {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        padding: 2px 6px;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--muted);
+      }
+      code {
+        font-family: var(--font-mono);
+        font-size: 0.875em;
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: var(--radius-sm);
+        padding: 1px 6px;
+        color: var(--fg);
+      }
+    </style>
+  </head>
+  <body>
+    <header class="container">
+      <nav class="topnav" aria-label="Primary">
+        <a class="topnav-brand" href="./DESIGN.md">
+          <span class="topnav-brand-mark" aria-hidden="true">RED</span>
+          <span>灵感参考</span>
+        </a>
+        <div class="topnav-tabs" role="tablist">
+          <a href="#" role="tab" aria-current="page">发现</a>
+          <a href="#" role="tab">关注</a>
+          <a href="#" role="tab">附近</a>
+          <a href="#" role="tab">购物</a>
+        </div>
+        <div class="topnav-right">
+          <a href="#" class="body-sm" style="color: var(--fg-2); text-decoration: none; font-weight: 500;">登录</a>
+          <a href="#" class="btn btn-primary">发布笔记</a>
+        </div>
+      </nav>
+    </header>
+
+    <main class="container">
+      <!-- HERO — 种草 voice, pill CTA, soft pink-tinted sidecar. -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">灵感参考 · xiaohongshu</p>
+            <h1>标记你的生活，<br />让世界被你种草。</h1>
+            <p class="lead" style="max-width: 30ch;">
+              你今天的早餐、出差住的酒店、买了三支才挑对的口红 —
+              都是别人正在寻找的灵感。Show up. 被看见。被收藏。
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">
+                开始记录
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                     stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12h14M13 6l6 6-6 6"/>
+                </svg>
+              </a>
+              <a href="./DESIGN.md" class="btn btn-ghost">阅读设计语言</a>
+            </div>
+            <p class="body-sm body-muted" style="margin-block-start: var(--space-3);">
+              按 <kbd>⌘</kbd> <kbd>K</kbd> 搜索笔记 · Press <kbd>⌘</kbd> <kbd>K</kbd> to search.
+            </p>
+          </div>
+
+          <aside class="hero-meta" aria-label="今日数据 · Today on RED">
+            <div class="row-between">
+              <p class="hero-meta-title">今日小红书 · Today on RED</p>
+              <span class="chip chip-trending">
+                <span class="dot" aria-hidden="true"></span>
+                热门
+              </span>
+            </div>
+            <div class="hero-meta-stats">
+              <div class="hero-meta-stat">
+                <span class="hero-meta-stat-num">3.2亿</span>
+                <span class="hero-meta-stat-label">月活用户</span>
+              </div>
+              <div class="hero-meta-stat">
+                <span class="hero-meta-stat-num">8,400万</span>
+                <span class="hero-meta-stat-label">日均笔记</span>
+              </div>
+              <div class="hero-meta-stat">
+                <span class="hero-meta-stat-num">72%</span>
+                <span class="hero-meta-stat-label">女性用户</span>
+              </div>
+            </div>
+            <div class="hero-meta-foot">
+              <span class="body-sm" style="color: var(--muted);">
+                Source · xiaohongshu.com · <time datetime="2026-05-18">2026.05</time>
+              </span>
+              <a href="#" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">查看 →</a>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- DISCOVER — masonry-style feed mock with bilingual titles. -->
+      <section data-od-id="discover">
+        <div class="row-between" style="flex-wrap: wrap; gap: var(--space-3);">
+          <div class="stack-2">
+            <p class="eyebrow">今日发现 · Discover</p>
+            <h2>看看大家正在种草什么</h2>
+          </div>
+          <div style="display: flex; gap: var(--space-2); flex-wrap: wrap;">
+            <span class="chip chip-trending">穿搭</span>
+            <span class="chip">咖啡</span>
+            <span class="chip">旅行</span>
+            <span class="chip">护肤</span>
+            <span class="chip">家居</span>
+          </div>
+        </div>
+        <div class="feed-grid">
+          <article class="feed-card">
+            <div class="feed-card-cover" aria-hidden="true">
+              <span class="feed-card-cover-tag">视频</span>
+            </div>
+            <div class="feed-card-body">
+              <h3 class="feed-card-title" style="font-family: var(--font-body);">
+                周末和朋友的 brunch 小记 · A slow Saturday in Shanghai
+              </h3>
+              <div class="feed-card-foot">
+                <span class="feed-card-avatar" aria-hidden="true"></span>
+                <span class="feed-card-author">小满 · xiaoman</span>
+                <span class="feed-card-likes" data-liked="true" aria-label="2.3 万 likes">
+                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
+                  </svg>
+                  2.3w
+                </span>
+              </div>
+            </div>
+          </article>
+          <article class="feed-card">
+            <div class="feed-card-cover" aria-hidden="true" style="aspect-ratio: 1 / 1;"></div>
+            <div class="feed-card-body">
+              <h3 class="feed-card-title" style="font-family: var(--font-body);">
+                租房 50㎡ 的暖色客厅改造 — before / after 全记录
+              </h3>
+              <div class="feed-card-foot">
+                <span class="feed-card-avatar" aria-hidden="true" style="background: color-mix(in oklab, var(--success), white 70%);"></span>
+                <span class="feed-card-author">桃子家的小屋</span>
+                <span class="feed-card-likes" aria-label="8,712 likes">
+                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
+                  </svg>
+                  8,712
+                </span>
+              </div>
+            </div>
+          </article>
+          <article class="feed-card">
+            <div class="feed-card-cover" aria-hidden="true" style="aspect-ratio: 4 / 5; background: linear-gradient(160deg, color-mix(in oklab, var(--accent), white 60%), color-mix(in oklab, var(--warn), white 70%));"></div>
+            <div class="feed-card-body">
+              <h3 class="feed-card-title" style="font-family: var(--font-body);">
+                第三支才挑对 · 显白程度十级的口红种草清单
+              </h3>
+              <div class="feed-card-foot">
+                <span class="feed-card-avatar" aria-hidden="true" style="background: color-mix(in oklab, var(--warn), white 60%);"></span>
+                <span class="feed-card-author">林深 · lin.shen</span>
+                <span class="feed-card-likes" data-liked="true" aria-label="1.1 万 likes">
+                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
+                  </svg>
+                  1.1w
+                </span>
+              </div>
+            </div>
+          </article>
+          <article class="feed-card">
+            <div class="feed-card-cover" aria-hidden="true" style="aspect-ratio: 3 / 4; background: linear-gradient(200deg, color-mix(in oklab, var(--success), white 60%), color-mix(in oklab, var(--success), white 88%));">
+              <span class="feed-card-cover-tag">长图</span>
+            </div>
+            <div class="feed-card-body">
+              <h3 class="feed-card-title" style="font-family: var(--font-body);">
+                京都早春三日 · 在小巷里慢慢迷路也很好
+              </h3>
+              <div class="feed-card-foot">
+                <span class="feed-card-avatar" aria-hidden="true" style="background: color-mix(in oklab, var(--success), white 50%);"></span>
+                <span class="feed-card-author">远野日记 · tono</span>
+                <span class="feed-card-likes" aria-label="6,304 likes">
+                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M12 21s-7-4.5-9.5-9C.9 8.8 2.7 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.3 0 5.1 3.8 3.5 7-2.5 4.5-9.5 9-9.5 9z"/>
+                  </svg>
+                  6,304
+                </span>
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <!-- FEATURES — three guiding principles, flat cards, hover lift. -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">为什么这样设计 · Why it looks like this</p>
+          <h2 style="max-width: 22ch;">
+            克制做底色，内容才是主角。
+          </h2>
+          <p class="lead" style="max-width: 56ch;">
+            一个 <code>--accent</code>，一种 <code>PingFang SC</code>，
+            一套 <code>rgba(0,0,0,*)</code> 的浮层灰阶 —
+            其余空间，全部交给图片本身。
+          </p>
+        </div>
+
+        <div class="features-grid">
+          <article class="card">
+            <span class="chip chip-trending" style="align-self: flex-start;">
+              <span class="dot" aria-hidden="true"></span>
+              品牌唯一红
+            </span>
+            <h3>一屏只用一次的红</h3>
+            <p class="body-muted body-sm">
+              <code>#ff2442</code> 只出现在主要 CTA、心形高亮、
+              热门标签上。同一个页面里出现两次饱和红，画面就立刻
+              "降级"成了打折海报，而不是一张笔记。
+            </p>
+            <a href="./tokens.css" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">查看 token →</a>
+          </article>
+
+          <article class="card">
+            <span class="chip" style="align-self: flex-start;">柔黑文字</span>
+            <h3>从不使用纯黑</h3>
+            <p class="body-muted body-sm">
+              标题 <code>rgba(0,0,0,.8)</code>、正文 <code>.62</code>、
+              描述 <code>.45</code>、占位 <code>.27</code> —
+              四级透明黑替代离散灰阶，同一个浮层落在白卡、照片、
+              抽屉上都成立。
+            </p>
+            <a href="./DESIGN.md" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">阅读规则 →</a>
+          </article>
+
+          <article class="card">
+            <span class="chip" style="align-self: flex-start;">圆得彻底</span>
+            <h3>能按的，一定是 pill</h3>
+            <p class="body-muted body-sm">
+              卡片 <code>12px</code>、按钮 <code>9999px</code>。
+              一个直角按钮在这套系统里立刻显得不对 —
+              层次靠间距和圆角，不靠投影。Shadow stays
+              off until hover earns it.
+            </p>
+            <a href="./tokens.css" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">检查圆角 →</a>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM — pill input on F5F5F5, primary red CTA, follow CTA demo. -->
+      <section data-od-id="form">
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="eyebrow">订阅每日灵感 · Daily inspo digest</p>
+            <h2>每天一封 · 100 张被收藏最多的笔记。</h2>
+            <p class="lead" style="max-width: 44ch;">
+              No spam，no third-party，no enterprise tone.
+              一个邮箱，一个发布频率，仅此而已 —
+              我们用 <code>--focus-ring</code> 的 RED 红圈
+              提示你正在专注的输入框。
+            </p>
+            <ul style="margin: 0; padding-inline-start: var(--space-5); color: var(--fg-2); font-size: var(--text-sm);" class="stack-3">
+              <li>输入框背景使用 <code>--bg</code>（#F5F5F5），focus 时升到 <code>--surface</code>。</li>
+              <li>提交按钮即 <code>.btn-primary</code> — 系统里只有一种红 CTA。</li>
+              <li>占位符使用 <code>--meta</code>，0.27 透明度的最弱一档。</li>
+            </ul>
+            <div class="row-between" style="margin-block-start: var(--space-4); max-width: 360px;">
+              <div class="stack-2" style="display: flex; flex-direction: column;">
+                <span class="body-sm" style="color: var(--fg); font-weight: 500;">关注按钮三态</span>
+                <span class="body-sm" style="color: var(--muted);">DESIGN.md §4 · Follow Button</span>
+              </div>
+              <div style="display: flex; gap: var(--space-2);">
+                <button type="button" class="btn-follow">+ 关注</button>
+                <button type="button" class="btn-follow" aria-pressed="true">已关注</button>
+              </div>
+            </div>
+          </div>
+
+          <form class="form" onsubmit="event.preventDefault();" aria-label="订阅每日灵感">
+            <div class="row-between">
+              <p style="font-size: var(--text-sm); font-weight: 600; color: var(--fg); margin: 0;">订阅每日灵感</p>
+              <span class="chip chip-success">
+                <span class="dot" aria-hidden="true"></span>
+                Free · 免费
+              </span>
+            </div>
+            <div class="field">
+              <label for="nickname">你的昵称 · Nickname</label>
+              <input
+                id="nickname"
+                type="text"
+                placeholder="给未来的自己留个名字"
+                autocomplete="nickname"
+              />
+            </div>
+            <div class="field">
+              <label for="email">邮箱 · Email</label>
+              <input
+                id="email"
+                type="email"
+                placeholder="[email protected]"
+                autocomplete="email"
+                required
+              />
+              <p class="field-help">仅用于发送每日灵感清单，可随时退订。</p>
+            </div>
+            <div class="field">
+              <label for="topic">最想被种草的主题 · What to be inspired by</label>
+              <textarea
+                id="topic"
+                placeholder="例如：周末 brunch、出租屋改造、本子文具、晨跑路线…"
+              ></textarea>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">
+                立即订阅
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                     stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12h14M13 6l6 6-6 6"/>
+                </svg>
+              </button>
+              <button type="button" class="btn btn-ghost">看示例</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,565 @@
+{
+  "schemaVersion": 1,
+  "brandId": "xiaohongshu",
+  "source": {
+    "componentsHtml": "components.html",
+    "tokensCss": "tokens.css"
+  },
+  "fixture": {
+    "title": "小红书 / Xiaohongshu — reference components",
+    "description": "Reference fixture for design-systems/xiaohongshu. Every visible value comes from tokens.css. 小红书 / RED signature moves: grey canvas + white card masonry, PingFang SC throughout, brand red used exactly once per screen as accent, full-pill CTAs, soft black text (rgba 0,0,0,.8), no shadow until hover.",
+    "styleBlockCount": 1,
+    "selectorCount": 86,
+    "classCount": 49,
+    "elementCount": 32
+  },
+  "tokens": {
+    "declared": [
+      "--accent",
+      "--accent-active",
+      "--accent-hover",
+      "--accent-on",
+      "--bg",
+      "--border",
+      "--border-soft",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--danger",
+      "--ease-standard",
+      "--elev-flat",
+      "--elev-raised",
+      "--elev-ring",
+      "--fg",
+      "--fg-2",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--meta",
+      "--motion-base",
+      "--motion-fast",
+      "--muted",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-1",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-8",
+      "--success",
+      "--surface",
+      "--surface-warm",
+      "--text-2xl",
+      "--text-3xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-display",
+      "--warn"
+    ],
+    "referenced": [
+      "--accent",
+      "--accent-active",
+      "--accent-hover",
+      "--accent-on",
+      "--bg",
+      "--border",
+      "--border-soft",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--ease-standard",
+      "--elev-raised",
+      "--fg",
+      "--fg-2",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--meta",
+      "--motion-base",
+      "--motion-fast",
+      "--muted",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-1",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-8",
+      "--success",
+      "--surface",
+      "--text-2xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-display",
+      "--warn"
+    ],
+    "unusedDeclared": [
+      "--danger",
+      "--elev-flat",
+      "--elev-ring",
+      "--surface-warm",
+      "--text-3xl"
+    ],
+    "undeclaredReferenced": []
+  },
+  "selectors": [
+    ".body-muted",
+    ".body-sm",
+    ".btn",
+    ".btn-follow",
+    ".btn-follow[aria-pressed=\"true\"]",
+    ".btn-ghost",
+    ".btn-ghost:hover",
+    ".btn-primary",
+    ".btn-primary:active",
+    ".btn-primary:hover",
+    ".btn-secondary",
+    ".btn-secondary:hover",
+    ".btn:focus-visible",
+    ".card",
+    ".card:hover",
+    ".chip",
+    ".chip-success",
+    ".chip-trending",
+    ".container",
+    ".dot",
+    ".eyebrow",
+    ".features-grid",
+    ".feed-card",
+    ".feed-card-author",
+    ".feed-card-avatar",
+    ".feed-card-body",
+    ".feed-card-cover",
+    ".feed-card-cover-tag",
+    ".feed-card-foot",
+    ".feed-card-likes",
+    ".feed-card-likes .icon",
+    ".feed-card-likes[data-liked=\"true\"] .icon",
+    ".feed-card-title",
+    ".feed-card:hover",
+    ".feed-grid",
+    ".field",
+    ".field input",
+    ".field input::placeholder",
+    ".field input:focus",
+    ".field label",
+    ".field textarea",
+    ".field textarea::placeholder",
+    ".field textarea:focus",
+    ".field-help",
+    ".form",
+    ".form-actions",
+    ".form-row",
+    ".hero-actions",
+    ".hero-grid",
+    ".hero-meta",
+    ".hero-meta-foot",
+    ".hero-meta-stat",
+    ".hero-meta-stat-label",
+    ".hero-meta-stat-num",
+    ".hero-meta-stats",
+    ".hero-meta-title",
+    ".icon",
+    ".icon-lg",
+    ".lead",
+    ".row-between",
+    ".stack-2 > * + *",
+    ".stack-3 > * + *",
+    ".stack-4 > * + *",
+    ".stack-6 > * + *",
+    ".topnav",
+    ".topnav-brand",
+    ".topnav-brand-mark",
+    ".topnav-right",
+    ".topnav-tabs",
+    ".topnav-tabs a",
+    ".topnav-tabs a:hover",
+    ".topnav-tabs a[aria-current=\"page\"]",
+    ".topnav-tabs a[aria-current=\"page\"]::after",
+    "*",
+    "*::after",
+    "*::before",
+    "body",
+    "code",
+    "h1",
+    "h2",
+    "h3",
+    "html",
+    "kbd",
+    "p",
+    "section",
+    "section + section"
+  ],
+  "classes": [
+    "body-muted",
+    "body-sm",
+    "btn",
+    "btn-follow",
+    "btn-ghost",
+    "btn-primary",
+    "card",
+    "chip",
+    "chip-success",
+    "chip-trending",
+    "container",
+    "dot",
+    "eyebrow",
+    "features-grid",
+    "feed-card",
+    "feed-card-author",
+    "feed-card-avatar",
+    "feed-card-body",
+    "feed-card-cover",
+    "feed-card-cover-tag",
+    "feed-card-foot",
+    "feed-card-likes",
+    "feed-card-title",
+    "feed-grid",
+    "field",
+    "field-help",
+    "form",
+    "form-actions",
+    "form-row",
+    "hero-actions",
+    "hero-grid",
+    "hero-meta",
+    "hero-meta-foot",
+    "hero-meta-stat",
+    "hero-meta-stat-label",
+    "hero-meta-stat-num",
+    "hero-meta-stats",
+    "hero-meta-title",
+    "icon",
+    "lead",
+    "row-between",
+    "stack-2",
+    "stack-3",
+    "stack-4",
+    "topnav",
+    "topnav-brand",
+    "topnav-brand-mark",
+    "topnav-right",
+    "topnav-tabs"
+  ],
+  "elements": [
+    "a",
+    "article",
+    "aside",
+    "body",
+    "br",
+    "button",
+    "code",
+    "div",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "head",
+    "header",
+    "html",
+    "input",
+    "kbd",
+    "label",
+    "li",
+    "main",
+    "meta",
+    "nav",
+    "p",
+    "path",
+    "section",
+    "span",
+    "style",
+    "svg",
+    "textarea",
+    "time",
+    "title",
+    "ul"
+  ],
+  "groups": [
+    {
+      "id": "buttons",
+      "label": "Buttons and calls to action",
+      "present": true,
+      "selectors": [
+        ".btn",
+        ".btn-follow",
+        ".btn-follow[aria-pressed=\"true\"]",
+        ".btn-ghost",
+        ".btn-ghost:hover",
+        ".btn-primary",
+        ".btn-primary:active",
+        ".btn-primary:hover",
+        ".btn-secondary",
+        ".btn-secondary:hover",
+        ".btn:focus-visible"
+      ],
+      "classes": [
+        "btn",
+        "btn-follow",
+        "btn-ghost",
+        "btn-primary"
+      ],
+      "elements": [
+        "button"
+      ],
+      "tokenReferences": [
+        "--accent",
+        "--accent-active",
+        "--accent-on",
+        "--border-soft",
+        "--ease-standard",
+        "--font-body",
+        "--motion-fast",
+        "--muted",
+        "--radius-pill",
+        "--space-2",
+        "--text-sm"
+      ]
+    },
+    {
+      "id": "inputs",
+      "label": "Form fields and controls",
+      "present": true,
+      "selectors": [
+        ".field",
+        ".field input",
+        ".field input::placeholder",
+        ".field input:focus",
+        ".field label",
+        ".field textarea",
+        ".field textarea::placeholder",
+        ".field textarea:focus",
+        ".field-help",
+        ".hero-meta-stat-label"
+      ],
+      "classes": [
+        "field",
+        "field-help",
+        "form",
+        "form-actions",
+        "form-row"
+      ],
+      "elements": [
+        "form",
+        "input",
+        "label",
+        "textarea"
+      ],
+      "tokenReferences": [
+        "--border",
+        "--fg",
+        "--focus-ring",
+        "--font-body",
+        "--radius-md",
+        "--space-3",
+        "--space-4",
+        "--surface",
+        "--text-sm"
+      ]
+    },
+    {
+      "id": "cards",
+      "label": "Cards and panels",
+      "present": true,
+      "selectors": [
+        ".card",
+        ".card:hover"
+      ],
+      "classes": [
+        "card"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--elev-raised"
+      ]
+    },
+    {
+      "id": "badges",
+      "label": "Badges, chips, and status labels",
+      "present": true,
+      "selectors": [
+        ".chip",
+        ".chip-success",
+        ".chip-trending"
+      ],
+      "classes": [
+        "chip",
+        "chip-success",
+        "chip-trending"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--accent",
+        "--accent-on"
+      ]
+    },
+    {
+      "id": "links",
+      "label": "Links and inline actions",
+      "present": true,
+      "selectors": [
+        ".topnav-tabs a",
+        ".topnav-tabs a:hover",
+        ".topnav-tabs a[aria-current=\"page\"]",
+        ".topnav-tabs a[aria-current=\"page\"]::after"
+      ],
+      "classes": [],
+      "elements": [
+        "a"
+      ],
+      "tokenReferences": [
+        "--accent-hover",
+        "--fg-2",
+        "--radius-pill",
+        "--space-3"
+      ]
+    },
+    {
+      "id": "keyboard",
+      "label": "Keyboard hints",
+      "present": true,
+      "selectors": [
+        "kbd"
+      ],
+      "classes": [],
+      "elements": [
+        "kbd"
+      ],
+      "tokenReferences": []
+    },
+    {
+      "id": "icons",
+      "label": "Icon slots",
+      "present": true,
+      "selectors": [
+        ".feed-card-likes .icon",
+        ".feed-card-likes[data-liked=\"true\"] .icon",
+        ".icon",
+        ".icon-lg"
+      ],
+      "classes": [
+        "icon"
+      ],
+      "elements": [
+        "svg"
+      ],
+      "tokenReferences": [
+        "--accent"
+      ]
+    },
+    {
+      "id": "typography",
+      "label": "Typography scale and text utilities",
+      "present": true,
+      "selectors": [
+        ".body-muted",
+        ".body-sm",
+        ".eyebrow",
+        ".lead",
+        "h1",
+        "h2",
+        "h3"
+      ],
+      "classes": [
+        "body-muted",
+        "body-sm",
+        "eyebrow",
+        "lead"
+      ],
+      "elements": [
+        "h1",
+        "h2",
+        "h3",
+        "p"
+      ],
+      "tokenReferences": [
+        "--accent",
+        "--fg",
+        "--fg-2",
+        "--font-body",
+        "--font-display",
+        "--leading-tight",
+        "--text-2xl",
+        "--text-xs",
+        "--tracking-display"
+      ]
+    },
+    {
+      "id": "layout",
+      "label": "Layout primitives",
+      "present": true,
+      "selectors": [
+        ".container",
+        ".row-between",
+        ".stack-2 > * + *",
+        ".stack-3 > * + *",
+        ".stack-4 > * + *",
+        ".stack-6 > * + *",
+        "section",
+        "section + section"
+      ],
+      "classes": [
+        "container",
+        "features-grid",
+        "feed-grid",
+        "hero-grid",
+        "row-between",
+        "stack-2",
+        "stack-3",
+        "stack-4"
+      ],
+      "elements": [
+        "header",
+        "main",
+        "nav",
+        "section"
+      ],
+      "tokenReferences": [
+        "--border-soft",
+        "--container-gutter-desktop",
+        "--container-gutter-phone",
+        "--container-gutter-tablet",
+        "--container-max",
+        "--space-3",
+        "--space-6"
+      ]
+    }
+  ],
+  "literals": {
+    "colorExpressions": 12,
+    "pixelValues": 45,
+    "hardcodedFontFamilies": 9
+  }
+}
@@ -0,0 +1,701 @@
+{
+  "schemaVersion": 1,
+  "format": "od-design-tokens/v1",
+  "contract": "TOKEN_SCHEMA",
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "source": {
+    "tokensCss": "tokens.css",
+    "tokenContractReport": "source/token-contract.report.json"
+  },
+  "summary": {
+    "totalTokens": 56,
+    "declaredTokens": 56,
+    "sourceBackedTokens": 56,
+    "sourceBackedA1": 26,
+    "fallbackTokens": 26,
+    "aliasTokens": 0,
+    "layerCounts": {
+      "A1-identity": 8,
+      "B-slot": 4,
+      "A2": 26,
+      "A1-structure": 18
+    },
+    "score": 100,
+    "grade": "excellent",
+    "recommendRebuild": false
+  },
+  "tokens": [
+    {
+      "name": "--bg",
+      "value": "#f5f5f5",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:59"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "value": "#ffffff",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:60"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "#fafafa",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:61"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "value": "rgba(0, 0, 0, 0.8)",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:67"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "value": "rgba(0, 0, 0, 0.62)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:68"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "value": "rgba(0, 0, 0, 0.45)",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:69"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "value": "rgba(0, 0, 0, 0.27)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:70"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "value": "rgba(0, 0, 0, 0.08)",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:76"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "value": "rgba(0, 0, 0, 0.05)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:77"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "value": "#ff2442",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:85"
+      ],
+      "sourceName": "--accent"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#ffffff",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:86"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "#ff2e4d",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:87"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "value": "#e6203a",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:88"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "value": "#02b940",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:96"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "value": "#ff7d03",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:97"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "value": "#ff2442",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:98"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", -apple-system, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+      "type": "fontFamily",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:107"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", -apple-system, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+      "type": "fontFamily",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:108"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
+      "type": "fontFamily",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:109"
+      ],
+      "sourceName": "--font-mono"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:115"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "value": "14px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:116"
+      ],
+      "sourceName": "--text-sm"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:117"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "value": "18px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:118"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "value": "20px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:119"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:120"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "28px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:121"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "32px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:122"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.5",
+      "type": "number",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:129"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.25",
+      "type": "number",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:130"
+      ],
+      "sourceName": "--leading-tight"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "0",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:131"
+      ],
+      "sourceName": "--tracking-display"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:136"
+      ],
+      "sourceName": "--space-1"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:137"
+      ],
+      "sourceName": "--space-2"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:138"
+      ],
+      "sourceName": "--space-3"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:139"
+      ],
+      "sourceName": "--space-4"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:140"
+      ],
+      "sourceName": "--space-5"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:141"
+      ],
+      "sourceName": "--space-6"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:142"
+      ],
+      "sourceName": "--space-8"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:143"
+      ],
+      "sourceName": "--space-12"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "64px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:149"
+      ],
+      "sourceName": "--section-y-desktop"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "48px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:150"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "32px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:151"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:158"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:159"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:160"
+      ],
+      "sourceName": "--radius-lg"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:161"
+      ],
+      "sourceName": "--radius-pill"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:168"
+      ],
+      "sourceName": "--elev-flat"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:169"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:170"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:175"
+      ],
+      "sourceName": "--focus-ring"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:180"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "value": "200ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:181"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "type": "cubicBezier",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:182"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "value": "1200px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:189"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:190"
+      ],
+      "sourceName": "--container-gutter-desktop"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:191"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:192"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}
@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "xiaohongshu",
+  "name": "Xiaohongshu",
+  "category": "Media & Consumer",
+  "description": "Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Xiaohongshu colors</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
+      .swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
+      .color { height: 88px; background: var(--value); }
+      .meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
+      strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Color roles</h1>
+
+      <section class="grid">
+        <article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
+        <article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
+        <article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
+        <article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
+        <article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
+        <article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
+        <article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
+        <article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
+        <article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
+      </section>
+
+    </main>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Xiaohongshu spacing</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
+      .row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
+      .bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
+      .radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
+      .radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Spacing and radius</h1>
+
+      <section class="stack">
+        <div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
+        <div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
+        <div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
+        <div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
+        <div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
+      </section>
+      <section class="radii">
+        <article style="border-radius: var(--radius-sm)">--radius-sm</article>
+        <article style="border-radius: var(--radius-md)">--radius-md</article>
+        <article style="border-radius: var(--radius-lg)">--radius-lg</article>
+        <article style="border-radius: var(--radius-pill)">--radius-pill</article>
+      </section>
+
+    </main>
+  </body>
+</html>
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Xiaohongshu typography</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
+      .eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
+      h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+      .lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
+      .body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Typography</h1>
+
+      <section class="type-stack">
+        <p class="eyebrow">Media & Consumer</p>
+        <h2>Display sample for Xiaohongshu</h2>
+        <p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
+        <p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
+      </section>
+
+    </main>
+  </body>
+</html>
@@ -0,0 +1,17 @@
+# Xiaohongshu Source Evidence
+
+## Source Scope
+
+This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
+It does not claim a fresh crawl of the original upstream brand repository or website.
+
+## Included Fixture Files
+
+- design-systems/xiaohongshu/DESIGN.md
+- design-systems/xiaohongshu/tokens.css
+- design-systems/xiaohongshu/components.html
+
+## Token Contract
+
+`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
+`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
@@ -0,0 +1,641 @@
+{
+  "schemaVersion": 1,
+  "contract": "TOKEN_SCHEMA",
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "sourceScope": "open-design-bundled-fixture",
+  "summary": {
+    "totalTokens": 56,
+    "declaredTokens": 56,
+    "sourceBackedTokens": 56,
+    "sourceBackedA1": 26,
+    "fallbackTokens": 26,
+    "aliasTokens": 0,
+    "layerCounts": {
+      "A1-identity": 8,
+      "B-slot": 4,
+      "A2": 26,
+      "A1-structure": 18
+    },
+    "score": 100,
+    "grade": "excellent",
+    "recommendRebuild": false
+  },
+  "tokens": [
+    {
+      "name": "--bg",
+      "layer": "A1-identity",
+      "value": "#f5f5f5",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:59"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "layer": "A1-identity",
+      "value": "#ffffff",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:60"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "layer": "B-slot",
+      "value": "#fafafa",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:61"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "layer": "A1-identity",
+      "value": "rgba(0, 0, 0, 0.8)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:67"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "layer": "B-slot",
+      "value": "rgba(0, 0, 0, 0.62)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:68"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "layer": "A1-identity",
+      "value": "rgba(0, 0, 0, 0.45)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:69"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "layer": "B-slot",
+      "value": "rgba(0, 0, 0, 0.27)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:70"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "layer": "A1-identity",
+      "value": "rgba(0, 0, 0, 0.08)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:76"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "layer": "B-slot",
+      "value": "rgba(0, 0, 0, 0.05)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:77"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "layer": "A1-identity",
+      "value": "#ff2442",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:85"
+      ],
+      "sourceName": "--accent"
+    },
+    {
+      "name": "--accent-on",
+      "layer": "A2",
+      "value": "#ffffff",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:86"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "layer": "A2",
+      "value": "#ff2e4d",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:87"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "layer": "A2",
+      "value": "#e6203a",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:88"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "layer": "A2",
+      "value": "#02b940",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:96"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "layer": "A2",
+      "value": "#ff7d03",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:97"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "layer": "A2",
+      "value": "#ff2442",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:98"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "layer": "A1-identity",
+      "value": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", -apple-system, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:107"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "layer": "A1-identity",
+      "value": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", -apple-system, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:108"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "layer": "A2",
+      "value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:109"
+      ],
+      "sourceName": "--font-mono"
+    },
+    {
+      "name": "--text-xs",
+      "layer": "A1-structure",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:115"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "layer": "A1-structure",
+      "value": "14px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:116"
+      ],
+      "sourceName": "--text-sm"
+    },
+    {
+      "name": "--text-base",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:117"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "layer": "A1-structure",
+      "value": "18px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:118"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "layer": "A1-structure",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:119"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "layer": "A1-structure",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:120"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "layer": "A1-structure",
+      "value": "28px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:121"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "layer": "A1-structure",
+      "value": "32px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:122"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "layer": "A1-structure",
+      "value": "1.5",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:129"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "layer": "A1-structure",
+      "value": "1.25",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:130"
+      ],
+      "sourceName": "--leading-tight"
+    },
+    {
+      "name": "--tracking-display",
+      "layer": "A1-structure",
+      "value": "0",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:131"
+      ],
+      "sourceName": "--tracking-display"
+    },
+    {
+      "name": "--space-1",
+      "layer": "A2",
+      "value": "4px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:136"
+      ],
+      "sourceName": "--space-1"
+    },
+    {
+      "name": "--space-2",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:137"
+      ],
+      "sourceName": "--space-2"
+    },
+    {
+      "name": "--space-3",
+      "layer": "A2",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:138"
+      ],
+      "sourceName": "--space-3"
+    },
+    {
+      "name": "--space-4",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:139"
+      ],
+      "sourceName": "--space-4"
+    },
+    {
+      "name": "--space-5",
+      "layer": "A2",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:140"
+      ],
+      "sourceName": "--space-5"
+    },
+    {
+      "name": "--space-6",
+      "layer": "A2",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:141"
+      ],
+      "sourceName": "--space-6"
+    },
+    {
+      "name": "--space-8",
+      "layer": "A2",
+      "value": "32px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:142"
+      ],
+      "sourceName": "--space-8"
+    },
+    {
+      "name": "--space-12",
+      "layer": "A2",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:143"
+      ],
+      "sourceName": "--space-12"
+    },
+    {
+      "name": "--section-y-desktop",
+      "layer": "A1-structure",
+      "value": "64px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:149"
+      ],
+      "sourceName": "--section-y-desktop"
+    },
+    {
+      "name": "--section-y-tablet",
+      "layer": "A1-structure",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:150"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "layer": "A1-structure",
+      "value": "32px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:151"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:158"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "layer": "A2",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:159"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:160"
+      ],
+      "sourceName": "--radius-lg"
+    },
+    {
+      "name": "--radius-pill",
+      "layer": "A2",
+      "value": "9999px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:161"
+      ],
+      "sourceName": "--radius-pill"
+    },
+    {
+      "name": "--elev-flat",
+      "layer": "A2",
+      "value": "none",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:168"
+      ],
+      "sourceName": "--elev-flat"
+    },
+    {
+      "name": "--elev-ring",
+      "layer": "A2",
+      "value": "0 0 0 1px var(--border)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:169"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "layer": "A2",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.08)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:170"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "layer": "A2",
+      "value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:175"
+      ],
+      "sourceName": "--focus-ring"
+    },
+    {
+      "name": "--motion-fast",
+      "layer": "A2",
+      "value": "150ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:180"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "layer": "A2",
+      "value": "200ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:181"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "layer": "A2",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:182"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "layer": "A1-structure",
+      "value": "1200px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:189"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "layer": "A1-structure",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:190"
+      ],
+      "sourceName": "--container-gutter-desktop"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:191"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "layer": "A1-structure",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:192"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}
@@ -0,0 +1,349 @@
+{
+  "schemaVersion": 1,
+  "sourceScope": "open-design-bundled-fixture",
+  "brandId": "xiaohongshu",
+  "files": [
+    "DESIGN.md",
+    "tokens.css",
+    "components.html"
+  ],
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "tokens": [
+    {
+      "name": "--bg",
+      "value": "#f5f5f5",
+      "layer": "A1-identity",
+      "source": "tokens.css:59"
+    },
+    {
+      "name": "--surface",
+      "value": "#ffffff",
+      "layer": "A1-identity",
+      "source": "tokens.css:60"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "#fafafa",
+      "layer": "B-slot",
+      "source": "tokens.css:61"
+    },
+    {
+      "name": "--fg",
+      "value": "rgba(0, 0, 0, 0.8)",
+      "layer": "A1-identity",
+      "source": "tokens.css:67"
+    },
+    {
+      "name": "--fg-2",
+      "value": "rgba(0, 0, 0, 0.62)",
+      "layer": "B-slot",
+      "source": "tokens.css:68"
+    },
+    {
+      "name": "--muted",
+      "value": "rgba(0, 0, 0, 0.45)",
+      "layer": "A1-identity",
+      "source": "tokens.css:69"
+    },
+    {
+      "name": "--meta",
+      "value": "rgba(0, 0, 0, 0.27)",
+      "layer": "B-slot",
+      "source": "tokens.css:70"
+    },
+    {
+      "name": "--border",
+      "value": "rgba(0, 0, 0, 0.08)",
+      "layer": "A1-identity",
+      "source": "tokens.css:76"
+    },
+    {
+      "name": "--border-soft",
+      "value": "rgba(0, 0, 0, 0.05)",
+      "layer": "B-slot",
+      "source": "tokens.css:77"
+    },
+    {
+      "name": "--accent",
+      "value": "#ff2442",
+      "layer": "A1-identity",
+      "source": "tokens.css:85"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#ffffff",
+      "layer": "A2",
+      "source": "tokens.css:86"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "#ff2e4d",
+      "layer": "A2",
+      "source": "tokens.css:87"
+    },
+    {
+      "name": "--accent-active",
+      "value": "#e6203a",
+      "layer": "A2",
+      "source": "tokens.css:88"
+    },
+    {
+      "name": "--success",
+      "value": "#02b940",
+      "layer": "A2",
+      "source": "tokens.css:96"
+    },
+    {
+      "name": "--warn",
+      "value": "#ff7d03",
+      "layer": "A2",
+      "source": "tokens.css:97"
+    },
+    {
+      "name": "--danger",
+      "value": "#ff2442",
+      "layer": "A2",
+      "source": "tokens.css:98"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", -apple-system, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:107"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", -apple-system, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:108"
+    },
+    {
+      "name": "--font-mono",
+      "value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
+      "layer": "A2",
+      "source": "tokens.css:109"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "layer": "A1-structure",
+      "source": "tokens.css:115"
+    },
+    {
+      "name": "--text-sm",
+      "value": "14px",
+      "layer": "A1-structure",
+      "source": "tokens.css:116"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:117"
+    },
+    {
+      "name": "--text-lg",
+      "value": "18px",
+      "layer": "A1-structure",
+      "source": "tokens.css:118"
+    },
+    {
+      "name": "--text-xl",
+      "value": "20px",
+      "layer": "A1-structure",
+      "source": "tokens.css:119"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:120"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "28px",
+      "layer": "A1-structure",
+      "source": "tokens.css:121"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "32px",
+      "layer": "A1-structure",
+      "source": "tokens.css:122"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.5",
+      "layer": "A1-structure",
+      "source": "tokens.css:129"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.25",
+      "layer": "A1-structure",
+      "source": "tokens.css:130"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "0",
+      "layer": "A1-structure",
+      "source": "tokens.css:131"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "layer": "A2",
+      "source": "tokens.css:136"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:137"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "layer": "A2",
+      "source": "tokens.css:138"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:139"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "layer": "A2",
+      "source": "tokens.css:140"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "layer": "A2",
+      "source": "tokens.css:141"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "layer": "A2",
+      "source": "tokens.css:142"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "layer": "A2",
+      "source": "tokens.css:143"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "64px",
+      "layer": "A1-structure",
+      "source": "tokens.css:149"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "48px",
+      "layer": "A1-structure",
+      "source": "tokens.css:150"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "32px",
+      "layer": "A1-structure",
+      "source": "tokens.css:151"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:158"
+    },
+    {
+      "name": "--radius-md",
+      "value": "12px",
+      "layer": "A2",
+      "source": "tokens.css:159"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:160"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "layer": "A2",
+      "source": "tokens.css:161"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "layer": "A2",
+      "source": "tokens.css:168"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "layer": "A2",
+      "source": "tokens.css:169"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 4px 12px rgba(0, 0, 0, 0.08)",
+      "layer": "A2",
+      "source": "tokens.css:170"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
+      "layer": "A2",
+      "source": "tokens.css:175"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "layer": "A2",
+      "source": "tokens.css:180"
+    },
+    {
+      "name": "--motion-base",
+      "value": "200ms",
+      "layer": "A2",
+      "source": "tokens.css:181"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "layer": "A2",
+      "source": "tokens.css:182"
+    },
+    {
+      "name": "--container-max",
+      "value": "1200px",
+      "layer": "A1-structure",
+      "source": "tokens.css:189"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:190"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:191"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "12px",
+      "layer": "A1-structure",
+      "source": "tokens.css:192"
+    }
+  ]
+}
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - Pitch deck</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Deck module</p>
+        <h1>Xiaohongshu Executive deck</h1>
+        <p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Pitch deck</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Xiaohongshu" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - Email</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Email module</p>
+        <h1>Xiaohongshu Email module</h1>
+        <p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Email</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Xiaohongshu" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - Form page</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Form module</p>
+        <h1>Xiaohongshu Capture form</h1>
+        <p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Form page</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Xiaohongshu" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - Landing page</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Landing module</p>
+        <h1>Xiaohongshu Launch narrative</h1>
+        <p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Landing page</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Xiaohongshu" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - Newsletter</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Newsletter module</p>
+        <h1>Xiaohongshu Editorial issue</h1>
+        <p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Newsletter</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Xiaohongshu" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - Poster</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Poster module</p>
+        <h1>Xiaohongshu Campaign poster</h1>
+        <p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Poster</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Xiaohongshu" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - system assets</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <p class="eyebrow">Media &amp; Consumer</p>
+    <h1>Xiaohongshu system assets</h1>
+    <p class="lead">Generated preview modules for bundled official presets.</p>
+    <section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
+<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
+<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
+<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
+<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
+<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
+<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
+<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - dark component kit</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #0f1115;
+  --od-surface: #171a21;
+  --od-text: #f8fafc;
+  --od-muted: #a7adba;
+  --od-border: #2a2f3a;
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Media &amp; Consumer system</p>
+        <h1>Xiaohongshu component kit</h1>
+        <p class="lead">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Primary</a>
+          <a class="button secondary" href="#">Default</a>
+          <a class="button secondary" href="#">Dashed</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Reference module</p>
+        <h3>Token-driven surface</h3>
+        <div class="metric-grid">
+          <div class="metric"><strong>12</strong><span>Components</span></div>
+          <div class="metric"><strong>4</strong><span>States</span></div>
+          <div class="metric"><strong>1</strong><span>Token contract</span></div>
+        </div>
+        <div class="chip-row">
+          <span class="chip">Hover</span>
+          <span class="chip">Focus</span>
+          <span class="chip">Active</span>
+          <span class="chip">Disabled</span>
+        </div>
+      </article>
+    </section>
+    <section class="card-grid" aria-label="Component examples">
+      <article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
+      <article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
+      <article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Xiaohongshu - component kit</title>
+  <style>
+:root {
+    --accent: #ff2442;
+    --accent-active: #e6203a;
+    --accent-hover: #ff2e4d;
+    --accent-on: #ffffff;
+    --bg: #f5f5f5;
+    --border: rgba(0, 0, 0, 0.08);
+    --border-soft: rgba(0, 0, 0, 0.05);
+    --container-gutter-desktop: 24px;
+    --container-gutter-phone: 12px;
+    --container-gutter-tablet: 16px;
+    --container-max: 1200px;
+    --danger: #ff2442;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: rgba(0, 0, 0, 0.8);
+    --fg-2: rgba(0, 0, 0, 0.62);
+    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+    --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-display: "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;
+    --leading-body: 1.5;
+    --leading-tight: 1.25;
+    --meta: rgba(0, 0, 0, 0.27);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.45);
+    --radius-lg: 16px;
+    --radius-md: 12px;
+    --radius-pill: 9999px;
+    --radius-sm: 8px;
+    --section-y-desktop: 64px;
+    --section-y-phone: 32px;
+    --section-y-tablet: 48px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #02b940;
+    --surface: #ffffff;
+    --surface-warm: #fafafa;
+    --text-2xl: 24px;
+    --text-3xl: 28px;
+    --text-4xl: 32px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 14px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: 0;
+    --warn: #ff7d03;
+}
+:root {
+  --od-page-bg: #f5f5f5;
+  --od-surface: #ffffff;
+  --od-text: rgba(0, 0, 0, 0.8);
+  --od-muted: rgba(0, 0, 0, 0.45);
+  --od-border: rgba(0, 0, 0, 0.08);
+  --od-accent: #ff2442;
+  --od-radius: 12px;
+  --od-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --od-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Media &amp; Consumer system</p>
+        <h1>Xiaohongshu component kit</h1>
+        <p class="lead">Bundled OpenDesign package for Xiaohongshu, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Primary</a>
+          <a class="button secondary" href="#">Default</a>
+          <a class="button secondary" href="#">Dashed</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Reference module</p>
+        <h3>Token-driven surface</h3>
+        <div class="metric-grid">
+          <div class="metric"><strong>12</strong><span>Components</span></div>
+          <div class="metric"><strong>4</strong><span>States</span></div>
+          <div class="metric"><strong>1</strong><span>Token contract</span></div>
+        </div>
+        <div class="chip-row">
+          <span class="chip">Hover</span>
+          <span class="chip">Focus</span>
+          <span class="chip">Active</span>
+          <span class="chip">Disabled</span>
+        </div>
+      </article>
+    </section>
+    <section class="card-grid" aria-label="Component examples">
+      <article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
+      <article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
+      <article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,8 @@
+{
+  "colorPrimary": "#ff2442",
+  "colorPrimaryBg": "#fafafa",
+  "colorPrimaryHover": "#ff2e4d",
+  "colorPrimaryActive": "#e6203a",
+  "fontSize": 16,
+  "borderRadius": 12
+}
@@ -0,0 +1,63 @@
+/* Derived from tokens.css. Keep tokens.css as the source of truth. */
+@import "tailwindcss";
+@import "./tokens.css";
+
+@theme {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-warm: var(--surface-warm);
+  --color-fg: var(--fg);
+  --color-fg-2: var(--fg-2);
+  --color-muted: var(--muted);
+  --color-meta: var(--meta);
+  --color-border: var(--border);
+  --color-border-soft: var(--border-soft);
+  --color-accent: var(--accent);
+  --color-accent-on: var(--accent-on);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-success: var(--success);
+  --color-warn: var(--warn);
+  --color-danger: var(--danger);
+  --font-display: var(--font-display);
+  --font-body: var(--font-body);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --leading-body: var(--leading-body);
+  --leading-tight: var(--leading-tight);
+  --tracking-display: var(--tracking-display);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-8: var(--space-8);
+  --spacing-12: var(--space-12);
+  --spacing-section-desktop: var(--section-y-desktop);
+  --spacing-section-tablet: var(--section-y-tablet);
+  --spacing-section-phone: var(--section-y-phone);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-pill: var(--radius-pill);
+  --shadow-flat: var(--elev-flat);
+  --shadow-ring: var(--elev-ring);
+  --shadow-raised: var(--elev-raised);
+  --shadow-focus-ring: var(--focus-ring);
+  --duration-fast: var(--motion-fast);
+  --duration-base: var(--motion-base);
+  --ease-standard: var(--ease-standard);
+  --container-max: var(--container-max);
+  --spacing-container-desktop: var(--container-gutter-desktop);
+  --spacing-container-tablet: var(--container-gutter-tablet);
+  --spacing-container-phone: var(--container-gutter-phone);
+}
@@ -0,0 +1,193 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * 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;
+}