Ovobrowser

Overview

Ovobrowser is a technical-forward antidetect browser designed for digital identity management, multi-accounting, and team collaboration. The design system embodies 'Crystalline Minimalism'—a philosophy that combines technical precision with ethereal lightness. The UI prioritizes clarity and trustworthiness through a predominantly white canvas (rgb(255, 255, 255)) punctuated by a vibrant cobalt blue accent (#2358eb), creating visual hierarchy without visual noise. The aesthetic evokes a sense of control and isolation—each digital identity exists in its own crystalline container, protected and distinct. Voice: authoritative yet approachable, technical but never jargon-heavy. Example: 'Your fingerprint is 100% undetectable. Every profile is isolated, every session is clean.'

Colors

The color system is built on a light, air-filled foundation with strategic accent deployment. Primary (#2358eb) is the signature cobalt blue used exclusively for CTAs ('Download free'), interactive states, and brand emphasis—it appears in 66 instances across the site, anchoring user attention. On-primary is pure white (rgb(255, 255, 255)) for maximum contrast on blue backgrounds. Primary-container (#edf4ff) provides a soft, tinted surface for secondary actions and hover states, maintaining visual continuity. Secondary (#38d2ff) is a bright cyan used for status indicators, success states, and accent details (e.g., the scanning animation in the showcase). Tertiary (#23c9a3) is a teal used for completion states and positive feedback. Surface stack: surface (#ffffff) is the page background; su

Typography

The type system uses Manrope exclusively, a geometric sans-serif that conveys technical precision while remaining warm and accessible. Display (54px, weight 820, -0.065em letter-spacing) is reserved for hero headlines and brand moments, with a tight line-height of 1.28 to create visual impact. Headline-lg (40px, weight 700) and headline-md (28px, weight 700) structure section hierarchies with consistent -0.02em to -0.04em letter-spacing, creating a distinctive, slightly condensed appearance. Title-lg (20px, weight 700) labels major sections and card headers. Body-md (16px, weight 400, line-height 24px) is the primary reading text, optimized for 1.5x line-height on longer passages. Label-md (14px, weight 700) and label-sm (12px, weight 800, 0.08em letter-spacing) are used for buttons, badge

Layout

The page uses a fluid 12-column grid constrained to a max-width of 1200px (calc(100vw - 48px) on smaller screens), creating a responsive container that feels spacious without overwhelming. The hero section spans the full viewport height (min-height: 796px) with a two-column layout: 0.88fr for copy and 1.12fr for the showcase, separated by 58px gap. Section padding is consistently 112px vertically, creating a rhythm of breathing room between major content blocks. The gutter is 24px, applied to all horizontal spacing within containers. Container max-width is 1200px, with a 24px margin on each side for mobile (48px total). Spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, xl (64px) for hero-t

Elevation & Depth

Depth is achieved through layered glassmorphism and subtle shadows rather than darkness. Level 1 (Base): The page background is pure white (#ffffff) with a radial gradient overlay (circle at 72% 27%, rgba(71, 121, 255, 0.12)) creating soft atmospheric depth. Level 2 (Standard Cards): backdrop-filter: blur(22px), background: rgba(255, 255, 255, 0.68), border: 1px solid rgba(255, 255, 255, 0.90), box-shadow: 0 34px 90px rgba(29, 71, 142, 0.22), inset 0 0 0 1px rgba(35, 88, 235, 0.05). Level 3 (Elevated/Modals): backdrop-filter: blur(22px), background: rgba(255, 255, 255, 0.96), border: 1px solid

Shapes

The shape philosophy is 'Technical Softness'—sharp enough to convey precision, rounded enough to feel approachable. Buttons use rounded: 12px (DEFAULT) for standard actions and 14px (md) for primary CTAs, creating a subtle distinction. Cards and panels use 17px (lg) for hero showcases and 25px (xl) for large modals, with the largest radius (25px) reserved for the hero-showcase and identity-console to create visual landmarks. Input fields use 12px (DEFAULT) to align with button sizing. Badges and pills use 999px (full) for maximum roundness, emphasizing their secondary status. The nav shell use

Components

Action Elements Buttons follow a three-tier system. Primary buttons use background: linear-gradient(135deg, #2e68ff, #194bd7) with box-shadow: 0 12px 28px rgba(35, 88, 235, 0.25), creating depth through both gradient and shadow. On hover, the shadow elevates to 0 16px 36px rgba(35, 88, 235, 0.34) and the button translates -2px on the Y-axis (transform: translateY(-2px)), with a 0.22s ease transition. Ghost buttons use backdrop-filter: blur(14px) with background: rgba(255, 255, 255, 0.78) and a 1px border at rgba(35, 88, 235, 0.14), creating a frosted-glass effect. On hover, the background becomes rgba(255, 255, 255, 0.92) and the border strengthens to rgba(35, 88, 235, 0.30). All buttons have a focus-visible outline: 3px solid rgba(35, 88, 235, 0.28) with outline-offset: 3px for access

Do's and Don'ts

**Do**

• Do use primary (#2358eb) exclusively for CTAs and interactive focus states—it's the signature brand color and should never be diluted with secondary uses.
• Do apply backdrop-filter: blur(22px) on all glass surfaces to create depth and visual separation without introducing darkness.
• Do maintain consistent 112px section padding and 24px gutters to create a predictable, breathing rhythm across the page.
• Do use Manrope weight 820 for display headlines and weight 700 for all other headings—the weight hierarchy reinforces visual hierarchy.
• Do apply text-shadow: 0 12px 34px rgba(28, 73, 145, 0.08) on large headlines to prevent them from appearing flat against the light background.
• Do use rounded: 12-14px for buttons and inputs, 17px for nav and hero elements, and 25px for large modals—this creates a subtle size-based hierarchy.

**Don't**

• Don't use secondary (#38d2ff) or tertiary (#23c9a3) as primary CTAs—they are accent colors for status and secondary feedback only.
• Don't apply box-shadow without also using backdrop-filter on glass surfaces—the blur is essential to the crystalline aesthetic.
• Don't exceed 1200px container max-width; the design is optimized for this constraint and wider layouts feel unbalanced.
• Don't use rounded: 0px or rounded: 50% on buttons and cards—all shapes must fall within the defined scale (9px to 25px) to maintain visual consistency.
• Don't apply color: {colors.on-surface} (#0c1630) on backgrounds lighter than #f0f5ff—the contrast will be insufficient for accessibility.
• Don't animate transitions faster than 0.22s or slower than 0.52s—the motion scale (--motion-fast: 0.18s, --motion-base: 0.28s, --motion-slow: 0.52s) is calibrated for perceived responsiveness.