디자인 토큰

색 역할

화면 전체가 쓰는 의미 색. 대비는 각 테마의 캔버스 기준이며 반투명 값은 캔버스 위에 합성해서 잽니다.

• canvas --cb-canvas

  라이트#F6F8F9

  다크#0A0B0D

• canvas-deep --cb-canvas-deep

  라이트#F6F8F9

  다크#050606

• surface --cb-surface

  라이트#FFFFFF

  다크#151819

• surface-raised --cb-surface-raised

  라이트#FFFFFF

  다크#1D2022

• surface-sunken --cb-surface-sunken

  라이트#EEF1F2

  다크#222628

• ink --cb-ink

  라이트#171A1C캔버스 대비 16.41:1 · 본문 통과

  다크#F3F5F7캔버스 대비 18.02:1 · 본문 통과

• ink-muted --cb-ink-muted

  라이트#5F6467캔버스 대비 5.62:1 · 본문 통과

  다크#A0A6A9캔버스 대비 7.99:1 · 본문 통과

• line --cb-line

  라이트#DFE2E3

  다크#323638

• hairline --cb-hairline

  라이트#E9EBED

  다크#202325

• line-strong --cb-line-strong

  라이트#82878A캔버스 대비 3.41:1 · UI·큰 글자만

  다크#888D90캔버스 대비 5.87:1 · 본문 통과

• action --cb-action

  라이트#171A1C캔버스 대비 16.41:1 · 본문 통과

  다크#F3F5F7캔버스 대비 18.02:1 · 본문 통과

• action-hover --cb-action-hover

  라이트#2B2E30

  다크#DBDEE0

• action-ink --cb-action-ink

  라이트#FFFFFFaction 17.49:1 · 본문 통과

  다크#171A1Caction 16.00:1 · 본문 통과

• focus --cb-focus

  라이트#0B5D7D캔버스 대비 6.85:1 · 본문 통과

  다크#78C5E4캔버스 대비 10.22:1 · 본문 통과

• link --cb-link

  라이트#0B5D7D캔버스 대비 6.85:1 · 본문 통과

  다크#78C5E4캔버스 대비 10.22:1 · 본문 통과

• selection --cb-selection

  라이트#DFF2F9

  다크#12303D

• selection-ink --cb-selection-ink

  라이트#171A1Cselection 15.16:1 · 본문 통과

  다크#F3F5F7selection 12.68:1 · 본문 통과

• danger --cb-danger

  라이트#B02B27캔버스 대비 6.12:1 · 본문 통과

  다크#F49287캔버스 대비 8.73:1 · 본문 통과

• danger-soft --cb-danger-soft

  라이트#FEF0EE

  다크#3E1F1B

• warning --cb-warning

  라이트#8A5A00캔버스 대비 5.56:1 · 본문 통과

  다크#F2B84B캔버스 대비 11.00:1 · 본문 통과

• warning-soft --cb-warning-soft

  라이트#FBF0D9

  다크#3A2A0C

• success --cb-success

  라이트#186A35캔버스 대비 6.25:1 · 본문 통과

  다크#5FD38A캔버스 대비 10.47:1 · 본문 통과

• success-soft --cb-success-soft

  라이트#E4F4E9

  다크#12301C

• info --cb-info

  라이트#0B5D7D캔버스 대비 6.85:1 · 본문 통과

  다크#78C5E4캔버스 대비 10.22:1 · 본문 통과

• info-soft --cb-info-soft

  라이트#DFF2F9

  다크#12303D

• data-1 --cb-data-1

  라이트#171A1C

  다크#F3F5F7

• data-2 --cb-data-2

  라이트#4D6A37

  다크#A4C38C

• data-3 --cb-data-3

  라이트#A85F12

  다크#C78636

• data-4 --cb-data-4

  라이트#A29B88

  다크#6D6859

• raised-edge --cb-raised-edge

  라이트#00000000

  다크#F3F5F70F

• code-keyword --cb-code-keyword

  라이트#0B5D7D

  다크#78C5E4

• code-string --cb-code-string

  라이트#4D6A37

  다크#A4C38C

