# 당근 SEED Design 파운데이션 (출처: https://seed-design.io, Apache-2.0)

---
# Overview
URL: /foundations/color
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/color/index.mdx

SEED 색상 시스템은 접근성을 고려하며 제품의 계층, 상태, 브랜드를 표현할 수 있도록 돕습니다.

## Overview

SEED 색상 시스템은 역할 기반 색상과 팔레트 색상으로 구성되어 있으며, 모두를 위한 글로벌 접근성 충족을 목표로 설계되었습니다.
이를 통해 인터페이스 내에서 충분한 명도 대비를 보장하고, 명확성과 가시성을 확보할 수 있습니다.

## Role Based Color

**역할 기반 색상** 시스템은 디자이너와 개발자 모두를 위한 구조화된 색상 구현 방식을 제공합니다.

색상 역할은 인터페이스의 시각적 요소와 기능 사이의 명확한 관계를 설정하여 사용자에게 더 직관적이고 예측 가능한 UI를 제공합니다.
임의의 색상값을 사용하는 대신, 각 색상은 인터페이스 내에서 특정한 목적과 의미를 가집니다.

### 장점 1. 접근성

역할 기반 색상을 사용하면 전체 애플리케이션에서 접근성 표준을 더 쉽게 유지할 수 있습니다.
모든 역할 기반 색상은 의도된 전경/배경의 모든 조합에 대해 [포용적 디자인 문서의 APCA 기준](/foundations/inclusive-design)을 충족하도록 설계되어 있습니다.

### 장점 2. 빈틈없는 업데이트

색상을 업데이트해야 할 때, 값이 아닌 의미를 기준으로 업데이트 할 수 있습니다.
동일한 값을 가지더라도 의미가 다르다면, 따로 업데이트가 가능해야 합니다.
전체 시스템의 일관성을 보장하면서 지속적으로 UI 색상을 개선할 수 있는 기반을 제공합니다.

### 장점 3. 테마 적응성

역할 기반 색상은 라이트 모드와 다크 모드를 포함한 여러 테마를 지원하기 위한 기반을 제공합니다.
특정 색상 대신 역할을 정의함으로써 시스템은 적절한 대비와 시각적 계층 구조를 유지하면서 다양한 테마에 자동으로 적응할 수 있습니다.

## Palette Color

팔레트 색상은 역할 기반 색상으로 표현하기 어려운 예외적인 경우에 사용되는 색상입니다.

SEED 팔레트 색상은 적응형 팔레트로 구성되어 기기의 화면 모드(라이트/다크)에 따라 알맞은 명도의 색상이 배정되어 있습니다.
이를 통해 특정 화면 모드를 기준으로 디자인 하더라도, 다른 화면 모드에서도 충분히 인지하기 쉬운 색상을 사용하는 것을 보장합니다.

## Related Documents

<Card href="/foundations/color/color-role" title="역할 기반 색상" description="역할 기반 색상에 대해 알아봅니다." />

<Card href="/foundations/color/palette" title="팔레트 색상" description="팔레트 색상에 대해 알아봅니다." />
---
# Roles
URL: /foundations/color/color-role
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/color/color-role.mdx

역할이 부여된 색상은 색상에 특정 기능적 역할(주요 액션, 오류, 정보 등)을 할당하여 사용자 인터페이스 전반에 걸쳐 일관성, 명확성, 접근성을 보장합니다.

SEED의 역할 기반 색상 시스템은 Property(속성), Role(역할), Variant(변형), State(상태) 체계로 구성되어 있습니다.

## Property (속성)

Foreground, Background, Stroke 세 가지 기본 속성으로 시작합니다.

### Background

전체 화면 또는 UI의 배경에 사용하는 색상입니다.

### Foreground

텍스트, 아이콘 등 UI의 전경 요소에 사용하는 색상입니다.

### Stroke

경계를 구분하는 선 또는 UI 요소의 윤곽선에 사용하는 색상입니다.

## Role (역할)

전경, 배경, 스트로크의 기본 카테고리에 더해 brand, neutral, positive와 같은 특정 역할을 포함합니다. 이러한 역할 키워드는 색상 간의 기능적, 의미적 차이를 표현할 수 있는 레이어를 추가합니다. 일부 역할은 여러 카테고리에 걸쳐 적용될 수 있으며(e.g. [$color.fg.brand](/foundations/design-token/reference/%24color.fg.brand), [$color.bg.brand-solid](/foundations/design-token/reference/%24color.bg.brand-solid), [$color.stroke.brand-solid](/foundations/design-token/reference/%24color.stroke.brand-solid)), 사용자 인터페이스 전반에 걸쳐 일관된 사용을 보장합니다.

### Brand

Brand 색상은 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 또한, 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다.

