Woojer

Overview

Woojer is a haptic wellness technology brand that translates audio frequencies into full-body vibrations, creating immersive experiences for sleep, stress relief, and recovery. The design system embraces 'Accessible Scientific Minimalism'—a philosophy that combines rigorous credibility (backed by published research) with warm, approachable interfaces that demystify complex bioacoustic technology. The brand personality is confident yet grounded: precise without being clinical, innovative without being pretentious. The UI prioritizes clarity and trust through generous whitespace (surface: #ffffff, on-surface: #303030), a vibrant primary blue (#0f63d1) reserved for high-intent CTAs, and supporting greens (#3fae6a, #1fb6a6) that evoke wellness and vitality. The emotional response is one of calm empowerment—users feel they're accessing cutting-edge science in a space designed for their wellbeing, not their overwhelm.

Voice and tone reflect this balance: sentences are direct and benefit-driven ('The Woojer MAT delivers 1–250 Hz therapeutic vibrations'), never breathless or overclaimed. Vocabulary leans technical when warranted ('vibroacoustic therapy', 'transducers', 'Hz frequency range') but always paired with accessible language ('felt through your whole body', 'stress relief'). Example sentence in brand voice: 'Science-backed, high-fidelity vibroacoustic wellness mat, felt through your whole body. For stress relief, deeper sleep, fast recovery, and lasting physical ease.'

Colors

The color system is anchored in trust and clarity. Primary (#0f63d1, rgb(15, 99, 209)) is the signature accent—used exclusively on high-intent CTAs ('Try It Risk-Free'), key interactive states, and brand-critical moments. Its inverse variant (#1460d8, rgb(20, 96, 216)) provides hover depth without jarring shifts. The primary container (#a9cbff) and on-primary-container (#001d4d) create a secondary tier for supporting UI like badges or disabled states. Secondary (#3fae6a, rgb(63, 174, 106)) and tertiary (#1fb6a6, rgb(31, 182, 166)) are wellness-forward greens that signal positive actions, in-stock status, and recovery-oriented messaging. The surface stack is deliberately minimal: surface (#ffffff) and surface-dim (#f4f4f4) provide the breathing room essential to wellness design, while surfa

Typography

The type system is built on Montserrat—a geometric sans-serif that conveys modern precision while remaining warm and accessible. Display (72px, weight 900, line-height 80px, letter-spacing -0.02em) anchors hero sections and product names with commanding presence; headline-lg (40px, weight 900, line-height 48px) is reserved for major section breaks. Headline-md (28px, weight 700) and title-lg (20px, weight 700) handle subsections and card titles, maintaining visual hierarchy without excessive scale jumps. Body-lg (18px, weight 400, line-height 28px) and body-md (16px, weight 400, line-height 24px) are the workhorses for product descriptions and supporting copy—their generous line-height (1.4–1.75) aids readability on wellness-focused content. Label-md (15px, weight 700, line-height 20px, le

Layout

The layout follows a 12-column grid with a max-width of 1280px, ensuring content remains scannable on all viewports. The spacing scale is semantic: unit (8px) is the baseline; xs (4px) and sm (12px) are used for tight component spacing; md (24px) is the default gutter between sections; lg (40px) and xl (64px) create breathing room between major content blocks. Sections are separated by lg spacing (40px) on desktop, scaling down to md (24px) on mobile, preventing visual fatigue in wellness-focused contexts. Cards and containers use md padding (24px) internally, with sm (12px) gaps between nested elements. The container max-width (1280px) prevents lines of body text from exceeding ~65 characters, a critical readability metric for longer-form wellness content. White-space is intentional and a

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system uses three tiers: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for base cards and inputs, creating minimal separation from the surface; md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards, modals, and hover states, introducing gentle depth; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers or prominent overlays. All shadows use black at 8–15% opacity, never pure black, to maintain the warm, approachable aesthetic. Cards transition from sm to md on hover (200ms ease-in-

Shapes

The shape philosophy is 'Geometric Warmth'—sharp enough to convey precision and modernity, rounded enough to feel approachable and wellness-focused. Buttons use full (50% border-radius, equivalent to 100px on 48px-tall buttons) to create pill-shaped CTAs that feel inviting and clickable; this is applied to both primary and secondary buttons. Cards and containers use DEFAULT (8px) for most surfaces, balancing definition with softness. Input fields also use DEFAULT (8px) to match card styling and create visual cohesion. Larger containers and modals use lg (16px) to introduce subtle hierarchy. Ba

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#0f63d1) background with on-primary (#ffffff) text, label-md typography (15px, weight 700), 50% border-radius, and 13px 30px padding, resulting in a 48px height. On hover, the background shifts to inverse-primary (#1460d8) with a 200ms ease-in-out transition, providing clear feedback without color inversion. Button-secondary uses surface-container-high (#e8e8e8) background with on-surface (#303030) text, a 1px outline border (#cccccc), and the same padding and radius as primary, ensuring visual consistency. Secondary hover shifts to surface-container-highest (#e0e0e0). Both button variants use label-md typography to maintain hierarchy. Avoid using primary buttons for secondary actions; reserve pri

Do's and Don'ts

**Do**

• Do use primary (#0f63d1) exclusively for high-intent CTAs and critical interactive states; it's the brand's signature accent and loses impact if overused.
• Do maintain md (24px) gutter spacing between major sections and lg (40px) spacing between content blocks to preserve the wellness-focused, breathing aesthetic.
• Do apply label-md (15px, weight 700) to all button text and form labels to maintain consistent visual hierarchy across interactive elements.
• Do use the full surface stack (surface, surface-dim, surface-container variants) to create subtle depth; avoid introducing new grays or neutrals outside this palette.
• Do transition all interactive states (hover, focus, active) over 200ms ease-in-out to provide smooth, non-jarring feedback.
• Do apply 1px borders in outline (#cccccc) to cards, inputs, and containers; this creates definition without visual harshness.

**Don't**

• Don't use primary (#0f63d1) for body text, backgrounds, or non-interactive elements; reserve it for CTAs and focus states only.
• Don't mix border-radius values within a single component—use DEFAULT (8px) for cards and inputs, full (50%) for buttons and badges, and lg (16px) only for large modals.
• Don't apply shadows darker than md (0 3px 8px rgba(0, 0, 0, 0.15)) on standard cards; excessive shadow depth contradicts the accessible, approachable aesthetic.
• Don't use secondary (#3fae6a) or tertiary (#1fb6a6) as primary CTAs; these are wellness-supporting colors, not brand-signature accents.
• Don't reduce line-height below 1.4 for body text; the generous spacing aids readability and reflects the wellness-focused design philosophy.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, surface stack, error); consistency reinforces brand recognition and system coherence.