• code-muted --cb-code-muted

  라이트#5F6467캔버스 대비 5.62:1 · 본문 통과

  다크#A0A6A9캔버스 대비 7.99:1 · 본문 통과

• highlight --cb-highlight

  라이트#DFF2F9

  다크#12303D

• highlight-ink --cb-highlight-ink

  라이트#171A1Chighlight 15.16:1 · 본문 통과

  다크#F3F5F7highlight 12.68:1 · 본문 통과

• highlight-line --cb-highlight-line

  라이트#0B5D7D

  다크#78C5E4

• highlight-current --cb-highlight-current

  라이트#171A1C

  다크#F3F5F7

• highlight-current-ink --cb-highlight-current-ink

  라이트#FFFFFFhighlight-current 17.49:1 · 본문 통과

  다크#171A1Chighlight-current 16.00:1 · 본문 통과

• scrim --cb-scrim

  라이트#171A1C66

  다크#05060699

• scrim-strong --cb-scrim-strong

  라이트#171A1C8F

  다크#050606C2

• bg --cb-bg

  라이트#F6F8F9

  다크#0A0B0D

• text --cb-text

  라이트#171A1C캔버스 대비 16.41:1 · 본문 통과

  다크#F3F5F7캔버스 대비 18.02:1 · 본문 통과

• text-muted --cb-text-muted

  라이트#5F6467캔버스 대비 5.62:1 · 본문 통과

  다크#A0A6A9캔버스 대비 7.99:1 · 본문 통과

• border --cb-border

  라이트#DFE2E3

  다크#323638

• border-strong --cb-border-strong

  라이트#82878A캔버스 대비 3.41:1 · UI·큰 글자만

  다크#888D90캔버스 대비 5.87:1 · 본문 통과

• on-action --cb-on-action

  라이트#FFFFFFaction 17.49:1 · 본문 통과

  다크#171A1Caction 16.00:1 · 본문 통과

• focus-ring --cb-focus-ring

  라이트#0B5D7D

  다크#78C5E4

• neutral --cb-neutral

  라이트#EEF1F2

  다크#222628

• neutral-hover --cb-neutral-hover

  라이트#DFE2E3

  다크#323638

• quiet-hover --cb-quiet-hover

  라이트#EEF1F2

  다크#222628

• danger-hover --cb-danger-hover

  라이트#8F201D

  다크#F8B2AA

• on-danger --cb-on-danger

  라이트#FFFFFFdanger 6.52:1 · 본문 통과

  다크#0A0B0Ddanger 8.73:1 · 본문 통과

• disabled-bg --cb-disabled-bg

  라이트#EEF1F2

  다크#222628

• disabled-text --cb-disabled-text

  라이트#82878A캔버스 대비 3.41:1 · UI·큰 글자만

  다크#888D90캔버스 대비 5.87:1 · 본문 통과

• disabled-edge --cb-disabled-edge

  라이트#00000000

  다크#888D908C

• logo-chip --cb-logo-chip

  라이트#00000000

  다크#F3F5F7

• fill-presence --cb-fill-presence

  라이트#666869

  다크#A8AAAC

• accent --cb-accent

  라이트#0B5D7D

  다크#78C5E4

• line-mark --cb-line-mark

  라이트#82878A

  다크#888D90

• panel-1 --cb-panel-1

  라이트#D3E1C7

  다크#232C24

• glass-tint-color --cb-glass-tint-color

  라이트#FFFFFF

  다크#151819

• glass-highlight --cb-glass-highlight

  라이트#FFFFFFBF

  다크#FFFFFF4D

• glass-edge-light --cb-glass-edge-light

  라이트#FFFFFF8C

  다크#FFFFFF33

• glass-edge --cb-glass-edge

  라이트#FFFFFF38

  다크#FFFFFF14

• glass-bevel --cb-glass-bevel

  라이트#FFFFFF99

  다크#FFFFFF29

• glass-shade --cb-glass-shade

  라이트#00000029

  다크#00000080

• glass-drop --cb-glass-drop

  라이트#00000073

  다크#000000CC

• wash-1 --cb-wash-1

  라이트#4D6A3729

  다크#A4C38C1F

• wash-2 --cb-wash-2

  라이트#E4902324

  다크#C786361F