- [$color.fg.brand](/foundations/design-token/reference/%24color.fg.brand)
- [$color.bg.brand-solid](/foundations/design-token/reference/%24color.bg.brand-solid)
- [$color.bg.brand-solid-pressed](/foundations/design-token/reference/%24color.bg.brand-solid-pressed)
- [$color.stroke.brand-solid](/foundations/design-token/reference/%24color.stroke.brand-solid)

### Neutral

Neutral 색상은 일반적인 콘텐츠에 사용되는 기본 색상입니다. 주목도가 가장 높지는 않지만, 여전히 가시성이 필요한 요소에 사용됩니다.

- [$color.fg.neutral](/foundations/design-token/reference/%24color.fg.neutral)
- [$color.fg.neutral-muted](/foundations/design-token/reference/%24color.fg.neutral-muted)
- [$color.fg.neutral-subtle](/foundations/design-token/reference/%24color.fg.neutral-subtle)
- [$color.fg.neutral-inverted](/foundations/design-token/reference/%24color.fg.neutral-inverted)
- [$color.bg.neutral-solid](/foundations/design-token/reference/%24color.bg.neutral-solid)
- [$color.bg.neutral-weak](/foundations/design-token/reference/%24color.bg.neutral-weak)

### Positive

Positive 색상은 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다.

- [$color.fg.positive](/foundations/design-token/reference/%24color.fg.positive)
- [$color.fg.positive-contrast](/foundations/design-token/reference/%24color.fg.positive-contrast)
- [$color.bg.positive-solid](/foundations/design-token/reference/%24color.bg.positive-solid)
- [$color.bg.positive-solid-pressed](/foundations/design-token/reference/%24color.bg.positive-solid-pressed)

### Warning

Warning 색상은 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다.

- [$color.fg.warning](/foundations/design-token/reference/%24color.fg.warning)
- [$color.fg.warning-contrast](/foundations/design-token/reference/%24color.fg.warning-contrast)
- [$color.bg.warning-solid](/foundations/design-token/reference/%24color.bg.warning-solid)
- [$color.bg.warning-weak](/foundations/design-token/reference/%24color.bg.warning-weak)

### Critical

Critical 색상은 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. 사용자에게 부정적인 상태나 문제를 명확히 전달하여 즉각적인 주의를 끌 수 있습니다.

![$color.fg.critical-contrast 및 $color.bg.critical-weak 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/79d67f1f-56cc-414f-9f04-c05c36ba6d8e)

- [$color.fg.critical](/foundations/design-token/reference/%24color.fg.critical)
- [$color.fg.critical-contrast](/foundations/design-token/reference/%24color.fg.critical-contrast)
- [$color.bg.critical-solid](/foundations/design-token/reference/%24color.bg.critical-solid)
- [$color.bg.critical-weak](/foundations/design-token/reference/%24color.bg.critical-weak)

![$color.bg.critical-solid 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7ba73693-651a-4aa4-8f2e-13d3fa8f3534)

### Informative

Informative 색상은 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. 이러한 색상은 정보 전달을 직관적으로 만들어 줍니다.

- [$color.fg.informative](/foundations/design-token/reference/%24color.fg.informative)
- [$color.fg.informative-contrast](/foundations/design-token/reference/%24color.fg.informative-contrast)
- [$color.bg.informative-solid](/foundations/design-token/reference/%24color.bg.informative-solid)
- [$color.bg.informative-weak](/foundations/design-token/reference/%24color.bg.informative-weak)

## Layer

레이어 색상은 인터페이스의 깊이와 계층 구조를 나타내는 데 사용됩니다. UI에서 다양한 레이어를 시각적으로 구분하는 데 도움을 줍니다.

![라이트 모드와 다크 모드에서의 레이어 색상](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6444e8e4-ce31-4011-a437-4ee990338533)

![레이어 색상의 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/eeb819a6-c77c-4602-9c5b-f66504ebc0f1)

## Variant

같은 역할을 가진 색상이라도 의도에 따라 다양한 변형이 필요할 수 있습니다. 예를 들어, Positive 역할을 가진 배경은 낮은 강조도를 가진 [$color.bg.positive-weak](/foundations/design-token/reference/%24color.bg.positive-weak) 또는 높은 강조도를 가진 [$color.bg.positive-solid](/foundations/design-token/reference/%24color.bg.positive-solid) 같은 변형을 가질 수 있습니다.

## Status

UI 요소의 상태에 따라 색상이 변할 수 있습니다. 예를 들어, 버튼을 눌렀을 때 색상 변화로 사용자에게 상호작용이 발생했음을 [표현](/foundations/state)할 수 있습니다.

## Tokens

### Foreground

