ColorColor

잉크와 흰 종이가 기본이고, 하늘색(sky)을 브랜드 액센트로 씁니다. 위험 상태는 채도를 낮춘 붉은색 하나로 표시합니다.Ink and white paper form the backbone, with sky as the brand accent. Danger uses one muted red.

색은 두 층입니다. 프리미티브는 Figma Primitives 컬렉션의 원시 값이고, 시맨틱은 컴포넌트가 실제로 참조하는 변수입니다. 다크 모드에서 바뀌는 것은 시맨틱 층뿐입니다. 견본의 왼쪽 반은 라이트, 오른쪽 반은 다크 값입니다.Color has two layers. Primitives are the raw values in the Figma Primitives collection; semantic tokens are the variables components reference. Dark mode changes only the semantic layer. The left half of each sample is the light value and the right half the dark value.

PrimitivesPrimitives

컴포넌트가 직접 쓰는 프리미티브는 이것뿐입니다. 아바타 타일, 프로젝트 타일, 진행 막대처럼 시맨틱 이름이 없는 자리에 씁니다.These are the only primitives components use directly. They fill places that have no semantic name, such as avatar tiles, project tiles and progress bars.

red-500

#d36d63

sky-100

#e7eff5

sky-200

#d2e0eb

sky-400

#95b6ce

sky-500

#7199b6

sky-600

#527b98

sky-700

#3b617b

sky-800

#2a495e

neutral-50

#f9fafb

neutral-100

#f3f4f5

neutral-200

#e5e6e7

neutral-300

#d3d4d6

neutral-400

#b0b1b3

neutral-500

#7e8082

neutral-600

#5f6163

neutral-700

#434547

neutral-800

#2a2b2d

neutral-900

#17181a

neutral-950

#0b0c0e

red-50

#fff4f2

red-100

#fde7e4

red-200

#f9d2cc

red-300

#f2b7af

red-400

#e39289

red-600

#b84e45

red-700

#993a33

red-800

#782a25

red-900

#5a1d19

red-950

#3d110e

sky-50

#f3f7fa

sky-300

#b7cedf

sky-900

#1b3343

sky-950

#0f202c

base-white

#ffffff

base-black

#000000

mascot-ink

#1c1a17

mascot-cream

#fbf7f0

mascot-gold

#e0921f

BackgroundBackground

--color-bg-brand #f3f7fa · #0f202c

--color-bg-danger #fff4f2 · #3d110e

--color-bg-default #ffffff · #0b0c0e

--color-bg-scrim #0b0c0e · #0b0c0e

--color-bg-subtle #f3f4f5 · #2a2b2d

--color-bg-surface #ffffff · #17181a

--color-bg-surface-6 #ffffff0f · #17181a0f

--color-bg-surface-70 #ffffffb2 · #17181ab2

--color-bg-surface-75 #ffffffbf · #17181abf

--color-bg-surface-80 #ffffffcc · #17181acc

--color-bg-surface-85 #ffffffd9 · #17181ad9

--color-bg-surface-90 #ffffffe5 · #17181ae5

--color-bg-surface-95 #fffffff2 · #17181af2

--color-bg-inset #fcfcfd · #141518

SurfaceSurface

--color-surface-ink #17181a · #2a2b2d

TextText

--color-text-brand #3b617b · #b7cedf

--color-text-danger #993a33 · #f2b7af

--color-text-disabled #b0b1b3 · #5f6163

--color-text-inverse #f9fafb · #17181a

--color-text-on-ink #ffffff · #f9fafb

--color-text-placeholder #7e8082 · #7e8082

--color-text-placeholder-12 #7e80821f · #7e80821f

--color-text-placeholder-18 #7e80822e · #7e80822e

--color-text-placeholder-90 #7e8082e5 · #7e8082e5

--color-text-primary #17181a · #f9fafb

--color-text-secondary #5f6163 · #b0b1b3

BorderBorder

--color-border-brand #b7cedf · #3b617b

--color-border-danger #e39289 · #d36d63

--color-border-default #e5e6e7 · #2a2b2d