• wash-3 --cb-wash-3

  라이트#0B5D7D1A

  다크#78C5E41A

• shard-1 --cb-shard-1

  라이트#FA9A84

  다크#E87B62

• shard-2 --cb-shard-2

  라이트#A1D6F5

  다크#70B4DC

• shard-3 --cb-shard-3

  라이트#FAE685

  다크#EAD166

• shard-4 --cb-shard-4

  라이트#6D92D6

  다크#587FC8

• shard-5 --cb-shard-5

  라이트#FCD180

  다크#EEBB58

• shard-lead --cb-shard-lead

  라이트#FBFAF6

  다크#F5F5F7

• shard-shade --cb-shard-shade

  라이트#1D1D1F

  다크#0B0B0A

• cat-memory --cb-cat-memory

  라이트#0B5D7D

  다크#78C5E4

• cat-memory-mark --cb-cat-memory-mark

  라이트#171A1C

  다크#F3F5F7

• cat-today --cb-cat-today

  라이트#0B5D7D

  다크#78C5E4

• cat-today-mark --cb-cat-today-mark

  라이트#171A1C

  다크#F3F5F7

• cat-priority --cb-cat-priority

  라이트#0B5D7D

  다크#78C5E4

• cat-priority-mark --cb-cat-priority-mark

  라이트#171A1C

  다크#F3F5F7

• cat-schedule --cb-cat-schedule

  라이트#0B5D7D

  다크#78C5E4

• cat-schedule-mark --cb-cat-schedule-mark

  라이트#171A1C

  다크#F3F5F7

• cat-decisions --cb-cat-decisions

  라이트#0B5D7D

  다크#78C5E4

• cat-decisions-mark --cb-cat-decisions-mark

  라이트#171A1C

  다크#F3F5F7

• cat-connect --cb-cat-connect

  라이트#0B5D7D

  다크#78C5E4

• cat-connect-mark --cb-cat-connect-mark

  라이트#171A1C

  다크#F3F5F7

• cat-review --cb-cat-review

  라이트#0B5D7D

  다크#78C5E4

• cat-review-mark --cb-cat-review-mark

  라이트#171A1C

  다크#F3F5F7

• cat-patterns --cb-cat-patterns

  라이트#0B5D7D

  다크#78C5E4

• cat-patterns-mark --cb-cat-patterns-mark

  라이트#171A1C

  다크#F3F5F7

• cat-people --cb-cat-people

  라이트#0B5D7D

  다크#78C5E4

• cat-people-mark --cb-cat-people-mark

  라이트#171A1C

  다크#F3F5F7

• cat-memory-tint --cb-cat-memory-tint

  라이트#EEF1F2

  다크#222628

• cat-memory-chip --cb-cat-memory-chip

  라이트#00000000

  다크#00000000

• cat-today-tint --cb-cat-today-tint

  라이트#EEF1F2

  다크#222628

• cat-today-chip --cb-cat-today-chip

  라이트#00000000

  다크#00000000

• cat-priority-tint --cb-cat-priority-tint

  라이트#EEF1F2

  다크#222628

• cat-priority-chip --cb-cat-priority-chip

  라이트#00000000

  다크#00000000

• cat-schedule-tint --cb-cat-schedule-tint

  라이트#EEF1F2

  다크#222628

• cat-schedule-chip --cb-cat-schedule-chip

  라이트#00000000

  다크#00000000

• cat-decisions-tint --cb-cat-decisions-tint

  라이트#EEF1F2

  다크#222628

• cat-decisions-chip --cb-cat-decisions-chip

  라이트#00000000

  다크#00000000

• cat-connect-tint --cb-cat-connect-tint

  라이트#EEF1F2

  다크#222628

• cat-connect-chip --cb-cat-connect-chip

  라이트#00000000

  다크#00000000

• cat-review-tint --cb-cat-review-tint

  라이트#EEF1F2

  다크#222628

• cat-review-chip --cb-cat-review-chip

  라이트#00000000

  다크#00000000

• cat-patterns-tint --cb-cat-patterns-tint

  라이트#EEF1F2

  다크#222628

• cat-patterns-chip --cb-cat-patterns-chip

  라이트#00000000

  다크#00000000