| Token | theme-light | theme-dark |
| --- | --- | --- |
| $color.fg.brand | $color.palette.carrot-600 | $color.palette.carrot-700 |
| $color.fg.brand-contrast | $color.palette.carrot-700 | $color.palette.carrot-700 |
| $color.fg.critical | $color.palette.red-700 | $color.palette.red-700 |
| $color.fg.critical-contrast | $color.palette.red-900 | $color.palette.red-900 |
| $color.fg.disabled | $color.palette.gray-500 | $color.palette.gray-500 |
| $color.fg.informative | $color.palette.blue-700 | $color.palette.blue-700 |
| $color.fg.informative-contrast | $color.palette.blue-900 | $color.palette.blue-900 |
| $color.fg.neutral | $color.palette.gray-1000 | $color.palette.gray-1000 |
| $color.fg.neutral-inverted | $color.palette.gray-00 | $color.palette.gray-100 |
| $color.fg.neutral-muted | $color.palette.gray-800 | $color.palette.gray-800 |
| $color.fg.neutral-subtle | $color.palette.gray-700 | $color.palette.gray-700 |
| $color.fg.placeholder | $color.palette.gray-600 | $color.palette.gray-600 |
| $color.fg.positive | $color.palette.green-700 | $color.palette.green-700 |
| $color.fg.positive-contrast | $color.palette.green-900 | $color.palette.green-900 |
| $color.fg.warning | $color.palette.yellow-700 | $color.palette.yellow-700 |
| $color.fg.warning-contrast | $color.palette.yellow-900 | $color.palette.yellow-900 |

### Background

| Token | theme-light | theme-dark |
| --- | --- | --- |
| $color.bg.brand-solid | $color.palette.carrot-600 | $color.palette.carrot-700 |
| $color.bg.brand-solid-pressed | $color.palette.carrot-700 | $color.palette.carrot-800 |
| $color.bg.brand-weak | $color.palette.carrot-100 | $color.palette.carrot-100 |
| $color.bg.brand-weak-pressed | $color.palette.carrot-200 | $color.palette.carrot-200 |
| $color.bg.critical-solid | $color.palette.red-700 | $color.palette.red-600 |
| $color.bg.critical-solid-pressed | $color.palette.red-800 | $color.palette.red-700 |
| $color.bg.critical-weak | $color.palette.red-100 | $color.palette.red-100 |
| $color.bg.critical-weak-pressed | $color.palette.red-200 | $color.palette.red-200 |
| $color.bg.disabled | $color.palette.gray-200 | $color.palette.gray-300 |
| $color.bg.informative-solid | $color.palette.blue-700 | $color.palette.blue-600 |
| $color.bg.informative-solid-pressed | $color.palette.blue-800 | $color.palette.blue-700 |
| $color.bg.informative-weak | $color.palette.blue-100 | $color.palette.blue-100 |
| $color.bg.informative-weak-pressed | $color.palette.blue-200 | $color.palette.blue-200 |
| $color.bg.layer-basement | $color.palette.gray-200 | $color.palette.gray-00 |
| $color.bg.layer-default | $color.palette.gray-00 | $color.palette.gray-100 |
| $color.bg.layer-default-pressed | $color.palette.gray-100 | $color.palette.gray-300 |
| $color.bg.layer-fill | $color.palette.gray-100 | $color.palette.gray-200 |
| $color.bg.layer-floating | $color.palette.gray-00 | $color.palette.gray-200 |
| $color.bg.layer-floating-pressed | $color.palette.gray-100 | $color.palette.gray-300 |
| $color.bg.magic-weak | #f9f2ee | #201f1f |
| $color.bg.neutral-inverted | $color.palette.gray-900 | $color.palette.gray-1000 |
| $color.bg.neutral-inverted-pressed | $color.palette.gray-800 | $color.palette.gray-800 |
| $color.bg.neutral-solid | $color.palette.gray-1000 | $color.palette.gray-300 |
| $color.bg.neutral-weak | $color.palette.gray-200 | $color.palette.gray-300 |
| $color.bg.neutral-weak-alpha | $color.palette.static-black-alpha-200 | $color.palette.static-white-alpha-200 |
| $color.bg.neutral-weak-alpha-pressed | $color.palette.static-black-alpha-300 | $color.palette.static-white-alpha-300 |
| $color.bg.neutral-weak-pressed | $color.palette.gray-300 | $color.palette.gray-400 |
| $color.bg.overlay | $color.palette.static-black-alpha-700 | $color.palette.static-black-alpha-700 |
| $color.bg.overlay-muted | $color.palette.static-black-alpha-500 | $color.palette.static-black-alpha-500 |
| $color.bg.positive-solid | $color.palette.green-700 | $color.palette.green-500 |
| $color.bg.positive-solid-pressed | $color.palette.green-800 | $color.palette.green-600 |
| $color.bg.positive-weak | $color.palette.green-100 | $color.palette.green-100 |
| $color.bg.positive-weak-pressed | $color.palette.green-200 | $color.palette.green-200 |
| $color.bg.transparent | #00000000 | #ffffff00 |
| $color.bg.transparent-pressed | $color.palette.static-black-alpha-100 | $color.palette.static-white-alpha-50 |
| $color.bg.transparent-selected | $color.palette.static-black-alpha-200 | $color.palette.static-white-alpha-100 |
| $color.bg.transparent-selected-pressed | $color.palette.static-black-alpha-300 | $color.palette.static-white-alpha-200 |
| $color.bg.warning-solid | $color.palette.yellow-300 | $color.palette.yellow-800 |
| $color.bg.warning-solid-pressed | $color.palette.yellow-400 | $color.palette.yellow-900 |
| $color.bg.warning-weak | $color.palette.yellow-100 | $color.palette.yellow-100 |
| $color.bg.warning-weak-pressed | $color.palette.yellow-200 | $color.palette.yellow-200 |

