Sample Page Preview — OnetheTheme

Back to Studio

Color Tokens

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

Brand & Secondary

Brand Light

#818cf8

Brand

#4f46e5

Brand Dark

#3730a3

Sec. Light

#7dd3fc

Secondary

#0ea5e9

Sec. Dark

#0369a1

Neutral / Gray

#fafafa

100

#f5f5f5

200

#e5e5e5

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

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

#f9fafb

Muted

#f3f4f6

Txt Primary

#111827

Txt Sec.

#6b7280

Disabled

#d1d5db

Divider

#e5e7eb

Medium

#d4d4d4

Light

#e5e5e5

Color Pairing Guide

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

Surface + Brand

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

#ffffff #111827 #4f46e5

Alt + Secondary

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

#f9fafb #111827 #0ea5e9

Dark + Light Text

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

#3730a3 #ffffff #818cf8

Success Feedback

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

#d1fae5 #065f46 #10b981

Error Feedback

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

#fee2e2 #991b1b #ef4444

Neutral Dark + Accent

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

#262626 #ffffff #818cf8

Component Preview

모든 UI 컴포넌트를 상태별로 확인합니다.

Inputs

Text Input

Password

Select

Textarea

Checkbox

Checked Unchecked

Radio

Option 1 Option 2

Toggle Switch

활성화

비활성화

Buttons

Variants

Rounded / Pill

Sizes

With Icon

States

Button States

Input States

Default

Focus

Error

필수 항목입니다.

Feedback

Alert

Info

정보 알림 메시지입니다.

Success

작업이 완료되었습니다.

Warning

주의가 필요합니다.

Error

오류가 발생했습니다.

Toast

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

Badge

Brand Secondary Success Warning Error Info Neutral

v1.0 Stable Beta Draft

Progress Bar

Upload72%

Processing45%

Complete100%

Error30%

Spinner

Skeleton Loading

Layout

Card

Card Title

카드 설명 텍스트가 들어갑니다.

Feature Card

아이콘이 포함된 피처 카드 스타일.

Filled Card

배경색으로 강조된 카드.

Modal

Modal Title

정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

Tabs

Tab 1 패널의 콘텐츠가 여기에 표시됩니다.

Pill Tabs

Drawer

Drawer Menu

Accordion

Accordion Item 1

아코디언 패널의 콘텐츠입니다.

FAQ: 설치 방법

npm install로 설치 후 CSS를 import 하세요.

FAQ: 커스터마이징

theme.css의 CSS 변수를 수정하세요.

FAQ: 브라우저 지원

Chrome, Firefox, Safari, Edge를 지원합니다.

Navigation

Navbar

Logo

Sidebar

Breadcrumb

Pagination

120개 중 1-10

Search Bar

Default Search

With Suggestions

Button Component Button Token Button Styles Guide

Filter Tags

Components Active Tokens Layout Forms

Advanced Data Table

Sortable & Filterable Table

8명 표시

이름	이메일	역할	상태	가입일
김 김지수	jisoo@example.com	관리자	Active	2024-01-15
이 이민호	minho@example.com	편집자	Active	2024-03-22
박 박서연	seoyeon@example.com	뷰어	Pending	2024-06-10
최 최현우	hyunwoo@example.com	편집자	Inactive	2023-11-05
정 정수빈	subin@example.com	관리자	Active	2024-08-18
한 한소희	sohee@example.com	뷰어	Active	2024-09-01
강 강다니엘	daniel@example.com	편집자	Active	2024-05-14
윤 윤아름	areum@example.com	관리자	Active	2024-02-28

총 8명

Image Gallery

Masonry Grid

Carousel

Image Slider

Aurora Theme

인디고 & 앰버 색상의 모던 테마

Component Pack

12개의 페이지 섹션 컬렉션

UI Kit

18개 개별 UI 컴포넌트 카탈로그

Material Design 3

M3 디자인 시스템 + 11개 컴포넌트

Rich Text Editor

Full Editor

OnetheTheme

이것은 리치 텍스트 에디터 컴포넌트의 미리보기입니다. 실제 프로젝트에서 contenteditable 또는 전문 에디터 라이브러리를 사용할 수 있습니다.

서식 도구 모음 (Bold, Italic, Underline, Strikethrough)
정렬 옵션 (왼쪽, 가운데, 양쪽)
링크, 이미지, 코드 블록 삽입
Undo / Redo 지원

에디터에서 자유롭게 텍스트를 입력하고 서식을 적용해보세요.

Markdown 지원 자동 저장 활성

126 / 5000자

Storybook Color Token

Addon

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

@tokens Brand

Token	Value	Preview
--brand-light	#818cf8
--brand	#4f46e5
--brand-dark	#3730a3

@tokens Secondary

Token	Value	Preview
--secondary-light	#7dd3fc
--secondary	#0ea5e9
--secondary-dark	#0369a1