• cat-people-tint --cb-cat-people-tint

  라이트#EEF1F2

  다크#222628

• cat-people-chip --cb-cat-people-chip

  라이트#00000000

  다크#00000000

• cat-memory-glyph --cb-cat-memory-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-today-glyph --cb-cat-today-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-priority-glyph --cb-cat-priority-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-schedule-glyph --cb-cat-schedule-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-decisions-glyph --cb-cat-decisions-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-connect-glyph --cb-cat-connect-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-review-glyph --cb-cat-review-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-patterns-glyph --cb-cat-patterns-glyph

  라이트#171A1C

  다크#F3F5F7

• cat-people-glyph --cb-cat-people-glyph

  라이트#171A1C

  다크#F3F5F7

• data-rest --cb-data-rest

  라이트#4D6A37

  다크#A4C38C

• day-core --cb-day-core

  라이트#FCFFFE

  다크#FCFFFE

• day-core-2 --cb-day-core-2

  라이트#E3EEF8

  다크#E3EEF8

• day-core-3 --cb-day-core-3

  라이트#C8DDF1

  다크#C8DDF1

• day-core-4 --cb-day-core-4

  라이트#B0CBEA

  다크#B0CBEA

• day-core-edge --cb-day-core-edge

  라이트#A5BFE4

  다크#A5BFE4

• day-rim-1 --cb-day-rim-1

  라이트#E1D8E4

  다크#E1D8E4

• day-rim-2 --cb-day-rim-2

  라이트#D3CDE4

  다크#D3CDE4

• day-rim-3 --cb-day-rim-3

  라이트#CACFE7

  다크#CACFE7

• day-rim-inner --cb-day-rim-inner

  라이트#E9E6EC

  다크#E9E6EC

• day-flare --cb-day-flare

  라이트#FFFFFF

  다크#FFFFFF

• day-bead-ring --cb-day-bead-ring

  라이트#CACFE7

  다크#CACFE7

• day-bead-halo --cb-day-bead-halo

  라이트#FFFFFFBF

  다크#FFFFFFBF

• day-mark-pool-0 --cb-day-mark-pool-0

  라이트#4E7DB8

  다크#4E7DB8

• day-mark-pool-1 --cb-day-mark-pool-1

  라이트#5C8EC8

  다크#5C8EC8

• day-mark-pool-2 --cb-day-mark-pool-2

  라이트#76A9DC

  다크#76A9DC

• day-mark-pool-3 --cb-day-mark-pool-3

  라이트#A9C9EA

  다크#A9C9EA

• day-pool-0 --cb-day-pool-0

  라이트#76A9DC6B

  다크#76A9DC6B

• day-pool-1 --cb-day-pool-1

  라이트#6B9DD324

  다크#6B9DD324

• day-pool-2 --cb-day-pool-2

  라이트#6B9DD30D

  다크#6B9DD30D

• day-sky --cb-day-sky

  라이트#76A9DC24

  다크#76A9DC24

• day-rail-past --cb-day-rail-past

  라이트#4369A1

  다크#4369A1

• day-rail-future --cb-day-rail-future

  라이트#D3DBE6

  다크#D3DBE6

• day-tick --cb-day-tick

  라이트#D3DBE6

  다크#D3DBE6

• day-night-mark-pool-0 --cb-day-night-mark-pool-0

  라이트#5C8EC8

  다크#5C8EC8

• day-night-mark-pool-1 --cb-day-night-mark-pool-1

  라이트#4E7DB8

  다크#4E7DB8

• day-night-mark-pool-2 --cb-day-night-mark-pool-2

  라이트#2C4A74

  다크#2C4A74

• day-night-mark-pool-3 --cb-day-night-mark-pool-3

  라이트#203759

  다크#203759

• day-night-pool-0 --cb-day-night-pool-0

  라이트#5C8EC86B

  다크#5C8EC86B

• day-night-pool-1 --cb-day-night-pool-1

  라이트#2C4A7440

  다크#2C4A7440

• day-night-pool-2 --cb-day-night-pool-2

  라이트#2C4A7414

  다크#2C4A7414

• day-night-sky --cb-day-night-sky

  라이트#8FBFF01F

  다크#8FBFF01F

