woom

Overview

woom is a premium kids' bike brand that champions lightweight engineering, safety innovation, and joyful motion. The design system embraces a "Vibrant Playfulness" aesthetic—combining bold, saturated accent colors (neon lime #e3e82a, electric red #ff3356, sky blue #0095db) against clean, minimal surfaces to create an energetic yet trustworthy visual identity. The brand serves parents and children seeking bikes that are engineered for confidence, not compromise. The UI evokes a sense of adventure and accessibility: every interaction feels responsive, every color choice intentional, every layout spacious enough for young riders to feel in control. Voice: encouraging, precise, never condescending. Example: "Your child's next adventure starts with the right fit—we've engineered every frame to grow with them."

Colors

The woom color system is built on three pillars: a neutral foundation (white #ffffff, grays from #f5f5f5 to #222222), a bold primary accent (neon red #ff3356 for CTAs and high-priority actions), and a vibrant secondary palette (electric blue #0095db for secondary actions, neon lime #e3e82a for highlights and promotional badges). Primary (#ff3356) is used exclusively for call-to-action buttons, active states, and brand-critical interactions—it commands attention without overwhelming. Secondary (#0095db) supports navigation, secondary buttons, and informational elements. Tertiary (#e3e82a) is reserved for promotional badges, limited-edition callouts, and accent highlights that demand visual pop. The surface stack progresses from #ffffff (base) through #f5f5f5 (dim) to #c4c8d8 (container-high

Typography

The type system uses WoomMain (a custom sans-serif optimized for legibility at small sizes) across all scales, with a clear hierarchy: Display (60px, 700 weight) for hero statements, Headline-lg (40px, 700 weight) for section titles, Headline-md (28px, 600 weight) for subsections, Title-lg (20px, 600 weight) for card headers, Body-lg (18px, 400 weight) for long-form content, Body-md (16px, 400 weight) for standard UI text, Label-md (14px, 700 weight) for buttons and form labels, and Label-sm (12px, 600 weight) for badges and micro-copy. Letter-spacing is tightened on display sizes (-0.04em) to create visual impact, while body text remains neutral (0em) for readability. Line heights are generous (1.5x for body, 1.2x for headlines) to support comfortable reading on mobile and desktop. Apply

Layout

The layout system uses a 12-column grid with a max-width of 1264px, centered with auto margins. Spacing follows a 4px unit scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for full-page rhythm breaks. Container padding is consistently 24px on desktop (md spacing), reducing to 16px on tablets and 12px on mobile. Hero sections use full-bleed imagery with a 40px lg spacing margin below to separate from content. Card grids maintain 24px gaps between items, collapsing to 12px on mobile. The gutter width (24px) is applied uniformly to all major sections, creating a predictable, scannable rhythm. White-space is treated as a design element: generous margins around CTAs (minimum 24px ab

Elevation & Depth

Depth in woom is conveyed through subtle shadows and layering, never through color darkening. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and cards in neutral contexts. Level 2 (Raised): box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), applied to standard cards, input fields, and interactive elements at rest. Level 3 (Elevated): box-shadow: 0 2px 5px rgba(227, 229, 236, 1), used on hover states, modals, and floating elements. Level 4 (Floating): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), reserved for dropdowns, tooltips, and z-index-elevated components. All shadow tr

Shapes

The shape philosophy is "Friendly Precision"—rounded corners are present but restrained, signaling approachability without sacrificing clarity. Border-radius follows a 5-step scale: sm (3px) for subtle rounding on small elements (badges, chips), DEFAULT (4px) for standard UI components (inputs, small buttons), md (5px) for cards and moderate containers, lg (6px) for primary buttons and prominent interactive elements, and xl (8px) for large modals and hero containers. Full (9999px) is used exclusively for pill-shaped badges and circular avatars. The rationale: 3–6px creates a welcoming, modern

Components

Action Elements Buttons are the primary interaction pattern. **Button-primary** uses #ff3356 background, white text, 14px 700-weight label, 6px border-radius, 12px 24px padding, and 44px height. On hover, background shifts to #bc040f with a 150ms transition. **Button-secondary** mirrors the primary structure but uses white background, #222222 text, and a 1px #d0cdca border; hover state shifts background to #d8d8d8. **Button-tertiary** is transparent with #ff3356 text and no border; hover applies rgba(255, 51, 86, 0.08) background. All buttons use WoomMain 700-weight typography and apply a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition on all state changes.

Containers & Surfaces **Card** components use white background, 5px border-radius, 24px padding, 1px #d0cdca border, and 0 1px

Do's and Don'ts

**Do**

• Do use primary red (#ff3356) exclusively for high-priority CTAs and active states—it's the brand's signature accent and must never be diluted or overused.
• Do maintain 24px gutter spacing (md token) between major sections and 12px (sm token) between related content blocks to create predictable, scannable layouts.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for smooth, responsive feedback.
• Do use WoomMain 700-weight for all button labels and headlines to reinforce the brand's confident, engineering-forward personality.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to white text overlaid on photographic backgrounds to ensure legibility across image variations.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs—red (#ff3356) is reserved for the most important actions; secondary blue and tertiary lime are supporting accents only.
• Don't apply border-radius greater than 8px (xl token) on standard UI components; the brand avoids bubbly, overly-rounded aesthetics that would undermine precision positioning.
• Don't use drop shadows heavier than 0 4px 12px rgba(0, 0, 0, 0.08)—woom favors subtle depth over dramatic layering, maintaining clarity and approachability.
• Don't mix font families; WoomMain is the sole typeface across all scales and weights. System fonts (Arial, ui-sans-serif) are fallbacks only.
• Don't apply opacity or transparency to primary red (#ff3356) for hover states; instead, shift to the darker hover shade (#bc040f) to maintain color integrity and accessibility.