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:

// 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',
      }
    },
  },
}

2.7 KiB Raw Blame History