Design System & UI Guardrails
Relevant source files
The following files were used as context for generating this wiki page:
The HEX-YT-INTEL design system is a premium, technical-first visual framework engineered for an elite YouTube content synthesis engine. It prioritizes "Taste as a Moat," moving away from generic AI aesthetics to provide a disciplined, high-density "Synthesis Console" experience. The system is built on a dark-mode default architecture that frames complex intelligence extractions—such as multi-dimensional matrices and timelines—using precise outline styling and multi-layered shadows.
The primary objective of this system is to handle massive amounts of content density without overwhelming the user. It establishes a "technical instrument" vibe through a restricted color palette, specific typographic hierarchy, and semantic motion. All components are governed by strict hexagonal architectural principles, ensuring that the presentation layer remains pure and stateless.
Sources: design-system/design-brief.md, design-system/HEX-YT-INTEL Design System (1)/README.md
Visual Foundations & Color Logic
The design system utilizes a "Deep Obsidian-Slate" aesthetic to reduce eye strain during deep analysis. The palette is intentionally frozen to maintain brand discipline, with a single high-contrast accent color reserved for active states and critical intelligence signals.
Color Palette
| Semantic Role | Hex Code | Usage |
|---|---|---|
| Canvas/BG | #11141D | Default dark background |
| Primary Surface | #1A1F2B | Core card and section surfaces |
| Electric Cyan | #06B6D4 | Only accent: active states, streaming, CTAs |
| Neon Coral | #FF6B6B | Strictly for warnings/critical flags |
| Borders | rgba(255,255,255,0.1) | Subtle translucent outlines |
Sources: design-system/claude-design-system-prompt.md, design-system/HEX-YT-INTEL Design System (1)/README.md
Styling Guardrails
- Outline Styling: All cards and sections must have a subtle 1px translucent border.
- Beautiful Shadows: UI elements must use multi-layered "Figma-style" smooth drop shadows (3-4 box-shadows combined) instead of harsh single shadows.
- Glassmorphism: Reserved only for floating headers or navigation; blur must be kept between 5-8% to preserve text legibility.
Sources: design-system/design-brief.md, design-system/constraints.md
Typographic Hierarchy
The system uses three distinct font families to differentiate between technical metadata, brand display, and dense data reading.
| Usage | Font Family | Characteristics |
|---|---|---|
| Display/Headings | Geist or Inter | Technical, weight 500-700, tight tracking -0.02em |
| Body/Data | Inter | Primary for tables and long-form analysis; 14-16px |
| Metadata/Logs | JetBrains Mono | Used for raw transcript extracts, timestamps, and filenames |
Sources: design-system/claude-design-system-prompt.md, design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/constraints.md
Motion Language & Interaction
Motion in HEX-YT-INTEL is semantic and restrained. It is used to confirm state changes and reduce cognitive load during data loading, rather than for decoration.
Core Motion Principles
- Timing: Fast-Medium (150ms - 300ms).
- Easing:
ease-outstrictly (exponential). No bounces, springs, or elastic animations are permitted. - Staggered Entrance: 0.1s delays are used when loading lists or bento grids to prevent "walls of text" appearing instantly.
- Signature Animation: A rotating cyan "scope-ring" is the only allowed spinning element, used exclusively when
status === "streaming".
Sources: design-system/claude-design-system-prompt.md, design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/constraints.md
The diagram above illustrates the conditional logic for the system's signature motion based on component status.
Sources: design-system/HEX-YT-INTEL Design System (1)/SKILL.md, design-system/HEX-YT-INTEL Design System (1)/README.md
Architecture: Hexagonal Guardrails
The system follows a strict Hexagonal (Ports & Adapters) architecture for its UI components. This ensures that the presentation layer is decoupled from business logic and data fetching.
Presentation Components
- Stateless Adapters: All UI components must be pure and stateless.
- Forbidden React Patterns: Use of
useState,useEffect, or internalfetchwithin presentation components is prohibited. - React 19 Standards: Components treat
refas a normal prop;forwardRefanddisplayNameare deprecated in this system's implementation.
Sources: design-system/HEX-YT-INTEL Design System (1)/SKILL.md, design-system/HEX-YT-INTEL Design System (1)/README.md
This sequence shows the unidirectional flow of data from controllers to the stateless presentation adapters.
Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/HEX-YT-INTEL Design System (1)/SKILL.md
Forbidden Patterns
To maintain the "elite intelligence" aesthetic, several common UI patterns are explicitly banned:
- Gradients as Decoration: No generic purple/pink gradients for backgrounds.
- Emoji Usage: Decorative emojis (🔬, 📡, etc.) are forbidden; only technical icon sets (Solar) are used.
- Buzzwords: Copy must avoid marketing fluff like "supercharge," "empower," or "seamless."
- Bouncy Animations: Any motion that feels unprofessional or lackadaisical.
- Text Reveals: No letter-by-letter or word-by-word text animations.
Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/constraints.md
Conclusion
The HEX-YT-INTEL Design System acts as a visual "instrument register," ensuring that the product feels like a high-precision tool for analysts. By enforcing strict constraints on color (Cyan-only accent), typography (technical mono pairing), and architecture (stateless hexagonal adapters), the system maintains a premium, non-boilerplate identity that scales with the product's data-dense content intelligence mission.
Sources: design-system/HEX-YT-INTEL Design System (1)/README.md, design-system/design-brief.md