Virocity

Overview

Virocity is an elite AI business platform designed for data-driven enterprises that demand precision, speed, and visual sophistication. The design system embodies **Architectural Minimalism with Vibrant Accents**—a philosophy that pairs austere, high-contrast foundations (deep navy #0a0f1a backgrounds, pure black #000000 text) with a commanding orange accent (#ff6b2c) that signals action, urgency, and brand authority. The aesthetic evokes a command center: clean, purposeful, and uncompromising. Users experience clarity through negative space, hierarchy through color intensity, and confidence through the bold primary orange that dominates CTAs and key interactive moments.

The brand voice is direct, technical, and assured—never apologetic, never decorative. Vocabulary leans toward precision: "Deploy", "Execute", "Optimize", "Integrate". Tone example: "Your AI model is live. 47 integrations active. Latency: 120ms." The interface respects user expertise; every element earns its place through functional necessity, not aesthetic flourish.

Colors

The color system operates on a **high-contrast, accent-driven model** that prioritizes legibility and decision clarity. Primary (#ff6b2c, a vivid orange-red) is reserved exclusively for call-to-action buttons, active states, and brand-critical interactive elements—it appears sparingly but commands attention when it does. The orange's warmth against the cool navy secondary (#1b3a5c) creates visual tension that drives the eye toward actionable moments. Secondary (#1b3a5c) anchors the interface as a supporting accent for headers, badges, and secondary UI zones; it provides visual weight without competing with primary. Tertiary (#c9a84c, a warm gold) is used for highlights, success states, and premium features—its muted sophistication signals value without aggression.

The surface stack is del

Typography

The type system uses **Inter exclusively** across all scales, a geometric sans-serif that conveys technical precision and modern efficiency. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand moments; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) breaks up content zones. Body-lg (18px, 400 weight) is the default for long-form content and descriptions; body-md (16px, 400 weight) handles UI labels and secondary text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items—the increased weight and tracking create visual distinction without size inflation. Label-sm (12px, 500 weight, 0.02em tracking) is used for metadata, timestamps, and tertiary information. All type us

Layout

The layout system uses a **12-column fluid grid** with a fixed max-width of 1280px, centered on viewport. Horizontal gutter is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 4px (xs spacing) on mobile. Vertical rhythm is governed by the lg spacing token (40px) for section separation, md spacing (24px) for component grouping, and sm spacing (12px) for internal padding. Container max-width is enforced at 1280px to prevent line-length bloat; content never exceeds 80 characters per line for readability. White-space is aggressive: every major section is separated by at least 40px of breathing room, and card padding is consistently 24px (md) to create internal rhythm. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) follows an 8px base unit, enablin

Elevation & Depth

Depth is conveyed through **subtle shadow layering and strategic background shifts**, not dramatic drop shadows. Level 1 (Base): flat surfaces with no shadow, using surface-container-lowest (#ffffff) or surface (#f8f9fa) as the foundation. Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px solid border at outline-variant (#c6c6cd); background is surface-container-lowest (#ffffff). Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with the same border; background shifts to surface-container-high (#ebeef1). Level 4 (Modal/Overlay): box-shadow: 0 16px

Shapes

The shape philosophy is **Functional Sharpness with Approachable Softness**—a balance between technical precision and human usability. Buttons use rounded.lg (1rem / 16px) to signal interactivity while maintaining a professional edge; they are never fully rounded (full: 9999px) unless they are icon-only or badge elements. Cards use rounded.xl (1.5rem / 24px) to create a softer, more inviting container that feels premium without being ornate. Input fields use rounded.DEFAULT (0.5rem / 8px) to maintain visual lightness and reduce visual weight in forms. Modals and overlays use rounded.xl (1.5rem

Components

Action Elements Buttons are the primary interaction mechanism and use the full primary color (#ff6b2c) to command attention. button-primary has a height of 48px, padding 12px 24px, rounded.lg (16px), and typography label-md (14px, 600 weight). At rest, it uses box-shadow: 0 4px 12px rgba(255, 107, 44, 0.15). On hover, the background shifts to #ff8c5a and shadow expands to 0 8px 20px rgba(255, 107, 44, 0.25); transition duration is 150ms cubic-bezier(0.4, 0, 0.2, 1). On active/pressed, background becomes #e55a1a and shadow compresses to 0 2px 8px rgba(255, 107, 44, 0.2). button-secondary uses a transparent background with a 2px solid border in primary (#ff6b2c), same height and padding. On hover, the background becomes rgba(255, 107, 44, 0.08) and border shifts to #ff8c5a. button-ghost

Do's and Don'ts

**Do**

• Do use primary (#ff6b2c) exclusively on CTAs, active states, and brand-critical moments—never on passive text or backgrounds.
• Do maintain the 24px (md) gutter on all sides of content; white-space is a design tool, not wasted real estate.
• Do apply Inter at all scales; never substitute system fonts or serif typefaces, even for display.
• Do use the full shadow stack (sm, md, lg) to signal depth; never use flat design or borders alone to separate layers.
• Do enforce the 1280px container max-width and 12-column grid; responsive breakpoints scale spacing and column count, not the max-width.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to interactive elements; motion should feel snappy, not sluggish.

**Don't**

• Don't use secondary (#1b3a5c) or tertiary (#c9a84c) as primary button colors; they lack the visual urgency of orange.
• Don't apply rounded.full (9999px) to buttons or cards; reserve it for badges and icon-only elements.
• Don't exceed 80 characters per line of body text; use the 1280px max-width and multi-column layouts to enforce this.
• Don't use box-shadow values outside the elevation scale (sm, md, lg); custom shadows break the visual hierarchy.
• Don't apply text-shadow or text-stroke to body text; reserve these effects for small labels over busy backgrounds only.
• Don't mix font families; Inter is the only typeface in this system—no Urbanist, Space Grotesk, or Outfit in production UI.