디자인 시스템
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
Xiaohongshu RED
다운로드7
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (8)

display
'PingFang SC', -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft Yahei', Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
'PingFang SC', -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft Yahei', Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
'PingFang SC', -apple-system, 'Helvetica Neue', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft Yahei', Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
number
'RED Number', 'PingFang SC', -apple-system, 'Helvetica Neue', Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
'SF Mono', ui-monospace, Menlo, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 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
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

컴포넌트 (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 소스

Input

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

html
Hand-tuned CSS
1 props · 5 states · 5 tags · 2 소스

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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전