디자인 시스템 컬러 팔레트

86. 디자인 시스템 컬러 팔레트 Define a comprehensive color system: **Primary Colors**: - Primary: Main brand color - Generate scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 - 500 = base, lighter above, darker below **Secondary Colors**: - Accent/Secondary brand color - Same scale generation - Used for secondary actions, highlights **Neutral/Gray Scale**: - From white to black - 50 (near white) to 950 (near black) - Used for text, backgrounds, borders - Choose warm, cool, or pure gray **Semantic Colors**: **Success (Green)**: - 50-950 scale - 500: main success green - Use: confirmations, positive feedback **Warning (Amber/Yellow)**: - 50-950 scale - 500: main warning color - Use: cautions, alerts **Error (Red)**: - 50-950 scale - 500: main error red - Use: errors, destructive actions **Info (Blue)**: - 50-950 scale - 500: informational blue - Use: information, tips **Background Colors**: - background: main page background - surface: cards, elevated elements - overlay: modal backdrops **Text Colors**: - foreground: primary text - muted: secondary text - disabled: disabled state text **Border Colors**: - border: default borders - ring: focus rings - divider: separators **Dark Mode Mappings**: - Each color has light/dark variant - Or invert the scale - Semantic colors adjust accordingly **Color Tokens (CSS Variables)**: ```css:root { --color-primary-500: #3b82f6; --color-success-500: #22c55e; /* etc. */ } **Accessibility**: - Contrast ratios documented - AA minimum (4.5:1 text) - AAA preferred (7:1) Tech: Tailwind config + CSS variables