Colors
Color는 원활한 협업을 위해 Hex 코드 대신 컬러 토큰명을 사용합니다. 기본적으로 팔레트에 정의된 색상을 사용하며, 새로운 색상이 반복적으로 필요할 경우 팀 논의를 거쳐 팔레트에 추가한 뒤 사용합니다.
Colors
Color는 원활한 협업을 위해 Hex 코드 대신 컬러 토큰명을 사용합니다. 기본적으로 팔레트에 정의된 색상을 사용하며, 새로운 색상이 반복적으로 필요할 경우 팀 논의를 거쳐 팔레트에 추가한 뒤 사용합니다.
Colors
Color는 원활한 협업을 위해 Hex 코드 대신 컬러 토큰명을 사용합니다. 기본적으로 팔레트에 정의된 색상을 사용하며, 새로운 색상이 반복적으로 필요할 경우 팀 논의를 거쳐 팔레트에 추가한 뒤 사용합니다.
Primitive Tokens
Primitive Tokens는 색상 계열(Hue group)과 톤 단계(Tone level)를 조합하여 정의한 기본 색상 값입니다.
UI 사용 맥락이나 의미를 부여하지 않고, 순수한 색상 값만 정의합니다.
각 색상에는 고유한 이름이 부여되며, 디자인 시안과 코드에서 동일하게 사용됩니다.
Primary Color
코드잇의 가장 대표 색상입니다. 포인트, 강조 색상, 주요 컴포넌트에 사용합니다.
Gray Color
gray color는 가장 기본으로 사용하는 색상 팔레트입니다.
다크모드 제작 시, Light Theme에 매칭된 Dark Theme 토큰이 자동으로 적용됩니다.
Sub Color
sub color는 알림, 경고 등 특정 페이지를 강조할 때 사용합니다.
코드잇의 다양한 교육 콘텐츠를 색상별로 브랜딩 할 때 기존 테마를 확장하여 사용할 수 있습니다.
Transparency Color
기준 색상으로 Opacity를 조절하여 추가합니다.
Primitive Tokens
Primitive Tokens는 색상 계열(Hue group)과 톤 단계(Tone level)를 조합하여 정의한 기본 색상 값입니다.
UI 사용 맥락이나 의미를 부여하지 않고, 순수한 색상 값만 정의합니다.
각 색상에는 고유한 이름이 부여되며, 디자인 시안과 코드에서 동일하게 사용됩니다.
Primary Color
코드잇의 가장 대표 색상입니다. 포인트, 강조 색상, 주요 컴포넌트에 사용합니다.
Gray Color
gray color는 가장 기본으로 사용하는 색상 팔레트입니다.
다크모드 제작 시, Light Theme에 매칭된 Dark Theme 토큰이 자동으로 적용됩니다.
Sub Color
sub color는 알림, 경고 등 특정 페이지를 강조할 때 사용합니다.
코드잇의 다양한 교육 콘텐츠를 색상별로 브랜딩 할 때 기존 테마를 확장하여 사용할 수 있습니다.
Transparency Color
기준 색상으로 Opacity를 조절하여 추가합니다.
Primitive Tokens
Primitive Tokens는 색상 계열(Hue group)과 톤 단계(Tone level)를 조합하여 정의한 기본 색상 값입니다.
UI 사용 맥락이나 의미를 부여하지 않고, 순수한 색상 값만 정의합니다.
각 색상에는 고유한 이름이 부여되며, 디자인 시안과 코드에서 동일하게 사용됩니다.
Primary Color
코드잇의 가장 대표 색상입니다. 포인트, 강조 색상, 주요 컴포넌트에 사용합니다.
Gray Color
gray color는 가장 기본으로 사용하는 색상 팔레트입니다.
다크모드 제작 시, Light Theme에 매칭된 Dark Theme 토큰이 자동으로 적용됩니다.
Sub Color
sub color는 알림, 경고 등 특정 페이지를 강조할 때 사용합니다.
코드잇의 다양한 교육 콘텐츠를 색상별로 브랜딩 할 때 기존 테마를 확장하여 사용할 수 있습니다.
Transparency Color
기준 색상으로 Opacity를 조절하여 추가합니다.
Sementic Color
Semantic Color는 색상의 기능과 역할에 따라 지정된 컬러입니다.
Semantic Color는 필요에 따라 다크 모드를 대응합니다.
배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 합니다.
유연하고 확장성이 있어야 하며, 기능과 역할이 명확하더라도 사용 빈도가 낮으면 제외하는 등 상황에 맞게 운영합니다.
Text
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
|  |  |
|
|  |  |
|
|  |  |
|
|  |  |
|
|  |  |
|
|  |  |
|
|  |  |
|
|  |  |
|
Diff
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
|  |  |
|
|  |  |
|
Background
Token | Light Mode | Dark Mode |
|---|---|---|
|  |  |
|  |  |
|  |  |
|  | |
|  | |
Border
Token | Light Mode | Dark Mode |
|---|---|---|
|  |  |
|  |  |
|  |  |
Status
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
|  |  |
|
|  |  |
|
Sementic Color
Semantic Color는 색상의 기능과 역할에 따라 지정된 컬러입니다.
Semantic Color는 필요에 따라 다크 모드를 대응합니다.
배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 합니다.
유연하고 확장성이 있어야 하며, 기능과 역할이 명확하더라도 사용 빈도가 낮으면 제외하는 등 상황에 맞게 운영합니다.
Text
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
Diff
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| | |
|
| | |
|
Background
Token | Light Mode | Dark Mode |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
Border
Token | Light Mode | Dark Mode |
|---|---|---|
| | |
| | |
| | |
Status
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| | |
|
| | |
|
Sementic Color
Semantic Color는 색상의 기능과 역할에 따라 지정된 컬러입니다.
Semantic Color는 필요에 따라 다크 모드를 대응합니다.
배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 합니다.
유연하고 확장성이 있어야 하며, 기능과 역할이 명확하더라도 사용 빈도가 낮으면 제외하는 등 상황에 맞게 운영합니다.
Text
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
Diff
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| | |
|
| | |
|
Background
Token | Light Mode | Dark Mode |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
Border
Token | Light Mode | Dark Mode |
|---|---|---|
| | |
| | |
| | |
Status
Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
| | |
|
| | |
|