Overview

Brand

Foundations

Color

Typography

Radius

Layout

Spacing

Iconography

Components

Foundations

Overview

Brand

Foundations

Color

Typography

Radius

Layout

Spacing

Iconography

Components

Foundations

Overview

Brand

Foundations

Color

Typography

Radius

Layout

Spacing

Iconography

Components

Foundations

Overview

Brand

Foundations

Color

Typography

Radius

Layout

Spacing

Iconography

Components

Foundations

Overview

Brand

Foundations

Color

Typography

Radius

Layout

Spacing

Iconography

Components

Color

Color는 원활한 협업을 위해 HEX 코드 대신 컬러 토큰명을 사용합니다. 기본적으로 팔레트에 정의된 색상을 사용하며, 새로운 색상이 반복적으로 필요할 경우 팀 논의를 거쳐 팔레트에 추가한 뒤 사용합니다.

Color

Color는 원활한 협업을 위해 HEX 코드 대신 컬러 토큰명을 사용합니다. 기본적으로 팔레트에 정의된 색상을 사용하며, 새로운 색상이 반복적으로 필요할 경우 팀 논의를 거쳐 팔레트에 추가한 뒤 사용합니다.

Color

Color는 원활한 협업을 위해 HEX 코드 대신 컬러 토큰명을 사용합니다. 기본적으로 팔레트에 정의된 색상을 사용하며, 새로운 색상이 반복적으로 필요할 경우 팀 논의를 거쳐 팔레트에 추가한 뒤 사용합니다.

Primitive Tokens

  • 참조 토큰(Primitive Tokens)은 색상 계열(Hue group)과 톤 단계(Tone level)를 조합하여 정의한 기본 색상 값입니다.

  • UI 사용 맥락이나 의미를 부여하지 않고, 순수한 색상 값만을 정의합니다.

  • 각 색상에는 고유한 이름이 부여되며, 디자인 시안과 코드에서 동일하게 사용됩니다.


Primary Color

코드잇의 가장 대표 색상입니다. 포인트 요소, 강조 색상, 주요 컴포넌트에 사용합니다.

Gray Color

그레이 컬러(Gray Color)는 가장 기본으로 사용하는 색상 팔레트입니다.
다크 모드 제작 시, 라이트 모드(Light Mode)에 매칭된 다크 모드(Dark Mode) 토큰이 자동으로 적용됩니다.

Sub Color

서브 컬러(sub color)는 알림, 경고 등 특정 페이지를 강조할 때 사용합니다.
코드잇의 다양한 교육 콘텐츠를 색상별로 브랜딩할 때 기존 테마를 확장하여 사용할 수 있습니다.


Transparency Color

기준 색상으로 투명도(Opacity)를 조절하여 추가합니다.

Primitive Tokens

  • 참조 토큰(Primitive Tokens)은 색상 계열(Hue group)과 톤 단계(Tone level)를 조합하여 정의한 기본 색상 값입니다.

  • UI 사용 맥락이나 의미를 부여하지 않고, 순수한 색상 값만을 정의합니다.

  • 각 색상에는 고유한 이름이 부여되며, 디자인 시안과 코드에서 동일하게 사용됩니다.


Primary Color

코드잇의 가장 대표 색상입니다. 포인트 요소, 강조 색상, 주요 컴포넌트에 사용합니다.

Gray Color

그레이 컬러(Gray Color)는 가장 기본으로 사용하는 색상 팔레트입니다.
다크 모드 제작 시, 라이트 모드(Light Mode)에 매칭된 다크 모드(Dark Mode) 토큰이 자동으로 적용됩니다.

Sub Color

서브 컬러(sub color)는 알림, 경고 등 특정 페이지를 강조할 때 사용합니다.
코드잇의 다양한 교육 콘텐츠를 색상별로 브랜딩할 때 기존 테마를 확장하여 사용할 수 있습니다.


Transparency Color

기준 색상으로 투명도(Opacity)를 조절하여 추가합니다.

Primitive Tokens

  • 참조 토큰(Primitive Tokens)은 색상 계열(Hue group)과 톤 단계(Tone level)를 조합하여 정의한 기본 색상 값입니다.

  • UI 사용 맥락이나 의미를 부여하지 않고, 순수한 색상 값만을 정의합니다.

  • 각 색상에는 고유한 이름이 부여되며, 디자인 시안과 코드에서 동일하게 사용됩니다.


Primary Color

코드잇의 가장 대표 색상입니다. 포인트 요소, 강조 색상, 주요 컴포넌트에 사용합니다.

Gray Color

그레이 컬러(Gray Color)는 가장 기본으로 사용하는 색상 팔레트입니다.
다크 모드 제작 시, 라이트 모드(Light Mode)에 매칭된 다크 모드(Dark Mode) 토큰이 자동으로 적용됩니다.

Sub Color

서브 컬러(sub color)는 알림, 경고 등 특정 페이지를 강조할 때 사용합니다.
코드잇의 다양한 교육 콘텐츠를 색상별로 브랜딩할 때 기존 테마를 확장하여 사용할 수 있습니다.


Transparency Color

기준 색상으로 투명도(Opacity)를 조절하여 추가합니다.

Semantic Colors

  • 시멘틱 컬러(Semantic Color)는 색상의 기능과 역할에 따라 지정된 컬러입니다.

  • 필요에 따라 다크 모드를 대응합니다.

  • 배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 합니다.

  • 유연하고 확장성이 있어야 하며, 기능과 역할이 명확하더라도 사용 빈도가 낮으면 제외하는 등 상황에 맞게 운영합니다.


