zvoove

Overview

zvoove is an enterprise SaaS platform that digitizes workforce management and facility services through a unified cloud interface. The design system embodies "Precision Minimalism"—a philosophy that prioritizes clarity, compliance, and operational efficiency through restrained use of color, generous whitespace, and a carefully calibrated visual hierarchy. The brand serves staffing agencies and facility service providers who demand both sophistication and trustworthiness; the UI conveys this through a deep indigo-to-white palette, clean typography in Overpass, and purposeful use of the brand's signature royal blue (#3748de) as the sole accent. The emotional response is one of calm competence: users feel they are working with a mature, professional tool that respects their time and data. Voice: direct, solution-oriented, never jargon-heavy. Example: "Assign 50 workers in 3 minutes. Track compliance in real time."

Colors

The color system is anchored in a light, accessible surface stack ranging from #fbfbfe (surface) to #1a1246 (on-surface, the deep midnight navy used for primary text and the secondary button background). Primary (#3748de, royal blue) is reserved exclusively for interactive elements—CTAs, focus states, and active navigation—ensuring users instantly recognize actionable items. The indigo gradient family (indigo-5 through indigo-20, ranging from #f3f3f9 to #cecfe5) provides subtle container differentiation without visual noise. Secondary (#0b081d, near-black) is used sparingly for high-contrast dark buttons and critical UI elements requiring maximum legibility. Tertiary (#007aff, a brighter blue) supports secondary actions and status indicators. Error (#cf2e2e) is applied to validation states

Typography

The type system uses Overpass exclusively, a geometric sans-serif that conveys both technical precision and approachability. Display (60px, weight 700) anchors hero sections with -0.04em letter-spacing to create visual tension; headline-lg (48px, weight 500) is used for major section titles and maintains -0.02em spacing. Body-md (16px, weight 300) is the workhorse for body copy and form labels, with 24px line-height (1.5x multiplier) ensuring readability at arm's length on desktop and mobile. Label-md (14px, weight 600) is applied to button text, navigation items, and form labels with 0.01em tracking for subtle emphasis. The weight progression (300 for body, 500 for headlines, 600 for labels, 700 for display) creates clear hierarchy without relying on color alone. Apply text-shadow: 0 1px

Layout

The layout uses a 12-column grid with a 1280px max-width container, centered with 24px gutters on desktop and 12px on mobile. Page rhythm is established through consistent spacing: section separators use lg spacing (40px), card stacks use md spacing (24px), and internal component padding uses sm spacing (12px). The design favors generous whitespace—no element should feel crowded; minimum 24px vertical breathing room between sections. Container max-width of 1280px ensures text lines stay under 75 characters for optimal readability. Horizontal padding follows a 24px gutter on desktop, reducing to 16px on tablet and 12px on mobile. The grid is invisible but strict: all major blocks (hero, feature cards, forms) align to 8px increments, creating a cohesive visual rhythm that users perceive as "

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bold contrast. Level 1 (base surfaces) uses no shadow, relying on 1px outline-variant borders for definition. Level 2 (cards, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 3px with 8px blur—this shadow is visible at arm's length but never distracting. Level 3 (floating modals, popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread that signals modal priority without harsh darkness. Hover states on interactive elements transition shadows from Level 1 to Level 2 over 200ms,

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the precision of enterprise software without sacrificing clarity. Buttons and primary CTAs use full radius (9999px, border-radius: 50% with min-width constraint), creating pill-shaped buttons that feel approachable and modern. Cards and modals use xl radius (24px), providing enough rounding to feel contemporary while maintaining clear edges. Input fields and secondary components use DEFAULT radius (8px), a subtle rounding that suggests interactivity without distraction. Navigation items and small UI eleme

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing: 48px height with 12px vertical and 28px horizontal padding, applied via padding: 12px 28px. Primary buttons (#3748de on white) use full radius (9999px) and label-md typography (14px, weight 600). Hover state transitions to #2a35c0 over 200ms with no shadow change, maintaining visual weight. Secondary buttons invert the scheme: transparent background with 2px solid #3748de border, same padding and radius. Dark buttons (#0b081d) are reserved for critical actions and use white text. All buttons include a focus state with box-shadow: 0 0 0 3px rgba(55, 72, 222, 0.1) (primary blue at 10% opacity, 3px spread), visible on keyboard navigation.

Containers & Surfaces Cards use surface-bright (#ffffff) b

Do's and Don'ts

**Do**

• Do use primary blue (#3748de) exclusively for interactive elements—buttons, links, focus states—to create a clear visual affordance for clickability.
• Do maintain 24px minimum spacing between major sections and 12px between components to preserve the calm, uncluttered aesthetic.
• Do apply the full-radius pill shape (9999px) only to primary CTAs; use 24px radius for cards and 8px for inputs to maintain hierarchy.
• Do use Overpass weight 300 for body copy and weight 600 for labels; never mix weights within a single component to avoid visual confusion.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to provide tactile feedback without introducing visual clutter.
• Do ensure all text meets 4.5:1 contrast ratio minimum; use text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels over colored backgrounds.

**Don't**

• Don't use secondary (#0b081d) or tertiary (#007aff) as primary button colors; reserve primary blue (#3748de) for all main CTAs to avoid user confusion.
• Don't apply rounded corners uniformly across all components; use graduated radii (4px, 8px, 24px, 9999px) to signal component hierarchy.
• Don't introduce new colors outside the defined palette; the indigo gradient family and primary/secondary/tertiary are sufficient for all use cases.
• Don't use box-shadow values larger than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadows contradict the minimalist aesthetic and reduce perceived professionalism.
• Don't apply letter-spacing tighter than -0.04em or looser than 0.1em; maintain the specified values to preserve Overpass's geometric precision.
• Don't mix Overpass with system fonts or fallbacks; always specify Overpass, sans-serif in font-family declarations to ensure brand consistency.