문의하기

CRISSIT DESIGN SYSTEM

Built for
clear momentum.

CRISSIT 웹사이트의 컬러, 타이포그래피, 레이아웃 원칙을 한곳에 모았습니다. 디자인과 개발이 같은 언어로 더 빠르게 움직이기 위한 기준입니다.

FOUNDATION

Common · Neutral

공통색과 콘텐츠·배경·경계선에 사용하는 중립 팔레트입니다.

Common-0

#000000

Common-100

#FFFFFF

Neutral-0

#FFFFFF

Neutral-50

#FAFAFA

Neutral-100

#F5F6F7

Neutral-200

#E4E6E8

Neutral-300

#C9CCD0

Neutral-400

#A3A8AD

Neutral-500

#7C8288

Neutral-600

#5C6166

Neutral-700

#414549

Neutral-800

#2B2E31

Neutral-900

#151617

Neutral-1000

#000000

ACCENT

Color palettes

모든 단계는 배경, 텍스트, 테두리 유틸리티로 사용할 수 있습니다.

Purple

bg-purple-500

50

#F1EFFE

100

#E4E0FE

200

#C9C1FD

300

#A99EFC

400

#7C6BFB

500

#543EFA

600

#4530E0

700

#3624B4

800

#291B87

900

#1D1361

Red

bg-red-500

50

#FEF1F0

100

#FDE4E2

200

#FBC9C6

300

#F6A19C

400

#F06D66

500

#E63C33

600

#CE2A22

700

#A92923

800

#832621

900

#5F1F1C

Green

bg-green-500

50

#F2FFF6

100

#D9FFE6

200

#ACFCC7

300

#7DF5A5

400

#49E57D

500

#1ED45A

600

#00BF40

700

#009632

800

#006E25

900

#004517

Blue

bg-blue-500

50

#F0F7FE

100

#E2EFFD

200

#C5DFFC

300

#99C8FA

400

#5FA8F7

500

#2789F1

600

#1675DA

700

#1963B3

800

#1A5089

900

#183C62

Yellow

bg-yellow-500

50

#FFFAF0

100

#FEF4E2

200

#FDEAC4

300

#FCDA97

400

#FCC65A

500

#FAB11E

600

#E69D0A

700

#BE830E

800

#936710

900

#6A4C10

USE ATOMIC COLOR

색상은 이름과 단계로 바로 조합합니다.

bg-purple-500 text-common-100 hover:bg-purple-600

SEMANTIC

Color roles

의미와 강도에 따라 Atomic 컬러를 선택하는 역할 토큰입니다.

Primary

주요 액션과 핵심 정보에 사용합니다.

Normalpurple-500
Strongpurple-600
Heavypurple-700

Label / Normal

글자와 아이콘에 사용하는 명도 단계입니다.

Normalneutral-900
Neutralneutral-700
Alternativeneutral-500
Assistiveneutral-400
Disableneutral-300

Label / Inverse

어두운 배경 위 글자와 아이콘에 사용합니다.

Normalneutral-0
Neutralneutral-50
Alternativeneutral-200
Assistiveneutral-300
Disableneutral-400

Background / Normal

콘텐츠 면과 보조 배경에 사용합니다.

Normalneutral-0
Alternativeneutral-50
Assistiveneutral-200

Background / Inverse

어두운 배경의 명도 단계입니다.

Normalneutral-1000
Alternativeneutral-900
Assistiveneutral-800

Line / Normal

콘텐츠와 Divider에 사용하는 경계선입니다.

Normalneutral-200
Alternativeneutral-100
Assistiveneutral-50

Line / Inverse

어두운 배경 위 경계선입니다.

Normalneutral-700
Alternativeneutral-800
Assistiveneutral-900
STATUS · NORMAL

의미가 먼저
보이는 인터페이스

역할 토큰을 사용하면 배경과 레이블, 경계선의 위계를 일관되게 유지할 수 있습니다.

bg-background-normal text-label-normal border-line-normal
ACTION · PRIMARY

명확하게
행동을 이끌어요.

bg-primary-normal text-label-inverse-normal

OPACITY

Transparency

투명도 토큰은 opacity 유틸리티로 사용합니다.

opacity-0
opacity-4
opacity-8
opacity-12
opacity-16
opacity-32
opacity-60
opacity-80
opacity-100

TYPOGRAPHY

