PIP · WHITEKIWI
Theme
PIP · V0.2 · IMPLEMENTED

SMALL PARTS.
ONE CLEAR SYSTEM.

WhiteKiwi의 color, type, component와 interaction contract를 한곳에서 확인합니다. 설명보다 실제 토큰과 상태를 먼저 보여줍니다.

01 · COLOR

색을 숨기지 않습니다.

Neutral이 대부분을 차지하고 kiwi는 신호로만 씁니다. 브랜드와 success는 같은 초록으로 처리하지 않습니다.

NEUTRAL

PAPER#F4F5EF
MILK#FBFCF8
ASH#62685E
FOG#A5AB9F
INK#11140F
CARBON#0E100E

KIWI

SOFT#E9F8C9
SIGNAL#C6FF4A
LINE#668B15
DEEP#3C6000

SEMANTIC

SUCCESS#16794F
INFO#1769AA
WARNING#7A5300
ERROR#B42318
LIGHT THEME · SEMANTIC ROLES
CANVAS--kiwi-color-canvas페이지의 가장 낮은 바탕
SURFACE--kiwi-color-surface정보를 묶는 조용한 면
TEXT--kiwi-color-text본문과 핵심 정보
MUTED--kiwi-color-text-muted보조 설명과 metadata
BRAND FIELD--kiwi-color-brand-field제한적으로 쓰는 signature 면
INTERACTIVE--kiwi-color-interactive링크와 행동의 신호
FOCUS--kiwi-color-focus키보드 focus boundary
DARK THEME · SAME ROLES
CANVAS--kiwi-color-canvas페이지의 가장 낮은 바탕
SURFACE--kiwi-color-surface정보를 묶는 조용한 면
TEXT--kiwi-color-text본문과 핵심 정보
MUTED--kiwi-color-text-muted보조 설명과 metadata
BRAND FIELD--kiwi-color-brand-field제한적으로 쓰는 signature 면
INTERACTIVE--kiwi-color-interactive링크와 행동의 신호
FOCUS--kiwi-color-focus키보드 focus boundary
02 · FOUNDATIONSTYPE · SPACE · MATERIAL
DISPLAY / SANS / 620문제를 크게 보고, 답은 정확하게.

Body는 긴 문장에서도 읽히는 리듬과 60ch 안쪽의 행 길이를 지킵니다.

MONO / METADATA26,779 ACTIVITIES--kiwi-font-mono · 0.62REM · 0.08EM
SPACE / 4PX BASE
1
2
3
4
6
8
12
16

03 · COMPONENTS

상태까지 보여줍니다.

Radix behavior, shadcn 방식의 조합 가능한 API, Tailwind-compatible semantic token을 사용합니다. 화면별 새 UI보다 공통 contract를 우선합니다.

CONTROLSREST · HOVER · FOCUS · DISABLED
INTERACTION CONTRACT 보기
FEEDBACKCOLOR IS NEVER THE ONLY SIGNAL
NEUTRALBRANDSUCCESSINFOWARNINGERROR
EDITORIAL SURFACESSTATIC ≠ INTERACTIVE
STATIC CARD정보는 움직이지 않습니다.

정보 표면에는 pointer, 가짜 화살표와 hover lift를 두지 않습니다.

LINKED CARD이동은 전체가 책임집니다.

카드 전체가 하나의 link이며 keyboard focus와 방향을 제공합니다.

BRAND FIELD한 viewport에 하나.

Kiwi signal은 기억할 장면에만 넓게 사용합니다.

INVERSENeutral이 지배합니다.

강조하지 않는 영역이 있어야 signal이 선명합니다.

04 · INVENTORY10 COMPONENTS
01ButtonCONTROLprimary · secondary · ghost · dangerREADY
02TextFieldCONTROLhint · invalid · disabledREADY
03TextLinkCONTROLinline navigationREADY
04BadgeFEEDBACK6 semantic tonesREADY
05CalloutFEEDBACK5 semantic tonesREADY
06StaticCardEDITORIAL4 surface tonesREADY
07LinkedCardEDITORIALhover · focus · pressedREADY
08SectionHeadingEDITORIALresponsive content hierarchyREADY
09CollectionHeadingEDITORIALcollection boundaryREADY
10DisclosureDISCLOSURERadix CollapsibleREADY

05 · CONTRACTS

Compose. Don’t redraw.

컴포넌트의 모양보다 행동과 상태를 먼저 고정합니다. Mobile은 desktop을 줄이지 않고 정보 우선순위를 유지한 채 재구성합니다.

Static surface에는 hover motion이 없습니다. 이동하는 card는 전체 영역이 하나의 link이며 keyboard focus가 보입니다.