Booki

Overview

Booki is a vibrant, playful e-commerce platform designed to inspire young readers and their families through accessible, joyful digital experiences. The brand embodies a "Playful Maximalism" aesthetic—bold primary colors (golden yellow #f6d811, vibrant blue #1e87ec, energetic orange #ff6b35) paired with clean, approachable typography create an environment where learning feels like adventure. The interface celebrates curiosity and imagination through generous use of color, rounded forms, and illustrative elements that make every interaction feel inviting. Voice: warm, encouraging, and conversational—never condescending. Example sentence: "Discover stories that make you smile, learn, and dream bigger."

Colors

The color system is built on three primary accent roles: Primary (Golden Yellow #f6d811) dominates call-to-action buttons, hero sections, and key highlights—it's the brand's signature energy, warm and optimistic. Secondary (Vibrant Blue #1e87ec) supports navigation, badges, and secondary interactions, providing calm focus. Tertiary (Energetic Orange #ff6b35) accents special promotions and featured content. The surface stack uses a clean white (#ffffff) as the dominant background with carefully calibrated grays (#f8f8f5 for dim, #e9e9e6 for container-high) to create visual hierarchy without overwhelming. Text on surfaces uses deep charcoal (#1c1c1c) for primary content and medium gray (#6f6f6f) for secondary information. All interactive elements use rgba(0, 0, 0, 0.15) for subtle shadows (0

Typography

The type system pairs Montserrat (geometric, modern, friendly) for body and UI labels with e-Ukraine (distinctive, warm, expressive) for headlines and primary CTAs. This pairing creates visual personality: e-Ukraine's distinctive letterforms draw attention to key messages (headlines at 40px, 700 weight, -0.02em tracking), while Montserrat's clarity ensures readability in smaller sizes (body-md at 16px, 400 weight). Primary CTA buttons use e-Ukraine at 18px, 400 weight, 12px border-radius to feel approachable rather than rigid. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on small labels (label-sm, 12px) when placed over busy background imagery to maintain legibility. Headline-md (28px, 700 weight) is reserved for section titles; body-lg (18px, 400 weight) for descriptive copy.

Layout

The layout uses a 12-column fluid grid with a 1280px max-width container, ensuring content scales gracefully from mobile to desktop. Page rhythm is driven by the spacing scale: lg (40px) separates major sections (hero to featured books, featured to categories), md (24px) creates breathing room within card groups, and sm (12px) provides internal padding within components. The gutter (24px) maintains consistent horizontal margins on all sides. Hero sections occupy full viewport height with generous padding (lg spacing top/bottom), while content cards use md padding internally. White-space is treated as a design element—never cramped—with minimum 24px separation between interactive elements to ensure touch-friendly spacing on mobile devices.

Elevation & Depth

Depth is conveyed through a subtle shadow hierarchy and layered backgrounds. Level 1 (Base): Clean white surface (#ffffff) with no shadow. Level 2 (Standard Card): 0 3px 8px rgba(0, 0, 0, 0.15) with 1px border in outline-variant (#cccccc), creating a soft lift. Level 3 (Elevated/Hover): 0 8px 24px rgba(0, 0, 0, 0.12) with background shift to surface-container-low (#f5f5f2), used for hovered cards and modals. Input fields use a 1px solid border in outline (#cccccc) with no shadow in default state; on focus, add 0 0 0 3px rgba(30, 135, 236, 0.1) to create a soft blue halo. Buttons never use shad

Shapes

The shape philosophy is "Soft-Technical Friendliness"—rounded corners soften the digital interface while maintaining clarity and usability. Primary buttons use 12px border-radius (lg in the scale, 1rem) to feel approachable and playful; secondary buttons use 6px (md, 0.75rem) for subtle definition. Cards use 24px (xl, 1.5rem) for a more generous, inviting appearance. Input fields use 6px border-radius to align with form conventions. Badges and pills use full (9999px) border-radius for maximum softness. This graduated approach—larger radius on primary interactive elements, tighter on secondary—

Components

Action Elements Primary buttons (button-primary) use the golden yellow primary color (#f6d811) with dark text (#222222), 12px border-radius, and 48px height for comfortable touch targets. Font is e-Ukraine at 18px, 400 weight, creating a warm, inviting call-to-action. On hover, shift to primary-fixed-dim (#f6d811 with reduced brightness) and add 0 3px 8px rgba(0, 0, 0, 0.15) shadow for tactile feedback. Transition duration: 200ms ease-out. Secondary buttons use surface-container-high (#e9e9e6) background with on-surface text (#1c1c1c), 0px border-radius (sharp corners for secondary emphasis), and Montserrat at 16px, 400 weight. Tertiary buttons (button-tertiary) use the orange accent (#ff6b35) for special promotions, matching primary button dimensions and behavior.

Containers & Su

Do's and Don'ts

**Do**

• Do use the golden yellow primary (#f6d811) exclusively for primary CTAs and hero highlights—it's the brand's signature energy and must remain distinctive.
• Do pair e-Ukraine with Montserrat intentionally: e-Ukraine for headlines and primary buttons (warm, expressive), Montserrat for body text and secondary UI (clear, friendly).
• Do maintain minimum 24px spacing between interactive elements and use 48px height for all primary buttons to ensure touch-friendly, accessible interfaces.
• Do apply the shadow hierarchy consistently: 0 3px 8px for standard cards, 0 8px 24px for elevated/hover states—never mix shadow values.
• Do use rounded corners as a visual cue for interaction: 12px for primary buttons, 6px for inputs, 24px for cards—the radius communicates affordance.

**Don't**

• Don't use the secondary blue (#1e87ec) or tertiary orange (#ff6b35) as primary CTA colors—they dilute the golden yellow's distinctive brand presence.
• Don't apply text-shadow or complex effects on body-md or larger text; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) only for label-sm over busy backgrounds.
• Don't mix border-radius values arbitrarily—stick to the defined scale (6px, 12px, 24px) to maintain visual consistency and predictability.
• Don't use shadows on buttons or interactive elements—rely on color contrast and border-radius for visual separation; shadows are reserved for cards and elevated surfaces.
• Don't exceed 1280px container width or reduce gutter below 24px on desktop—the spacious layout is core to the playful, inviting brand experience.