74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
|
# CodeBridgeExy Design Tone & Manner
|
||
|
|
|
||
|
|
## 1. Overview
|
||
|
|
This document defines the visual style and design tokens extracted from the CodeBridgeExy Dashboard (`https://dev.codebridge-x.com/dashboard`). The design aims for a clean, modern, and professional look suitable for an enterprise ERP system.
|
||
|
|
|
||
|
|
**Reference Screenshot**:
|
||
|
|
|
||
|
|
|
||
|
|
## 2. Color Palette
|
||
|
|
|
||
|
|
### Backgrounds
|
||
|
|
* **Page Background**: `rgb(250, 250, 250)` (Light Gray / Off-White) - Creates a clean canvas.
|
||
|
|
* **Card/Container Background**: `White` (`#ffffff`) or very light transparency - Used for content areas to separate them from the page background.
|
||
|
|
|
||
|
|
### Text Colors
|
||
|
|
* **Headings**: `rgb(255, 255, 255)` (White) - Primarily used on dark sidebars or headers.
|
||
|
|
* **Body Text**: `oklch(0.551 0.027 264.364)` (Dark Slate Blue/Gray) - High contrast for readability on light backgrounds.
|
||
|
|
* **Muted Text**: Gray-400/500 (Inferred) - For secondary labels.
|
||
|
|
|
||
|
|
### Brand Colors
|
||
|
|
* **Primary Blue**: (Inferred from "경영분석" button) - Likely a standard corporate blue (e.g., Tailwind `blue-600` or `indigo-600`). Used for primary actions and active states.
|
||
|
|
|
||
|
|
## 3. Typography
|
||
|
|
|
||
|
|
### Font Family
|
||
|
|
* **Primary**: `Pretendard`
|
||
|
|
* **Fallback**: `-apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif`
|
||
|
|
|
||
|
|
### Weights
|
||
|
|
* **Regular**: 400 (Body text)
|
||
|
|
* **Medium/Bold**: 500/700 (Headings, Buttons)
|
||
|
|
|
||
|
|
## 4. UI Components & Layout
|
||
|
|
|
||
|
|
### Cards
|
||
|
|
* **Border Radius**: `12px` (Rounded-lg/xl) - Soft, modern feel.
|
||
|
|
* **Shadow**: Subtle shadows (e.g., `shadow-sm` or `shadow-md`) to lift content off the background.
|
||
|
|
* **Padding**: Spacious internal padding to avoid clutter.
|
||
|
|
|
||
|
|
### Buttons
|
||
|
|
* **Shape**: Rounded corners (matching cards, likely `8px` or `12px`).
|
||
|
|
* **Style**: Solid background for primary, outlined/ghost for secondary.
|
||
|
|
|
||
|
|
### Layout Density
|
||
|
|
* **Spacious**: The design uses whitespace effectively to separate sections, typical of modern dashboards.
|
||
|
|
|
||
|
|
## 5. Implementation Guide (Tailwind CSS)
|
||
|
|
|
||
|
|
To match this tone in the new Sales Commission System:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// tailwind.config.js
|
||
|
|
module.exports = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
background: 'rgb(250, 250, 250)',
|
||
|
|
foreground: 'oklch(0.551 0.027 264.364)', // Adjust to closest Hex
|
||
|
|
primary: {
|
||
|
|
DEFAULT: '#2563eb', // Placeholder for Brand Blue
|
||
|
|
foreground: '#ffffff',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
sans: ['Pretendard', 'sans-serif'],
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
'card': '12px',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
```
|