Text

Token
Light Mode
Dark Mode
Usage
txt-primary

  • 기본 텍스트 색상

  • 아이콘 기본 색상

txt-secondary

  • 보조 텍스트 색상

  • 장문 텍스트 색상

  • 아이콘 보조 색상

txt-tertiary

  • 보조 텍스트 색상

  • 아이콘 보조 색상

txt-caption

  • 이미지 캡션 또는 보조 텍스트 색상

txt-disabled

  • 비활성화된 상태를 나타내는 텍스트 색상

txt-link

  • 링크 텍스트 색상

txt-purple-primary

  • 강조 텍스트 색상

txt-purple-secondary

  • 강조 텍스트 색상





Diff

Token
Light Mode
Dark Mode
Usage
diff-remove-bg

diff-remove-txt

  • 코드에서 삭제된 부분을 나타냄


diff-add-bg

diff-add-txt

  • 코드에서 추가된 부분을 나타냄






Background

Token
Light Mode
Dark Mode
bg-primary
bg-secondary

bg-tertiary

bg-invert


bg-purple-primary





Border

Token
Light Mode
Dark Mode
border-primary
border-secondary

border-tertiary




Status

Token
Light Mode
Dark Mode
Usage
status-positive

  • Input 성공 상태

  • 텍스트 성공 상태

status-negative

  • 오류 또는 부정

  • Input 실패 상태

  • 텍스트 실패 상태

Semantic Colors

  • 시멘틱 컬러(Semantic Color)는 색상의 기능과 역할에 따라 지정된 컬러입니다.

  • 필요에 따라 다크 모드를 대응합니다.

  • 배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 합니다.

  • 유연하고 확장성이 있어야 하며, 기능과 역할이 명확하더라도 사용 빈도가 낮으면 제외하는 등 상황에 맞게 운영합니다.


Text

Token
Light Mode
Dark Mode
Usage
txt-primary

  • 기본 텍스트 색상

  • 아이콘 기본 색상

txt-secondary

  • 보조 텍스트 색상

  • 장문 텍스트 색상

  • 아이콘 보조 색상

txt-tertiary

  • 보조 텍스트 색상

  • 아이콘 보조 색상

txt-caption

  • 이미지 캡션 또는 보조 텍스트 색상

txt-disabled

  • 비활성화된 상태를 나타내는 텍스트 색상

txt-link

  • 링크 텍스트 색상

txt-purple-primary

  • 강조 텍스트 색상

txt-purple-secondary

  • 강조 텍스트 색상





Diff

Token
Light Mode
Dark Mode
Usage
diff-remove-bg

diff-remove-txt

  • 코드에서 삭제된 부분을 나타냄


diff-add-bg

diff-add-txt

  • 코드에서 추가된 부분을 나타냄






Background

Token
Light Mode
Dark Mode
bg-primary
bg-secondary

bg-tertiary

bg-invert


bg-purple-primary





Border

Token
Light Mode
Dark Mode
border-primary
border-secondary

border-tertiary




Status

Token
Light Mode
Dark Mode
Usage
status-positive

  • Input 성공 상태

  • 텍스트 성공 상태

status-negative

  • 오류 또는 부정

  • Input 실패 상태

  • 텍스트 실패 상태

Semantic Colors

  • 시멘틱 컬러(Semantic Color)는 색상의 기능과 역할에 따라 지정된 컬러입니다.

  • 필요에 따라 다크 모드를 대응합니다.

  • 배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 합니다.

  • 유연하고 확장성이 있어야 하며, 기능과 역할이 명확하더라도 사용 빈도가 낮으면 제외하는 등 상황에 맞게 운영합니다.


Text

Token
Light Mode
Dark Mode
Usage
txt-primary

  • 기본 텍스트 색상

  • 아이콘 기본 색상

txt-secondary

  • 보조 텍스트 색상

  • 장문 텍스트 색상

  • 아이콘 보조 색상

txt-tertiary

  • 보조 텍스트 색상

  • 아이콘 보조 색상

txt-caption

  • 이미지 캡션 또는 보조 텍스트 색상

txt-disabled

  • 비활성화된 상태를 나타내는 텍스트 색상

txt-link

  • 링크 텍스트 색상

txt-purple-primary

  • 강조 텍스트 색상

txt-purple-secondary

  • 강조 텍스트 색상





Diff

Token
Light Mode
Dark Mode
Usage
diff-remove-bg

diff-remove-txt

  • 코드에서 삭제된 부분을 나타냄


diff-add-bg

diff-add-txt

  • 코드에서 추가된 부분을 나타냄






Background

Token
Light Mode
Dark Mode
bg-primary
bg-secondary

bg-tertiary

bg-invert


bg-purple-primary





Border

Token
Light Mode
Dark Mode
border-primary
border-secondary

border-tertiary




Status

Token
Light Mode
Dark Mode
Usage
status-positive

  • Input 성공 상태

  • 텍스트 성공 상태

status-negative

  • 오류 또는 부정

  • Input 실패 상태

  • 텍스트 실패 상태

Next

Typography

Next

Typography

Next

Typography

Contact Us

©Codeit

Contact Us

©Codeit

Contact Us

©Codeit

Color

Color