ploto

Foundation · WBS 2.1

명확하고 차분한 분석 경험의 기반

색상, 타입, 간격과 상태 표현을 원본 Foundation에서 코드로 옮긴 살아있는 명세입니다.

01

Color

Indigo는 주요 행동과 통계적 유의성, Teal은 브랜드 포인트에 사용합니다.

Indigo

주요 행동, 선택, 통계적 유의성

50--color-indigo-50
100--color-indigo-100
200--color-indigo-200
300--color-indigo-300
400--color-indigo-400
500--color-indigo-500
600--color-indigo-600
700--color-indigo-700
900--color-indigo-900

Teal

브랜드 포인트와 보조 강조

50--color-teal-50
100--color-teal-100
300--color-teal-300
500--color-teal-500
700--color-teal-700

02

Typography

UI는 Pretendard, 수치와 코드는 IBM Plex Mono를 우선합니다.
Display28 / 700 / −2%

분석 결과를 한눈에 이해합니다 12.34%

Heading 122 / 700 / −1.5%

분석 결과를 한눈에 이해합니다 12.34%

Heading 217 / 600

분석 결과를 한눈에 이해합니다 12.34%

Body14 / 400 / 160%

분석 결과를 한눈에 이해합니다 12.34%

Caption12.5 / 400

분석 결과를 한눈에 이해합니다 12.34%

Label11 / 500 / +5%

분석 결과를 한눈에 이해합니다 12.34%

NumericIBM Plex Mono / tabular

분석 결과를 한눈에 이해합니다 12.34%

03

Spacing

4px 단위의 제한된 간격으로 리듬과 밀도를 유지합니다.
space-14px
space-28px
space-312px
space-416px
space-624px
space-832px
space-1248px

04

Status

색상에만 의존하지 않고 아이콘과 텍스트로 의미를 함께 전달합니다.
Success

작업 성공 또는 유효한 입력

Warning

주의가 필요하지만 진행 가능한 상태

Error

실패 또는 수정이 필요한 입력

Info

중립적인 안내와 보충 정보

05

Icons

24px viewBox와 currentColor를 기준으로 16, 20, 24px 크기를 지원합니다.
분석
업로드
정보
완료
주의

06

Core components

토큰을 사용하는 접근 가능한 상호작용 패턴입니다.
Button, Input, Tabs, Badge, Table, Toast, Modal story 열기 →