Featuring Design System

Colors

브랜드 아이덴티티를 위한 컬러 팔레트. Featuring/DataEffect 테마별 Primary 색상과 Secondary, Red, Orange, Yellow, Green, Blue, Purple 등 글로벌 컬러, Background/Border/Text/Support 등 시맨틱 컬러 토큰 제공.

우리의 컬러 시스템은 유연합니다. 그러나 고유한 가치를 잃지 않습니다.

링블루의 액센트를 더한 대담한 팔레트는 어디에서 사용되건 본래의 가치를 돋보이게 합니다.

상태와 피드백 등의 색상의 명확한 기준을 준수하고, 시각적 연속성을 제공해 브랜드의 가치를 효과적으로 전달할 수 있도록 합니다.

Usage

import { global, semantic, colorSet } from '@featuring-corp/design-tokens';

// Global Colors (primary 제외)
console.log(global.colors.gray[90]);      // #242424
console.log(global.colors.secondary[60]); // #bbbbbb
console.log(global.colors.red[50]);       // #e97259

// Color Set (Primary Colors - 테마별로 다름)
console.log(colorSet.featuringPrimary[60]);  // #5e51ff (Featuring 테마)
console.log(colorSet.dataEffectPrimary[60]); // #0065ff (DataEffect 테마)

// Semantic Colors
console.log(semantic.color.background[1]); // var(--global-colors-white)
console.log(semantic.color.text[1]);       // var(--global-colors-gray-90)

Global Colors

CSS 변수: --global-colors-{color}-{shade}

Featuring Primary

Featuring 브랜드의 메인 컬러입니다.

CodeValue
primary-10
#ecefff
primary-20
#dce2ff
primary-30
#c0c8ff
primary-40
#9aa3ff
primary-50
#7273ff
primary-60
#5e51ff
primary-70
#5032f9
primary-80
#3821b2
primary-90
#31238c
primary-100
#1f1551

DataEffect Primary

DataEffect 브랜드의 메인 컬러입니다.

CodeValue
primary-10
#edf5ff
primary-20
#d0e2ff
primary-30
#a6c8ff
primary-40
#4c9aff
primary-50
#2684ff
primary-60
#0065ff
primary-70
#0052cc
primary-80
#0747a6
primary-90
#001d6c
primary-100
#001141

Secondary

CodeValue
secondary-10
#fafafa
secondary-20
#f6f6f6
secondary-30
#ebebeb
secondary-40
#e0e0e0
secondary-50
#d2d2d2
secondary-60
#bbbbbb
secondary-70
#959595
secondary-80
#707070
secondary-90
#424242
secondary-100
#242424

Gray (Neutral)

CodeValue
white
#ffffff
black
#000000
gray-5
#fafafa
gray-10
#f6f6f6
gray-15
#f0f0f0
gray-20
#ebebeb
gray-30
#e0e0e0
gray-40
#d2d2d2
gray-50
#bbbbbb
gray-60
#959595
gray-70
#707070
gray-80
#424242
gray-90
#242424

Color Palette

CodeValue
red-10
#fcedea
red-20
#f6c8bf
red-30
#f2ae9f
red-40
#ec8974
red-50
#e97259
red-60
#e34f2f
red-70
#cf482b
red-80
#a13821
red-90
#7d2b1A
red-100
#5f2114
orange-10
#fcf2e6
orange-20
#f5d5b0
orange-30
#f0c18a
orange-40
#eaa554
orange-50
#e59333
orange-60
#df7800
orange-70
#cb6d00
orange-80
#9e5500
orange-90
#7b4200
orange-100
#5e3200
yellow-10
#fffbe6
yellow-20
#fff1b3
yellow-30
#ffea8e
yellow-40
#ffe15a
yellow-50
#ffdb3a
yellow-60
#ffd209
yellow-70
#e8bf08
yellow-80
#b59506
yellow-90
#8c7405
yellow-100
#6b5804
lightGreen-10
#f5faf0
lightGreen-20
#dfefd0
lightGreen-30
#d0e8b9
lightGreen-40
#bbdd98
lightGreen-50
#add685
lightGreen-60
#99cc66
lightGreen-70
#8bba5d
lightGreen-80
#6d9148
lightGreen-90
#547038
lightGreen-100
#40562b
green-10
#ebf6f1
green-20
#c2e4d4
green-30
#a5d7bf
green-40
#7cc5a2
green-50
#62ba90
green-60
#3ba974
green-70
#369a6a
green-80
#2a7852
green-90
#205d40
green-100
#194731
cyan-10
#f2fcfb
cyan-20
#d8f6f3
cyan-30
#c5f1ee
cyan-40
#aaebe6
cyan-50
#99e7e1
cyan-60
#80e1d9
cyan-70
#74cdc5
cyan-80
#5ba09a
cyan-90
#467c77
cyan-100
#365f5b
teal-10
#eff8f7
teal-20
#cce9e6
teal-30
#b4deda
teal-40
#91cfc9
teal-50
#7cc5bf
teal-60
#5bb7af
teal-70
#53a79f
teal-80
#41827c
teal-90
#326560
teal-100
#264d4a
lightBlue-10
#f1f9fe
lightBlue-20
#d3ebfc
lightBlue-30
#bee1fa
lightBlue-40
#a1d3f8
lightBlue-50
#8ecbf6
lightBlue-60
#72bef4
lightBlue-70
#68adde
lightBlue-80
#5187ad
lightBlue-90
#3f6986
lightBlue-100
#305066
blue-10
#eef4ff
blue-20
#d8e6fe
blue-30
#aacbff
blue-40
#78b0fd
blue-50
#4d93f7
blue-60
#246ee1
blue-70
#0b54ab
blue-80
#014186
blue-90
#032d60
blue-100
#001639
indigo-10
#f1f1ff
indigo-20
#d5d4fd
indigo-30
#c0bffd
indigo-40
#a4a2fc
indigo-50
#9290fb
indigo-60
#7774fa
indigo-70
#6c6ae4
indigo-80
#5452b2
indigo-90
#41408a
indigo-100
#323169
purple-10
#f2eeff
purple-20
#d5cbff
purple-30
#c1b1ff
purple-40
#a58eff
purple-50
#9378ff
purple-60
#7856ff
purple-70
#6d4ee8
purple-80
#553db5
purple-90
#422f8c
purple-100
#32246b
magenta-10
#faf2fc
magenta-20
#efd8f4
magenta-30
#e7c5ef
magenta-40
#dbaae8
magenta-50
#d599e3
magenta-60
#ca80dc
magenta-70
#b874c8
magenta-80
#8f5b9c
magenta-90
#6f4679
magenta-100
#55365c
burgundy-10
#f7eef1
burgundy-20
#e7ccd2
burgundy-30
#dcb3bc
burgundy-40
#cb909e
burgundy-50
#c17a8b
burgundy-60
#b2596e
burgundy-70
#a25164
burgundy-80
#7e3f4e
burgundy-90
#62313d
burgundy-100
#4b252e

