---
name: Precision Enterprise AI
colors:
  surface: '#f9f9ff'
  surface-dim: '#d2daf0'
  surface-bright: '#f9f9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f1f3ff'
  surface-container: '#e9edff'
  surface-container-high: '#e0e8ff'
  surface-container-highest: '#dbe2f9'
  on-surface: '#141b2c'
  on-surface-variant: '#414751'
  inverse-surface: '#293041'
  inverse-on-surface: '#edf0ff'
  outline: '#717782'
  outline-variant: '#c1c7d3'
  surface-tint: '#0060a9'
  primary: '#004e8b'
  on-primary: '#ffffff'
  primary-container: '#0066b3'
  on-primary-container: '#d2e3ff'
  inverse-primary: '#a2c9ff'
  secondary: '#5427e6'
  on-secondary: '#ffffff'
  secondary-container: '#6d4aff'
  on-secondary-container: '#f3edff'
  tertiary: '#00583b'
  on-tertiary: '#ffffff'
  tertiary-container: '#00734e'
  on-tertiary-container: '#8ef7c3'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d3e4ff'
  primary-fixed-dim: '#a2c9ff'
  on-primary-fixed: '#001c38'
  on-primary-fixed-variant: '#004881'
  secondary-fixed: '#e5deff'
  secondary-fixed-dim: '#c9bfff'
  on-secondary-fixed: '#1b0063'
  on-secondary-fixed-variant: '#4500d8'
  tertiary-fixed: '#8ef7c4'
  tertiary-fixed-dim: '#72daa9'
  on-tertiary-fixed: '#002113'
  on-tertiary-fixed-variant: '#005236'
  background: '#f9f9ff'
  on-background: '#141b2c'
  surface-variant: '#dbe2f9'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: '700'
    lineHeight: 44px
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  title-sm:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 28px
  body-base:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 18px
  label-md:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.02em
  label-xs:
    fontFamily: Geist
    fontSize: 11px
    fontWeight: '500'
    lineHeight: 14px
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  base: 4px
  container-padding: 24px
  gutter: 16px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 24px
---

## Brand & Style
This design system is engineered for a high-stakes B2B enterprise environment, specifically tailored for exhibition management. The brand personality is rooted in **reliability, precision, and institutional authority**, reflecting the scale of the KINTEX infrastructure.

The design style follows a **Corporate / Modern** aesthetic with a focus on data density and functional clarity. It prioritizes information hierarchy to support rapid decision-making in complex workflows. The UI utilizes a structured grid, high-contrast typography, and purposeful use of color to distinguish between human-managed data and AI-generated suggestions. The emotional response should be one of "controlled efficiency"—where the user feels empowered by the tool's intelligence rather than overwhelmed by its complexity.

## Colors
The palette is dominated by **KINTEX Blue (#0066B3)**, establishing a professional and trustworthy foundation. A specialized **AI Accent (Purple #6D4AFF)** is introduced specifically to highlight features where the system provides drafts, suggestions, or automated logic.

- **Primary Tier**: Used for core actions and active states.
- **AI Tier**: Reserved for generative elements and automated labels.
- **Canvas Tier**: A deep charcoal surface (#1C2536) is utilized for the "Editor Canvas" to provide a high-contrast workspace for layout planning and spatial management, separating the "work" area from the "management" UI.
- **Neutrals**: A sophisticated range of grays from #F9FAFB (backgrounds) to #101828 (primary text) ensures deep legibility and clean separation of UI layers.

## Typography
This design system utilizes **Inter** as the primary typeface for its exceptional legibility in high-density data environments, serving as a modern surrogate for Pretendard. **Geist** is used for labels and monospaced technical data to reinforce the "AI/Systems" feel.

The typographic scale is optimized for SaaS:
- **High Density**: The base body size is set to **14px** to allow more data to be visible on the screen simultaneously.
- **Weight Contrast**: Bold weights (600/700) are used strictly for headings and critical status indicators to guide the eye quickly.
- **Technical Precision**: Labels and captions use a slightly tighter tracking and smaller scale (11px-12px) for metadata that supports primary content.

## Layout & Spacing
The layout follows a **Fluid Grid** model with a 4px baseline shift to ensure consistent alignment. 

- **Desktop**: 12-column grid with 16px gutters and 24px outer margins.
- **Information Density**: Padding in data tables and property panels is kept tight (8px to 12px) to maximize content visibility without sacrificing touch/click targets.
- **Editor Canvas**: Operates on a dedicated 8px or 16px snap-to-grid system for precise placement of exhibition booths and assets.
- **Reflow**: On tablet devices, the side navigation collapses into an icon-only rail, while the 12-column grid transitions to an 8-column layout.

## Elevation & Depth
The system uses **Tonal Layers** rather than heavy shadows to maintain a clean, professional workspace. 

- **Level 0 (Base)**: Background surface (#F9FAFB).
- **Level 1 (Cards/Sections)**: White surface with a thin 1px border (#E4E7EC). No shadow.
- **Level 2 (Modals/Popovers)**: White surface with a soft, neutral ambient shadow (Y: 4px, Blur: 12px, 10% opacity) to provide focus.
- **The Editor Surface**: Uses a "Reverse Elevation" strategy where the canvas is the lowest level (dark background), and tools/panels float above it with subtle glassmorphism effects (10px backdrop blur) to maintain context of the underlying layout.

## Shapes
A **Soft (0.25rem)** roundedness is applied throughout the system to balance professional rigor with modern software aesthetics.

- **Small Components**: Checkboxes, inputs, and small buttons use the 4px (0.25rem) radius.
- **Large Components**: Cards and modals scale up to 8px (0.5rem) to soften the overall interface.
- **AI Elements**: Components specifically related to AI (Drafts, Suggestions) may utilize a slightly more organic feel, but must stay within the system's 8px maximum limit to maintain visual cohesion.

## Components
- **StatusBadge**: Follows a strict semantic progression: Gray (Draft) -> Blue (In Review) -> Purple (AI Optimized) -> Green (Approved) -> Red (Violation/Conflict).
- **DdayChip**: A compact, high-contrast tag used in lists to show time-sensitive deadlines (e.g., "D-15"). Uses a bold background and white text.
- **AI Labels**: Elements generated or drafted by the system are marked with a Purple (#6D4AFF) hairline outline and a small sparkle icon prefix.
- **ViolationFlag**: High-visibility red indicator (#D92D20) used in the canvas to mark booth placement errors or safety regulation breaches.
- **Input Fields**: Minimal styling with a 1px border. On focus, the border transitions to KINTEX Blue with a soft 2px outer glow.
- **Buttons**:
  - **Primary**: Solid KINTEX Blue.
  - **Secondary**: Outlined Blue or Gray.
  - **AI Action**: Solid Purple with a subtle gradient to indicate "Generative" capability.
- **Cards**: Use a white background, 1px border, and no shadow. The header of the card should have a 4px padding-left accent color matching its status.