Opal

Overview

Opal is a digital wellness platform that transforms screen time management into an invisible, intelligent system. The brand embodies 'Minimalist Automation'—a design philosophy where complex behavioral technology recedes into the background, allowing users to experience focus as a natural state rather than a struggle. The visual language combines deep, near-black surfaces (#040404) with precise white typography and strategic accent colors (vivid purples #ba9ce3, warm yellows #f3e56b, soft corals #f5b8af) that emerge only when interaction is needed. The emotional response is one of calm control: users feel empowered, not overwhelmed, by their technology.

Opal's voice is direct, grounded, and human-centered. The brand avoids tech jargon and instead speaks in the language of focus, flow, and intention. Vocabulary patterns emphasize agency ('protect your focus,' 'make technology work for you') and measurable progress ('524,654 hours saved'). The tone is conversational yet authoritative—Opal doesn't lecture about screen time; it demonstrates mastery through elegant simplicity. Example sentence in brand voice: 'Your focus is too valuable to leave to chance—Opal handles the hard part automatically.'

Colors

Opal's color system operates on a principle of 'Darkness as Canvas, Light as Signal.' The dominant surface is near-black (#040404, #030510 for depth variation), creating a premium, focused environment that reduces visual fatigue during extended use. This dark foundation is paired with pure white (#ffffff) as the primary action color—the most clickable, most trusted element on screen. The white CTA button (Try for free, Download buttons) stands out with absolute clarity against the dark background, achieving 21:1 contrast ratio for accessibility and visual hierarchy.

Secondary and tertiary accents introduce emotional warmth and context-specific meaning. Purple (#ba9ce3) and lavender (#9cb2ff) gradients appear on active tabs and interactive elements, signaling engagement and flow state. Yel

Typography

The type system prioritizes clarity and hierarchy through weight and scale rather than stylistic variation. All typography uses system fonts (system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) to ensure consistent rendering across iOS, macOS, Android, and web—critical for a cross-platform focus app. Display text (81px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (48px, 600 weight) breaks up content sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at any screen size. The -0.04em letter-spacing on display text creates visual tightness that communicates precision and control, while body text uses default spacing for legibility. Label-md (14px, 600 weight) is applied to all interactive elements

Layout

Opal uses a fluid 12-column grid with a max-width of 1440px, scaling responsively from desktop (1440px) through tablet (991px) through mobile (479px). The page rhythm is built on the spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) creates breathing room within cards and between related elements, and sm (12px) provides micro-spacing between inline elements. The gutter (24px) is applied consistently to left/right margins on all breakpoints, creating a safe zone for content. Container max-widths are set to 1200px for content-heavy sections and 1440px for full-bleed hero backgrounds, ensuring text remains readable (60–80 characters per line) while allowing imagery to extend edge-to-edge. White-space is treated as a first-class design element: the her

Elevation & Depth

Depth in Opal is achieved through a layered glass-morphism aesthetic combined with subtle shadow gradients. The visual hierarchy is built on three elevation levels: Level 1 (Base) is the near-black background (#040404) with optional animated video or gradient overlay. Level 2 (Standard Card) uses backdrop-filter: blur(20px), background: rgba(0, 0, 0, 0), and a 1px border of rgba(255, 255, 255, 0.1), creating a frosted-glass effect that sits 8px above the base (box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)). Level 3 (Elevated/Modal) increases blur to 40px, adds rgba(255, 255, 255, 0.05) background

Shapes

Opal's shape language is 'Soft-Technical Precision'—rounded corners are used strategically to soften the austere dark aesthetic while maintaining a sense of control and intentionality. Buttons use full (9999px) border-radius to create pill-shaped affordances that feel approachable and modern; this is the most frequently clicked element and deserves the most generous rounding. Cards and containers use lg (1rem / 16px) or xl (1.5rem / 24rem) border-radius to create visual softness without sacrificing the minimalist aesthetic. Input fields use DEFAULT (0.75rem / 12px) radius for a more compact, u

Components

Action Elements Buttons are the primary interaction pattern. The primary button (Try for free, Download) uses backgroundColor: rgb(255, 255, 255), textColor: rgb(0, 0, 0), fontSize: 18px, fontWeight: 600, padding: 14px 28px, borderRadius: 9999px, and height: 48px. On hover, apply transform: scale(1.05) and box-shadow: 0 0 20px 7.5px rgba(246, 255, 144, 0.1) over 300ms ease. Secondary buttons (Contact Us, Learn More) use backgroundColor: rgba(255, 255, 255, 0.05), textColor: rgb(255, 255, 255), border: 1px solid rgba(255, 255, 255, 0.1), and the same hover scale/shadow treatment but with rgba(255, 255, 255, 0.1) glow. All buttons use transition: transform 0.3s ease, box-shadow 0.3s ease to create responsive, snappy feedback.

Containers & Surfaces Glass cards form the foundation of

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the primary CTA color—it achieves maximum contrast and psychological trust on dark backgrounds, making it the most clickable element on the page.
• Do apply the 0.3s ease transition to all interactive elements (buttons, cards, tabs) to create a cohesive, responsive feel that signals interactivity without feeling sluggish.
• Do maintain the 1px rgba(255, 255, 255, 0.1) border on all glass cards—it defines the edge and prevents the card from disappearing into the background.
• Do use the full (9999px) border-radius exclusively for buttons and badges to signal affordance; reserve lg/xl radius for containers to maintain visual hierarchy.
• Do apply accent colors (purple, yellow, coral) sparingly and contextually—never more than 2–3 per section—to preserve the minimalist aesthetic and ensure accents remain meaningful.

**Don't**

• Don't use near-black text on the near-black background (#040404 on #030510)—the contrast is insufficient and violates WCAG AA standards. Always use white or light gray for body text.
• Don't apply rounded corners smaller than sm (0.5rem / 8px) to interactive elements; smaller radius feels cramped and reduces the perceived clickability of buttons.
• Don't mix backdrop-filter blur values within the same section—stick to blur(20px) for standard cards and blur(40px) for elevated elements to maintain visual consistency.
• Don't animate opacity alone on hover; combine it with transform: scale(1.05) and box-shadow to create a more engaging, three-dimensional interaction.
• Don't introduce new accent colors beyond the defined palette (purple #ba9ce3, yellow #f3e56b, coral #f5b8af)—additional colors dilute the brand identity and create visual noise.