kintex/stitch_kintex_ai_system_architect/kintex_nexus/DESIGN.md

name	colors	typography	rounded	spacing
Kintex Nexus	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 surface-border status-active status-pending table-header #f8f9fa #d9dadb #f8f9fa #ffffff #f3f4f5 #edeeef #e7e8e9 #e1e3e4 #191c1d #424751 #2e3132 #f0f1f2 #727782 #c2c6d3 #115fac #00427d #ffffff #0059a6 #b6d1ff #a6c8ff #39608d #ffffff #a6ccff #2e5682 #8a0002 #ffffff #b60004 #ffc1b8 #ba1a1a #ffffff #ffdad6 #93000a #d5e3ff #a6c8ff #001c3b #004786 #d2e4ff #a3c9fc #001c37 #1e4974 #ffdad5 #ffb4a9 #410000 #930002 #f8f9fa #191c1d #e1e3e4 #E5E7EB #10B981 #F59E0B #F1F5F9	headline-lg headline-lg-mobile headline-md body-lg body-md body-sm label-md mono-data fontFamily fontSize fontWeight lineHeight letterSpacing Hanken Grotesk 30px 700 38px -0.02em fontFamily fontSize fontWeight lineHeight Hanken Grotesk 24px 700 32px fontFamily fontSize fontWeight lineHeight Hanken Grotesk 20px 600 28px fontFamily fontSize fontWeight lineHeight Hanken Grotesk 16px 400 24px fontFamily fontSize fontWeight lineHeight Hanken Grotesk 14px 400 20px fontFamily fontSize fontWeight lineHeight Hanken Grotesk 13px 400 18px fontFamily fontSize fontWeight lineHeight letterSpacing Hanken Grotesk 12px 600 16px 0.05em fontFamily fontSize fontWeight lineHeight jetbrainsMono 13px 400 18px	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	container-max margin-desktop margin-mobile gutter stack-sm stack-md stack-lg 1440px 32px 16px 24px 8px 16px 24px

Brand & Style

The design system is engineered for the high-density requirements of exhibition management and administrative oversight. It targets professional operators and event organizers who require a high degree of "information scent" and clarity.

The aesthetic follows a Corporate / Modern movement, prioritizing structural integrity and functional density over decorative flourishes. It utilizes a balanced combination of high-density data visualization and clear, hierarchical navigation. The UI evokes a sense of reliability and institutional authority, reflecting the physical scale of the KINTEX venue. The layout is systematic, utilizing a clean "dashboard-first" philosophy where every pixel serves a purpose in decision-making and logistics management.

Colors

The palette is anchored by Corporate Blue (#0059A6), representing the established brand identity and used for primary actions, navigation headers, and brand-critical elements. A Secondary Blue (#6389B8) acts as a supportive hue for data visualization and secondary interactive states, bridging the gap between brand identity and UI utility.

Tertiary Red (#E32219) is reserved strictly for high-urgency alerts, error states, and critical "Delete" or "Cancel" actions to ensure it maintains its semantic impact. The neutral foundation relies on Light Gray (#F8F9FA) for background surfaces to reduce eye strain during long working sessions, with darker grays used for structural borders and high-contrast text.

Typography

This design system uses Hanken Grotesk for its exceptional legibility in dense administrative interfaces. It provides a sharp, contemporary feel that aligns with the "Pretendard" aesthetic requested while offering superior geometric balance for international stakeholders.

• Headlines: Use Bold weights for section titles to establish a strong visual anchor.
• Body: Standard body text is set at 14px (md) to maximize information density without compromising readability.
• Data Sets: For numerical values, ID strings, or technical logs within tables, the JetBrains Mono font (mono-data) is recommended to ensure clear distinction between characters and aligned columns.
• Labels: Small, uppercase labels with increased letter spacing are used for table headers and category tags to differentiate them from interactive content.

Layout & Spacing

The layout utilizes a Fixed-Fluid Hybrid Grid. The main sidebar navigation is fixed (240px), while the content area expands to a maximum of 1440px to ensure data tables don't become excessively wide and difficult to scan horizontally.

A base-8 spacing system is strictly enforced to maintain rhythmic consistency.

• Desktop: 12-column grid with 24px gutters.
• Tablet: 8-column grid with 20px gutters.
• Mobile: 4-column grid with 16px margins.

Content should reflow into single-column stacks on mobile devices. For complex data tables, horizontal scrolling is the preferred pattern over hidden columns to ensure all administrative data remains accessible.

Elevation & Depth

To maintain a "Professional & Functional" aesthetic, this design system avoids heavy shadows. Depth is primarily conveyed through Tonal Layers and Low-Contrast Outlines.

• Level 0 (Base): Light Gray background (#F8F9FA).
• Level 1 (Cards/Containers): White background with a 1px border (#E5E7EB). No shadow.
• Level 2 (Modals/Dropdowns): White background with a subtle, tight ambient shadow (Blur 8px, Y 4px, Opacity 5%) to indicate temporary interaction layers.
• Interactive Elements: Buttons and inputs use a flat design with a 1px solid stroke. Primary buttons use a solid fill to pop against the outlined secondary elements.

Shapes

The design system employs a Soft (0.25rem) roundedness level. This subtle rounding softens the industrial nature of the dashboard while maintaining a professional, structured appearance.

• Inputs and Buttons: 4px (0.25rem) radius.
• Cards and Containers: 8px (0.5rem) radius.
• Status Tags: Fully rounded (pill) to clearly distinguish them from interactive buttons or input fields.

Components

Data Tables

Tables are the heart of the system. Use a "Zebra Stripe" pattern (alternate rows in #F9FAFB) for long datasets. Headers must be "Sticky" during scroll and styled with a light gray background and label-md typography.

Analytics Charts

Use a minimalist approach. Grid lines should be faint (#F3F4F6). Primary data series should use Corporate Blue (#0059A6), with secondary series in #6389B8 and #94A3B8. Avoid 3D effects.

Status Cards

Exhibition status cards should feature a prominent "Current State" indicator (e.g., "Active," "Completed," "Scheduled") using semantic background tints and dark text for accessibility.

Buttons

• Primary: Solid #0059A6 with white text.
• Secondary: White background with #E5E7EB border and #374151 text.
• Destructive: Solid #E32219 for critical admin actions.

Administrative Controls

Toggle switches should be used for binary states (e.g., "Public Visibility"). Checkboxes are preferred for multi-select actions in tables. Input fields should have a distinct focus state using a 2px Corporate Blue border.