--color-border-strong #d3d4d6 · #434547

--color-border-focus #527b98 · #95b6ce

--color-border-dashed #c9cbcd · #4a4c4f

InteractiveInteractive

--color-interactive-danger #b84e45 · #d36d63

--color-interactive-danger-hover #993a33 · #e39289

--color-interactive-on-danger #ffffff · #0b0c0e

--color-interactive-on-primary #ffffff · #0b0c0e

--color-interactive-primary #17181a · #f9fafb

--color-interactive-primary-12 #17181a1f · #f9fafb1f

--color-interactive-primary-75 #17181abf · #f9fafbbf

--color-interactive-primary-90 #17181ae5 · #f9fafbe5

--color-interactive-primary-hover #2a2b2d · #e5e6e7

--color-interactive-primary-pressed #434547 · #d3d4d6

--color-interactive-secondary-hover #e5e6e7 · #434547

--color-interactive-secondary #f3f4f5 · #2a2b2d

StatusStatus

--color-status-live #7199b6 · #95b6ce

GlassGlass

--color-glass-clear #ffffff33 · #ffffff1a

--color-glass-clear-hover #ffffff4d · #ffffff24

--color-glass-clear-pressed #ffffff66 · #ffffff2e

--color-glass-fill-frost #ffffffe5 · #17181ae5

--color-glass-fill-solid #ffffff · #17181a

--color-glass-regular #ffffff8c · #ffffff24

--color-glass-rim #ffffff52 · #ffffff14

--color-glass-rim-strong #ffffff66 · #ffffff24

--color-glass-thick #ffffffcc · #ffffff33

--color-glass-fill #ffffff52 · #17181a8c

--color-glass-fill-strong #ffffff8c · #17181ab8

--color-glass-border #ffffff99 · #ffffff1f

--color-glass-tint #0b0c0e0a · #ffffff0f

--color-glass-rim-frost #ffffffb3 · #ffffff1f

OverlayOverlay

--color-overlay-ink-10 #0000001a · #ffffff1a

--color-overlay-ink-12 #0000001f · #ffffff1f

--color-overlay-ink-14 #00000024 · #ffffff24

--color-overlay-ink-16 #00000029 · #ffffff29

--color-overlay-ink-18 #0000002e · #ffffff2e

--color-overlay-ink-20 #00000033 · #ffffff33

--color-overlay-ink-3 #00000008 · #ffffff08

--color-overlay-ink-30 #0000004d · #ffffff4d

--color-overlay-ink-35 #00000059 · #ffffff59

--color-overlay-ink-4 #0000000a · #ffffff0a

--color-overlay-ink-5 #0000000d · #ffffff0d

--color-overlay-ink-55 #0000008c · #ffffff8c

--color-overlay-ink-6 #0000000f · #ffffff0f

--color-overlay-ink-7 #00000012 · #ffffff12

--color-overlay-ink-8 #00000014 · #ffffff14

--color-overlay-ink-80 #000000cc · #ffffffcc

AccentAccent

--color-accent-red-500-14 #d36d6324 · #d36d6324

--color-accent-red-500-90 #d36d63e5 · #d36d63e5

--color-accent-sky-500-10 #7199b61a · #7199b61a

--color-accent-sky-500-12 #7199b61f · #7199b61f

--color-accent-sky-500-16 #7199b629 · #7199b629

--color-accent-sky-500-18 #7199b62e · #7199b62e

--color-accent-sky-500-20 #7199b633 · #7199b633

--color-accent-sky-500-60 #7199b699 · #7199b699

--color-accent-sky-500-90 #7199b6e5 · #7199b6e5

--color-accent-sky-700-12 #3b617b1f · #3b617b1f

--color-accent-sky-700-18 #3b617b2e · #3b617b2e

--color-accent-sky-700-90 #3b617be5 · #3b617be5

SyntaxSyntax

--color-syntax-key #3b617b · #b7cedf

--color-syntax-number #527b98 · #95b6ce

--color-syntax-punctuation #b0b1b3 · #7e8082

--color-syntax-string #17181a · #f9fafb