Forest Theme Preview — OnetheTheme

Back to Studio

Color Tokens

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

Brand / Primary

Light

#4ade80

Default

#16a34a

Dark

#166534

Secondary

Light

#fcd34d

Default

#d97706

Dark

#92400e

Neutral / Gray

#fafaf9

100

#f5f5f4

200

#e7e5e4

300

#d6d3d1

400

#a8a29e

500

#78716c

600

#57534e

700

#44403c

800

#292524

900

#1c1917

Semantic

Success

#10b981

Warning

#eab308

Error

#dc2626

Info

#0d9488

Background / Surface

Surface

#fefdfb

Alt

#faf7f2

Muted

#f5f0ea

Text

Primary

#1c1917

Secondary

#78716c

Disabled

#d6d3d1

Border / Divider

Default Divider

#e7e5e4

Medium Border

#d6d3d1

Light Border

#e7e5e4

Semantic Variants

Success, Warning, Error, Info 각 색상의 Light / Default / Dark 변형입니다. 배지 배경, 알림 배경, 강조 텍스트 등에 활용합니다.

Success

Light

#d1fae5

Default

#10b981

Dark

#065f46

Warning

Light

#fef9c3

Default

#eab308

Dark

#92400e

Error

Light

#fee2e2

Default

#dc2626

Dark

#991b1b

Info

Light

#ccfbf1

Default

#0d9488

Dark

#115e59

Color Pairing Guide

배경 + 텍스트 + 액센트 조합을 실제 카드 형태로 시각화합니다. 어떤 색상 조합이 UI에 적합한지 한눈에 확인할 수 있습니다.

Surface + Brand

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

#fefdfb #1c1917 #16a34a

Alt + Secondary

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

#faf7f2 #1c1917 #d97706

Dark + Light Text

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

#166534 #fefdfb #4ade80

Success Feedback

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

#d1fae5 #065f46 #10b981

Error Feedback

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

#fee2e2 #991b1b #dc2626

Neutral Dark + Accent

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

#292524 #fefdfb #4ade80

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	#4ade80
--brand	#16a34a
--brand-dark	#166534

@tokens Secondary

Token	Value	Preview
--secondary-light	#fcd34d
--secondary	#d97706
--secondary-dark	#92400e

@tokens Neutral

Token	Value	Preview
--neutral-50	#fafaf9
--neutral-100	#f5f5f4
--neutral-200	#e7e5e4
--neutral-300	#d6d3d1
--neutral-400	#a8a29e
--neutral-500	#78716c
--neutral-600	#57534e
--neutral-700	#44403c
--neutral-800	#292524
--neutral-900	#1c1917

@tokens Semantic

Token	Value	Preview
--success	#10b981
--success-light	#d1fae5
--warning	#eab308
--warning-light	#fef9c3
--error	#dc2626
--error-light	#fee2e2
--info	#0d9488
--info-light	#ccfbf1
--success-dark	#065f46
--warning-dark	#92400e
--error-dark	#991b1b
--info-dark	#115e59

@tokens Surface

Token	Value	Preview
--surface	#fefdfb
--surface-alt	#faf7f2
--surface-muted	#f5f0ea

@tokens Text

Token	Value	Preview
--txt-primary	#1c1917
--txt-secondary	#78716c
--txt-disabled	#d6d3d1

@tokens Border

Token	Value	Preview
--divider	#e7e5e4
--border-medium	#d6d3d1
--border-light	#e7e5e4

@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	#16a34a
--btn-bg-secondary	#d97706
--btn-bg-destructive	#dc2626
--btn-text	#fefdfb
--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	#166534
--btn-focus-ring	#16a34a / 30%
--btn-disabled-bg	#e7e5e4
--btn-disabled-text	#a8a29e

Rendered Component

@tokens Input / Base

Token	Value	Preview
--input-bg	#fefdfb
--input-border	#d6d3d1
--input-text	#1c1917
--input-placeholder	#a8a29e
--input-radius	0.5rem
--input-padding-x	1rem
--input-padding-y	0.625rem

@tokens Input / States

Token	Value	Preview
--input-focus-border	#16a34a
--input-focus-ring	#16a34a / 20%
--input-error-border	#dc2626
--input-disabled-bg	#f5f5f4

Rendered Component

@tokens Card / Base

Token	Value	Preview
--card-bg	#fefdfb
--card-border	#e7e5e4
--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	#78716c

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	#16a34a / 10%
--badge-brand-text	#16a34a
--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	#ccfbf1
--alert-info-border	#0d9488 / 20%
--alert-info-icon	#0d9488
--alert-success-bg	#d1fae5
--alert-warning-bg	#fef9c3
--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	#292524
--toast-bg-error	#dc2626
--toast-bg-light	#fefdfb
--toast-text	#fefdfb
--toast-icon-success	#10b981
--toast-icon-info	#0d9488
--toast-radius	0.5rem
--toast-shadow	shadow-lg

Rendered Component

저장되었습니다.

업로드에 실패했습니다.

새 업데이트가 있습니다.

@tokens Progress / Bar

Token	Value	Preview
--progress-track	#e7e5e4
--progress-fill-brand	#16a34a
--progress-fill-secondary	#d97706
--progress-fill-success	#10b981
--progress-fill-error	#dc2626
--progress-height	0.5rem
--progress-radius	9999px

@tokens Spinner

Token	Value	Preview
--spinner-color-brand	#16a34a
--spinner-color-secondary	#d97706
--spinner-track-opacity	0.25
--skeleton-bg	#e7e5e4

Rendered Component

Upload72%

Processing45%

Complete100%

Error30%

@tokens Modal / Base

Token	Value	Preview
--modal-bg	#fefdfb
--modal-overlay	rgba(0,0,0,0.5)
--modal-border	#e7e5e4
--modal-radius	1rem
--modal-shadow	shadow-xl
--modal-padding	1.5rem
--modal-title-size	1.125rem	Aa
--modal-body-color	#78716c

Rendered Component

Modal Title

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

@tokens Tabs / Base

Token	Value	Preview
--tab-active-color	#16a34a
--tab-active-border	#16a34a
--tab-inactive-color	#78716c
--tab-hover-bg	#fafaf9
--tab-border	#e7e5e4
--tab-font-size	0.875rem	Aa
--pill-active-bg	#fefdfb
--pill-track-bg	#f5f5f4

Rendered Component

Underline Tabs

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

Pill Tabs

@tokens Accordion / Base

Token	Value	Preview
--accordion-bg	#fefdfb
--accordion-border	#e7e5e4
--accordion-divider	#e7e5e4
--accordion-radius	0.75rem
--accordion-header-text	#1c1917
--accordion-body-text	#78716c
--accordion-hover-bg	#fafaf9
--accordion-icon-color	#a8a29e
--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	#fefdfb
--nav-border	#e7e5e4
--nav-link-color	#78716c
--nav-link-active	#16a34a
--nav-link-hover	#1c1917
--nav-active-bg	#16a34a / 10%
--nav-font-size	0.875rem	Aa
--nav-padding-x	0.75rem

Rendered Component

Navbar

Logo

Sidebar

Breadcrumb

Color Tokens

Brand / Primary

Secondary

Neutral / Gray

Semantic

Background / Surface

Text

Border / Divider

Semantic Variants

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