Design System

GIL AI CBT UI 컴포넌트 라이브러리

Colors

Background

background

#ffffff

background-muted

#f4f4f5

background-subtle

#fafafa

background-inverse

#18181b

Foreground (Text)

foreground

#18181b

foreground-muted

#71717a

foreground-subtle

#a1a1aa

foreground-inverse

#ffffff

Primary & Secondary

primary

#18181b

primary-hover

#09090b

secondary

#f4f4f5

secondary-hover

#e4e4e7

Semantic Colors

success
warning
danger
info

Border

border

#e4e4e7

border-muted

#f4f4f5

border-strong

#d4d4d8

Typography

Font Family

Pretendard (Sans-serif)

기본 폰트 - 본문, UI 요소

나눔명조 (Serif)

시험지 제목, 강조 텍스트

Font Size

2xs10px / 0.625rem
xs12px / 0.75rem
sm14px / 0.875rem
base16px / 1rem
lg18px / 1.125rem
xl20px / 1.25rem
2xl24px / 1.5rem
3xl30px / 1.875rem

Font Weight

Light (300) - 가볍고 섬세한 텍스트

Normal (400) - 기본 본문 텍스트

Medium (500) - 강조가 필요한 텍스트

Semibold (600) - 소제목, 레이블

Bold (700) - 제목, 중요 정보

Button

Variant
Size
States
Icon Button

Input

Default
With Icon
search
Error
Textarea
FormField

회사 이메일을 입력하세요

Badge

Variant
DefaultSecondaryOutlineSuccessWarningDangerInfo
Size
SmallMediumLarge
Status
완료대기오류정보

Card

Default Card

기본 카드 스타일

카드 내용이 여기에 들어갑니다.

Outline Card

아웃라인 스타일

투명한 배경의 카드입니다.

Ghost Card

고스트 스타일

음영 배경의 카드입니다.

Form Components

Select
Checkbox

필수 동의 사항입니다

Radio
Switch

새로운 소식을 이메일로 받습니다

Modal

Table

이름이메일상태
홍길동hong@email.com활성
김철수kim@email.com대기
이영희lee@email.com비활성

Tabs

Default
탭 1 내용
Pills
Underline

Alert

Tooltip

Tooltip

Avatar

Size
XS
SM
MD
LG
XL
Group
A
B
C
+2

Skeleton

Basic
Text

Spinner

Size
progress_activity로딩중...
progress_activity로딩중...
progress_activity로딩중...
progress_activity로딩중...
progress_activity로딩중...
With Label
progress_activity로딩중...로딩중...