DEVELOPER PALETTE

Monochrome +
One Bold Accent

Supabase 스타일 에메랄드 그린. 장식 없음. 여백이 디자인.

Components Form Table

EMERALD GREEN

oklch(0.658 0.190 155)

hue 155 · 개발자 도구, 기술 사이트

TYPOGRAPHY

Pretendard Variable

display-xl · 800

56px 헤드라인

display-lg · 700

40px 섹션

display-sm · 600

20px 카드 타이틀

text-overline

MONO LABEL · UPPERCASE

COMPONENTS

Buttons & Badges

Buttons

Badges

Primary Accent Secondary Success Warning Danger

FEEDBACK

Alerts

Changes saved successfully.
A new version is available.
Your trial expires in 3 days.
Failed to connect to server.

NAVIGATION

Tabs

Overview
Settings
Members
Billing

Tab content area. Active tab uses accent underline indicator.

LAYOUT

Cards

Feature

Rounded Corners

부드러운 radius-xl 모서리. 친근하고 모던한 느낌.

System

Micro Motion

hover-lift, animate-in. 장식이 아닌 명확성을 위한 동작.

Design

Dark Mode

prefers-color-scheme 자동 대응. OS 설정 따라감.

DATA

Table

NameRoleStatusActions
김서준DesignerActive
이하은DeveloperActive
박지민PMAway
최유진QAOffline

INPUTS

Form Elements

Focus ring uses accent color

Password must be at least 8 characters

Notifications

OVERLAY

Modal & Toast

Modal

Confirm Action

Are you sure you want to proceed?

Toast

✓ Changes saved successfully
✕ Failed to delete item