OTÉ

Overview

OTÉ is a premium Dutch eye care brand that transforms functional wellness products into a vibrant, human-centered sensory experience. The design system embraces 'Expressive Minimalism'—a movement that pairs bold, saturated color blocking (teal #00a099, gold #f8b133, deep purple #4f4f9d) with clean typography and playful illustration to create an approachable yet sophisticated brand presence. The brand serves health-conscious consumers who value both efficacy and emotional resonance, evoking a sense of joy, clarity, and empowerment through every touchpoint.

OTÉ's voice is warm, confident, and unpretentious. The brand speaks in clear, direct language without corporate jargon—favoring active verbs and sensory language. Typography is bold and condensed (Barlow Condensed at 128px for headlines), commanding attention while maintaining legibility. The color palette shifts dynamically across sections (teal hero, purple accent zones, gold highlights), creating visual rhythm that mirrors the brand's philosophy: 'Empowers your senses.' Example sentence in brand voice: 'Jouw eigen product met je eigen naam—bij ons al mogelijk vanaf 1000 stuks.'

Colors

The OTÉ color system is built on three primary accent colors that work in concert to create visual energy and guide user attention. Primary (#00a099, a vibrant teal) is the signature brand color used on CTAs, hover states, and interactive elements—it conveys trust and clarity, essential for a health-care brand. Secondary (#f8b133, a warm gold) provides warmth and optimism, deployed on badges, highlights, and supporting CTAs. Tertiary (#4f4f9d, a deep purple) adds sophistication and is reserved for section backgrounds and secondary containers, creating visual separation without harshness.

The surface stack anchors the system: surface (#ffffff) is the default canvas, with surface-container-low (#f0f0f0) used for input fields and subtle backgrounds. Surface-container-high (#e9ecef) appears o

Typography

The typography system uses Barlow Condensed for headlines and Barlow for body text, creating a distinctive visual hierarchy that balances boldness with readability. Display (128px, 600 weight, -0.04em letter-spacing) is reserved for hero headlines and commands immediate attention; headline-lg (56px, 600 weight) anchors section titles; headline-md (40px, 600 weight) is used for subsections. Body-lg (20px, 400 weight, 32px line-height) is deployed for prominent descriptive text and introductions, while body-md (16px, 400 weight, 24px line-height) serves as the standard paragraph text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and interactive labels, ensuring they feel intentional and clickable. On small labels over busy backgrounds or color blocks, apply text-s

Layout

OTÉ employs a fluid 12-column grid system with a fixed max-width of 1280px, allowing the design to scale gracefully from mobile (full-width with 24px gutter) to desktop. The page rhythm alternates between full-width color-blocked hero sections (70vh on mobile, 90vh on desktop) and contained content zones (1024px on tablet, 1280px on desktop). Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section uses 40px bottom margin before the next section, creating breathing room. Container padding is 24px on mobile and tablet, 0px on desktop (relying on the container max-width). Sections are separated by fu

Elevation & Depth

Depth in OTÉ is achieved through a restrained shadow system and strategic color blocking rather than excessive layering. Level 1 (Base): flat surfaces with no shadow, used for primary backgrounds and hero sections. Level 2 (Standard Cards & Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and dropdown panels—this creates subtle separation without visual heaviness. Level 3 (Elevated/Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), deployed on card-hover and modal overlays to signal interactivity. Hover states also include a 2px upward transform (t

Shapes

OTÉ employs 'Soft-Technical' border-radius philosophy: buttons and interactive elements use rounded-xl (0.75rem / 12px) for a friendly, approachable feel that softens the technical nature of form controls. Cards and containers use rounded-md (0.75rem / 12px) to maintain consistency. Input fields use rounded-DEFAULT (0.5rem / 8px) for a slightly sharper, more utilitarian appearance that signals data entry. Dropdown panels and modals use rounded-DEFAULT (0.5rem / 8px) to align with inputs. The full-radius (9999px) is reserved for badges, icon buttons (like the scroll-down chevron), and language

Components

Action Elements Buttons are the primary call-to-action mechanism and use three distinct styles. Button-primary (background: #00a099, color: white, padding: 16px 32px, height: 48px, rounded-xl) is the dominant CTA for primary actions ('We are Oté', 'Bekijk het volledige aanbod'). On hover, the background transitions to #7dd4cc (primary-fixed-dim) with a 2px upward transform and 300ms ease timing, creating a tactile feedback loop. Button-secondary (background: #e9ecef, color: #000000, border: 1px solid #d0d0d0, padding: 16px 32px, height: 48px, rounded-xl) is used for secondary actions and navigation links. On hover, the background shifts to #e0e0e0 and text color becomes #00a099, maintaining visual hierarchy. Button-ghost (background: transparent, color: #00a099, border: 1px solid #00a0

Do's and Don'ts

**Do**

• Do use primary (#00a099) exclusively for CTAs, focus states, and interactive affordances—never for body text or backgrounds.
• Do apply 300ms ease transitions to all interactive state changes (hover, focus, active) to reinforce the brand's polished, intentional feel.
• Do use Barlow Condensed for all headlines (display, headline-lg, headline-md) to maintain the bold, distinctive brand voice.
• Do separate major sections with full-width color blocks (teal, purple, black) and lg (40px) spacing to create visual rhythm and prevent monotony.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns, and 0 8px 24px rgba(0, 0, 0, 0.12) on hover to signal depth without heaviness.
• Do use rounded-xl (12px) for buttons and primary CTAs to convey approachability and warmth.

**Don't**

• Don't use primary color (#00a099) for body text, backgrounds, or non-interactive elements—it is reserved for CTAs and interactive states only.
• Don't apply sharp corners (0px radius) to any interactive elements; minimum is rounded-DEFAULT (8px) for inputs, rounded-md (12px) for cards.
• Don't use system fonts (system-ui, sans-serif); always specify Barlow Condensed for headlines and Barlow for body text.
• Don't apply shadows with blur > 24px or spread > 0px; keep shadows tight and purposeful (0 3px 8px or 0 8px 24px only).
• Don't mix secondary (#f8b133) and tertiary (#4f4f9d) as primary CTAs; reserve them for badges, accents, and section backgrounds.
• Don't use opacity < 0.8 on text elements; maintain WCAG AA contrast ratios (4.5:1 for body text, 3:1 for large text).