Vizru

Overview

Vizru is an enterprise-grade AI automation platform that bridges the gap between business intent and intelligent execution. The design system embodies a "Technical Minimalism" aesthetic—combining the precision of monospace typography with the warmth of a vibrant coral-orange accent (#f15a29) against a clean, light canvas. The brand personality is authoritative yet approachable: Vizru speaks to enterprise architects and decision-makers with clarity and confidence, avoiding hype while emphasizing real-world capability. The visual language prioritizes clarity over decoration, using generous whitespace (24px gutters, 40px section spacing), sharp geometric forms (0.25rem to 1rem border-radius), and a restrained color palette anchored by the primary accent. Voice example: "ZEOS Agentic Workflows connects business intent with AI agents, enterprise systems, and workflows to orchestrate, execute, and verify outcomes, turning AI into action."

Colors

The color system is built on a light, neutral foundation with strategic accent deployment. Surface colors range from pure white (#ffffff) through a carefully calibrated gray scale (surface-container-low: #f1f3f5, surface-container: #e9ecef, surface-container-high: #dee2e6) to support layering and depth without sacrificing legibility. Primary (#f15a29) is the signature coral-orange accent used exclusively on CTAs, active states, and brand-critical interactive elements—it commands attention on the light canvas while maintaining WCAG AA contrast (4.5:1 with white). Secondary (#0d6efd) provides a cool counterpoint for informational elements, alerts, and secondary actions. Tertiary (#ffc107) is reserved for warnings and highlights. On-surface text is a near-black (#212529) at 16px body weight 4

Typography

The type system pairs Inter (body and headlines) with Geist Mono (labels, CTAs, and technical copy) to create a distinctive voice that balances approachability with technical credibility. Display (60px, weight 500, -0.02em tracking) anchors hero sections with confident presence; headline-lg (40px, weight 600) and headline-md (28px, weight 600) establish information hierarchy. Body-lg (18px) and body-md (16px) both use weight 400 with 28px and 24px line-heights respectively, ensuring comfortable reading at any viewport. Label-md (14px, Geist Mono, weight 400) is applied to buttons, badges, and form labels—the monospace treatment signals interactivity and precision. When label-md appears over busy backgrounds or dark overlays, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legi

Layout

The layout system uses a 12-column grid with a max-width of 1320px, maintaining a 24px gutter on desktop and scaling to 16px on tablet. The page rhythm is established through consistent spacing: 40px (lg) separates major sections (hero, features, testimonials), 24px (md) divides subsections and card groups, and 12px (sm) creates breathing room within components. The hero section spans full-width with a diagonal split composition—left column contains the headline and CTA, right column features a dark gradient overlay with product imagery. Container padding follows the gutter scale: 24px on desktop, 16px on tablet, 12px on mobile. White-space is treated as a first-class design element; negative space around CTAs (minimum 40px vertical, 24px horizontal) ensures they command attention without

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the ground plane. Level 2 (Cards & Containers): 0 4px 12px rgba(0, 0, 0, 0.1) with a 1px border in outline-variant (#dee2e6), creating a soft lift. Level 3 (Modals, Popovers, Dropdowns): 0 16px 40px rgba(0, 0, 0, 0.12) with the same border treatment, signaling modal priority. Interactive elements (buttons, inputs) use no shadow at rest; on hover, they transition to Level 2 shadow over 200ms. The dark hero section us

Shapes

The shape philosophy is "Architectural Clarity"—favoring sharp, geometric forms that signal precision and control. Buttons use 0.25rem (4px) border-radius, creating a subtle softness that prevents harshness while maintaining a technical edge. Cards and containers use 1rem (16px) border-radius for a more approachable, breathing quality. Input fields use 0.75rem (12px) to sit between buttons and cards, signaling their interactive but contained nature. Badges use full (9999px) border-radius to denote status and metadata. The diagonal split in the hero section (created via CSS clip-path or SVG mas

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#f15a29) background with white text (Geist Mono, 14px, weight 400), 15px vertical and 20px horizontal padding, and 4px border-radius. On hover, the background shifts to #e04a1a (a 20% darkening) with a 200ms ease-in-out transition and elevation.md shadow. Button-secondary is transparent with a 2px solid border in {colors.primary}, same text styling, and on hover shifts to {colors.primary-container} (#ffe5d9) background with on-primary-container text (#5c1f0a). Both buttons maintain a 44px minimum height for touch targets. Focus state adds a 3px outline in rgba(241, 90, 41, 0.2) at 2px offset.

Containers & Surfaces Cards are the primary content container. Base card uses {colors.surf

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f15a29) exclusively for primary CTAs and active/focus states—never on secondary elements or backgrounds.
• Do maintain 24px gutters and 40px section spacing to preserve the clean, breathable layout rhythm.
• Do apply Geist Mono to all interactive labels (buttons, form fields, badges) to signal precision and control.
• Do use 200ms ease-in-out transitions on all interactive color and shadow changes to create a responsive, polished feel.
• Do keep border-radius consistent within component families: 4px for buttons, 12px for inputs, 16px for cards.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over dark or busy backgrounds for legibility.

**Don't**

• Don't use secondary (#0d6efd) or tertiary (#ffc107) as primary CTAs—they are supporting accents only.
• Don't apply shadows to buttons at rest; reserve elevation.md and elevation.lg for hover and active states.
• Don't mix border-radius values within a single component family (e.g., don't use 8px on some buttons and 4px on others).
• Don't exceed 1320px container width on desktop; maintain the grid discipline even in full-width sections.
• Don't use system fonts or fallback sans-serif; always load Inter and Geist Mono from the @font-face declarations.
• Don't animate border-radius, padding, or height on interactive elements—only color, shadow, and opacity should transition.