@tokens Neutral

Token	Value	Preview
--neutral-50	#fafafa
--neutral-100	#f5f5f5
--neutral-200	#e5e5e5
--neutral-300	#d4d4d4
--neutral-400	#a3a3a3
--neutral-500	#737373
--neutral-600	#525252
--neutral-700	#404040
--neutral-800	#262626
--neutral-900	#171717

@tokens Semantic

Token	Value	Preview
--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

Token	Value	Preview
--surface	#ffffff
--surface-alt	#f9fafb
--surface-muted	#f3f4f6

@tokens Text

Token	Value	Preview
--txt-primary	#111827
--txt-secondary	#6b7280
--txt-disabled	#d1d5db

@tokens Border

Token	Value	Preview
--divider	#e5e7eb
--border-medium	#d4d4d4
--border-light	#e5e5e5

@tokens FontSize

Token	Value	Preview
--text-xs	0.75rem	The quick brown fox
--text-sm	0.875rem	The quick brown fox
--text-base	1rem	The quick brown fox
--text-lg	1.125rem	The quick brown fox
--text-xl	1.25rem	The quick brown fox
--text-2xl	1.5rem	The quick brown fox
--text-3xl	1.875rem	The quick brown fox

@tokens FontWeight

Token	Value	Preview
--font-light	300	Inter Light 300
--font-regular	400	Inter Regular 400
--font-medium	500	Inter Medium 500
--font-semibold	600	Inter Semibold 600
--font-bold	700	Inter Bold 700
--font-extrabold	800	Inter Extrabold 800

@tokens Spacing

Token	Value	Preview
--spacing-1	0.25rem (4px)
--spacing-2	0.5rem (8px)
--spacing-3	0.75rem (12px)
--spacing-4	1rem (16px)
--spacing-6	1.5rem (24px)
--spacing-8	2rem (32px)
--spacing-10	2.5rem (40px)
--spacing-12	3rem (48px)
--spacing-16	4rem (64px)

@tokens Spacing — Card View

--spacing-1

4px

--spacing-2

8px

--spacing-4

16px

--spacing-6

24px

--spacing-8

32px

--spacing-12

48px

@tokens BorderRadius

Token	Value	Preview
--radius-none	0
--radius-sm	0.125rem
--radius-md	0.375rem
--radius-lg	0.5rem
--radius-xl	0.75rem
--radius-2xl	1rem
--radius-full	9999px

@tokens BorderRadius — Card View

none

2xl

full

@tokens Shadow

Token	Value	Preview
--shadow-sm	0 1px 2px rgba(0,0,0,0.05)
--shadow	0 1px 3px rgba(0,0,0,0.1)
--shadow-md	0 4px 6px rgba(0,0,0,0.1)
--shadow-lg	0 10px 15px rgba(0,0,0,0.1)
--shadow-xl	0 20px 25px rgba(0,0,0,0.1)
--shadow-2xl	0 25px 50px rgba(0,0,0,0.25)

@tokens Shadow — Card View

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Storybook Component Token

Addon

컴포넌트별 디자인 토큰 매핑을 확인합니다. 각 컴포넌트가 사용하는 토큰과 실제 렌더링을 비교할 수 있습니다.

@tokens Button / Base

Token	Value	Preview
--btn-bg-primary	#4f46e5
--btn-bg-secondary	#0ea5e9
--btn-bg-destructive	#ef4444
--btn-text	#ffffff
--btn-radius	0.5rem
--btn-font-size	0.875rem	Aa
--btn-font-weight	500	Aa
--btn-padding-x	1.25rem
--btn-padding-y	0.625rem

@tokens Button / States

Token	Value	Preview
--btn-hover-bg	#3730a3
--btn-focus-ring	#4f46e5 / 30%
--btn-disabled-bg	#e5e5e5
--btn-disabled-text	#a3a3a3

Rendered Component

@tokens Input / Base

Token	Value	Preview
--input-bg	#ffffff
--input-border	#d4d4d4
--input-text	#111827
--input-placeholder	#a3a3a3
--input-radius	0.5rem
--input-padding-x	1rem
--input-padding-y	0.625rem

@tokens Input / States

Token	Value	Preview
--input-focus-border	#4f46e5
--input-focus-ring	#4f46e5 / 20%
--input-error-border	#ef4444
--input-disabled-bg	#f5f5f5

Rendered Component

@tokens Card / Base

Token	Value	Preview
--card-bg	#ffffff
--card-border	#e5e5e5
--card-radius	0.75rem
--card-padding	1.25rem
--card-shadow	shadow-sm
--card-hover-shadow	shadow-md
--card-title-size	0.875rem	Aa
--card-desc-color	#6b7280

Rendered Component

Image Card

--card-bg, --card-border, --card-radius, --card-shadow 적용

Learn more →

Feature Card