### Stroke

| Token | theme-light | theme-dark |
| --- | --- | --- |
| $color.stroke.brand-solid | $color.palette.carrot-700 | $color.palette.carrot-700 |
| $color.stroke.brand-weak | $color.palette.carrot-300 | $color.palette.carrot-300 |
| $color.stroke.critical-solid | $color.palette.red-700 | $color.palette.red-700 |
| $color.stroke.critical-weak | $color.palette.red-300 | $color.palette.red-300 |
| $color.stroke.focus-ring | $color.palette.blue-600 | $color.palette.blue-600 |
| $color.stroke.informative-solid | $color.palette.blue-700 | $color.palette.blue-700 |
| $color.stroke.informative-weak | $color.palette.blue-300 | $color.palette.blue-300 |
| $color.stroke.neutral-contrast | $color.palette.gray-1000 | $color.palette.gray-1000 |
| $color.stroke.neutral-muted | $color.palette.static-black-alpha-300 | $color.palette.static-white-alpha-100 |
| $color.stroke.neutral-solid | $color.palette.gray-800 | $color.palette.gray-800 |
| $color.stroke.neutral-subtle | $color.palette.static-black-alpha-200 | $color.palette.static-white-alpha-50 |
| $color.stroke.neutral-weak | $color.palette.gray-400 | $color.palette.gray-400 |
| $color.stroke.positive-solid | $color.palette.green-700 | $color.palette.green-700 |
| $color.stroke.positive-weak | $color.palette.green-300 | $color.palette.green-300 |
| $color.stroke.warning-solid | $color.palette.yellow-700 | $color.palette.yellow-700 |
| $color.stroke.warning-weak | $color.palette.yellow-300 | $color.palette.yellow-300 |
---
# Palette
URL: /foundations/color/palette
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/color/palette.mdx



## Gray

## Chromatic

## Tokens

### Palette Colors

