kintex/stitch_kintex_ai_system_architect/precision_enterprise_ai/DESIGN.md

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