PIP · WHITEKIWI
Theme
PIP · V0.3 · IMPLEMENTED

SMALL PARTS.
ONE CLEAR SYSTEM.

색과 간격부터 컴포넌트의 상태와 움직임까지. WhiteKiwi의 제품을 하나의 시각 언어로 연결합니다. 각 요소의 역할과 동작을 살펴보세요.

  1. 01FOUNDATIONrolescolor · type · space · motion
  2. 02PRIMITIVEbehaviorfocus · keyboard · disclosure
  3. 03COMPONENTcontractstate · semantics · API
  4. 04PATTERNcompositionrepeated product decisions
  5. 05PAGEcontextevidence · task · audience

01 · PRINCIPLES

Quiet canvas.
Electric kiwi.

유행하는 UI를 모으는 대신, 다음 화면에서도 같은 판단을 재현할 수 있는 원칙을 먼저 둡니다.

01QUIET CANVAS

Neutral이 구조와 읽기 흐름을 맡습니다.

02ONE SIGNAL

Kiwi는 한 장면의 한 가지 기억에만 씁니다.

03HONEST AFFORDANCE

움직이는 것과 읽는 것을 명확히 구분합니다.

04HUMAN EVIDENCE

장식보다 실제 결과와 맥락을 먼저 보여줍니다.

02 · 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
HOVER--kiwi-color-brand-field-hoverprimary action hover
DISABLED--kiwi-color-disabled-surface비활성 control surface
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
HOVER--kiwi-color-brand-field-hoverprimary action hover
DISABLED--kiwi-color-disabled-surface비활성 control surface
03 · 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

04 · COMPONENTS

상태까지 보여줍니다.

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

CONTROLSREST · HOVER · FOCUS · DISABLED
보조 설명은 control 아래에 붙습니다.
유효한 key를 입력해 주세요.
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이 선명합니다.

05 · PATTERNS

Repeat decisions,
not decoration.

Pattern은 컴포넌트의 조합에 의미를 더합니다. 정보의 순서, 행동의 위치, 강조의 밀도를 통해 화면의 읽기 흐름을 만듭니다.

DECISION ROW · IMPLEMENTEDREADY
01
상태를 문장으로 설명합니다.

Color token 하나가 아니라 rest부터 disabled까지의 행동을 기록합니다.

STATE MATRIX
EVIDENCE FIRST · CANDIDATE
“UI는 evidence보다 먼저 보이지 않는다.”

실제 수치, 작업 결과, 출처가 장식과 인터랙션보다 먼저 읽혀야 합니다.

06 · 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

07 · CONTRACTS

Compose. Don’t redraw.

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

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

PRIMARY ACTION STATE MATRIXLIGHT · DARK
THEMERESTHOVERACTIVEFOCUSDISABLED
LIGHTsignal / inkbrand-hoverbrand-active2px kiwi-linedisabled pair
DARKsignal / inkbright hoverbrand-active2px kiwi-linedisabled pair

08 · STANDARDS

Clear roles.
Consistent behavior.

PIP의 구성요소는 공통된 기준 위에 놓입니다. 시각적 역할과 의미, 상호작용 상태를 함께 설계해 화면이 달라도 같은 방식으로 읽히게 합니다.

DESIGN CONTRACTS
  1. ROLE색과 간격은 값보다 역할을 먼저 정의합니다.
  2. SEMANTICS읽는 표면과 행동하는 요소를 구분합니다.
  3. STATE두 테마에서 같은 행동과 상태를 일관되게 표현합니다.
  4. CONTEXT제품의 콘텐츠와 정보 우선순위에 맞춰 화면을 구성합니다.
QUALITY BASELINE
  • 일반 텍스트 4.5:1, 큰 텍스트와 필수 UI 경계 3:1
  • 키보드로 접근할 수 있는 동작과 눈에 보이는 포커스
  • 색에만 의존하지 않는 상태와 의미
  • Light·dark에서 유지되는 전경과 배경의 관계
  • 작은 화면의 정보 우선순위와 reduced motion
REFERENCE BASE5 PRIMARY SOURCES
PIP 설계 결정에 직접 사용하는 주요 출처
SOURCEROLEUSELIMITSTATE
SEED SYSTEMsemantic token과 foundation 구조브랜드 값과 제품 문법은 복사하지 않음REFERENCE
RADIX PRIMITIVEfocus·keyboard behavior시각 접근성은 제품이 별도로 책임짐REFERENCE
SHADCN/UI OWNERSHIPopen-code component ownership복사한 source와 upgrade 비용은 제품 소유REFERENCE
GOV.UK GOVERNANCE근거와 maturity를 공개하는 방식공공 서비스의 시각 문법은 맥락 전용REFERENCE
STORYBOOK WORKFLOW격리된 상태와 반복 가능한 review통합 page와 실제 data QA를 대신하지 않음REFERENCE
CURATED INDEXES9 DISCOVERY MAPS

묶음 repository는 후보를 찾는 지도입니다. 실제 채택 판단은 각 항목의 canonical source와 license, behavior를 다시 확인합니다.

디자인 시스템과 UI 구현 자료를 찾기 위한 공개 큐레이션 저장소
INDEXLANEBEST FORUSE WITH CAUTION
AWESOME CURATIONscope·분류·기여 규칙의 기준디자인 결정의 authority는 아님
DESIGN SYSTEMS · ALEX PATE SYSTEMS공개 시스템과 capability tag 비교개별 링크의 현재 상태를 재확인
DESIGN SYSTEMS · KLAUFEL OPERATIONStoken·testing·talk·tool까지 탐색canonical source로 다시 검증
AWESOME DESIGN TOOLS TOOLSjob 중심 도구와 workflow 탐색목록 포함이 품질 보증은 아님
DESIGN RESOURCES FOR DEVELOPERS IMPLEMENTATIONUI library·asset·template 폭넓게 탐색항목별 license와 접근성 확인
AWESOME STYLEGUIDES DOCUMENTATIONstyleguide와 workbench 구조 비교legacy·중단된 링크가 섞일 수 있음
AWESOME TAILWIND CSS TAILWIND현재 Tailwind UI 생태계 지도PIP token·a11y 적합성은 별도
AWESOME REACT COMPONENTS REACTinteraction job별 구현 후보 탐색component별 유지보수·license 확인
AWESOME STORYBOOK WORKFLOWaddon·문서·visual QA workflow 탐색설치된 major version 호환성 확인