• day-night-rail-past --cb-day-night-rail-past

  라이트#A9C9EE

  다크#A9C9EE

• day-night-rail-future --cb-day-night-rail-future

  라이트#2E3B57

  다크#2E3B57

• day-night-tick --cb-day-night-tick

  라이트#2E3B57

  다크#2E3B57

• day-night-bead-halo --cb-day-night-bead-halo

  라이트#FFFFFF40

  다크#FFFFFF40

• dew-field-1 --cb-dew-field-1

  라이트#76A9DC

  다크#76A9DC

• dew-field-2 --cb-dew-field-2

  라이트#6B9DD3

  다크#6B9DD3

• dew-field-3 --cb-dew-field-3

  라이트#5C8EC8

  다크#5C8EC8

• dew-field-4 --cb-dew-field-4

  라이트#4E7DB8

  다크#4E7DB8

• dew-field-5 --cb-dew-field-5

  라이트#4369A1

  다크#4369A1

• dew-night-field-1 --cb-dew-night-field-1

  라이트#2C4A74

  다크#2C4A74

• dew-night-field-2 --cb-dew-night-field-2

  라이트#263F65

  다크#263F65

• dew-night-field-3 --cb-dew-night-field-3

  라이트#203759

  다크#203759

• dew-night-field-4 --cb-dew-night-field-4

  라이트#1B2F4D

  다크#1B2F4D

• dew-night-field-5 --cb-dew-night-field-5

  라이트#152540

  다크#152540

• dew-on-field --cb-dew-on-field

  라이트#FFFFFF

  다크#FFFFFF

• dew-glass-core --cb-dew-glass-core

  라이트#FCFFFE

  다크#FCFFFE

• dew-glass-mid --cb-dew-glass-mid

  라이트#D8E8F5

  다크#D8E8F5

• dew-glass-mark --cb-dew-glass-mark

  라이트#BCD9EF

  다크#BCD9EF

• dew-glass-edge --cb-dew-glass-edge

  라이트#A5BFE4

  다크#A5BFE4

• dew-glass-rim --cb-dew-glass-rim

  라이트#E9E6EC

  다크#E9E6EC

• dew-glyph --cb-dew-glyph

  라이트#3C4A55

  다크#3C4A55

• dew-glyph-bg --cb-dew-glyph-bg

  라이트#FFFFFF

  다크#FFFFFF

• dew-night-glyph --cb-dew-night-glyph

  라이트#E6EDF7

  다크#E6EDF7

• dew-night-glyph-bg --cb-dew-night-glyph-bg

  라이트#FFFFFF1A

  다크#FFFFFF1A

• dew-panel-bg --cb-dew-panel-bg

  라이트#FAFCFFF0

  다크#FAFCFFF0

• dew-panel-solid --cb-dew-panel-solid

  라이트#FAFCFF

  다크#FAFCFF

• dew-panel-field --cb-dew-panel-field

  라이트#F2F5FA

  다크#F2F5FA

• dew-panel-line --cb-dew-panel-line

  라이트#1E3C6E1A

  다크#1E3C6E1A

• dew-panel-line-strong --cb-dew-panel-line-strong

  라이트#1E3C6E29캔버스 대비 1.32:1 · 미달

  다크#1E3C6E29캔버스 대비 1.06:1 · 미달

• dew-panel-ink --cb-dew-panel-ink

  라이트#1D1D1Fdew-panel-bg 16.34:1 · 본문 통과

  다크#1D1D1Fdew-panel-bg 14.42:1 · 본문 통과

• dew-panel-sub --cb-dew-panel-sub

  라이트#5F6B7D

  다크#5F6B7D

• dew-panel-ring --cb-dew-panel-ring

  라이트#5C8EC847

  다크#5C8EC847

• dew-panel-dot --cb-dew-panel-dot

  라이트#5C8EC8

  다크#5C8EC8

• dew-night-panel-bg --cb-dew-night-panel-bg

  라이트#18263EF0

  다크#18263EF0

• dew-night-panel-solid --cb-dew-night-panel-solid

  라이트#18263E

  다크#18263E

• dew-night-panel-field --cb-dew-night-panel-field

  라이트#FFFFFF12

  다크#FFFFFF12