--card-title-size, --card-desc-color 적용

@tokens Badge / Variants

Token	Value	Preview
--badge-brand-bg	#4f46e5 / 10%
--badge-brand-text	#4f46e5
--badge-success-bg	#d1fae5
--badge-success-text	#065f46
--badge-error-bg	#fee2e2
--badge-error-text	#991b1b
--badge-radius	9999px
--badge-font-size	0.75rem	Aa
--badge-padding-x	0.625rem

Rendered Component

Pill (Soft)

Brand Secondary Success Warning Error Info

Solid

v1.0 Stable Beta Critical

Outline

Brand Success Error Neutral

@tokens Alert / Variants

Token	Value	Preview
--alert-info-bg	#dbeafe
--alert-info-border	#3b82f6 / 20%
--alert-info-icon	#3b82f6
--alert-success-bg	#d1fae5
--alert-warning-bg	#fef3c7
--alert-error-bg	#fee2e2
--alert-radius	0.75rem
--alert-padding	1rem

Rendered Component

Info

--alert-info-bg + --alert-info-border

Success

--alert-success-bg 적용

Warning

--alert-warning-bg 적용

Error

--alert-error-bg 적용

@tokens Toast / Base

Token	Value	Preview
--toast-bg-dark	#262626
--toast-bg-error	#ef4444
--toast-bg-light	#ffffff
--toast-text	#ffffff
--toast-icon-success	#10b981
--toast-icon-info	#3b82f6
--toast-radius	0.5rem
--toast-shadow	shadow-lg

Rendered Component

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

@tokens Progress / Bar

Token	Value	Preview
--progress-track	#e5e5e5
--progress-fill-brand	#4f46e5
--progress-fill-secondary	#0ea5e9
--progress-fill-success	#10b981
--progress-fill-error	#ef4444
--progress-height	0.5rem
--progress-radius	9999px

@tokens Spinner

Token	Value	Preview
--spinner-color-brand	#4f46e5
--spinner-color-secondary	#0ea5e9
--spinner-track-opacity	0.25
--skeleton-bg	#e5e5e5

Rendered Component

Upload72%

Processing45%

Complete100%

Error30%

@tokens Modal / Base

Token	Value	Preview
--modal-bg	#ffffff
--modal-overlay	rgba(0,0,0,0.5)
--modal-border	#e5e5e5
--modal-radius	1rem
--modal-shadow	shadow-xl
--modal-padding	1.5rem
--modal-title-size	1.125rem	Aa
--modal-body-color	#6b7280

Rendered Component

Modal Title

정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

@tokens Tabs / Base

Token	Value	Preview
--tab-active-color	#4f46e5
--tab-active-border	#4f46e5
--tab-inactive-color	#6b7280
--tab-hover-bg	#fafafa
--tab-border	#e5e5e5
--tab-font-size	0.875rem	Aa
--pill-active-bg	#ffffff
--pill-track-bg	#f5f5f5

Rendered Component

Underline Tabs

Tab 1 콘텐츠가 여기에 표시됩니다.

Pill Tabs

@tokens Accordion / Base

Token	Value	Preview
--accordion-bg	#ffffff
--accordion-border	#e5e5e5
--accordion-divider	#e5e5e5
--accordion-radius	0.75rem
--accordion-header-text	#111827
--accordion-body-text	#6b7280
--accordion-hover-bg	#fafafa
--accordion-icon-color	#a3a3a3
--accordion-padding	1.25rem / 1rem

Rendered Component

Accordion Item 1

아코디언 패널의 콘텐츠입니다. --accordion-body-text 적용.

Accordion Item 2

두 번째 아코디언 항목입니다.

Accordion Item 3

세 번째 아코디언 항목입니다.

@tokens Nav / Base

Token	Value	Preview
--nav-bg	#ffffff
--nav-border	#e5e7eb
--nav-link-color	#6b7280
--nav-link-active	#4f46e5
--nav-link-hover	#111827
--nav-active-bg	#4f46e5 / 10%
--nav-font-size	0.875rem	Aa
--nav-padding-x	0.75rem

Rendered Component

Navbar

Logo

Sidebar

Breadcrumb

Color Tokens

Brand & Secondary

Neutral / Gray

Semantic

Surface / Text / Border

Color Pairing Guide

Surface + Brand

Alt + Secondary

Dark + Light Text

Success Feedback

Error Feedback

Neutral Dark + Accent

Component Preview

Inputs

Buttons

States

Feedback

Layout

Card Title

Feature Card

Filled Card

Modal Title

Drawer Menu

Navigation

Tooltip

Search Bar

Advanced Data Table

Image Gallery

Carousel

Aurora Theme

Component Pack

UI Kit

Material Design 3

Rich Text Editor

OnetheTheme

Storybook Color Token

Storybook Component Token

Image Card

Feature Card

Modal Title