Semantic Colors

CSS 변수: --semantic-color-{token}

시맨틱 컬러는 용도에 따라 미리 정의된 색상입니다. 글로벌 컬러를 CSS 변수로 참조합니다.

Background

CodeValue
background-1var(--global-colors-white)
background-2var(--global-colors-gray-5)
background-3var(--global-colors-gray-10)
background-4var(--global-colors-gray-20)
background-5var(--global-colors-gray-90)

Border

CodeValue
border-defaultvar(--global-colors-gray-15)
border-1var(--global-colors-gray-30)
border-2var(--global-colors-gray-40)
border-3var(--global-colors-gray-50)
border-4var(--global-colors-gray-60)

Text

CodeValue
text-1var(--global-colors-gray-90)
text-2var(--global-colors-gray-80)
text-3var(--global-colors-gray-70)
text-4var(--global-colors-gray-60)
text-5var(--global-colors-gray-50)
text-6var(--global-colors-white)

Support Error

CodeValue
support-error-1var(--global-colors-red-10)
support-error-2var(--global-colors-red-20)
support-error-3var(--global-colors-red-50)
support-error-4var(--global-colors-red-100)

Support Warning

CodeValue
support-warning-1var(--global-colors-orange-10)
support-warning-2var(--global-colors-orange-20)
support-warning-3var(--global-colors-orange-50)
support-warning-4var(--global-colors-orange-100)

Support Success

CodeValue
support-success-1var(--global-colors-green-10)
support-success-2var(--global-colors-green-20)
support-success-3var(--global-colors-green-50)
support-success-4var(--global-colors-green-100)

Support Info

CodeValue
support-info-1var(--global-colors-primary-10)
support-info-2var(--global-colors-primary-20)
support-info-3var(--global-colors-primary-60)
support-info-4var(--global-colors-primary-100)

Focus

CodeValue
focusrgb(from var(--global-colors-primary-50) r g b / 20%)

Icon

CodeValue
icon-primaryvar(--global-colors-gray-90)
icon-secondaryvar(--global-colors-gray-70)
icon-tertiaryvar(--global-colors-gray-50)
icon-interactivevar(--global-colors-primary-60)
icon-on-color-defaultvar(--global-colors-white)
icon-on-color-disabledvar(--global-colors-gray-60)

Toggle

CodeValue
toggle-primary-1var(--global-colors-primary-60)
toggle-primary-2var(--global-colors-primary-70)
toggle-primary-3var(--global-colors-primary-100)
toggle-disabled-bgvar(--global-colors-gray-20)
toggle-disabled-bordervar(--global-colors-gray-40)
toggle-disabled-textvar(--global-colors-gray-60)
toggle-off-bgvar(--global-colors-gray-50)
toggle-off-hovervar(--global-colors-gray-60)

CSS 파일로 사용하기

디자인 토큰을 CSS 변수로 사용하려면 Preset을 import하세요. Reset, Normalize, 브랜드 토큰, CSS Layer 순서가 한 줄로 설정됩니다.

Featuring 테마

// 앱 진입점 (예: _app.tsx, main.tsx, layout.tsx)
import '@featuring-corp/components/preset/featuring';

DataEffect 테마

// 앱 진입점 (예: _app.tsx, main.tsx, layout.tsx)
import '@featuring-corp/components/preset/dataEffect';

그러면 :root에 모든 CSS 변수가 등록되어 어디서든 사용 가능합니다:

.my-button {
  background-color: var(--global-colors-primary-60);
  color: var(--semantic-color-text-6);
  border-radius: var(--global-radius-100);
  padding: var(--global-spacing-200) var(--global-spacing-400);
}

전체 CSS 토큰 목록

LLM이 토큰을 검색할 수 있도록 전체 CSS 파일 내용을 제공합니다.

Featuring 테마 (featuring.css)

@featuring-corp/design-tokens/style/featuring.css

