Unified Design System
& Brand DNA
This document defines the permanent visual and interaction language for every Yukti Labs product — current and future. It is the constitutional standard that ensures the ecosystem remains cohesive as it scales to 50+ products.
Design Principles
Dark Space First
Midnight (#030014) is the foundation. Content floats on darkness. Never use white backgrounds.
Glassmorphism
All panels use `glass-panel`: 2% white bg, 12px blur, 6% white border. Depth through translucency, not shadows.
Typography Hierarchy
Space Grotesk for display (bold, tight tracking). Geist Sans for body. Geist Mono for data. Never more than 3 families.
Color Discipline
One accent per product/context. Never mix cyan + purple + blue in the same component. Accent is for highlights only — text is always white/slate.
Motion Purpose
All motion must communicate meaning: enter (stagger + fade), hover (scale + glow), exit (fade + shrink). No decorative animation without purpose.
8-Point Grid
All spacing, sizing, and alignment uses multiples of 8px. 4px (p-1) is the only exception for tight labels and tags.
Content > Chrome
Interfaces are minimal. Borders are 0.5–1px at 5–10% white. No heavy strokes, no thick shadows, no unnecessary decoration.
Accessibility by Default
4.5:1 contrast minimum. Focus indicators visible. prefers-reduced-motion respected. ARIA labels on all interactive elements. Keyboard navigation on all components.
Product Identity
Each product has one accent color, one gradient, and one personality theme. These never leak between products.
Responsive Space
Desktop: max-w-7xl mx-auto. Tablet: single column at md breakpoint. Mobile: stacked, simplified, no loss of information.
Data-Driven Presentation
All product content comes from JSON. No hardcoded React. Adding a new product means adding JSON, not components.
Future Scale
Architecture supports 50+ products. Design tokens are the single source of truth. Theme extension = new token values, not new CSS.
Color System
Core Palette
Neutral Scale
Product Accents
Gradients
Status Indicators
Typography
Motion Language
Duration Tokens
Micro-interactions, button hovers
Card hovers, simple transitions
Default transitions, tab switches
Scene transitions, hero reveals
Ambient background animations
Galaxy→product portal transitions
Easing Curves
Standard — smooth deceleration for enter animations
Smooth — balanced for hover and exit
Anticipate — spring-like bounce for emphasis
Decelerate — fast start, slow end for reveals
Accelerate — slow start, fast end for exits
Stagger Patterns
Grid items appearing simultaneously
Default staggered reveal
Hero elements, scene sections
Dramatic staggered reveals
Motion Principles
Spacing Grid
Glassmorphism
.glass-panel {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.06);
}.glass-panel-hover:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 30px rgba(131, 56, 236, 0.12);
}Usage Rules
Component Standards
glass-panel rounded-2xl border border-white/5 p-6Base container for all cards, sections, and info panels
text-[10px] font-mono tracking-[0.25em] text-slate-500 uppercaseSection-level labels above headings. Always uppercase, wide tracking, mono font
text-2xl md:text-4xl font-extrabold font-display text-white tracking-tightH2 for all page sections. Display font, bold, tight tracking
px-4 py-2 rounded-lg text-xs font-medium border transition-colorsMinimal, border-based. Active: bg-white/10 border-white/20. Inactive: bg-white/[0.02] border-white/5
bg-white/[0.03] border border-white/10 rounded-lg px-3 py-1.5 text-xs outline-noneTransparent bg, subtle border. Focus: border-white/20
text-[8px] font-mono text-slate-600 bg-white/[0.02] px-1.5 py-0.5 rounded border border-white/5Minimal tags for metadata, categories, labels
w-1.5 h-1.5 rounded-full inline-blockAnimate-pulse for active. Color varies by status (green/yellow/red/blue)
h-1 bg-white/5 rounded-full overflow-hidden + inner barInner bar: bg-gradient-to-r from-soft-cyan to-electric-blue
Product Identity
FeedSphere
“Data flows like water. Fast, fluid, always moving.”
NexusIntel
“Knowledge pulses through connections. Deep, structured, intelligent.”
UtilityForges
“Tools that work with precision. Reliable, sharp, practical.”
Accessibility Guidelines
Contrast
All text meets WCAG 2.2 AA minimum (4.5:1 for body, 3:1 for large text). Headings use white (#f8fafc) on midnight (#030014) for 15.5:1 contrast.
Reduced Motion
Global CSS rule: @media (prefers-reduced-motion: reduce) sets all animation/transition durations to 0.01ms. All Framer Motion animations inherit this.
Keyboard Navigation
Every interactive element is keyboard-accessible. Focus indicators use the default browser outline (customized per component where needed).
ARIA Labels
All icon-only buttons, interactive cards, and non-text elements include aria-label attributes. Progress indicators include aria-valuenow/valuemin/valuemax.
Screen Reader Support
Section headings use semantic HTML (h1-h3 hierarchy). SVG elements include role="img" and title/desc elements. Animations use aria-hidden where decorative.
High Contrast Mode
All interfaces render correctly in Windows High Contrast Mode. Information is never conveyed through color alone.
Focus Order
Tab order follows visual order. Modals trap focus. Skip-to-content link is available for keyboard users.
Touch Targets
All interactive elements are minimum 44x44px (WCAG 2.5.8). Cards are fully tappable. Buttons have adequate padding.