Design system

web

v1.0.0

90/100

Xiaohongshu RED

@dante · Media & Consumer

Photo-first lifestyle UGC system inspired by Xiaohongshu (Little Red Book). Singular brand red, pill buttons, 12px cards, and a soft pink ground that lets user images carry the color story.

HTML/CSS

React

shadcn/ui

Tailwind

#asia

#consumer

#photo-grid

#pink

#sns

Downloads7

Download package

DESIGN.md SKILL.md

Overview

Xiaohongshu RED

Principles

The UI is a transparent picture frame. User photos carry the color story; chrome yields.
One brand red per screen. #FF2442 is the token red (default for new CTAs, hearts, accents); #FF2E4D is the component-layer red reserved for pixel-replicas of .reds-button-new.primary, the active-bar, and the outlined follow border. Never mix them on the same element.
Translucent neutrals (rgba(48,48,52,0.05/.10/.20)) replace discrete grey steps. Reach for the overlay before reaching for a fresh hex.
Round generously: cards 12–16px, buttons fully pill (9999px), bottom sheets 16px on the top corners only.
Flat by default. No shadows at rest. Subtle hover lift on PC only (0 4px 12px rgba(0,0,0,0.08)); centered modals get the only conspicuous shadow.
Voice is second person and conversational. "标记你的生活" / "what you just scrolled past" — never "the platform provides".

Type

PingFang SC throughout, with -apple-system and Noto Sans SC fallbacks for non-CJK environments.
Three weights only: 400 / 500 / 600. Weight 700 reserved for emphasized digit counts.
Compact display scale — H1 caps at 32/600. There is no 48px / 64px hero face.
Tracking is 0. Body title is rgba(0,0,0,0.80), paragraph rgba(0,0,0,0.62), description rgba(0,0,0,0.45). Pure #000 is never used.
Counts and stats use RED Number inside a fallback stack so digits stay tabular.

Layout

Discover is a 5 / 4 / 3 / 2 column waterfall keyed to viewport. Variable card heights are the realism — do not pad to align.
8pt spacing grid; common stops 4 / 8 / 12 / 16 / 20 / 24 / 32, section gaps 48 / 64.
Cards sit on a #F5F5F5 canvas. Separation comes from canvas color and radius, not elevation.
Bottom sheet replaces most modals on mobile; centered modal is PC-only.

Don'ts

No purple, deep blue, or black-gold palettes — that is fintech / luxury, not lifestyle.
No gradients on the brand red itself. The only sanctioned gradient is the trending-search rank badge.
No left-border colored accent stripes (a SaaS dashboard tell).
No light/thin weights at body sizes — Chinese text needs 400+.
No all-caps Latin headlines, no enterprise social-proof logo walls, no third-person "the platform" voice.
No stock business photography. Use real-life UGC-style imagery or hand-drawn editorial illustrations.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (26)

brandRed

#FF2442

brandRedComponent

#FF2E4D

brandRedHot

#FF5225

starYellow

#FDBC5F

surface

#FFFFFF

canvas

#F5F5F5

subtle

#FAFAFA

pinkGround

#FFF1F3

fill1

rgba(48,48,52,0.05)

fill2

rgba(48,48,52,0.10)

fill3

rgba(48,48,52,0.20)

separator

rgba(0,0,0,0.08)

separatorStrong

rgba(0,0,0,0.20)

opaqueSeparator

#EAEAEA

title

rgba(0,0,0,0.80)

paragraph

rgba(0,0,0,0.62)

description

rgba(0,0,0,0.45)

disabled

rgba(0,0,0,0.27)

success

#02B940

successBg

#EAF8EF

warning

#FF7D03

warningBg

#FFF2E6

info

#3D8AF5

link

#133667

darkSurface

#19191E

darkCanvas

#0E0E11

Typography (8)

display

'PingFang SC', -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft Yahei', Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

heading

'PingFang SC', -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft Yahei', Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

body

'PingFang SC', -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft Yahei', Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

number

'RED Number', 'PingFang SC', -apple-system, 'Helvetica Neue', Arial, sans-serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

mono

'SF Mono', ui-monospace, Menlo, monospace

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

scale

unparsed

{
  "h1": "32px/40px",
  "h2": "24px/32px",
  "h3": "20px/28px",
  "t1": "18px/26px",
  "t2": "16px/24px",
  "t3": "14px/20px",
  "b1": "16px/24px",
  "b2": "14px/20px",
  "c1": "13px/20px",
  "c2": "12px/18px",
  "c3": "10px/14px"
}

weights

unparsed

{
  "regular": 400,
  "medium": 500,
  "semibold": 600
}

tracking

0

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

Components (16)

Button

Pill button. Brand red primary, translucent grey secondary, outlined red for follow-idle on profile cards.

html

Hand-tuned CSS, no framework

2 props · 6 states · 7 tags · 2 sources

Input

Pill search input on canvas-grey fill, no border, leading magnifier icon.

html

Hand-tuned CSS

1 props · 5 states · 5 tags · 2 sources

Card

Generic note card. White surface, 12px radius, no shadow, image flush to top, title + footer chip.

html

Hand-tuned CSS

1 props · 2 states · 7 tags · 2 sources

Missing states: focus-visible, disabled

Badge

Numeric red badge, HOT marker, and red dot. All pill, never square.

html

Hand-tuned CSS

1 props · 1 states · 8 tags · 2 sources

Missing states: hover, focus-visible, disabled

Heading

Compact PingFang SC hierarchy — H1 32/600 max, no thin display.

html

Hand-tuned CSS

1 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled

Link

Inline link. Brand red for emphasis; navy `--link` reserved for legal/policy.

