ColorToken-Solar — OnetheTheme
Back to Studio

Color Tokens

디자인 시스템의 모든 컬러 토큰을 한눈에 확인합니다.

Brand & Secondary

Brand Light

#FBE9A0

Brand

#F9DC5C

Brand Dark

#D4A017

Sec. Light

#7CB3FD

Secondary

#3185FC

Sec. Dark

#1A5BBF

Neutral / Gray

50

#F5F5F6

100

#EBEBED

200

#D1D1D5

300

#B8B7BD

400

#9E9DA6

500

#74737D

600

#5A5964

700

#403F4C

800

#2D2C36

900

#1A1A21

Semantic

Light / Default / Dark 변형 포함.

Suc. Light

#d1fae5

Success

#10b981

Suc. Dark

#065f46

Warn Light

#fef3c7

Warning

#f59e0b

Warn Dark

#92400e

Err. Light

#fee2e2

Error

#ef4444

Err. Dark

#991b1b

Info Light

#dbeafe

Info

#3b82f6

Info Dark

#1e40af

Surface / Text / Border

Surface

#ffffff

Alt

#FAFAF8

Muted

#F5F4F0

Txt Primary

#1A1A21

Txt Sec.

#5A5964

Disabled

#B8B7BD

Divider

#D1D1D5

Medium

#B8B7BD

Light

#D1D1D5

Color Pairing Guide

배경 + 텍스트 + 액센트 조합을 실제 카드 형태로 시각화합니다.

Surface + Brand

기본 흰 배경에 Brand 색상 액센트를 사용하는 가장 기본적인 조합입니다.

#ffffff #1A1A21 #F9DC5C

Alt + Secondary

Alt 배경에 Secondary 색상을 액센트로 사용합니다. 보조 영역에 적합합니다.

#FAFAF8 #1A1A21 #3185FC

Dark + Light Text

어두운 Brand 배경에 흰 텍스트 조합. 헤더, CTA 영역에 적합합니다.

#D4A017 #ffffff #FBE9A0

Success Feedback

성공 피드백 메시지에 적합한 밝은 녹색 배경 + 어두운 텍스트 조합입니다.

#d1fae5 #065f46 #10b981

Error Feedback

오류 알림에 적합한 밝은 빨강 배경 + 어두운 텍스트 조합입니다.

#fee2e2 #991b1b #ef4444

Neutral Dark + Accent

코드 에디터, 터미널 스타일의 다크 UI 조합입니다. Brand Light 액센트.

#2D2C36 #ffffff #FBE9A0

Storybook Color Token

Addon

Design Token Addon 스타일로 컬러/타이포/스페이싱 토큰을 테이블/카드로 확인합니다.

@tokens Brand

TokenValuePreview
--brand-light#FBE9A0
--brand#F9DC5C
--brand-dark#D4A017

@tokens Secondary

TokenValuePreview
--secondary-light#7CB3FD
--secondary#3185FC
--secondary-dark#1A5BBF

@tokens Neutral

TokenValuePreview
--neutral-50#F5F5F6
--neutral-100#EBEBED
--neutral-200#D1D1D5
--neutral-300#B8B7BD
--neutral-400#9E9DA6
--neutral-500#74737D
--neutral-600#5A5964
--neutral-700#403F4C
--neutral-800#2D2C36
--neutral-900#1A1A21

@tokens Semantic

TokenValuePreview
--success#10b981
--success-light#d1fae5
--warning#f59e0b
--warning-light#fef3c7
--error#ef4444
--error-light#fee2e2
--info#3b82f6
--info-light#dbeafe
--success-dark#065f46
--warning-dark#92400e
--error-dark#991b1b
--info-dark#1e40af

@tokens Surface

TokenValuePreview
--surface#ffffff
--surface-alt#FAFAF8
--surface-muted#F5F4F0

@tokens Text

TokenValuePreview
--txt-primary#1A1A21
--txt-secondary#5A5964
--txt-disabled#B8B7BD

@tokens Border

TokenValuePreview
--divider#D1D1D5
--border-medium#B8B7BD
--border-light#D1D1D5

Preview

모든 컬러 토큰이 실제 UI에서 어떻게 조합되는지 확인합니다.

Solar Design System

태양빛에서 영감받은
선명한 디자인

골든 옐로와 비비드 블루의 대비로 에너지 넘치고 명확한 사용자 경험을 만듭니다.

brand-dark bg secondary-dark bg brand button brand-light text

Cards

빠른 시작

몇 분만에 프로젝트를 구성하고 바로 개발을 시작하세요.

자세히 →

보안 내장

기업 수준의 보안이 기본으로 제공됩니다.

자세히 →

확장 가능

필요에 따라 유연하게 확장할 수 있는 아키텍처.

자세히 →

Form

디자인 개발 마케팅 분석 기획

Alerts

저장 완료

변경 사항이 성공적으로 저장되었습니다.

안내

시스템 점검이 오늘 자정에 예정되어 있습니다.

주의

저장 공간이 80%를 초과했습니다. 정리를 권장합니다.

오류

요청을 처리하는 중 문제가 발생했습니다. 다시 시도해주세요.

Stats

총 사용자

12,847

+12.5%

매출

₩4.2M

+8.3%

전환율

3.24%

-1.2%

응답 시간

142ms

정상

Navigation

홈/ 프로젝트/ Solar Design

팀 멤버

김

김민수

kim@example.com

관리자
이

이지은

lee@example.com

편집자
박

박서준

park@example.com

뷰어

CTA

지금 바로 시작하세요

Solar 디자인 시스템으로 더 빠르고 일관된 제품을 만들어보세요.

99.9%

가동률

50+

컴포넌트

24/7

지원

서비스 정상 운영 중