# 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**:
![Dashboard View](/Users/light/.gemini/antigravity/brain/9dc672eb-e699-4b4a-8834-f71fa81165a9/dashboard_view_1764110406679.png)

## 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',
      }
    },
  },
}
```