Uiverse Design

Overview

Uiverse Design is a framework-agnostic design system built for AI-assisted product development, where consistency and clarity are non-negotiable. The brand embodies 'Sophisticated Minimalism'—a design philosophy that strips away decorative excess while maintaining visual warmth through carefully curated accent colors. The interface prioritizes signal over noise: a near-black canvas (#0b0a07) serves as the foundation, allowing vibrant accent colors (primary violet #8b7fff, secondary magenta #ec4899, tertiary indigo #4f46e5) to guide user attention without distraction. The emotional response is one of professional confidence: users feel they're working with a system designed by engineers who understand both aesthetics and pragmatism.

The brand voice is direct, technical, and unapologetic. Vocabulary leans toward precision: 'portable,' 'framework-agnostic,' 'consistent,' 'polished'—never 'beautiful' or 'stunning.' The tone avoids breathlessness; instead, it speaks with the calm authority of someone who has solved a real problem. Example sentence: 'Drop the design system into any codebase and your coding agent instantly knows how to build consistent, polished interfaces.'

Colors

The color system operates on a principle of 'Dark-First Clarity': the surface stack anchors at near-black (#0b0a07 for surface, #030712 for surface-container-lowest) to reduce eye strain during extended work sessions and to provide maximum contrast for accent colors. The on-surface palette (#fafafc for primary text, #e8e8e8 for secondary text) ensures WCAG AAA compliance (contrast ratio 15.8:1 and 13.2:1 respectively) across all interactive states. Primary (#8b7fff) is the signature accent—used exclusively for CTAs, focus states, and brand-critical interactions; it appears on the 'Claim Early Adopter Access' button and all primary navigation elements. Secondary (#ec4899) provides a warm counterpoint for highlights, badges, and emphasis; tertiary (#4f46e5) supports data visualization and se

Typography

The type system pairs Montserrat for display and headline scales (76.8px display, 48px headline-lg, 32px headline-md) with Inter for body and label scales (18px body-lg, 16px body-md, 14px label-md). Montserrat's geometric precision and tight letter-spacing (-0.04em on display, -0.02em on headline-lg) convey technical sophistication, while Inter's humanist proportions keep body text approachable at 16px with 24px line-height. Font weights follow a strict hierarchy: 600 for all headlines (ensuring visual dominance), 500 for labels and interactive text (signaling actionability), and 400 for body copy (maximizing readability). On small labels over busy backgrounds or dark surfaces, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) to ensure legibility; on primary accent buttons, use font-weight

Layout

The layout operates on a 12-column grid with a maximum container width of 1400px, maintaining a fluid design that scales from mobile (single column) to desktop (full 12 columns). The spacing scale uses semantic tokens: {spacing.gutter} (24px) for section margins and card padding, {spacing.lg} (40px) for major section separation (hero to featured systems section), and {spacing.md} (24px) for internal card content. The hero section uses a 2-column split: left column (40% width) holds the headline and copy with 64px bottom margin before CTAs; right column (60% width) displays the before/after comparison image. White-space philosophy prioritizes breathing room: minimum 24px padding inside cards, minimum 40px vertical separation between major sections. The grid maintains consistent gutters of 2

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle border treatments rather than dramatic layering. Level 1 (Base Surface) uses no shadow; Level 2 (Standard Card) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) with a 1px solid border at rgba(255, 255, 255, 0.08); Level 3 (Elevated/Modal) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) with a 1px border at rgba(255, 255, 255, 0.12). Focus states on interactive elements add a 3px inset shadow: inset 0 0 0 3px rgba(139, 127, 255, 0.1) to indicate keyboard focus without breaking the dark aesthetic. Hover states on cards transition

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are present but restrained, signaling approachability without sacrificing the system's professional edge. Buttons use {rounded.lg} (1rem / 16px) for a modern, slightly rounded appearance that feels contemporary without being playful. Cards and containers use {rounded.md} (0.75rem / 12px) for a more subtle treatment that doesn't distract from content. Input fields use {rounded.DEFAULT} (0.5rem / 8px) for a crisp, utilitarian feel. Badges and pills use {rounded.full} (9999px) for maximum softness, signaling secondary or supplementary i

Components

Action Elements Buttons follow a three-tier system: primary (solid background at {colors.primary}, 44px height, 12px 24px padding, {rounded.lg}), secondary (transparent with 8% white overlay, 1px border at rgba(255, 255, 255, 0.12)), and ghost (transparent with outline, no fill). Primary buttons transition to {colors.primary-container} on hover with a 25% opacity shadow (box-shadow: 0 4px 12px rgba(139, 127, 255, 0.25)) over 200ms. All buttons use {typography.label-md} (14px, 500 weight, 0.01em letter-spacing) and include a 200ms transition on background-color and box-shadow for smooth state changes. Active states darken to {colors.inverse-primary} (#5774f3) to indicate pressed state.

Containers & Surfaces Cards use {colors.surface-container} as the base with a 1px border at {colo

Do's and Don'ts

**Do**

• Do use {colors.primary} (#8b7fff) exclusively for primary CTAs, focus indicators, and brand-critical interactions—never for decorative elements or secondary actions.
• Do maintain minimum 24px padding inside all cards and containers; use {spacing.lg} (40px) for vertical separation between major page sections.
• Do apply {typography.label-md} (14px, 500 weight) to all interactive text; use {typography.body-md} (16px, 400 weight) for body copy to ensure readability at 24px line-height.
• Do include 200ms transitions on all state changes (hover, focus, active) for background-color, border-color, and box-shadow to signal interactivity smoothly.
• Do use the full surface stack (5 levels from surface-container-lowest to surface-container-highest) to create visual hierarchy without introducing new colors.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no tints/shades of primary that aren't in the token system.
• Don't apply shadows larger than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.15)); excessive shadows break the minimalist aesthetic and reduce contrast.
• Don't mix Montserrat and Inter within a single headline or body paragraph; use Montserrat for all display/headline scales, Inter for all body/label scales.
• Don't use rounded corners larger than {rounded.xl} (1.5rem) on any component; this violates the 'Technical Softness' philosophy and introduces visual inconsistency.
• Don't apply opacity or transparency to text colors; always use the defined on-surface and on-surface-variant tokens to maintain WCAG AAA contrast compliance.