• dew-night-panel-line --cb-dew-night-panel-line

  라이트#FFFFFF1A

  다크#FFFFFF1A

• dew-night-panel-line-strong --cb-dew-night-panel-line-strong

  라이트#FFFFFF2E캔버스 대비 1.01:1 · 미달

  다크#FFFFFF2E캔버스 대비 1.65:1 · 미달

• dew-night-panel-ink --cb-dew-night-panel-ink

  라이트#FFFFFFdew-night-panel-bg 12.78:1 · 본문 통과

  다크#FFFFFFdew-night-panel-bg 15.47:1 · 본문 통과

• dew-night-panel-sub --cb-dew-night-panel-sub

  라이트#B8C4D8

  다크#B8C4D8

• dew-night-panel-ring --cb-dew-night-panel-ring

  라이트#76A9DC4D

  다크#76A9DC4D

• dew-night-panel-dot --cb-dew-night-panel-dot

  라이트#8FBFF0

  다크#8FBFF0

위젯 색면

위젯이 채울 수 있는 색면과 그 위 글자색. 15px 본문이 4.5:1을 넘어야 합니다.

• tide --cb-field-tide-bg · --cb-field-tide-ink

  라이트 · 오늘 할 일 세 가지와 다음 일정#DFE3E8 / #171A1C13.56:1

  다크 · 오늘 할 일 세 가지와 다음 일정#20242C / #F3F5F714.23:1

• dusk --cb-field-dusk-bg · --cb-field-dusk-ink

  라이트 · 오늘 할 일 세 가지와 다음 일정#D3E1C7 / #171A1C12.79:1

  다크 · 오늘 할 일 세 가지와 다음 일정#232C24 / #F3F5F713.19:1

• sand --cb-field-sand-bg · --cb-field-sand-ink

  라이트 · 오늘 할 일 세 가지와 다음 일정#F5E6CF / #171A1C14.24:1

  다크 · 오늘 할 일 세 가지와 다음 일정#2E271C / #F3F5F713.50:1

• night --cb-field-night-bg · --cb-field-night-ink

  라이트 · 오늘 할 일 세 가지와 다음 일정#0D1011 / #F3F5F717.48:1

  다크 · 오늘 할 일 세 가지와 다음 일정#0D1011 / #F3F5F717.48:1

• --cb-field-edge rgb(23 26 28 / 0.1)
• --cb-field-tide-focus #171a1c
• --cb-field-dusk-focus #171a1c
• --cb-field-sand-focus #171a1c
• --cb-field-night-focus #f3f5f7

빛과 재질

반투명 값은 가장 진한 지점(선언된 알파 그대로)을 캔버스 위에 합성해 잽니다. 빛 위에는 ink만 올립니다. muted 글자는 금지입니다.

• glow-tide --cb-glow-tide

  라이트 · α 0.06#4D6A370F → #ECEFEDink 최악 대비 15.15:1 · 본문 통과

  다크 · α 0.1#A4C38C1A → #191D1Aink 최악 대비 15.54:1 · 본문 통과

• glow-dusk --cb-glow-dusk

  라이트 · α 0.06#0B5D7D0F → #E8EFF2ink 최악 대비 15.00:1 · 본문 통과

  다크 · α 0.1#78C5E41A → #151E23ink 최악 대비 15.53:1 · 본문 통과

• brand-glow --cb-brand-glow

  라이트 · none

  다크 · none

• glow-blur --cb-glow-blur

  라이트 · 120px

  다크 · 120px

• glow-size --cb-glow-size

  라이트 · 60vmax

  다크 · 60vmax

• day-glow-1 --cb-day-glow-1

  라이트 · α 1#C6E5F7 → #C6E5F7ink 최악 대비 13.28:1 · 본문 통과

  다크 · α 1#C6E5F7 → #C6E5F7ink 최악 대비 1.20:1 · 미달

• day-glow-2 --cb-day-glow-2

  라이트 · α 1#A5D3EF → #A5D3EFink 최악 대비 10.96:1 · 본문 통과

  다크 · α 1#A5D3EF → #A5D3EFink 최악 대비 1.46:1 · 미달

