색상
Soon UI Design 색상 시스템은 디자인 일관성과 커스터마이징의 유연성을 만족시키기 위해 설계되었습니다.
총 28종의 색상군과 1~10단계의 명도 시스템을 바탕으로, 토큰 기반 설계를 적용하여 디자인 시스템을 구성합니다.
각 색상은
컴포넌트의 props 중
총 28종의 색상군과 1~10단계의 명도 시스템을 바탕으로, 토큰 기반 설계를 적용하여 디자인 시스템을 구성합니다.
각 색상은
red-6
blue-3
forest-5
와 같이 색상군과 명도 단계를 통해 표현됩니다.컴포넌트의 props 중
color
background
borderColor
등에 색상이름을 사용하여 색상지정이 가능합니다.색상 시스템
색상 시스템은 3개의 계층구조로 나뉩니다.
| 색상군별로 정의된 1~10단계의 명도 팔레트 | 컴포넌트별 기본 색상 매핑 | 의미 기반 색상 (danger, warning, info, success)을 특정 색상군에 연결해 상태 표현에 활용 |
기본 팔레트
Red
강렬하고 주목도가 높은 색상red-1#fff1f0
red-2#ffccc7
red-3#ffa39e
red-4#ff7875
red-5#ff4d4f
red-6#f5222d
red-7#cf1322
red-8#a8071a
red-9#820014
red-10#5c0011
Rose
부드럽고 로맨틱한 분홍색rose-1#fff0f6
rose-2#ffd6e7
rose-3#ffadd2
rose-4#ff85c0
rose-5#f759ab
rose-6#eb2f96
rose-7#c41d7f
rose-8#9e1068
rose-9#780650
rose-10#520339
Coral
따뜻하고 생동감 있는 산호색coral-1#fff2f0
coral-2#ffd8cc
coral-3#ffb3a3
coral-4#ff8f7a
coral-5#f86f4e
coral-6#eb4d28
coral-7#c7381a
coral-8#a32b13
coral-9#7f1f0d
coral-10#5c1508
Orange
활기차고 에너지 넘치는 색상orange-1#fff7e6
orange-2#ffe7ba
orange-3#ffd591
orange-4#ffc069
orange-5#ffa940
orange-6#fa8c16
orange-7#d46b08
orange-8#ad4e00
orange-9#873800
orange-10#612500
Volcano
강렬한 붉은 오렌지색volcano-1#fff2e8
volcano-2#ffd8bf
volcano-3#ffbb96
volcano-4#ff9c6e
volcano-5#ff7a45
volcano-6#fa541c
volcano-7#d4380d
volcano-8#ad2102
volcano-9#871400
volcano-10#610b00
Apricot
부드러운 살구색apricot-1#fff9f0
apricot-2#ffe3c2
apricot-3#ffce9c
apricot-4#ffb875
apricot-5#ffa14f
apricot-6#f58a2e
apricot-7#cc6c19
apricot-8#a3560f
apricot-9#7a4008
apricot-10#522b03
Yellow
밝고 경쾌한 노란색yellow-1#feffe6
yellow-2#ffffb8
yellow-3#fffb8f
yellow-4#fff566
yellow-5#ffec3d
yellow-6#fadb14
yellow-7#d4b106
yellow-8#ad8b00
yellow-9#876800
yellow-10#614700
Gold
고급스러운 금색gold-1#fffbe6
gold-2#fff1b8
gold-3#ffe58f
gold-4#ffd666
gold-5#ffc53d
gold-6#faad14
gold-7#d48806
gold-8#ad6800
gold-9#874d00
gold-10#613400
Amber
따뜻한 황갈색amber-1#fff8e1
amber-2#ffecb3
amber-3#ffe082
amber-4#ffd54f
amber-5#ffca28
amber-6#ffc107
amber-7#ffa000
amber-8#ff8f00
amber-9#ff6f00
amber-10#e65100
Green
자연스러운 녹색green-1#f6ffed
green-2#d9f7be
green-3#b7eb8f
green-4#95de64
green-5#73d13d
green-6#52c41a
green-7#389e0d
green-8#237804
green-9#135200
green-10#092b00
Lime
선명한 연두색lime-1#fcffe6
lime-2#f4ffb8
lime-3#eaff8f
lime-4#d3f261
lime-5#bae637
lime-6#a0d911
lime-7#7cb305
lime-8#5b8c00
lime-9#3f6600
lime-10#254000
Mint
상쾌한 민트색mint-1#e6fff9
mint-2#b5f5ec
mint-3#87e8de
mint-4#5cdbd3
mint-5#36cfc9
mint-6#13c2c2
mint-7#08979c
mint-8#006d75
mint-9#00474f
mint-10#002329
Blue
신뢰감 있는 파란색blue-1#e6f4ff
blue-2#bae0ff
blue-3#91caff
blue-4#69b1ff
blue-5#4096ff
blue-6#1677ff
blue-7#0958d9
blue-8#003eb3
blue-9#002c8c
blue-10#001d66
Sky
맑은 하늘색sky-1#f0fbff
sky-2#c2f1ff
sky-3#99e6ff
sky-4#6fdbff
sky-5#46d0ff
sky-6#1ac4ff
sky-7#009edb
sky-8#0079b0
sky-9#005385
sky-10#002e5a
Cerulean
깊은 하늘색cerulean-1#e6faff
cerulean-2#b3ecff
cerulean-3#80ddff
cerulean-4#4dcfff
cerulean-5#1ac0ff
cerulean-6#00a6e6
cerulean-7#0088bf
cerulean-8#006a99
cerulean-9#004c73
cerulean-10#002f4d
Indigo
고급스러운 남색indigo-1#f0f5ff
indigo-2#d6e4ff
indigo-3#adc8ff
indigo-4#84a9ff
indigo-5#6690ff
indigo-6#3366ff
indigo-7#254edb
indigo-8#1939b7
indigo-9#102693
indigo-10#091a7a
Cobalt
선명한 코발트색cobalt-1#edf6ff
cobalt-2#cce4ff
cobalt-3#99c9ff
cobalt-4#66adff
cobalt-5#338fff
cobalt-6#006bff
cobalt-7#0054cc
cobalt-8#003e99
cobalt-9#002966
cobalt-10#001433
Navy
깊이감 있는 남색navy-1#f0f4f8
navy-2#d6deea
navy-3#adc1d8
navy-4#84a3c6
navy-5#5b86b4
navy-6#346aa3
navy-7#245385
navy-8#183d66
navy-9#0f2947
navy-10#081726
Purple
고귀한 보라색purple-1#f9f0ff
purple-2#efdbff
purple-3#d3adf7
purple-4#b37feb
purple-5#9254de
purple-6#722ed1
purple-7#531dab
purple-8#391085
purple-9#22075e
purple-10#120338
Plum
깊은 자주색plum-1#fbeeff
plum-2#e7c7f3
plum-3#d3a0e6
plum-4#bf79d9
plum-5#ab52cc
plum-6#973bb7
plum-7#752e93
plum-8#541f6e
plum-9#39144a
plum-10#1f0a26
Orchid
우아한 난초색orchid-1#fef4ff
orchid-2#f5d9f8
orchid-3#ecbef1
orchid-4#e2a3ea
orchid-5#d988e3
orchid-6#d06ddc
orchid-7#a856b2
orchid-8#803f88
orchid-9#58285e
orchid-10#301034
Forest
깊은 숲색forest-1#f0f7f0
forest-2#cce3cc
forest-3#a6cca6
forest-4#80b380
forest-5#5c995c
forest-6#387f38
forest-7#2d662d
forest-8#224c22
forest-9#173317
forest-10#0c1a0c
Sage
차분한 세이지색sage-1#f2f4f1
sage-2#dde2db
sage-3#c7cfc4
sage-4#b1bcad
sage-5#9ba996
sage-6#85957f
sage-7#6f7d69
sage-8#596553
sage-9#434d3e
sage-10#2c3428
Neutral
중립적인 회색neutral-1#ffffff
neutral-2#f5f5f5
neutral-3#e0e0e0
neutral-4#c2c2c2
neutral-5#a3a3a3
neutral-6#858585
neutral-7#666666
neutral-8#4d4d4d
neutral-9#2e2e2e
neutral-10#000000
Warm Gray
따뜻한 회색warm-gray-1#fdfcfa
warm-gray-2#f5f2ed
warm-gray-3#e8e3db
warm-gray-4#d5cdc2
warm-gray-5#bfb5a7
warm-gray-6#a69c8d
warm-gray-7#8c8274
warm-gray-8#73685c
warm-gray-9#594f44
warm-gray-10#40362c
Cool Gray
차가운 회색cool-gray-1#fbfcfd
cool-gray-2#f2f4f7
cool-gray-3#e3e7ed
cool-gray-4#cfd4dd
cool-gray-5#b7bfcc
cool-gray-6#9ea7b8
cool-gray-7#858fa3
cool-gray-8#6b758b
cool-gray-9#515a70
cool-gray-10#373f52
테마 커스텀
SoonUIDesign 컴포넌트에서 제공하는 테마 기능을 사용하여 커스텀 테마를 적용할 수 있습니다.
Base Palette와 Component Palette를 커스텀 테마에 적용할 수 있습니다.
Base Palette와 Component Palette를 커스텀 테마에 적용할 수 있습니다.
"use client";
import { useState } from "react";
import { SoonUIDesign, Button } from "sud-ui";
const customTheme = {
colors: {
ocean: {
1: "#e6f7ff",
2: "#b3e5ff",
3: "#80d3ff",
4: "#4dc2ff",
5: "#1ab0ff",
6: "#0096e6",
7: "#007abf",
8: "#005f99",
9: "#004473",
10: "#00294d"
}
},
components: {
button: {
primary: {
bg: "ocean-6",
txt: "white-10",
border: "ocean-7"
}
}
}
};
const darkTheme = {
colors: {
neutral: {
1: "#1a1a1a",
10: "#ffffff"
}
}
};
export default function App() {
const [isDarkMode, setIsDarkMode] = useState(false);
return (
<SoonUIDesign
theme={customTheme}
darkTheme={darkTheme}
isDarkMode={isDarkMode}
>
<div style={{ padding: 20 }}>
<Button type="primary" onClick={() => setIsDarkMode(!isDarkMode)}>
다크모드 전환
</Button>
</div>
</SoonUIDesign>
);
}