Interactive kit · grounded in code

Components · 공유 키트

The shared wireframe kit — the atoms + domain cards every screen composes from, on the real design tokens. Single source, so every screen’s wireframe stays consistent.

route · packages/ui/src (primitives) · docs/twomore_design_system/wireframes/_kit.jsx

grounded in 3 source file(s)

packages/ui/src/index.tspackages/ui/src/tokens.tspackages/app/src/config/themes/classic-grass.theme.ts

Foundations

Color tokens

Classic Grass (light)

card

primary

ink

ink2

border

success

warning

error

Spacing · 4px grid

Typography · Pretendard

pageTitle · 24 / 700cardTitle · 16 / 600cardBody · 14 / 400cardMeta · 13 / 500

Atoms

WFBadge

intent palette (AA-verified)

successwarningerroraccentneutral

WFChip

복식B ~ C번개

WFSectionHead

진행 중1개

WFDateTile

7/24

목

7/24

금

WFFaces · AvatarStack

김

이

박

최

WFCapacityRing

11/16

WFStatTile

12승 4패전적

+18ELO

WFDot · WFPulseDot

static · live-signal

WFAvatarBubble

size ladder · tones

김

이

박

👤

WFTierRangeBadge

B~C

WFTrustTierBadge

compact · emoji-only

🌱🔥⭐🏆

WFProgressBar

recruitment meter

4/8

Chrome

WFShell

MainTabShell header

홈

WFDetailShell

pushed screen · back + title

클럽 가입

WFFilterBar

ExpandableFilterBar · expanded

클럽 이름 검색

필터2

남복

강남구

급수

요일

WFSkeletonCard

list loading state

WFPill

PillNav

오늘

이번 주

이번 달

WFScrubber

PeriodNavPanel

오늘오늘

WFEmptyState

🎾

경기가 없어요번개를 찾아보세요

번개 찾기 →

WFBottomCta

클럽 만들기

WFCard

Card (default) — 16px pad · $borderSubtle

Domain cards

WFSessionCard

location-first · scheduled

양재 시민의숲 테니스장

☀️ 24°

양재 시민의숲하드 · 2면

토요일 7월 24일 · 09:00–11:00

정기모임남복B ~ C

아메리카노 · 4게임무료

김

이

박

최

6/8 확정

WFSessionCard

live state

● 지금 진행 중

잠실 학생체육관

☀️ 24°

잠실 실내하드 · 3면

오늘 · 19:00–21:00

번개혼복B ~ C

아메리카노 · 진행 중1만원

김

이

박

최

7/8 확정

WFClubCard

projection · 미가입 (potential)

모집 중 · 3자리

강남

김

이

박

+21

24/40

강남 라켓클럽

B~C

📍강남구

·👥4 : 6

·📅매주 토

주말마다 즐겁게 치는 동호회예요

초급 환영중급가입 승인제월 2만원

WFClubCard

projection · 가입·운영 (member+admin)

운영

서초

김

이

박

+21

24/40

서초 테니스 모임

B~C

알림 3건

다가오는 일정

양재 시민의숲 코트하드 · 2면

토요 정기모임토 7/24 · 09:00

모집 중

4/8

WFMemberRow

typography-led · kebab outside card

김

김민준🔥

⋮

이

이서연⭐

WFVenueHero

+ SessionCompactRow in a Well

양재 시민의숲 코트하드 · 2면

토요 정기모임토 7/24 · 09:00

모집 중

4/8

WFRecapDonut

win/loss/draw ring

67%승률

승4

패1

무1

ELO 변화+18