• day-glow-3 --cb-day-glow-3

  라이트 · α 1#85AFDC → #85AFDCink 최악 대비 7.63:1 · 본문 통과

  다크 · α 1#85AFDC → #85AFDCink 최악 대비 2.10:1 · 미달

• day-bead-glow --cb-day-bead-glow

  라이트 · α 0.6#85AFDC99 → #B2CCE8ink 최악 대비 10.59:1 · 본문 통과

  다크 · α 0.6#85AFDC99 → #546D89ink 최악 대비 4.87:1 · 본문 통과

• day-night-bead-glow --cb-day-night-bead-glow

  라이트 · α 0.55#8FBFF08C → #BDD9F4ink 최악 대비 11.96:1 · 본문 통과

  다크 · α 0.55#8FBFF08C → #536E8Aink 최악 대비 4.85:1 · 본문 통과

• dew-glass-glow --cb-dew-glass-glow

  라이트 · α 0.9#CCEDFAE6 → #D0EEFAink 최악 대비 14.41:1 · 본문 통과

  다크 · α 0.9#CCEDFAE6 → #B9D6E2ink 최악 대비 1.39:1 · 미달

• dew-glass-glow-soft --cb-dew-glass-glow-soft

  라이트 · α 0.5#CCEDFA80 → #E1F3FAink 최악 대비 15.27:1 · 본문 통과

  다크 · α 0.5#CCEDFA80 → #6B7C84ink 최악 대비 3.97:1 · UI·큰 글자만

글자 크기 단계

같은 단계를 네 언어로 보여 줍니다. 행간과 자간은 언어별 값이 적용됩니다.

1. display-xl 4.5rem / 600 / lh 1.08 / -0.02em

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

2. display 3.5rem / 600 / lh 1.15 / -0.02em

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

3. title1 2rem / 600 / lh 1.3 / -0.01em

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

4. title2 1.5rem / 600 / lh 1.35 / -0.01em

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

5. title3 1.25rem / 600 / lh 1.4 / 0

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

6. headline 1.0625rem / 600 / lh 1.5 / 0

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

7. body 1rem / 400 / lh 1.65 / 0

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

8. callout 0.9375rem / 400 / lh 1.6 / 0

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

9. footnote 0.8125rem / 400 / lh 1.55 / 0.005em

   • 한국어

     오늘 할 일 세 가지와 다음 일정

   • English

     Three things for today and what’s next

   • 简体中文

     今天的三件事和下一个日程

   • Español

     Tres cosas para hoy y lo que sigue después

10. numeral-l 3rem / 600 / lh 1.05 / -0.02em

    • 한국어

      오늘 할 일 세 가지와 다음 일정

    • English

      Three things for today and what’s next

    • 简体中文

      今天的三件事和下一个日程

    • Español

      Tres cosas para hoy y lo que sigue después

11. numeral-m 2rem / 600 / lh 1.1 / -0.02em

    • 한국어

      오늘 할 일 세 가지와 다음 일정

    • English

      Three things for today and what’s next

    • 简体中文

      今天的三件事和下一个日程

    • Español

      Tres cosas para hoy y lo que sigue después

• --cb-font-sans "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif
• --cb-font-sans-zh "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif
• --cb-font "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif
• --cb-font-mono "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif

간격

• space-00
• space-half2px
• space-14px
• space-28px
• space-312px
• space-416px
• space-520px
• space-624px
• space-832px
• space-1040px
• space-1248px
• space-1664px
• space-2080px