| Token | theme-light | theme-dark |
| --- | --- | --- |
| $color.palette.gray-00 | #ffffff | #000000 |
| $color.palette.gray-100 | #f7f8f9 | #16171b |
| $color.palette.gray-200 | #f3f4f5 | #1d2025 |
| $color.palette.gray-300 | #eeeff1 | #2b2e35 |
| $color.palette.gray-400 | #dcdee3 | #393d46 |
| $color.palette.gray-500 | #d1d3d8 | #5b606a |
| $color.palette.gray-600 | #b0b3ba | #868b94 |
| $color.palette.gray-700 | #868b94 | #b0b3ba |
| $color.palette.gray-800 | #555d6d | #dcdee3 |
| $color.palette.gray-900 | #2a3038 | #e9eaec |
| $color.palette.gray-1000 | #1a1c20 | #f3f4f5 |
| $color.palette.carrot-100 | #fff2ec | #31241f |
| $color.palette.carrot-200 | #ffe8db | #4b291c |
| $color.palette.carrot-300 | #ffd5c0 | #6b311c |
| $color.palette.carrot-400 | #ffb999 | #923600 |
| $color.palette.carrot-500 | #ff9364 | #bd4201 |
| $color.palette.carrot-600 | #ff6600 | #e65200 |
| $color.palette.carrot-700 | #e14d00 | #ff6600 |
| $color.palette.carrot-800 | #b93901 | #ff9e65 |
| $color.palette.carrot-900 | #862b00 | #eecebc |
| $color.palette.carrot-1000 | #471601 | #f4eeea |
| $color.palette.blue-100 | #eff6ff | #202742 |
| $color.palette.blue-200 | #e2edfc | #1e3352 |
| $color.palette.blue-300 | #cbdffa | #1a4275 |
| $color.palette.blue-400 | #aacefd | #0f559e |
| $color.palette.blue-500 | #85b8fd | #1964d8 |
| $color.palette.blue-600 | #5e98fe | #1e82eb |
| $color.palette.blue-700 | #217cf9 | #41a2f9 |
| $color.palette.blue-800 | #135fcd | #83bcf9 |
| $color.palette.blue-900 | #0b4596 | #b9d7fb |
| $color.palette.blue-1000 | #032451 | #e5f0fe |
| $color.palette.red-100 | #fdf0f0 | #322323 |
| $color.palette.red-200 | #fde7e7 | #4f2624 |
| $color.palette.red-300 | #fed4d2 | #742826 |
| $color.palette.red-400 | #feb7b3 | #a12621 |
| $color.palette.red-500 | #fe928d | #ca2319 |
| $color.palette.red-600 | #fc6a66 | #f73526 |
| $color.palette.red-700 | #fa342c | #ff6e60 |
| $color.palette.red-800 | #ca1d13 | #ffa299 |
| $color.palette.red-900 | #921708 | #f8c5c3 |
| $color.palette.red-1000 | #4a1209 | #fdf2f2 |
| $color.palette.green-100 | #edfaf6 | #202926 |
| $color.palette.green-200 | #d9f6e9 | #20362e |
| $color.palette.green-300 | #b9e9d2 | #20493b |
| $color.palette.green-400 | #7ddcb3 | #19604c |
| $color.palette.green-500 | #42c593 | #117956 |
| $color.palette.green-600 | #10ab7d | #1b946d |
| $color.palette.green-700 | #079171 | #22b27f |
| $color.palette.green-800 | #00745f | #35ce9a |
| $color.palette.green-900 | #075445 | #93e5c0 |
| $color.palette.green-1000 | #0a2b24 | #d4f6ef |
| $color.palette.yellow-100 | #fff7de | #302819 |
| $color.palette.yellow-200 | #fdefb9 | #413218 |
| $color.palette.yellow-300 | #fbdc65 | #543e15 |
| $color.palette.yellow-400 | #e9c647 | #714e15 |
| $color.palette.yellow-500 | #d4ab28 | #91601b |
| $color.palette.yellow-600 | #c49725 | #b6720d |
| $color.palette.yellow-700 | #9b7821 | #ca901c |
| $color.palette.yellow-800 | #755b22 | #dab156 |
| $color.palette.yellow-900 | #4f3e1f | #e5d49b |
| $color.palette.yellow-1000 | #2c2512 | #f7f0cd |
| $color.palette.purple-100 | #f5f3fe | #28213b |
| $color.palette.purple-200 | #efeafe | #3b2873 |
| $color.palette.purple-300 | #e1d8ff | #443081 |
| $color.palette.purple-400 | #d0c0ff | #5a3bb1 |
| $color.palette.purple-500 | #b8a1ff | #764fd9 |
| $color.palette.purple-600 | #9f84fb | #8e6bee |
| $color.palette.purple-700 | #8969ea | #a78df0 |
| $color.palette.purple-800 | #6d50cb | #beadf2 |
| $color.palette.purple-900 | #50379b | #d9cefa |
| $color.palette.purple-1000 | #29175d | #f0edfc |
| $color.palette.static-black | #000000 | #000000 |
| $color.palette.static-black-alpha-100 | #00000007 | #00000007 |
| $color.palette.static-black-alpha-200 | #0000000c | #0000000c |
| $color.palette.static-black-alpha-300 | #00000010 | #00000010 |
| $color.palette.static-black-alpha-400 | #00000021 | #00000021 |
| $color.palette.static-black-alpha-500 | #0000002c | #0000002c |
| $color.palette.static-black-alpha-600 | #0000004c | #0000004c |
| $color.palette.static-black-alpha-700 | #00000074 | #00000074 |
| $color.palette.static-black-alpha-800 | #000000a2 | #000000a2 |
| $color.palette.static-black-alpha-900 | #000000d0 | #000000d0 |
| $color.palette.static-black-alpha-1000 | #000000e3 | #000000e3 |
| $color.palette.static-white | #ffffff | #ffffff |
| $color.palette.static-white-alpha-50 | #ffffff0d | #ffffff0d |
| $color.palette.static-white-alpha-100 | #ffffff17 | #ffffff17 |
| $color.palette.static-white-alpha-200 | #ffffff20 | #ffffff20 |
| $color.palette.static-white-alpha-300 | #ffffff2e | #ffffff2e |
| $color.palette.static-white-alpha-400 | #ffffff3d | #ffffff3d |
| $color.palette.static-white-alpha-500 | #ffffff60 | #ffffff60 |
| $color.palette.static-white-alpha-600 | #ffffff8b | #ffffff8b |
| $color.palette.static-white-alpha-700 | #ffffffb3 | #ffffffb3 |
| $color.palette.static-white-alpha-800 | #ffffffde | #ffffffde |
| $color.palette.static-white-alpha-900 | #ffffffea | #ffffffea |
| $color.palette.static-white-alpha-1000 | #fffffff4 | #fffffff4 |

### Banner Colors

