@aexol/spectral 0.9.270 → 0.9.272

package/dist/designer/data/systems/xiaohongshu/DESIGN.md

@@ -1,402 +0,0 @@
-# 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.