Shokz

Overview

Shokz is a performance audio brand that designs open-ear and bone conduction headphones for athletes, commuters, and active individuals who demand situational awareness without sacrificing sound quality. The design system embodies "Technical Minimalism"—a philosophy that strips away visual noise while maintaining precision and clarity. Every interface element serves a functional purpose, with a warm accent color (#ff7a3d) that energizes the predominantly neutral palette. The brand personality is confident yet approachable: knowledgeable without being condescending, energetic without being chaotic. Voice example: "Your ears stay open. Your music stays on."

Colors

The Shokz color system balances a clean, neutral foundation with a distinctive warm orange accent that signals interactivity and brand presence. Primary (#ff7a3d) is used exclusively on call-to-action buttons, active states, and key interactive elements—it's the visual signature that makes Shokz recognizable across all touchpoints. The surface stack progresses from pure white (#ffffff) at the base through subtle grays (#f3f3f3, #e5e7eb) for container hierarchy, enabling clear visual separation without heavy shadows. On-surface text (#2f2f2f) provides 15.5:1 contrast against white, ensuring accessibility and legibility. Secondary (#334fb4) is reserved for data visualization, status indicators, and secondary CTAs, creating a cool counterpoint to the warm primary. The outline color (#bababa)

Typography

The typography system pairs two custom Shokz typefaces: Shokz Sans Display for headlines and Shokz Sans Text for body content. Display (60px, 400 weight, -0.02em tracking) creates dramatic impact on hero sections and product showcases. Headline-lg (40px) is used for page titles and major section breaks, while headline-md (28px) organizes content hierarchy. Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and UI copy, chosen for its legibility at small sizes and on-screen clarity. Label-md (14px, 600 weight) is applied to buttons and interactive labels, with 0.01em tracking to add subtle sophistication. All headlines use -0.01em to -0.02em negative letter-spacing to create visual compression and energy. On small labels over busy product imagery, apply t

Layout

The layout system uses a 12-column grid with a fixed max-width of 1248px, centered on desktop and fluid on mobile. Spacing follows an 8px base unit: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right margins on desktop, collapsing to 16px on tablet and 12px on mobile. Container max-width of 1248px prevents content from stretching excessively on ultra-wide displays. White-space is generous—sections are separated by lg (40px) spacing to create breathing room and reduce cognitive load. Product cards use md (24px) padding internally, with sm (12px) gaps between grid items.

Elevation & Depth

Depth in the Shokz system is achieved through subtle shadows and layering rather than heavy drop-shadows. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders at {colors.outline} for definition. Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied on hover or focus, creating a gentle lift. Level 3 (Modals & Overlays): box-shadow: 0 12px 48px 4px rgba(0, 0, 0, 0.12) for maximum prominence. Shadows use a neutral black with 12-15% opacity to maintain the clean aesthetic. Interactive elements transition between shadow states over 200ms (ease-in-out) to signal

Shapes

The Shokz shape language follows "Precision Geometry"—a philosophy that favors subtle, functional corner radii over organic curves. Buttons and inputs use 4px (0.25rem) border-radius, creating a modern, tech-forward appearance without the softness of larger radii. Cards and containers use 8px (0.5rem) for slightly more breathing room. Modals and elevated surfaces use 12px (0.75rem) to signal importance and separation from the base layer. Badges and pills use full (9999px) for a compact, label-like appearance. This tiered approach creates visual hierarchy: sharper corners for interactive elemen

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#ff7a3d) background with white text, 48px height, 12px 24px padding, and 4px border-radius. On hover, the background shifts to #ff9966 (primary-fixed-dim) over 200ms, with no scale transform to maintain precision. Button-secondary uses a transparent background with a 1px outline at {colors.outline}, maintaining visual weight without competing for attention. Both button variants use label-md typography (14px, 600 weight) for crisp, scannable text. Focus states apply a 3px outline at {colors.primary} with 4px offset, meeting WCAG AAA standards.

Containers & Surfaces Cards use {colors.surface} background with 1px border at {colors.surface-variant}, 24px padding, and 8px border-radius.

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff7a3d) exclusively for primary CTAs, active states, and brand-critical interactions—it's the visual anchor that makes Shokz recognizable.
• Do maintain 1px borders at {colors.outline} on cards and containers to define edges without heavy shadows, keeping the interface clean and technical.
• Do apply 4px border-radius consistently to buttons and inputs—it's the signature shape that signals precision and modernity.
• Do use md (24px) spacing for section separation and gutter margins; it creates breathing room without excessive whitespace.
• Do apply transitions (200ms ease-in-out) to all interactive state changes (hover, focus, active) to signal responsiveness and polish.

**Don't**

• Don't use shadows heavier than 0 12px 48px 4px rgba(0, 0, 0, 0.12)—the brand aesthetic is clean and minimal, not layered or heavy.
• Don't apply border-radius larger than 12px to standard components; it softens the technical precision that defines Shokz.
• Don't use secondary (#334fb4) or tertiary colors on primary CTAs—primary (#ff7a3d) is the only accent color for main actions.
• Don't reduce padding below sm (12px) on buttons or inputs; it compromises touch targets and visual hierarchy.
• Don't animate scale transforms on button hover; use color and shadow changes only to maintain the precise, controlled brand personality.