html

Hand-tuned CSS

1 props · 3 states · 5 tags · 2 sources

Missing states: disabled

Hero

Photo-first hero on soft pink ground. Sentence-case Chinese title, single pill CTA, no full-bleed brand-red background.

html

Hand-tuned CSS

0 props · 1 states · 8 tags · 2 sources

Missing states: hover, focus-visible, disabled

Nav

Top nav with text-only tabs and a 2px underline indicator on active.

html

Hand-tuned CSS

0 props · 3 states · 7 tags · 2 sources

Missing states: focus-visible, disabled

Footer

Quiet site footer on subtle ground. Three column links, soft black title, description-grey body.

html

Hand-tuned CSS

0 props · 1 states · 7 tags · 2 sources

Missing states: hover, focus-visible, disabled

Stat

Three-stat horizontal row using RED Number for tabular digits.

html

Hand-tuned CSS

0 props · 1 states · 5 tags · 2 sources

Missing states: hover, focus-visible, disabled

PhotoCard

Photo card with corner sticker (HOT/置顶) overlay and a video-style top mask gradient. Image flush to top, rounded 12px.

html

Hand-tuned CSS

1 props · 2 states · 8 tags · 2 sources

Missing states: focus-visible, disabled

PhotoGrid

Waterfall (masonry-like) photo grid using CSS columns. Variable heights are the realism — do not pad to align.

html

Hand-tuned CSS

0 props · 1 states · 9 tags · 2 sources

Missing states: hover, focus-visible, disabled

TagPill

Tag pill — default translucent grey, trending uses brand-red fill, both 12px text.

html

Hand-tuned CSS

1 props · 2 states · 5 tags · 2 sources

Missing states: focus-visible, disabled

ProfileChip

Inline profile chip — circular avatar + nickname + small follow pill. Avatar supports red-V creator badge.

html

Hand-tuned CSS

1 props · 2 states · 8 tags · 2 sources

Missing states: focus-visible, disabled

EngagementBar

Likes / comments / saves icon-button row. Like active flips heart to brand red; save active flips star to yellow.

html

Hand-tuned CSS

0 props · 3 states · 9 tags · 2 sources

Missing states: focus-visible, disabled

TopicBadge

Trending-search topic badge using the only allowed system gradient (#FF2543 → #FF5225).

html

Hand-tuned CSS

0 props · 2 states · 7 tags · 2 sources

Missing states: focus-visible, disabled

DESIGN.md

Xiaohongshu RED

Principles

The UI is a transparent picture frame. User photos carry the color story; chrome yields.
One brand red per screen. #FF2442 is the token red (default for new CTAs, hearts, accents); #FF2E4D is the component-layer red reserved for pixel-replicas of .reds-button-new.primary, the active-bar, and the outlined follow border. Never mix them on the same element.
Translucent neutrals (rgba(48,48,52,0.05/.10/.20)) replace discrete grey steps. Reach for the overlay before reaching for a fresh hex.
Round generously: cards 12–16px, buttons fully pill (9999px), bottom sheets 16px on the top corners only.
Flat by default. No shadows at rest. Subtle hover lift on PC only (0 4px 12px rgba(0,0,0,0.08)); centered modals get the only conspicuous shadow.
Voice is second person and conversational. "标记你的生活" / "what you just scrolled past" — never "the platform provides".

Type

PingFang SC throughout, with -apple-system and Noto Sans SC fallbacks for non-CJK environments.
Three weights only: 400 / 500 / 600. Weight 700 reserved for emphasized digit counts.
Compact display scale — H1 caps at 32/600. There is no 48px / 64px hero face.
Tracking is 0. Body title is rgba(0,0,0,0.80), paragraph rgba(0,0,0,0.62), description rgba(0,0,0,0.45). Pure #000 is never used.
Counts and stats use RED Number inside a fallback stack so digits stay tabular.

Layout

Discover is a 5 / 4 / 3 / 2 column waterfall keyed to viewport. Variable card heights are the realism — do not pad to align.
8pt spacing grid; common stops 4 / 8 / 12 / 16 / 20 / 24 / 32, section gaps 48 / 64.
Cards sit on a #F5F5F5 canvas. Separation comes from canvas color and radius, not elevation.
Bottom sheet replaces most modals on mobile; centered modal is PC-only.

Don'ts

No purple, deep blue, or black-gold palettes — that is fintech / luxury, not lifestyle.
No gradients on the brand red itself. The only sanctioned gradient is the trending-search rank badge.
No left-border colored accent stripes (a SaaS dashboard tell).
No light/thin weights at body sizes — Chinese text needs 400+.
No all-caps Latin headlines, no enterprise social-proof logo walls, no third-person "the platform" voice.
No stock business photography. Use real-life UGC-style imagery or hand-drawn editorial illustrations.

Adapters (6)

adapters/tokens.css
text/css
Download
adapters/shadcn-registry.json
application/json
Download
adapters/tailwind.config.js
text/javascript
Download
adapters/react/index.ts
text/typescript
Download
adapters/html/index.html
text/html
Download
adapters/html/styles.css
text/css
Download

All files (11)

DESIGN.mdtext/markdown
SKILL.mdtext/markdown
tokens/colors.jsonapplication/json
tokens/typography.jsonapplication/json
tokens/components.jsonapplication/json
adapters/tokens.csstext/css
adapters/shadcn-registry.jsonapplication/json
adapters/tailwind.config.jstext/javascript
adapters/react/index.tstext/typescript
adapters/html/index.htmltext/html
adapters/html/styles.csstext/css

Versions

v1.0.05/8/2026
Download