woom

Overview

Woom is a premium kids' bike brand that combines playful energy with engineering precision, targeting parents who value safety, lightweight design, and joy in childhood mobility. The aesthetic is 'Energetic Minimalism'—a design language that balances vibrant, saturated accent colors (neon lime #e3e82a, electric pink #ff3356, sky blue #0095db) against a clean, bright white canvas (#ffffff) and warm charcoal text (#222222). The UI evokes confidence and approachability: every interaction feels intentional, every color choice purposeful. The emotional response is one of optimism and trust—parents feel assured that their children's bikes are engineered with care, while kids feel the excitement of bold, modern design.

Woom's voice is direct, enthusiastic, and family-focused. The brand speaks in active, energetic language: 'We make the lightest, smartest, safest, most easy-to-ride kids' bikes.' Vocabulary emphasizes innovation ('lightweight engineering'), safety ('smartest design'), and joy ('easy-to-ride'). The tone avoids corporate jargon; instead, it celebrates the child's perspective and the parent's peace of mind. Example sentence in brand voice: 'NEON ON? Bold new bike colors. Exclusive free shoes.'

Colors

The color system is built on a foundation of pristine white (#ffffff) surfaces with high-contrast, saturated accents that command attention without overwhelming. Primary (#ff3356, a vibrant neon pink) is reserved exclusively for call-to-action buttons, interactive focus states, and brand-critical moments—it appears on 'Shop Now' and 'Find the right bike' CTAs, creating instant visual hierarchy. Secondary (#0095db, a confident sky blue) supports product categories, informational elements, and secondary navigation, appearing in links and badge containers. Tertiary (#e3e82a, an electric neon lime) is deployed sparingly for highlights, promotional badges, and accent text—it energizes hero sections and limited-edition callouts without competing with primary. The neutral palette uses warm charco

Typography

The type system uses WoomMain (a custom sans-serif optimized for screen legibility) across all scales, creating a cohesive, branded voice. Display (60px, 700 weight, -0.04em letter-spacing, 68px line-height) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 700 weight, 48px line-height) is used for page titles and section headers, maintaining visual dominance without overwhelming. Headline-md (28px, 600 weight, 36px line-height) breaks up content into digestible chunks. Title-lg (20px, 600 weight, 28px line-height) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) form the reading hierarchy—body-md is the default for all body copy, ensuring 24px line-height for comfortable sca

Layout

The layout system uses a 12-column grid with a max-width of 1264px, centered on the viewport with 24px gutters on desktop and 12px on mobile. White-space is generous: section separation uses 40px (lg spacing) vertically, creating breathing room between hero, product grids, testimonials, and footer. The container philosophy is 'content-first'—images and product showcases occupy full-width hero sections (with dark overlays at rgba(0, 0, 0, 0.3) for text contrast), while form sections and navigation use constrained widths to guide focus. Cards and product tiles use 24px (md spacing) internal padding with 12px (sm spacing) gaps between items. The grid is fluid on mobile (100% width with 12px side margins), shifts to 2-column at 768px breakpoint, and expands to 3–4 columns at 1024px+. Spacing t

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. Level 1 (Base/Surface): no shadow, white background (#ffffff) with 1px border at rgba(0, 0, 0, 0.05) for definition. Level 2 (Standard Card): box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), background #ffffff, used for product cards, form containers, and modals. Level 3 (Elevated/Hover): box-shadow: 0 2px 5px rgba(227, 229, 236, 1), background #f5f5f5, applied on card-hover and interactive lift states. Level 4 (Modal/Overlay): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background #ffffff with z-index 50+, used for d

Shapes

The shape philosophy is 'Friendly Precision'—rounded corners are applied consistently to signal approachability while maintaining a modern, engineered aesthetic. Buttons use 6px border-radius ({rounded.md}), creating a soft-edged, clickable appearance that's neither too sharp nor overly rounded. Input fields use 5px border-radius ({rounded.DEFAULT}), matching the button radius for visual cohesion. Cards use 5px border-radius, reinforcing the consistent, modular feel. Badges and accent elements use 9999px border-radius ({rounded.full}) for pill-shaped emphasis. The rationale: 5–6px is the 'swee

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background #ff3356, text #ffffff, 14px/700 weight label-md typography, 6px border-radius, and 12px vertical × 24px horizontal padding for a 48px total height. On hover, background shifts to #ff1a2e with a 150ms transition; on active/press, background becomes #d60a1f. Button-secondary uses a light gray background (#e8e8e8), dark text (#222222), and a 1px outline at #c4c8d8 to signal lower priority. Button-ghost has transparent background with dark text, used for tertiary actions like 'Learn more' links. All buttons include a focus ring: box-shadow: 0 0 0 3px rgba(255, 51, 86, 0.1) when focused via keyboard, ensuring accessibility.

Containers & Surfaces Cards are the primary content container. Standard

Do's and Don'ts

**Do**

• Do use primary (#ff3356) exclusively on CTAs and interactive focus states—it's the brand's signature accent and loses impact if overused.
• Do maintain 24px line-height on body text (16px font) and 28px on body-lg (18px font) for comfortable reading and accessibility.
• Do apply 40px (lg spacing) between major sections to create visual breathing room and guide the eye through content hierarchy.
• Do use 5–6px border-radius on buttons and inputs consistently—it signals modern precision without sacrificing approachability.
• Do include a 3px focus ring (box-shadow: 0 0 0 3px rgba(255, 51, 86, 0.1)) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use secondary (#0095db) or tertiary (#e3e82a) on primary CTAs—they dilute the brand's visual hierarchy and confuse user intent.
• Don't apply shadows deeper than 0 4px 12px rgba(0, 0, 0, 0.08)—woom's aesthetic is bright and airy, not dark or heavy.
• Don't use border-radius >16px on buttons or cards—it feels bubbly and undermines the engineering-focused brand personality.
• Don't set line-height <24px on body text—it reduces readability and accessibility, especially for children and parents with vision challenges.
• Don't mix font families—use WoomMain for all UI text and Lexend Deca only for form inputs to maintain visual consistency.