| Token | theme-light | theme-dark |
| --- | --- | --- |
| $color.banner.blue | #e1f7ff | #0d2a3a |
| $color.banner.cool-gray | #ebf1f5 | #242c33 |
| $color.banner.green | #f0fbe5 | #1e361c |
| $color.banner.orange | #fff2e1 | #42230a |
| $color.banner.pink | #ffebf1 | #3b172c |
| $color.banner.purple | #f5ecff | #2e1e45 |
| $color.banner.red | #ffecee | #3a0f15 |
| $color.banner.teal | #e6faf6 | #143633 |
| $color.banner.warm-gray | #f2f0ee | #2f2b27 |
| $color.banner.yellow | #fffae1 | #3e2b00 |
---
# Typography
URL: /foundations/typography
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/typography.mdx

타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.

## Preview

타이포그래피는 모든 디지털 채널에서 텍스트를 명확하고 일관되며 접근 가능하게 표현하기 위한 핵심 요소입니다. 재사용 가능한 토큰과 컴포넌트를 정의함으로써, 본 시스템은 제목, 본문 등 다양한 텍스트 스타일을 체계적으로 관리할 수 있도록 돕습니다. 이를 통해 시각적 계층 구조와 일관성을 유지할 수 있습니다.

## 개요

SEED 타이포그래피 시스템은 폰트 크기, 줄 높이, 폰트 두께 각각을 토큰으로 정의합니다. 이 토큰들은 두 가지 유형의 텍스트 스타일로 조합됩니다:

- **스케일 텍스트 스타일**: t5Regular, t1Bold와 같이 폰트 크기, 줄 높이, 폰트 두께를 축약한 조합입니다. 이 스타일은 제품 전반에 일반적인 텍스트 적용을 빠르게 할 수 있도록 도와줍니다.
- **시맨틱 텍스트 스타일**: screenTitle, articleBody와 같이 특정 역할이나 사용 상황에 맞게 구성된 텍스트 스타일입니다. 이 스타일은 디자인 의도를 내포하여 사용자 인터페이스 전반에 일관성을 부여합니다.

## 글꼴

사용자의 디바이스 환경을 고려하여, 대부분의 경우 각 플랫폼의 시스템 폰트를 사용합니다. 이는 다양한 국가와 문화권에서 사용되는 여러 기기 및 운영 체제에서 일관된 사용자 경험과 가독성을 보장합니다.

| 플랫폼                 | 권장 글꼴      |
| ------------------- | ---------- |
| iOS, Android, macOS | 시스템 기본 글꼴  |
| Windows             | Pretendard |

