zio
4cd83bdfe1
- 스택 확정: PLANNING v1.2 §8(FastAPI/Next.js→Spring Boot+MyBatis/React), CLAUDE.md 기술스택 섹션 - 구현 에이전트 5종: kintex-backend-dev·frontend-dev·db-engineer·qa·devops-dev - kintex-impl-orchestrator 스킬 + docs/IMPLEMENTATION_BACKLOG.md(Phase0~5) - designer에 Stitch 학습·정합 트랙, developer 스택 갱신 - Stitch export 텍스트 참조(code.html·DESIGN.md 3종·proposal.md) 추가, 스크린샷 PNG는 gitignore Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
7.6 KiB
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Precision Enterprise AI |
|
|
|
|
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.