색

정본은 Figma 다

값과 이름은 Figma 3sIMxSgWyp7RYonfhAAZIc 의 변수 컬렉션 surf-ui / color 가 정본입니다. 이름은 그대로 옮깁니다 — bg/base → vars.color.bgBase → --surf-bg-base.

색은 닫힌 축입니다. spacing · radius · fontSize 같은 스케일은 소비자가 덮을 수 있지만, color · layout · shape · cover 는 COLDSURF 고정값입니다.

면은 두 벌이다 — ink · light

기본은 light 입니다. 어느 요소든 data-surface="ink" 를 달면 그 안은 ink 값이 됩니다. 한 페이지 안에서 섞습니다 — 홈은 히어로가 ink, 아래 묶음이 light 입니다. ink 안에서 다시 밝은 면을 열 땐 data-surface="light" 입니다. OS 다크모드와는 무관합니다.

<section data-surface="ink">…히어로…</section>
<section>…아래 묶음 (light)…</section>

light

--surf-bg-base#ffffff

--surf-bg-alt#f1f1f1

--surf-surface-raised#ffffff

--surf-panel-fill#eef3ff

--surf-panel-linergba(255, 255, 255, 0)

--surf-row-fill#ffffff

--surf-line-divider#e6e6e6

--surf-state-hoverrgba(17, 17, 17, 0.06)

--surf-state-pressedrgba(10, 15, 26, 0.08)

--surf-text-primary#111111

--surf-text-secondary#6b6b6b

--surf-text-tertiary#9ca3af

--surf-text-on-media#ffffff

--surf-kicker#2563ff

--surf-action-tint-fillrgba(37, 99, 255, 0.14)

--surf-action-tint-text#2563ff

--surf-action-primary#2457ff

--surf-action-primary-hover#1c47e0

--surf-action-on-primary#ffffff

--surf-action-primary-top#2457ff

--surf-action-primary-bottom#2457ff

--surf-action-primary-linetransparent

--surf-action-primary-shadowtransparent

--surf-selected-fill#111111

--surf-selected-text#ffffff

--surf-glowrgba(37, 99, 255, 0.28)

--surf-overlay#111111

--surf-status-success#1f7a3a

--surf-status-success-bgrgba(31, 122, 58, 0.14)

--surf-status-warning#9a5a12

--surf-status-warning-bgrgba(154, 90, 18, 0.14)

--surf-status-danger#b8221c

--surf-status-danger-bgrgba(184, 34, 28, 0.14)

ink

--surf-bg-base#101010

--surf-bg-alt#101010

--surf-surface-raised#181818

--surf-panel-fill#181818

--surf-panel-linergba(255, 255, 255, 0.08)

--surf-row-fillrgba(255, 255, 255, 0.05)

--surf-line-dividerrgba(255, 255, 255, 0.08)

--surf-state-hoverrgba(255, 255, 255, 0.06)

--surf-state-pressedrgba(255, 255, 255, 0.1)

--surf-text-primary#f3f5f7

--surf-text-secondary#9a9a9a

--surf-text-tertiaryrgba(154, 154, 154, 0.6)

--surf-text-on-media#ffffff

--surf-kicker#9ec2ff

--surf-action-tint-fillrgba(158, 194, 255, 0.14)

--surf-action-tint-text#9ec2ff

--surf-action-primary#2563ff

--surf-action-primary-hover#1d4fd8

--surf-action-on-primary#ffffff

--surf-action-primary-top#3a6dff

--surf-action-primary-bottom#1a3a9e

--surf-action-primary-linergba(158, 194, 255, 0.25)

--surf-action-primary-shadowrgba(37, 99, 255, 0.25)

--surf-selected-fill#f3f5f7

--surf-selected-text#101010

--surf-glowrgba(37, 99, 255, 0.28)

--surf-overlay#101010

--surf-status-success#5fd08a

--surf-status-success-bgrgba(95, 208, 138, 0.14)

--surf-status-warning#f0b45a

--surf-status-warning-bgrgba(240, 180, 90, 0.14)

--surf-status-danger#ff6b63

--surf-status-danger-bgrgba(255, 107, 99, 0.14)

읽는 글자의 하한

글자색은 textPrimary · textSecondary · textTertiary 셋입니다. 읽는 글자의 하한은 textSecondary 이고, textTertiary 는 플레이스홀더 · 비활성 — 읽히지 않아도 되는 것 — 에만 씁니다.

cover — 지형 색면

카드 커버의 바닥색입니다. 테마가 아니라 데이터(id)로 고르는 색이라 면을 타지 않습니다.

--cover-forest#1f3a44

--cover-wine#4a2f42

--cover-navy#2c3e4e

--cover-moss#26305c

--cover-steel#1e2a44

--cover-plum#382c4c

shape — 부품 치수

Figma surf-ui / shape. 부품의 모서리 · 고정 크기 · 글자 크기입니다.

Ag--surf-radius-panel20px

Ag--surf-radius-sheet28px

Ag--surf-radius-sheet-map24px

Ag--surf-radius-poster16px

Ag--surf-radius-row12px

Ag--surf-radius-row-action8px

Ag--surf-radius-pill9999px

Ag--surf-size-row-action-height32px

Ag--surf-size-date-block-width52px

Ag--surf-size-date-block-height62px

Ag--surf-size-thumb52px

Ag--surf-type-kicker11px

Ag--surf-type-card-head16px

Ag--surf-type-row-title15px

Ag--surf-type-body14px

Ag--surf-type-meta12px

layout — 폭 두 벌

Figma surf-ui / layout. 기본은 mobile, 1024px 이상은 desktop 값입니다.

Ag--surf-layout-gutter20px

Ag--surf-layout-content-width350px

Ag--surf-layout-section-y56px

Ag--surf-layout-repeat-gap12px

Ag--surf-layout-hero-poster-height300px

Ag--surf-layout-hero-decision-width350px

Ag--surf-layout-hero-column-gap20px

Ag--surf-layout-type-hero-title36px

Ag--surf-layout-type-tile-title18px

Ag--surf-layout-gutter64px

Ag--surf-layout-content-width1312px

Ag--surf-layout-section-y96px

Ag--surf-layout-repeat-gap24px

Ag--surf-layout-hero-poster-height660px

Ag--surf-layout-hero-decision-width500px

Ag--surf-layout-hero-column-gap56px

Ag--surf-layout-type-hero-title56px

Ag--surf-layout-type-tile-title22px

radius

--radius-none0

--radius-sm2px

--radius-md4px

--radius-lg8px

--radius-xl12px

--radius-2xl16px

--radius-3xl24px

--radius-full9999px

색

On this page