Windows에서는 시스템 글꼴인 맑은 고딕과 Segoe UI가 디자인 의도와 어긋나는 경우가 많아 [Pretendard](https://github.com/orioncactus/pretendard)를 사용합니다. 사용자 기기에 Pretendard가 없고 제품이 Pretendard 웹폰트를 준비하지 않았다면 맑은 고딕과 Segoe UI로 표시됩니다.

웹 환경에서 권장 폰트 패밀리를 적용하는 방법에 대해서는 [Fonts](/react/getting-started/styling/fonts)에서 자세히 다룹니다.

## 타이포그래피 토큰

### 폰트 크기 토큰

폰트 크기 토큰은 접근성과 확장성을 위해 상대 단위(rem)를 사용합니다. 이 값들은 기본 설정 기준 1rem = 16px로 계산됩니다.

| Token | default |
| --- | --- |
| $font-size.t1 | 0.6875rem (11px) |
| $font-size.t2 | 0.75rem (12px) |
| $font-size.t3 | 0.8125rem (13px) |
| $font-size.t4 | 0.875rem (14px) |
| $font-size.t5 | 1rem (16px) |
| $font-size.t6 | 1.125rem (18px) |
| $font-size.t7 | 1.25rem (20px) |
| $font-size.t8 | 1.375rem (22px) |
| $font-size.t9 | 1.5rem (24px) |
| $font-size.t10 | 1.625rem (26px) |
| $font-size.t11 | 1.75rem (28px) |
| $font-size.t12 | 2rem (32px) |
| $font-size.t13 | 2.5rem (40px) |
| $font-size.t14 | 3rem (48px) |
| $font-size.t1-static | 11px |
| $font-size.t2-static | 12px |
| $font-size.t3-static | 13px |
| $font-size.t4-static | 14px |
| $font-size.t5-static | 16px |
| $font-size.t6-static | 18px |
| $font-size.t7-static | 20px |
| $font-size.t8-static | 22px |
| $font-size.t9-static | 24px |
| $font-size.t10-static | 26px |
| $font-size.t11-static | 28px |
| $font-size.t12-static | 32px |
| $font-size.t13-static | 40px |
| $font-size.t14-static | 48px |

{/* 필요한 경우 고정 크기가 필요한 상황을 위해 픽셀 단위의 토큰(예: $font-size.t2-static, $font-size.t5-static, $font-size.t6-static)도 제공됩니다. */}

### 줄 높이 토큰

줄 높이 토큰은 적절한 수직 리듬과 가독성을 보장합니다. 동일한 순서의 폰트 크기 토큰과 함께 사용하는 것을 권장합니다.

| Token | default |
| --- | --- |
| $line-height.t1 | 0.9375rem (15px) |
| $line-height.t2 | 1rem (16px) |
| $line-height.t3 | 1.125rem (18px) |
| $line-height.t4 | 1.1875rem (19px) |
| $line-height.t5 | 1.375rem (22px) |
| $line-height.t6 | 1.5rem (24px) |
| $line-height.t7 | 1.6875rem (27px) |
| $line-height.t8 | 1.875rem (30px) |
| $line-height.t9 | 2rem (32px) |
| $line-height.t10 | 2.1875rem (35px) |
| $line-height.t11 | 2.375rem (38px) |
| $line-height.t12 | 2.625rem (42px) |
| $line-height.t13 | 3.25rem (52px) |
| $line-height.t14 | 3.75rem (60px) |
| $line-height.t1-static | 15px |
| $line-height.t2-static | 16px |
| $line-height.t3-static | 18px |
| $line-height.t4-static | 19px |
| $line-height.t5-static | 22px |
| $line-height.t6-static | 24px |
| $line-height.t7-static | 27px |
| $line-height.t8-static | 30px |
| $line-height.t9-static | 32px |
| $line-height.t10-static | 35px |
| $line-height.t11-static | 38px |
| $line-height.t12-static | 42px |
| $line-height.t13-static | 52px |
| $line-height.t14-static | 60px |

### 폰트 두께 토큰

명확한 시각적 대비와 계층 구조를 위해 세 가지 폰트 두께 토큰을 정의합니다.

| Token | default |
| --- | --- |
| $font-weight.regular | 400 |
| $font-weight.medium | 500 |
| $font-weight.bold | 700 |

<Callout type="warn" title="medium은 플랫폼에 따라 두께가 조금 다르게 보여요">
  시스템 폰트를 사용하기 때문에, 같은 medium(500)이라도 플랫폼마다 실제로
  그려지는 글꼴이 다릅니다. 한글에서는 iOS(Apple SD Gothic Neo)보다 Android 쪽
  획이 조금 더 두껍게 보일 수 있습니다. Android는 기기·OS 버전·제조사 설정에
  따라 기본 글꼴과 대체 순서가 달라서(예: Noto Sans KR 계열), 차이의 정도도
  기기마다 다릅니다.
</Callout>

## 타이포그래피 컴포넌트

텍스트 스타일은 토큰들을 조합하여 사용 가능한 컴포넌트로 취급되며, 두 가지 주요 범주로 나뉩니다:

### 시맨틱 텍스트 스타일

시맨틱 스타일은 UI 내 특정 역할에 맞게 사용됩니다. 이를 통해 텍스트 요소가 일관된 모양과 기능을 가지며, 다음과 같은 역할에 맞게 디자인됩니다:

Component spec (JSON): /rootage/components/typography.json

### 스케일 텍스트 스타일

스케일 스타일은 폰트 크기, 줄 높이, 폰트 두께를 축약하여 빠르게 적용할 수 있습니다.

예를 들어, t4Medium는 폰트 크기가 t4이고 폰트 두께가 medium인 텍스트 스타일을 나타냅니다.

일반적으로 t1-t5는 본문 및 장식적인 텍스트에 사용되며, t6-t10은 제목 및 주요 텍스트에 사용됩니다. t11-t14는 더 큰 화면을 위한 대형 제목 스케일로, `sm` breakpoint 이상에서 사용하는 것을 권장합니다.

스케일 텍스트 스타일 중 Static 텍스트 스타일은 Static 폰트 크기 토큰과 Static 줄 높이 토큰을 사용하여 폰트 스케일링에 반응하지 않는 텍스트 스타일을 제공합니다.

Component spec (JSON): /rootage/components/typography.json

## 사용 가이드라인

- **일관성 유지**: 모든 사례에서 정의된 토큰과 컴포넌트를 사용하여 일관된 타이포그래피를 유지합니다.
- **명확한 계층 구조**: 제목과 본문 등의 계층을 명확하게 구분하여, 사용자가 정보를 효율적으로 인식할 수 있도록 합니다.
- **상대 단위 사용**: 고정 단위(px) 대신 rem과 같은 상대 단위를 사용하여 사용자의 폰트 크기 설정을 존중합니다.
- **시맨틱 우선**: 특정 역할이 요구되는 경우(예: 화면 제목, 게시물 본문) 시맨틱 텍스트 스타일을 사용하여 디자인 의도와 기능을 함께 담아냅니다.

## 링크

<Card title="React" description="타이포그래피 컴포넌트를 React로 사용하는 방법을 설명합니다." href="/react/components/typography/text" />
---
# Spacing
URL: /foundations/spacing
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/spacing.mdx

Spacing은 컴포넌트 혹은 콘텐츠 간의 간격을 표현합니다.

디자인에서 간격은 시각적 균형과 사용자 경험을 향상시키는 중요한 요소입니다. 본 가이드는 일관성 있고 효과적인 간격 시스템을 구축하기 위한 지침을 제공합니다.

## Purpose

- **일관성 유지**: 모든 레이아웃과 컴포넌트에서 동일한 스케일을 사용하여 디자인의 통일감을 제공합니다.
- **모듈성**: 미리 정의된 스케일 값(예: dimension-x1, dimension-x2 등)을 통해 간격을 체계적으로 관리합니다.
- **가독성 및 사용자 경험 향상**: 적절한 여백을 통해 콘텐츠 간의 구분과 시각적 흐름을 개선합니다.

## Horizontal Spacing (수평 간격)

수평 간격은 요소들이 가로로 나란히 배치될 때 적용되는 공간을 의미합니다.
이 방식을 통해 디자이너와 개발자는 일관된 수평 간격을 쉽게 적용할 수 있으며,
전체적인 레이아웃 및 요소간의 균형을 효과적으로 유지할 수 있습니다.

### Nav to title

`nav-to-title`은 네비게이션 바 아래에 위치한 타이틀과 네비게이션 간의 간격을 정의합니다.

### Component default

`component-default`는 디자인 시스템에서 컴포넌트의 기본 간격을 정의하는 토큰입니다.
이는 버튼간의 간격, 카드, 폼 등 다양한 컴포넌트의 내부 요소 간 간격이나 컴포넌트 간의 기본 간격으로 사용되어 디자인의 일관성을 유지하는 데 도움을 줍니다.

## Vertical Spacing (수직 간격)

수직 간격은 요소들이 세로로 배치될 때 적용되는 공간을 의미합니다.
이는 레이아웃의 수직적 구조와 리듬을 결정하는 중요한 요소입니다.

### Global Gutter

`global-gutter`는 모든 서비스에서 화면 가장자리와 콘텐츠 사이의 간격을 일정하게 유지함으로써 디자인의 일관성을 확보하고, 사용자 경험을 향상시키는 핵심 간격입니다.
이를 통해 반응형 디자인 및 다양한 UI 컴포넌트 간의 균형 잡힌 간격 조정이 가능합니다.

안전 영역이 있는 화면에서는 화면 가장자리가 아닌 안전 영역 경계부터 간격을 적용합니다. 자세한 배치 기준은 [Safe Area](/patterns/safe-area)를 참고하세요.

## Spacing Tokens

| Token | default |
| --- | --- |
| $dimension.x0_5 | 2px |
| $dimension.x1 | 4px |
| $dimension.x1_5 | 6px |
| $dimension.x2 | 8px |
| $dimension.x2_5 | 10px |
| $dimension.x3 | 12px |
| $dimension.x3_5 | 14px |
| $dimension.x4 | 16px |
| $dimension.x4_5 | 18px |
| $dimension.x5 | 20px |
| $dimension.x6 | 24px |
| $dimension.x7 | 28px |
| $dimension.x8 | 32px |
| $dimension.x9 | 36px |
| $dimension.x10 | 40px |
| $dimension.x12 | 48px |
| $dimension.x13 | 52px |
| $dimension.x14 | 56px |
| $dimension.x16 | 64px |
| $dimension.spacing-x.between-chips | $dimension.x2 |
| $dimension.spacing-x.global-gutter | $dimension.x4 |
| $dimension.spacing-y.component-default | $dimension.x3 |
| $dimension.spacing-y.nav-to-title | $dimension.x5 |
| $dimension.spacing-y.screen-bottom | $dimension.x14 |
| $dimension.spacing-y.between-text | $dimension.x1_5 |
---
# Radius
URL: /foundations/radius
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/radius.mdx

Radius는 컴포넌트 혹은 콘텐츠 모서리의 둥글기를 표현합니다.

Radius는 UI 구성 요소의 모서리를 둥글게 처리하여 부드럽고 현대적인 느낌을 제공합니다.
일관된 Radius 값은 브랜드 아이덴티티를 강화하고, 사용자 경험을 향상시키며,
다양한 화면과 컨텍스트에서 시각적 일관성을 유지하는 데 중요한 역할을 합니다.

### Radius Tokens

| Token | default |
| --- | --- |
| $radius.r0_5 | 2px |
| $radius.r1 | 4px |
| $radius.r1_5 | 6px |
| $radius.r2 | 8px |
| $radius.r2_5 | 10px |
| $radius.r3 | 12px |
| $radius.r3_5 | 14px |
| $radius.r4 | 16px |
| $radius.r5 | 20px |
| $radius.r6 | 24px |
| $radius.full | 9999px |