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)

*-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)

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.

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.

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

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.