디자인 토큰 · CSS 변수
Primitive 83
| Name | Figma variable | CSS variable | Value |
|---|---|---|---|
| Colors / primary | |||
| 100 |
Colors/primary/100
사용
|
--color-primary-100
|
#eaf2ff
|
| 500 |
Colors/primary/500
사용
|
--color-primary-500
|
#345cf2
|
| 600 |
Colors/primary/600
사용
|
--color-primary-600
|
#2145ca
|
| 800 |
Colors/primary/800
사용
|
--color-primary-800
|
#092581
|
| 900 |
Colors/primary/900
사용
|
--color-primary-900
|
#0a1a45
|
| point |
Colors/primary/point
사용
|
--color-primary-point
|
#70edff
|
| Colors / gray | |||
| 000 |
Colors/gray/000
사용
|
--color-gray-000
|
#ffffff
|
| 050 |
Colors/gray/050
사용
|
--color-gray-050
|
#f6f8fb
|
| 100 |
Colors/gray/100
사용
|
--color-gray-100
|
#f1f2f7
|
| 200 |
Colors/gray/200
사용
|
--color-gray-200
|
#d9dbe3
|
| 300 |
Colors/gray/300
사용
|
--color-gray-300
|
#bdc0ce
|
| 400 |
Colors/gray/400
사용
|
--color-gray-400
|
#9ea3b7
|
| 500 |
Colors/gray/500
사용
|
--color-gray-500
|
#8187a2
|
| 600 |
Colors/gray/600
사용
|
--color-gray-600
|
#666c8a
|
| 700 |
Colors/gray/700
사용
|
--color-gray-700
|
#50556c
|
| 800 |
Colors/gray/800
사용
|
--color-gray-800
|
#3b3e4f
|
| 900 |
Colors/gray/900
미사용
|
--color-gray-900
|
#252732
|
| 950 |
Colors/gray/950
사용
|
--color-gray-950
|
#10172a
|
| Border / width | |||
| border-0 |
Border/width/border-0
미사용
|
- |
0px
|
| border-1 |
Border/width/border-1
미사용
|
- |
1px
|
| border-2 |
Border/width/border-2
미사용
|
- |
2px
|
| border-3 |
Border/width/border-3
사용
|
- |
3px
|
| Border / radius | |||
| radius-0 |
Border/radius/radius-0
사용
|
- |
0px
|
| radius-2 |
Border/radius/radius-2
미사용
|
- |
2px
|
| radius-4 |
Border/radius/radius-4
사용
|
--border-radius-4
|
4px
|
| radius-6 |
Border/radius/radius-6
사용
|
--border-radius-6
|
6px
|
| radius-8 |
Border/radius/radius-8
사용
|
- |
8px
|
| radius-10 |
Border/radius/radius-10
사용
|
--border-radius-10
|
10px
|
| radius-12 |
Border/radius/radius-12
사용
|
--border-radius-12
|
12px
|
| radius-14 |
Border/radius/radius-14
사용
|
--border-radius-14
|
14px
|
| radius-16 |
Border/radius/radius-16
사용
|
--border-radius-16
|
16px
|
| radius-20 |
Border/radius/radius-20
사용
|
--border-radius-20
|
20px
|
| radius-24 |
Border/radius/radius-24
미사용
|
- |
24px
|
| radius-full |
Border/radius/radius-full
사용
|
--border-radius-full
|
9999px
|
| Gap | |||
| gap-1 |
Gap/gap-1
미사용
|
- |
1px
|
| gap-2 |
Gap/gap-2
사용
|
--size-2
|
2px
|
| gap-3 |
Gap/gap-3
사용
|
- |
3px
|
| gap-4 |
Gap/gap-4
사용
|
--size-4
|
4px
|
| gap-5 |
Gap/gap-5
사용
|
- |
5px
|
| gap-6 |
Gap/gap-6
사용
|
--size-6
|
6px
|
| gap-8 |
Gap/gap-8
사용
|
--size-8
|
8px
|
| gap-10 |
Gap/gap-10
사용
|
--size-10
|
10px
|
| gap-12 |
Gap/gap-12
사용
|
--size-12
|
12px
|
| gap-14 |
Gap/gap-14
사용
|
--size-14
|
14px
|
| gap-16 |
Gap/gap-16
사용
|
--size-16
|
16px
|
| gap-20 |
Gap/gap-20
사용
|
--size-20
|
20px
|
| gap-24 |
Gap/gap-24
사용
|
--size-24
|
24px
|
| gap-28 |
Gap/gap-28
사용
|
--size-28
|
28px
|
| gap-32 |
Gap/gap-32
사용
|
--size-32
|
32px
|
| gap-36 |
Gap/gap-36
미사용
|
--size-36
|
36px
|
| gap-40 |
Gap/gap-40
사용
|
--size-40
|
40px
|
| gap-44 |
Gap/gap-44
미사용
|
- |
44px
|
| gap-48 |
Gap/gap-48
사용
|
--size-48
|
48px
|
| gap-56 |
Gap/gap-56
미사용
|
--size-56
|
56px
|
| gap-64 |
Gap/gap-64
미사용
|
--size-64
|
64px
|
| gap-72 |
Gap/gap-72
미사용
|
--size-72
|
72px
|
| gap-80 |
Gap/gap-80
미사용
|
--size-80
|
80px
|
| gap-96 |
Gap/gap-96
미사용
|
--size-96
|
96px
|
| Font / font-weight | |||
| thin |
Font/font-weight/thin
미사용
|
--font-weight-thin
|
Thin
|
| light |
Font/font-weight/light
사용
|
--font-weight-light
|
Light
|
| regular |
Font/font-weight/regular
사용
|
--font-weight-regular
|
Regular
|
| medium |
Font/font-weight/medium
사용
|
--font-weight-medium
|
Medium
|
| semiBold |
Font/font-weight/semiBold
사용
|
--font-weight-semibold
|
SemiBold
|
| bold |
Font/font-weight/bold
사용
|
--font-weight-bold
|
Bold
|
| extraBold |
Font/font-weight/extraBold
미사용
|
--font-weight-extrabold
|
ExtraBold
|
| black |
Font/font-weight/black
미사용
|
--font-weight-black
|
Black
|
| Font / font-size | |||
| display / small |
Font/font-size/display/small
미사용
|
--font-size-10
|
36px
|
| small |
Font/small
미사용
|
--font-size-10
|
36px
|
| display / medium |
Font/font-size/display/medium
미사용
|
- |
44px
|
| medium |
Font/medium
미사용
|
- |
44px
|
| display / large |
Font/font-size/display/large
미사용
|
--font-size-14
|
60px
|
| large |
Font/large
미사용
|
--font-size-14
|
60px
|
| heading / xxsmall |
Font/font-size/heading/xxsmall
사용
|
--font-size-body
|
15px
|
| heading / xsmall |
Font/font-size/heading/xsmall
사용
|
- |
17px
|
| heading / small |
Font/font-size/heading/small
미사용
|
- |
19px
|
| heading / medium |
Font/font-size/heading/medium
미사용
|
--font-size-7
|
24px
|
| heading / large |
Font/font-size/heading/large
미사용
|
--font-size-9
|
32px
|
| heading / xlarge |
Font/font-size/heading/xlarge
미사용
|
--font-size-display-1
|
40px
|
| body / xxsmall |
Font/font-size/body/xxsmall
미사용
|
- |
11px
|
| body / xsmall |
Font/font-size/body/xsmall
사용
|
- |
13px
|
| body / small |
Font/font-size/body/small
사용
|
--font-size-body
|
15px
|
| body / medium |
Font/font-size/body/medium
미사용
|
- |
17px
|
| body / large |
Font/font-size/body/large
사용
|
- |
19px
|
Responsive 33
| Name | Figma variable | CSS variable | Desktop | Mobile |
|---|---|---|---|---|
| Gap / layout / container | ||||
| gap-container-sm |
Gap/layout/gap-container-sm
사용
|
- |
240px
|
16px
|
| gap-container-md |
Gap/layout/gap-container-md
사용
|
- |
320px
|
16px
|
| gap-container-lg |
Gap/layout/gap-container-lg
사용
|
- |
420px
|
16px
|
| gap-container-xxlg |
Gap/layout/gap-container-xxlg
사용
|
- |
680px
|
16px
|
| Gap / input | ||||
| padding-input-lg |
Gap/input/padding-input-lg
사용
|
--form-control-padding-inline-large
|
24px
|
20px
|
| padding-input-md |
Gap/input/padding-input-md
사용
|
--form-control-padding-inline
|
20px
|
16px
|
| padding-input-sm |
Gap/input/padding-input-sm
사용
|
--form-control-padding-inline-small
|
16px
|
12px
|
| padding-input-xsm |
Gap/input/padding-input-xsm
사용
|
--form-control-padding-inline-xsmall
|
10px
(12px)
|
12px
|
| Gap / table | ||||
| cell-hight |
Gap/table/cell-hight
사용
|
--table-cell-block-size
|
60px
|
46px
|
| cell-header-hight |
Gap/table/cell-header-hight
사용
|
--table-head-block-size
|
56px
|
40px
|
| cell-padding-x |
Gap/table/cell-padding-x
사용
|
--table-cell-padding-inline
|
8px
|
8px
|
| Font-size / size | ||||
| xxlarge |
Font-size/size/xxlarge
사용
|
--font-size-xxlarge
|
32px
|
20px
|
| xlarge |
Font-size/size/xlarge
사용
|
--font-size-xlarge
|
28px
|
19px
|
| large |
Font-size/size/large
사용
|
--font-size-large
|
24px
|
19px
|
| medium |
Font-size/size/medium
사용
|
--font-size-medium
|
20px
|
17px
|
| regular |
Font-size/size/regular
사용
|
--font-size-regular
|
17px
|
15px
|
| regular 2 |
Font-size/size/regular 2
사용
|
--font-size-regular2
|
17px
|
13px
|
| small |
Font-size/size/small
사용
|
--font-size-small
|
15px
|
13px
|
| xsmall |
Font-size/size/xsmall
사용
|
--font-size-xsmall
|
13px
|
11px
|
| xxsmall |
Font-size/size/xxsmall
미사용
|
- |
0px
|
0px
|
| Gap / layout / section | ||||
| gap-section-xxxlg |
Gap/layout/gap-section-xxxlg
사용
|
- |
80px
|
16px
|
| gap-section-xxlg |
Gap/layout/gap-section-xxlg
사용
|
--gap-section-xxlarge
|
60px
|
36px
|
| gap-section-xlg |
Gap/layout/gap-section-xlg
사용
|
--gap-section-xlarge
|
48px
|
16px
|
| gap-section-xlg 2 |
Gap/layout/gap-section-xlg 2
사용
|
--gap-section-xlarge2
|
48px
|
32px
|
| gap-section-lg |
Gap/layout/gap-section-lg
사용
|
--gap-section-large
|
32px
|
16px
|
| gap-section-md |
Gap/layout/gap-section-md
사용
|
--gap-section-medium
|
24px
|
16px
|
| gap-section-sm |
Gap/layout/gap-section-sm
사용
|
--gap-section-small
|
20px
|
14px
|
| gap-section-xsm |
Gap/layout/gap-section-xsm
사용
|
--gap-section-xsmall
|
16px
|
12px
|
| gap-section-xsm 2 |
Gap/layout/gap-section-xsm 2
사용
|
--gap-section-xsmall2
|
12px
|
8px
|
| gap-section-xxsm |
Gap/layout/gap-section-xxsm
사용
|
--gap-section-xxsmall
|
8px
|
6px
|
| Gap / layout / padding | ||||
| padding-section |
Gap/layout/padding-section
사용
|
--box-padding
|
32px
|
16px
|
| padding-content |
Gap/layout/padding-content
미사용
|
- |
28px
|
16px
|
| padding-header |
Gap/layout/padding-header
사용
|
- |
40px
|
24px
|