Fonts

본문, 디스플레이, 코드용 글꼴 토큰입니다.

font-body

가나다라 ABC 123

Pretendard, Noto Sans KR, sans-serif

font-display

가나다라 ABC 123

Pretendard, Noto Sans KR, sans-serif

DisplayExtra Bold (800)64px · 125% · -2%

Design with clarity.

sm 36pxmd 48pxxl 64px
Heading 1Bold (700)48px · 120% · -1.5%

Design with clarity.

sm 30pxmd 40pxxl 48px
Heading 2Bold (700)40px · 125% · -1.5%

Design with clarity.

sm 26pxmd 32pxxl 40px
Title 1Bold (700)32px · 130% · -1%

Design with clarity.

sm 24pxmd 24pxxl 32px
Title 2Bold (700)24px · 140% · -1%

Design with clarity.

sm 20pxmd 20pxxl 24px
Title 3Semi Bold (600)20px · 150% · -1%

Design with clarity.

sm 18pxmd 18pxxl 20px
Body 1 · NormalRegular (400)18px · 155% · 0%

Design with clarity.

sm 18pxmd 18pxxl 18px
Body 1 · ReadingRegular (400)18px · 175% · 0%

Design with clarity.

sm 18pxmd 18pxxl 18px
Body 2 · NormalRegular (400)16px · 150% · 0%

Design with clarity.

sm 16pxmd 16pxxl 16px
Label 1Medium (500), Bold (700)16px · 150% · 0%

Design with clarity.

sm 16pxmd 16pxxl 16px
Label 2Medium (500), Bold (700)14px · 145% · 0%

Design with clarity.

sm 14pxmd 14pxxl 14px
Label 3Medium (500), Bold (700)12px · 150% · 0%

Design with clarity.

sm 12pxmd 12pxxl 12px

RESPONSIVE TYPE

화면에 맞춰 단단하게 읽히는 제목

text-display-sm md:text-display-md xl:text-display

LAYOUT

Grid · Breakpoint

화면 크기에 맞춰 컬럼 수는 바뀌고 컬럼 간격은 20px로 유지합니다.

Mobile

2 columns

2단 컬럼 그리드를 사용합니다.

Tablet

3 columns

3단 컬럼 그리드를 사용하고, 필요하면 컬럼을 묶어 사용합니다.

Web

12 columns

12단 컬럼 그리드를 사용하고, 필요하면 컬럼을 묶어 사용합니다.

Grid rule

컬럼 간격은 gap-5(20px)이며, 여백을 포함한 웹 그리드의 최대 너비는 1280px입니다.

max-w-content

RESPONSIVE GRID

grid grid-cols-2 gap-5 md:grid-cols-3 lg:grid-cols-12

Responsive breakpoints

base (sm)
< 768px
md
≥ 768px
lg
≥ 1024px
xl
≥ 1280px

RADIUS

Shape scale

Radius 수치는 기본 4px 단위이며, 모서리 형태에 따라 8단계로 사용합니다.

0px

rounded-none

4px

rounded-xs

8px

rounded-sm

12px

rounded-md

16px

rounded-lg

20px

rounded-xl

32px

rounded-2xl

9999px

rounded-full

RADIUS SCALE

컴포넌트 성격에 맞는 단계만 사용합니다.

rounded-sm · rounded-md · rounded-full

SHADOW

Elevation scale

그림자는 Normal, Emphasize, Strong, Heavy의 4단계로 깊이를 표현합니다.

Normal

shadow-normal
  • 0px 0px 1px 0px #00000014
  • 0px 1px 2px 0px #00000014
  • 0px 2px 4px 0px #0000001F

Emphasize

shadow-emphasize
  • 0px 0px 2px 0px #00000014
  • 0px 2px 4px 0px #00000014
  • 0px 2px 8px 0px #0000001F

Strong

shadow-strong
  • 0px 0px 4px 0px #00000014
  • 0px 4px 8px 0px #00000014
  • 0px 6px 12px 0px #0000001F

Heavy

shadow-heavy
  • 0px 0px 8px 0px #0000000A
  • 0px 8px 16px 0px #00000014
  • 0px 16px 20px 0px #0000001F

ELEVATION

콘텐츠 중요도에 맞춰 한 단계씩 깊이를 높입니다.

shadow-normal hover:shadow-emphasize