• --cb-glass-tint-add 0%
• --cb-cat-chip-inset 0px
• --cb-field-focus-offset 2px
• --cb-widget-title-size 0.8125rem
• --cb-widget-number-size 2.5rem
• --cb-widget-number-s-size 2rem
• --cb-widget-number-track -0.02em
• --cb-widget-hero-size 1.1875rem
• --cb-widget-hero-lh 1.75rem
• --cb-widget-hero-track -0.01em
• --cb-widget-meta-size 0.8125rem
• --cb-widget-meta-lh 1.25rem
• --cb-widget-row-size 0.9375rem
• --cb-widget-row-lh 1.5rem
• --cb-widget-quote-size 1.0625rem
• --cb-widget-quote-lh 1.5rem
• --cb-widget-label-size 0.8125rem
• --cb-widget-label-lh 1rem
• --cb-widget-pad-s 16px
• --cb-widget-pad-ml 20px
• --cb-page-max 67.5rem
• --cb-page-h1-size 2rem
• --cb-page-h1-lh 2.5rem
• --cb-page-h2-size 1.5rem
• --cb-page-h2-lh 2rem
• --cb-page-h3-size 1.0625rem
• --cb-page-h3-lh 1.5rem
• --cb-page-body-size 0.9375rem
• --cb-page-body-lh 1.5rem
• --cb-page-lede-size 1.125rem
• --cb-page-lede-lh 1.75rem
• --cb-page-meta-size 0.8125rem
• --cb-page-nav-group-size 0.9375rem
• --cb-page-nav-item-size 0.875rem
• --cb-page-meta-lh 1.25rem
• --cb-icon-sm 16px
• --cb-icon-md 20px
• --cb-icon-lg 24px
• --cb-widget-gap 16px
• --cb-widget-pad 16px
• --cb-glass-blur-light 20px
• --cb-glass-blur-medium 24px
• --cb-glass-blur-strong 28px
• --cb-glass-tint-light 16%
• --cb-glass-tint-medium 30%
• --cb-glass-tint-strong 46%
• --cb-glass-rim 9px
• --cb-glass-rim-panel 6px
• --cb-glass-plate 94%
• --cb-border-width 1px
• --cb-focus-width 2px
• --cb-focus-offset 2px
• --cb-hit-min 44px
• --cb-tap-min 44px
• --cb-control-sm 36px
• --cb-control-md 44px
• --cb-control-lg 52px

모서리

• page-radius14px
• radius-xs6px
• radius-sm10px
• radius-md14px
• radius-lg20px
• radius-xl26px
• radius-2xl34px
• radius-pill999px
• radius-float20px
• widget-radius26px
• widget-sheet-radiusmin(14px, 26px)

높이(그림자)

• shadow-1라이트: 0 1px 2px rgb(23 26 28 / 0.035)다크: 0 1px 2px rgb(0 0 0 / 0.18)
• shadow-2라이트: 0 6px 18px rgb(23 26 28 / 0.065), 0 1px 3px rgb(23 26 28 / 0.035)다크: 0 8px 22px rgb(0 0 0 / 0.22), 0 1px 3px rgb(0 0 0 / 0.18)
• shadow-3라이트: 0 20px 48px rgb(23 26 28 / 0.105), 0 3px 10px rgb(23 26 28 / 0.045)다크: 0 22px 55px rgb(0 0 0 / 0.34), 0 3px 10px rgb(0 0 0 / 0.2)
• dew-panel-shadow라이트: rgba(20, 45, 90, 0.35)
• dew-night-panel-shadow라이트: rgba(0, 0, 0, 0.55)

움직임

동작 줄이기 설정에서의 값을 함께 표시합니다.

원시 값

컴포넌트는 이 값을 직접 쓰지 않습니다(design-lint R5).

그 밖의 토큰

• --cb-widget-title-weight 600
• --cb-widget-title-lh 1.4
• --cb-widget-number-weight 500
• --cb-widget-number-lh 1.1
• --cb-widget-hero-weight 400
• --cb-widget-meta-weight 400
• --cb-widget-label-weight 400
• --cb-widget-strong-weight 600
• --cb-measure-readable 65ch
• --cb-measure-wide 80ch
• --cb-page-weight 600
• --cb-glass-saturate-light 1.5
• --cb-glass-saturate-medium 1.7
• --cb-glass-saturate-strong 1.8
• --cb-glass-grain-light 0.03
• --cb-glass-grain-medium 0.04
• --cb-glass-grain-strong 0.05
• --cb-glass-grain-image url("data:image/svg+xml
• --cb-glass-grain-panel-image url("data:image/svg+xml
• --cb-press-scale 0.97
• --cb-press-scale-small 0.94

출처: src/design/tokens/primitive.css · src/design/tokens/semantic.css · src/design/tokens/dayline.css · src/design/tokens/dew.css · src/design/tokens/motion.css · src/design/tokens/collections/general.palette.css · src/design/tokens/collections/general.css