:root {
  --global-colors-primary-10: #ecefff;
  --global-colors-primary-20: #dce2ff;
  --global-colors-primary-30: #c0c8ff;
  --global-colors-primary-40: #9aa3ff;
  --global-colors-primary-50: #7273ff;
  --global-colors-primary-60: #5e51ff;
  --global-colors-primary-70: #5032f9;
  --global-colors-primary-80: #3821b2;
  --global-colors-primary-90: #31238c;
  --global-colors-primary-100: #1f1551;
  --global-colors-secondary-10: #fafafa;
  --global-colors-secondary-20: #f6f6f6;
  --global-colors-secondary-30: #ebebeb;
  --global-colors-secondary-40: #e0e0e0;
  --global-colors-secondary-50: #d2d2d2;
  --global-colors-secondary-60: #bbbbbb;
  --global-colors-secondary-70: #959595;
  --global-colors-secondary-80: #707070;
  --global-colors-secondary-90: #424242;
  --global-colors-secondary-100: #242424;
  --global-colors-red-10: #fcedea;
  --global-colors-red-20: #f6c8bf;
  --global-colors-red-30: #f2ae9f;
  --global-colors-red-40: #ec8974;
  --global-colors-red-50: #e97259;
  --global-colors-red-60: #e34f2f;
  --global-colors-red-70: #cf482b;
  --global-colors-red-80: #a13821;
  --global-colors-red-90: #7d2b1A;
  --global-colors-red-100: #5f2114;
  --global-colors-orange-10: #fcf2e6;
  --global-colors-orange-20: #f5d5b0;
  --global-colors-orange-30: #f0c18a;
  --global-colors-orange-40: #eaa554;
  --global-colors-orange-50: #e59333;
  --global-colors-orange-60: #df7800;
  --global-colors-orange-70: #cb6d00;
  --global-colors-orange-80: #9e5500;
  --global-colors-orange-90: #7b4200;
  --global-colors-orange-100: #5e3200;
  --global-colors-yellow-10: #fffbe6;
  --global-colors-yellow-20: #fff1b3;
  --global-colors-yellow-30: #ffea8e;
  --global-colors-yellow-40: #ffe15a;
  --global-colors-yellow-50: #ffdb3a;
  --global-colors-yellow-60: #ffd209;
  --global-colors-yellow-70: #e8bf08;
  --global-colors-yellow-80: #b59506;
  --global-colors-yellow-90: #8c7405;
  --global-colors-yellow-100: #6b5804;
  --global-colors-lightGreen-10: #f5faf0;
  --global-colors-lightGreen-20: #dfefd0;
  --global-colors-lightGreen-30: #d0e8b9;
  --global-colors-lightGreen-40: #bbdd98;
  --global-colors-lightGreen-50: #add685;
  --global-colors-lightGreen-60: #99cc66;
  --global-colors-lightGreen-70: #8bba5d;
  --global-colors-lightGreen-80: #6d9148;
  --global-colors-lightGreen-90: #547038;
  --global-colors-lightGreen-100: #40562b;
  --global-colors-green-10: #ebf6f1;
  --global-colors-green-20: #c2e4d4;
  --global-colors-green-30: #a5d7bf;
  --global-colors-green-40: #7cc5a2;
  --global-colors-green-50: #62ba90;
  --global-colors-green-60: #3ba974;
  --global-colors-green-70: #369a6a;
  --global-colors-green-80: #2a7852;
  --global-colors-green-90: #205d40;
  --global-colors-green-100: #194731;
  --global-colors-cyan-10: #f2fcfb;
  --global-colors-cyan-20: #d8f6f3;
  --global-colors-cyan-30: #c5f1ee;
  --global-colors-cyan-40: #aaebe6;
  --global-colors-cyan-50: #99e7e1;
  --global-colors-cyan-60: #80e1d9;
  --global-colors-cyan-70: #74cdc5;
  --global-colors-cyan-80: #5ba09a;
  --global-colors-cyan-90: #467c77;
  --global-colors-cyan-100: #365f5b;
  --global-colors-teal-10: #eff8f7;
  --global-colors-teal-20: #cce9e6;
  --global-colors-teal-30: #b4deda;
  --global-colors-teal-40: #91cfc9;
  --global-colors-teal-50: #7cc5bf;
  --global-colors-teal-60: #5bb7af;
  --global-colors-teal-70: #53a79f;
  --global-colors-teal-80: #41827c;
  --global-colors-teal-90: #326560;
  --global-colors-teal-100: #264d4a;
  --global-colors-lightBlue-10: #f1f9fe;
  --global-colors-lightBlue-20: #d3ebfc;
  --global-colors-lightBlue-30: #bee1fa;
  --global-colors-lightBlue-40: #a1d3f8;
  --global-colors-lightBlue-50: #8ecbf6;
  --global-colors-lightBlue-60: #72bef4;
  --global-colors-lightBlue-70: #68adde;
  --global-colors-lightBlue-80: #5187ad;
  --global-colors-lightBlue-90: #3f6986;
  --global-colors-lightBlue-100: #305066;
  --global-colors-blue-10: #eef4ff;
  --global-colors-blue-20: #d8e6fe;
  --global-colors-blue-30: #aacbff;
  --global-colors-blue-40: #78b0fd;
  --global-colors-blue-50: #4d93f7;
  --global-colors-blue-60: #246ee1;
  --global-colors-blue-70: #0b54ab;
  --global-colors-blue-80: #014186;
  --global-colors-blue-90: #032d60;
  --global-colors-blue-100: #001639;
  --global-colors-indigo-10: #f1f1ff;
  --global-colors-indigo-20: #d5d4fd;
  --global-colors-indigo-30: #c0bffd;
  --global-colors-indigo-40: #a4a2fc;
  --global-colors-indigo-50: #9290fb;
  --global-colors-indigo-60: #7774fa;
  --global-colors-indigo-70: #6c6ae4;
  --global-colors-indigo-80: #5452b2;
  --global-colors-indigo-90: #41408a;
  --global-colors-indigo-100: #323169;
  --global-colors-purple-10: #f2eeff;
  --global-colors-purple-20: #d5cbff;
  --global-colors-purple-30: #c1b1ff;
  --global-colors-purple-40: #a58eff;
  --global-colors-purple-50: #9378ff;
  --global-colors-purple-60: #7856ff;
  --global-colors-purple-70: #6d4ee8;
  --global-colors-purple-80: #553db5;
  --global-colors-purple-90: #422f8c;
  --global-colors-purple-100: #32246b;
  --global-colors-magenta-10: #faf2fc;
  --global-colors-magenta-20: #efd8f4;
  --global-colors-magenta-30: #e7c5ef;
  --global-colors-magenta-40: #dbaae8;
  --global-colors-magenta-50: #d599e3;
  --global-colors-magenta-60: #ca80dc;
  --global-colors-magenta-70: #b874c8;
  --global-colors-magenta-80: #8f5b9c;
  --global-colors-magenta-90: #6f4679;
  --global-colors-magenta-100: #55365c;
  --global-colors-burgundy-10: #f7eef1;
  --global-colors-burgundy-20: #e7ccd2;
  --global-colors-burgundy-30: #dcb3bc;
  --global-colors-burgundy-40: #cb909e;
  --global-colors-burgundy-50: #c17a8b;
  --global-colors-burgundy-60: #b2596e;
  --global-colors-burgundy-70: #a25164;
  --global-colors-burgundy-80: #7e3f4e;
  --global-colors-burgundy-90: #62313d;
  --global-colors-burgundy-100: #4b252e;
  --global-colors-white: #ffffff;
  --global-colors-black: #000000;
  --global-colors-gray-5: #fafafa;
  --global-colors-gray-10: #f6f6f6;
  --global-colors-gray-15: #f0f0f0;
  --global-colors-gray-20: #ebebeb;
  --global-colors-gray-30: #e0e0e0;
  --global-colors-gray-40: #d2d2d2;
  --global-colors-gray-50: #bbbbbb;
  --global-colors-gray-60: #959595;
  --global-colors-gray-70: #707070;
  --global-colors-gray-80: #424242;
  --global-colors-gray-90: #242424;

  --global-elevation-2: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 1px 2px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-4: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 2px 4px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-8: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 4px 8px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-16: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 8px 16px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-28: 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 14px 28px 0px rgb(from var(--global-colors-black) r g b / 24%);
  --global-elevation-64: 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 32px 64px 0px rgb(from var(--global-colors-black) r g b / 24%);

  --global-radius-50: 2px;
  --global-radius-100: 4px;
  --global-radius-200: 8px;
  --global-radius-300: 12px;
  --global-radius-400: 16px;
  --global-radius-full: 999px;

  --global-spacing-0: 0;
  --global-spacing-25: 0.0625rem;
  --global-spacing-50: 0.125rem;
  --global-spacing-100: 0.25rem;
  --global-spacing-150: 0.375rem;
  --global-spacing-200: 0.5rem;
  --global-spacing-250: 0.625rem;
  --global-spacing-300: 0.75rem;
  --global-spacing-400: 1rem;
  --global-spacing-500: 1.25rem;
  --global-spacing-600: 1.5rem;
  --global-spacing-800: 2rem;
  --global-spacing-1000: 2.5rem;
  --global-spacing-1200: 3rem;
  --global-spacing-1600: 4rem;
  --global-spacing-2000: 5rem;

  --global-typography-font-sans: Pretendard Variable, Pretendard, sans-serif;
  --global-typography-fontSize-100: 0.6875rem;
  --global-typography-fontSize-200: 0.75rem;
  --global-typography-fontSize-300: 0.875rem;
  --global-typography-fontSize-400: 1rem;
  --global-typography-fontSize-450: 1.125rem;
  --global-typography-fontSize-500: 1.25rem;
  --global-typography-fontSize-600: 1.5rem;
  --global-typography-fontSize-700: 2rem;
  --global-typography-fontSize-800: 2.5rem;
  --global-typography-fontWeight-thin: 100;
  --global-typography-fontWeight-extraLight: 200;
  --global-typography-fontWeight-light: 300;
  --global-typography-fontWeight-regular: 400;
  --global-typography-fontWeight-medium: 500;
  --global-typography-fontWeight-semiBold: 600;
  --global-typography-fontWeight-bold: 700;
  --global-typography-fontWeight-extraBold: 800;
  --global-typography-fontWeight-black: 900;
  --global-typography-lineHeight-100: 1rem;
  --global-typography-lineHeight-200: 1.125rem;
  --global-typography-lineHeight-300: 1.375rem;
  --global-typography-lineHeight-400: 1.5rem;
  --global-typography-lineHeight-450: 1.625rem;
  --global-typography-lineHeight-500: 1.75rem;
  --global-typography-lineHeight-600: 2.125rem;
  --global-typography-lineHeight-700: 2.5rem;
  --global-typography-lineHeight-800: 3.25rem;

  --semantic-color-background-1: var(--global-colors-white);
  --semantic-color-background-2: var(--global-colors-gray-5);
  --semantic-color-background-3: var(--global-colors-gray-10);
  --semantic-color-background-4: var(--global-colors-gray-20);
  --semantic-color-background-5: var(--global-colors-gray-90);
  --semantic-color-border-1: var(--global-colors-gray-30);
  --semantic-color-border-2: var(--global-colors-gray-40);
  --semantic-color-border-3: var(--global-colors-gray-50);
  --semantic-color-border-4: var(--global-colors-gray-60);
  --semantic-color-border-default: var(--global-colors-gray-15);
  --semantic-color-text-1: var(--global-colors-gray-90);
  --semantic-color-text-2: var(--global-colors-gray-80);
  --semantic-color-text-3: var(--global-colors-gray-70);
  --semantic-color-text-4: var(--global-colors-gray-60);
  --semantic-color-text-5: var(--global-colors-gray-50);
  --semantic-color-text-6: var(--global-colors-white);
  --semantic-color-support-error-1: var(--global-colors-red-10);
  --semantic-color-support-error-2: var(--global-colors-red-20);
  --semantic-color-support-error-3: var(--global-colors-red-50);
  --semantic-color-support-error-4: var(--global-colors-red-100);
  --semantic-color-support-warning-1: var(--global-colors-orange-10);
  --semantic-color-support-warning-2: var(--global-colors-orange-20);
  --semantic-color-support-warning-3: var(--global-colors-orange-50);
  --semantic-color-support-warning-4: var(--global-colors-orange-100);
  --semantic-color-support-success-1: var(--global-colors-green-10);
  --semantic-color-support-success-2: var(--global-colors-green-20);
  --semantic-color-support-success-3: var(--global-colors-green-50);
  --semantic-color-support-success-4: var(--global-colors-green-100);
  --semantic-color-support-info-1: var(--global-colors-primary-10);
  --semantic-color-support-info-2: var(--global-colors-primary-20);
  --semantic-color-support-info-3: var(--global-colors-primary-60);
  --semantic-color-support-info-4: var(--global-colors-primary-100);
  --semantic-color-focus: rgb(from var(--global-colors-primary-50) r g b / 20%);
  --semantic-color-icon-primary: var(--global-colors-gray-90);
  --semantic-color-icon-secondary: var(--global-colors-gray-70);
  --semantic-color-icon-tertiary: var(--global-colors-gray-50);
  --semantic-color-icon-on-color-default: var(--global-colors-white);
  --semantic-color-icon-on-color-disabled: var(--global-colors-gray-60);
  --semantic-color-icon-interactive: var(--global-colors-primary-60);
  --semantic-color-toggle-primary-1: var(--global-colors-primary-60);
  --semantic-color-toggle-primary-2: var(--global-colors-primary-70);
  --semantic-color-toggle-primary-3: var(--global-colors-primary-100);
  --semantic-color-toggle-disabled-bg: var(--global-colors-gray-20);
  --semantic-color-toggle-disabled-border: var(--global-colors-gray-40);
  --semantic-color-toggle-disabled-text: var(--global-colors-gray-60);
  --semantic-color-toggle-off-bg: var(--global-colors-gray-50);
  --semantic-color-toggle-off-hover: var(--global-colors-gray-60);
  --semantic-color-toggle-hover-bg: var(--global-colors-primary-10);

  --semantic-typography-heading-1-fontSize: var(--global-typography-fontSize-200);
  --semantic-typography-heading-1-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-1-lineHeight: var(--global-typography-lineHeight-200);
  --semantic-typography-heading-2-fontSize: var(--global-typography-fontSize-300);
  --semantic-typography-heading-2-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-2-lineHeight: var(--global-typography-lineHeight-300);
  --semantic-typography-heading-3-fontSize: var(--global-typography-fontSize-400);
  --semantic-typography-heading-3-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-3-lineHeight: var(--global-typography-lineHeight-400);
  --semantic-typography-heading-4-fontSize: var(--global-typography-fontSize-500);
  --semantic-typography-heading-4-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-4-lineHeight: var(--global-typography-lineHeight-500);
  --semantic-typography-heading-5-fontSize: var(--global-typography-fontSize-600);
  --semantic-typography-heading-5-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-5-lineHeight: var(--global-typography-lineHeight-600);
  --semantic-typography-heading-6-fontSize: var(--global-typography-fontSize-700);
  --semantic-typography-heading-6-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-6-lineHeight: var(--global-typography-lineHeight-700);
  --semantic-typography-heading-7-fontSize: var(--global-typography-fontSize-800);
  --semantic-typography-heading-7-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-7-lineHeight: var(--global-typography-lineHeight-800);
  --semantic-typography-body-1-fontSize: var(--global-typography-fontSize-200);
  --semantic-typography-body-1-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-1-lineHeight: var(--global-typography-lineHeight-200);
  --semantic-typography-body-2-fontSize: var(--global-typography-fontSize-300);
  --semantic-typography-body-2-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-2-lineHeight: var(--global-typography-lineHeight-300);
  --semantic-typography-body-3-fontSize: var(--global-typography-fontSize-400);
  --semantic-typography-body-3-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-3-lineHeight: var(--global-typography-lineHeight-400);
  --semantic-typography-body-4-fontSize: var(--global-typography-fontSize-450);
  --semantic-typography-body-4-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-4-lineHeight: var(--global-typography-lineHeight-450);
  --semantic-typography-caption-1-fontSize: var(--global-typography-fontSize-100);
  --semantic-typography-caption-1-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-caption-1-lineHeight: var(--global-typography-lineHeight-100);
  --semantic-typography-caption-2-fontSize: var(--global-typography-fontSize-200);
  --semantic-typography-caption-2-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-caption-2-lineHeight: var(--global-typography-lineHeight-200);
}

