Vapor UI preview

01.

Colors — 11 family × 10 step

다크 테마는 표면이 gray-900/800, 헤어라인은 gray-700

BLUE · 다크에서 fg-primary가 blue-300/400으로 한 단계 밝아진다

blue-200

oklch(0.781 0.110 264)

callout primary fg

blue-300

oklch(0.690 0.146 261)

fg-primary-100 (다크)

blue-400

oklch(0.638 0.166 258)

fg-primary-200 · border-primary

blue-500

oklch(0.581 0.181 254)

brand · primary bg (light = dark)

blue-700

oklch(0.451 0.166 259)

primary active

GRAY · 다크 표면 (gray-900 canvas, gray-800 overlay, gray-700 hairline)

gray-700

oklch(0.314 0.000 0)

border-secondary (다크)

gray-800

oklch(0.234 0.000 0)

overlay-100 (카드 표면)

gray-900

oklch(0.169 0.000 0)

canvas (page bg)

gray-200

oklch(0.892 0.000 0)

fg-secondary-100 (다크)

gray-100

oklch(0.972 0.000 0)

fg-secondary-200 · contrast bg

SEMANTIC — Status families (다크에서도 -500이 fill의 앵커)

green-500

oklch(0.566 0.114 167)

success bg-200

orange-500

oklch(0.557 0.179 38)

warning bg-200

red-500

oklch(0.577 0.198 21)

danger bg-200

violet-300

oklch(0.560 0.270 295)

워드마크 전용 카노니컬

color-black

oklch(0.000 0.000 0)

scrim oklch(0 0 0 / .4)

SEMANTIC ALIAS — dark theme (raw 토큰 매핑)

color-background-canvas gray-900

color-background-overlay-100 gray-800

color-background-primary-200 blue-500

color-background-secondary-200 gray-700

color-foreground-primary-100 blue-300

color-foreground-secondary-200 gray-100

color-border-primary blue-400

color-border-secondary gray-700

02.

Typography — Pretendard · 13 steps

letter-spacing -0.1px 기본, display는 -0.4px

.vp-display1
80 / 88 · 800 · -0.4

디자인 시스템

.vp-display3
48 / 56 · 700 · -0.4

Vapor 그리고 우리

.vp-h1
32 / 48 · 700

한국어가 1차 언어인 시스템

.vp-h3
20 / 28 · 700

Bilingual headline pairing

.vp-body1
16 / 24 · 400

Pretendard는 한글과 라틴이 단일 metric을 공유한다. 가중치 400/500/600/700/800을 사용하며 한글 본문에서 들떠 보이지 않도록 기본 letter-spacing은 -0.1px로 잡는다.

.vp-body2
14 / 20 · 400 (기본)

본문의 기본 클래스다. 표·캡션·도움말 텍스트도 여기에서 출발하며, 위계가 한 단계 내려갈 때 vp-body3(12/18)로 한 단계 작아진다.

.vp-body4
10 / 14 · 400

최소 크기 본문이며 라이선스 표기·메타데이터·툴팁 외에는 거의 사용되지 않는다.

.vp-subtitle1
14 / 20 · 500 · hint

보조 부제목 — color-foreground-hint-100 적용 (다크: gray-400)

03.

Button — 7 variants × 4 sizes

xl 사이즈만 radius 400 (12px), 나머지는 300 (8px)

SIZE · sm 28 / md 32 / lg 40 / xl 48

VARIANT · primary / outline / ghost / secondary

VARIANT · danger / danger-outline / contrast

STATE · default / hover / active / disabled

04.

Badge · Input · Checkbox · Switch

시그니처 컴포넌트의 idle / on / focused / error 상태

BADGE · solid (intent별)

Primary 완료 주의 에러 힌트 대비

BADGE · soft

신규 완료 주의 에러

BADGE · dot

실행 중 대기 중 실패

TEXT INPUT · idle / focused / error

이메일

로그인 ID로 사용된다.

조직 도메인

focus 상태 — blue-400 ring 25%.

비밀번호

8자 이상 입력해야 한다.

CHECKBOX · RADIO · SWITCH

약관에 동의한다 마케팅 수신에 동의한다 (선택) 월간 결제 — ₩9,900 / 월 연간 결제 — ₩99,000 / 년 (2개월 무료) 다크 모드 자동 전환 주간 활동 리포트 받기

CARD · 1px 헤어라인 + radius 400

새 프로젝트 만들기

콘솔에서 컨테이너 1개와 IDE 1개를 함께 생성한다. 5분 내 환경 준비가 끝난다.

Cloud IDE 활성

05.

Callout · Tooltip

다크에서 Tooltip은 gray-100 표면 + gray-900 텍스트로 반전된다

새로운 워크스페이스 정책이 적용된다. 개인 프로젝트는 자동으로 private으로 생성된다. 기존 프로젝트는 영향을 받지 않는다.

배포가 완료되었다. vapor-ui-1.3.0이 production에 배포되었다. 페이지를 새로고침해 변경 사항을 확인한다.

저장하지 않은 변경 사항이 있다. 다른 페이지로 이동하기 전에 저장한다.

토큰 빌드에 실패했다. colors_and_type.css에서 정의되지 않은 변수를 참조했다. 빌드 로그를 확인한다.

TOOLTIP — 다크에서 gray-100 + gray-900 (반전)

실행 중

FOCUS RING — 2px blue-400 + 2px offset

상태 변화는 한 단계 darker step으로 fill을 swap하는 방식이다 — transform·scale은 사용하지 않는다.

ELEVATION — sm / md / lg / xl

shadow-sm · 0 1px 3px

shadow-md · 0 2px 10px

shadow-lg · 0 4px 16px

shadow-xl · 0 16px 32px

06.

Key screen — goorm 콘솔 / 컨테이너 목록

다크에서 카드는 gray-800 overlay-100 위에 1px gray-700 헤어라인

console.goorm.io / projects / vapor-ui

개요

컨테이너

멤버

설정

컨테이너 목록

현재 활성화된 컨테이너 4개 · 총 사용량 12.4GB / 50GB

이름	스택	상태	마지막 실행	메모리
vapor-design-tokens	Node.js 20	실행 중	방금 전	512 MB
vapor-ui-docs	Next.js 15	실행 중	3분 전	1.2 GB
color-generator-test	Python 3.12	대기 중	2시간 전	256 MB
icons-storybook	Node.js 20	실패	어제	— MB