DataEffect 테마 (dataEffect.css)

@featuring-corp/design-tokens/style/dataEffect.css

:root {
  --global-colors-primary-10: #edf5ff;
  --global-colors-primary-20: #d0e2ff;
  --global-colors-primary-30: #a6c8ff;
  --global-colors-primary-40: #4c9aff;
  --global-colors-primary-50: #2684ff;
  --global-colors-primary-60: #0065ff;
  --global-colors-primary-70: #0052cc;
  --global-colors-primary-80: #0747a6;
  --global-colors-primary-90: #001d6c;
  --global-colors-primary-100: #001141;
  --global-colors-secondary-10: #fafafa;
  --global-colors-secondary-20: #f6f6f6;
  --global-colors-secondary-30: #ebebeb;
  --global-colors-secondary-40: #e0e0e0;
  --global-colors-secondary-50: #d2d2d2;
  --global-colors-secondary-60: #bbbbbb;
  --global-colors-secondary-70: #959595;
  --global-colors-secondary-80: #707070;
  --global-colors-secondary-90: #424242;
  --global-colors-secondary-100: #242424;
  --global-colors-red-10: #fcedea;
  --global-colors-red-20: #f6c8bf;
  --global-colors-red-30: #f2ae9f;
  --global-colors-red-40: #ec8974;
  --global-colors-red-50: #e97259;
  --global-colors-red-60: #e34f2f;
  --global-colors-red-70: #cf482b;
  --global-colors-red-80: #a13821;
  --global-colors-red-90: #7d2b1A;
  --global-colors-red-100: #5f2114;
  --global-colors-orange-10: #fcf2e6;
  --global-colors-orange-20: #f5d5b0;
  --global-colors-orange-30: #f0c18a;
  --global-colors-orange-40: #eaa554;
  --global-colors-orange-50: #e59333;
  --global-colors-orange-60: #df7800;
  --global-colors-orange-70: #cb6d00;
  --global-colors-orange-80: #9e5500;
  --global-colors-orange-90: #7b4200;
  --global-colors-orange-100: #5e3200;
  --global-colors-yellow-10: #fffbe6;
  --global-colors-yellow-20: #fff1b3;
  --global-colors-yellow-30: #ffea8e;
  --global-colors-yellow-40: #ffe15a;
  --global-colors-yellow-50: #ffdb3a;
  --global-colors-yellow-60: #ffd209;
  --global-colors-yellow-70: #e8bf08;
  --global-colors-yellow-80: #b59506;
  --global-colors-yellow-90: #8c7405;
  --global-colors-yellow-100: #6b5804;
  --global-colors-lightGreen-10: #f5faf0;
  --global-colors-lightGreen-20: #dfefd0;
  --global-colors-lightGreen-30: #d0e8b9;
  --global-colors-lightGreen-40: #bbdd98;
  --global-colors-lightGreen-50: #add685;
  --global-colors-lightGreen-60: #99cc66;
  --global-colors-lightGreen-70: #8bba5d;
  --global-colors-lightGreen-80: #6d9148;
  --global-colors-lightGreen-90: #547038;
  --global-colors-lightGreen-100: #40562b;
  --global-colors-green-10: #ebf6f1;
  --global-colors-green-20: #c2e4d4;
  --global-colors-green-30: #a5d7bf;
  --global-colors-green-40: #7cc5a2;
  --global-colors-green-50: #62ba90;
  --global-colors-green-60: #3ba974;
  --global-colors-green-70: #369a6a;
  --global-colors-green-80: #2a7852;
  --global-colors-green-90: #205d40;
  --global-colors-green-100: #194731;
  --global-colors-cyan-10: #f2fcfb;
  --global-colors-cyan-20: #d8f6f3;
  --global-colors-cyan-30: #c5f1ee;
  --global-colors-cyan-40: #aaebe6;
  --global-colors-cyan-50: #99e7e1;
  --global-colors-cyan-60: #80e1d9;
  --global-colors-cyan-70: #74cdc5;
  --global-colors-cyan-80: #5ba09a;
  --global-colors-cyan-90: #467c77;
  --global-colors-cyan-100: #365f5b;
  --global-colors-teal-10: #eff8f7;
  --global-colors-teal-20: #cce9e6;
  --global-colors-teal-30: #b4deda;
  --global-colors-teal-40: #91cfc9;
  --global-colors-teal-50: #7cc5bf;
  --global-colors-teal-60: #5bb7af;
  --global-colors-teal-70: #53a79f;
  --global-colors-teal-80: #41827c;
  --global-colors-teal-90: #326560;
  --global-colors-teal-100: #264d4a;
  --global-colors-lightBlue-10: #f1f9fe;
  --global-colors-lightBlue-20: #d3ebfc;
  --global-colors-lightBlue-30: #bee1fa;
  --global-colors-lightBlue-40: #a1d3f8;
  --global-colors-lightBlue-50: #8ecbf6;
  --global-colors-lightBlue-60: #72bef4;
  --global-colors-lightBlue-70: #68adde;
  --global-colors-lightBlue-80: #5187ad;
  --global-colors-lightBlue-90: #3f6986;
  --global-colors-lightBlue-100: #305066;
  --global-colors-blue-10: #eef4ff;
  --global-colors-blue-20: #d8e6fe;
  --global-colors-blue-30: #aacbff;
  --global-colors-blue-40: #78b0fd;
  --global-colors-blue-50: #4d93f7;
  --global-colors-blue-60: #246ee1;
  --global-colors-blue-70: #0b54ab;
  --global-colors-blue-80: #014186;
  --global-colors-blue-90: #032d60;
  --global-colors-blue-100: #001639;
  --global-colors-indigo-10: #f1f1ff;
  --global-colors-indigo-20: #d5d4fd;
  --global-colors-indigo-30: #c0bffd;
  --global-colors-indigo-40: #a4a2fc;
  --global-colors-indigo-50: #9290fb;
  --global-colors-indigo-60: #7774fa;
  --global-colors-indigo-70: #6c6ae4;
  --global-colors-indigo-80: #5452b2;
  --global-colors-indigo-90: #41408a;
  --global-colors-indigo-100: #323169;
  --global-colors-purple-10: #f2eeff;
  --global-colors-purple-20: #d5cbff;
  --global-colors-purple-30: #c1b1ff;
  --global-colors-purple-40: #a58eff;
  --global-colors-purple-50: #9378ff;
  --global-colors-purple-60: #7856ff;
  --global-colors-purple-70: #6d4ee8;
  --global-colors-purple-80: #553db5;
  --global-colors-purple-90: #422f8c;
  --global-colors-purple-100: #32246b;
  --global-colors-magenta-10: #faf2fc;
  --global-colors-magenta-20: #efd8f4;
  --global-colors-magenta-30: #e7c5ef;
  --global-colors-magenta-40: #dbaae8;
  --global-colors-magenta-50: #d599e3;
  --global-colors-magenta-60: #ca80dc;
  --global-colors-magenta-70: #b874c8;
  --global-colors-magenta-80: #8f5b9c;
  --global-colors-magenta-90: #6f4679;
  --global-colors-magenta-100: #55365c;
  --global-colors-burgundy-10: #f7eef1;
  --global-colors-burgundy-20: #e7ccd2;
  --global-colors-burgundy-30: #dcb3bc;
  --global-colors-burgundy-40: #cb909e;
  --global-colors-burgundy-50: #c17a8b;
  --global-colors-burgundy-60: #b2596e;
  --global-colors-burgundy-70: #a25164;
  --global-colors-burgundy-80: #7e3f4e;
  --global-colors-burgundy-90: #62313d;
  --global-colors-burgundy-100: #4b252e;
  --global-colors-white: #ffffff;
  --global-colors-black: #000000;
  --global-colors-gray-5: #fafafa;
  --global-colors-gray-10: #f6f6f6;
  --global-colors-gray-15: #f0f0f0;
  --global-colors-gray-20: #ebebeb;
  --global-colors-gray-30: #e0e0e0;
  --global-colors-gray-40: #d2d2d2;
  --global-colors-gray-50: #bbbbbb;
  --global-colors-gray-60: #959595;
  --global-colors-gray-70: #707070;
  --global-colors-gray-80: #424242;
  --global-colors-gray-90: #242424;

  --global-elevation-2: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 1px 2px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-4: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 2px 4px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-8: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 4px 8px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-16: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 8px 16px 0px rgb(from var(--global-colors-black) r g b / 14%);
  --global-elevation-28: 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 14px 28px 0px rgb(from var(--global-colors-black) r g b / 24%);
  --global-elevation-64: 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 32px 64px 0px rgb(from var(--global-colors-black) r g b / 24%);

  --global-radius-50: 2px;
  --global-radius-100: 4px;
  --global-radius-200: 8px;
  --global-radius-300: 12px;
  --global-radius-400: 16px;
  --global-radius-full: 999px;

  --global-spacing-0: 0;
  --global-spacing-25: 0.0625rem;
  --global-spacing-50: 0.125rem;
  --global-spacing-100: 0.25rem;
  --global-spacing-150: 0.375rem;
  --global-spacing-200: 0.5rem;
  --global-spacing-250: 0.625rem;
  --global-spacing-300: 0.75rem;
  --global-spacing-400: 1rem;
  --global-spacing-500: 1.25rem;
  --global-spacing-600: 1.5rem;
  --global-spacing-800: 2rem;
  --global-spacing-1000: 2.5rem;
  --global-spacing-1200: 3rem;
  --global-spacing-1600: 4rem;
  --global-spacing-2000: 5rem;

  --global-typography-font-sans: Pretendard Variable, Pretendard, sans-serif;
  --global-typography-fontSize-100: 0.6875rem;
  --global-typography-fontSize-200: 0.75rem;
  --global-typography-fontSize-300: 0.875rem;
  --global-typography-fontSize-400: 1rem;
  --global-typography-fontSize-450: 1.125rem;
  --global-typography-fontSize-500: 1.25rem;
  --global-typography-fontSize-600: 1.5rem;
  --global-typography-fontSize-700: 2rem;
  --global-typography-fontSize-800: 2.5rem;
  --global-typography-fontWeight-thin: 100;
  --global-typography-fontWeight-extraLight: 200;
  --global-typography-fontWeight-light: 300;
  --global-typography-fontWeight-regular: 400;
  --global-typography-fontWeight-medium: 500;
  --global-typography-fontWeight-semiBold: 600;
  --global-typography-fontWeight-bold: 700;
  --global-typography-fontWeight-extraBold: 800;
  --global-typography-fontWeight-black: 900;
  --global-typography-lineHeight-100: 1rem;
  --global-typography-lineHeight-200: 1.125rem;
  --global-typography-lineHeight-300: 1.375rem;
  --global-typography-lineHeight-400: 1.5rem;
  --global-typography-lineHeight-450: 1.625rem;
  --global-typography-lineHeight-500: 1.75rem;
  --global-typography-lineHeight-600: 2.125rem;
  --global-typography-lineHeight-700: 2.5rem;
  --global-typography-lineHeight-800: 3.25rem;

  --semantic-color-background-1: var(--global-colors-white);
  --semantic-color-background-2: var(--global-colors-gray-5);
  --semantic-color-background-3: var(--global-colors-gray-10);
  --semantic-color-background-4: var(--global-colors-gray-20);
  --semantic-color-background-5: var(--global-colors-gray-90);
  --semantic-color-border-1: var(--global-colors-gray-30);
  --semantic-color-border-2: var(--global-colors-gray-40);
  --semantic-color-border-3: var(--global-colors-gray-50);
  --semantic-color-border-4: var(--global-colors-gray-60);
  --semantic-color-border-default: var(--global-colors-gray-15);
  --semantic-color-text-1: var(--global-colors-gray-90);
  --semantic-color-text-2: var(--global-colors-gray-80);
  --semantic-color-text-3: var(--global-colors-gray-70);
  --semantic-color-text-4: var(--global-colors-gray-60);
  --semantic-color-text-5: var(--global-colors-gray-50);
  --semantic-color-text-6: var(--global-colors-white);
  --semantic-color-support-error-1: var(--global-colors-red-10);
  --semantic-color-support-error-2: var(--global-colors-red-20);
  --semantic-color-support-error-3: var(--global-colors-red-50);
  --semantic-color-support-error-4: var(--global-colors-red-100);
  --semantic-color-support-warning-1: var(--global-colors-orange-10);
  --semantic-color-support-warning-2: var(--global-colors-orange-20);
  --semantic-color-support-warning-3: var(--global-colors-orange-50);
  --semantic-color-support-warning-4: var(--global-colors-orange-100);
  --semantic-color-support-success-1: var(--global-colors-green-10);
  --semantic-color-support-success-2: var(--global-colors-green-20);
  --semantic-color-support-success-3: var(--global-colors-green-50);
  --semantic-color-support-success-4: var(--global-colors-green-100);
  --semantic-color-support-info-1: var(--global-colors-primary-10);
  --semantic-color-support-info-2: var(--global-colors-primary-20);
  --semantic-color-support-info-3: var(--global-colors-primary-60);
  --semantic-color-support-info-4: var(--global-colors-primary-100);
  --semantic-color-focus: rgb(from var(--global-colors-primary-50) r g b / 20%);
  --semantic-color-icon-primary: var(--global-colors-gray-90);
  --semantic-color-icon-secondary: var(--global-colors-gray-70);
  --semantic-color-icon-tertiary: var(--global-colors-gray-50);
  --semantic-color-icon-on-color-default: var(--global-colors-white);
  --semantic-color-icon-on-color-disabled: var(--global-colors-gray-60);
  --semantic-color-icon-interactive: var(--global-colors-primary-60);
  --semantic-color-toggle-primary-1: var(--global-colors-primary-60);
  --semantic-color-toggle-primary-2: var(--global-colors-primary-70);
  --semantic-color-toggle-primary-3: var(--global-colors-primary-100);
  --semantic-color-toggle-disabled-bg: var(--global-colors-gray-20);
  --semantic-color-toggle-disabled-border: var(--global-colors-gray-40);
  --semantic-color-toggle-disabled-text: var(--global-colors-gray-60);
  --semantic-color-toggle-off-bg: var(--global-colors-gray-50);
  --semantic-color-toggle-off-hover: var(--global-colors-gray-60);
  --semantic-color-toggle-hover-bg: var(--global-colors-primary-10);

  --semantic-typography-heading-1-fontSize: var(--global-typography-fontSize-200);
  --semantic-typography-heading-1-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-1-lineHeight: var(--global-typography-lineHeight-200);
  --semantic-typography-heading-2-fontSize: var(--global-typography-fontSize-300);
  --semantic-typography-heading-2-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-2-lineHeight: var(--global-typography-lineHeight-300);
  --semantic-typography-heading-3-fontSize: var(--global-typography-fontSize-400);
  --semantic-typography-heading-3-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-3-lineHeight: var(--global-typography-lineHeight-400);
  --semantic-typography-heading-4-fontSize: var(--global-typography-fontSize-500);
  --semantic-typography-heading-4-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-4-lineHeight: var(--global-typography-lineHeight-500);
  --semantic-typography-heading-5-fontSize: var(--global-typography-fontSize-600);
  --semantic-typography-heading-5-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-5-lineHeight: var(--global-typography-lineHeight-600);
  --semantic-typography-heading-6-fontSize: var(--global-typography-fontSize-700);
  --semantic-typography-heading-6-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-6-lineHeight: var(--global-typography-lineHeight-700);
  --semantic-typography-heading-7-fontSize: var(--global-typography-fontSize-800);
  --semantic-typography-heading-7-fontWeight: var(--global-typography-fontWeight-medium);
  --semantic-typography-heading-7-lineHeight: var(--global-typography-lineHeight-800);
  --semantic-typography-body-1-fontSize: var(--global-typography-fontSize-200);
  --semantic-typography-body-1-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-1-lineHeight: var(--global-typography-lineHeight-200);
  --semantic-typography-body-2-fontSize: var(--global-typography-fontSize-300);
  --semantic-typography-body-2-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-2-lineHeight: var(--global-typography-lineHeight-300);
  --semantic-typography-body-3-fontSize: var(--global-typography-fontSize-400);
  --semantic-typography-body-3-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-3-lineHeight: var(--global-typography-lineHeight-400);
  --semantic-typography-body-4-fontSize: var(--global-typography-fontSize-450);
  --semantic-typography-body-4-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-body-4-lineHeight: var(--global-typography-lineHeight-450);
  --semantic-typography-caption-1-fontSize: var(--global-typography-fontSize-100);
  --semantic-typography-caption-1-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-caption-1-lineHeight: var(--global-typography-lineHeight-100);
  --semantic-typography-caption-2-fontSize: var(--global-typography-fontSize-200);
  --semantic-typography-caption-2-fontWeight: var(--global-typography-fontWeight-regular);
  --semantic-typography-caption-2-lineHeight: var(--global-typography-lineHeight-200);
}

Design Tokens

@featuring-corp/design-tokens — 1,000개 이상의 디자인 토큰 (색상, 간격, 타이포그래피, 반지름, 그림자)

Spacing

일관된 레이아웃과 간격을 위한 스페이싱 토큰. spacing-0(0px)부터 spacing-2000(80px)까지 제공.

On this page

UsageGlobal ColorsFeaturing PrimaryDataEffect PrimarySecondaryGray (Neutral)Color PaletteSemantic ColorsBackgroundBorderTextSupport ErrorSupport WarningSupport SuccessSupport InfoFocusIconToggleCSS 파일로 사용하기Featuring 테마DataEffect 테마전체 CSS 토큰 목록Featuring 테마 (featuring.css)DataEffect 테마 (dataEffect.css)