Pixie Crew Design System

Overview

Pixie Crew presents a vibrant, youth-focused e-commerce experience centered on pixel-art creativity products—backpacks, pencil cases, wristbands, and themed accessories. The visual system is anchored by an unexpectedly bold choice: a saturated magenta-pink ({colors.canvas} — #e6007e) serves as the dominant canvas color in key brand moments, creating immediate visual energy against the otherwise clean white ({colors.surface}) product browsing environment. This duality—playful voltage meeting functional clarity—defines the entire design language.

Brand authority lives in a deep indigo-purple ({colors.primary} — #29235c) that appears across navigation bars, headings, primary buttons, and structural elements. It's a sophisticated counterweight to the exuberant pink, lending credibility to the marketplace while maintaining creative warmth. Accent colors extend this palette into semantic territory: a lively green ({colors.brand-green} — #3aaa35) powers search CTAs and success states, sky blue ({colors.brand-blue} — #2dae1a) marks informational dividers, and sunny yellow ({colors.brand-yellow} — #ffc702) provides occasional highlight punctuation.

The single typographic move that defines this system is its exclusive reliance on Varela Round, a geometric sans-serif with deliberately softened terminals and nearly uniform stroke weight. Every element—from 26px display headlines to 11.2px legal captions—uses this face at weight 400 (with rare 700 exceptions in cookie-banner CTAs). There is no bold/regular hierarchy; scale and color carry all emphasis work. The rounded letterforms echo the physical pixel products being sold, creating subconscious cohesion between digital interface and tangible merchandise.

Shape language reinforces the playful-yet-polished ethos through a restrained radius vocabulary: {rounded.sm} (3px) on inputs and social buttons, {rounded.DEFAULT} (5px) on cards and standard containers, {rounded.pill} (50%) on badges and avatar-like elements, and purposeful asymmetry via {rounded.top-only} for card headers. Nothing exceeds 8px except fully circular elements, keeping the system feeling contained rather than cartoonishly bubbly.

Sub-systems visible in this view include: the main navigation dialect (dark indigo full-width bar with white uppercase links), the cookie consent overlay (near-black modal with heavy-weight CTAs), the sidebar information card (indigo rounded badge with pink-accented list items), and the hero carousel (full-width image band with overlaid badge text). Each sub-system maintains token consistency while establishing distinct spatial personalities.

Key Characteristics:

• Canvas alternates between {colors.canvas} (magenta-pink brand moments) and {colors.surface} (white product zones)—never gray
• All type is Varela Round; hierarchy comes from size (26px→18px→16px→11.2px) and color ({colors.body} vs {colors.ink} vs {colors.muted})
• Brand voltage concentrates in three locations: the implicit pink energy of the logo mark, the indigo navigation bar, and green CTA buttons
• Corner treatment maxes out at 5px for rectangles; circles use true 50% radius
• Cookie consent uses a dramatically darker surface ({colors.primary-dark}) than the main site, creating modal depth without traditional drop shadows
• Sidebar list items employ {colors.error} (pink) for text, repurposing brand energy into informational emphasis
• Spacing clusters around 10px ({spacing.lg}) as the atomic unit for internal component padding, scaling to 158px for major sectional breaks
• Transition duration sits at 300ms with ease-out curves, giving interactions a snappy but not jarring feel
• No gradients detected anywhere—the system relies on flat color blocks and photography for visual richness

Colors

Brand & Accent

• Primary Indigo ({colors.primary} — #29235c): Deep navy-purple anchoring navigation bars, headings, outline button borders, and primary text hierarchy. The "serious" half of the brand duality.
• Primary Dark ({colors.primary-dark} — #1a1937): Near-black variant used exclusively in the cookie consent banner background, providing maximum modal contrast.
• Brand Pink ({colors.brand-pink} — #e6007e): Saturated magenta appearing as the conceptual "canvas" color in brand identity moments, sidebar link text, and error/semantic contexts. High-energy emotional core.
• Brand Blue ({colors.brand-blue} — #2dae1a): Sky-cyan used for horizontal divider lines in sidebar sections and informational accents.
• Brand Green ({colors.brand-green} — #3aaa35): Lively leaf green powering the main search CTA button ("HLEDAT") and success state indicators.
• Brand Yellow ({colors.brand-yellow} — #ffc702): Sunny gold reserved for highlight accents and potential rating-star treatments (inferred from palette presence).
• Facebook Blue ({colors.facebook} — #4267b2): Social auth button background, matching official Facebook brand color.
• Google Border ({colors.google-border} — #dadada): Light gray border for Google sign-in button, following Material Design conventions.

Surface

• Canvas Pink ({colors.canvas} — #e6007e): Theoretical base layer color—appears in brand-adjacent contexts though the main page renders white. Carries the pink energy forward structurally.
• Surface White ({colors.surface} — #ffffff): Dominant background for header, product areas, cards, and input fields. The "breathing room" of the system.
• Surface Soft ({colors.surface-soft} — #ffffff): Alias for surface white, used interchangeably in card components.
• Surface Strong ({colors.surface-strong} — #f1f1f1): Medium-light gray for subtle differentiation zones, likely used in disabled states or secondary backgrounds.
• Surface Light ({colors.surface-light} — #f8fafb): Near-white with faint blue tint, used specifically for the cookie accept button background to soften contrast.
• Surface Black ({colors.surface-dark} — #000000): Pure black for maximum-contrast contexts or decorative inverse treatments.

Text

• Ink Gray ({colors.ink} — #4d4d4d): Primary body text color for readable paragraphs, descriptions, and general content. Softer than pure black for extended reading comfort.
• Body Indigo ({colors.body} — #29235c): Heading-level text color matching primary brand, used for h1-h4 elements and emphasized UI labels.
• Muted Gray ({colors.muted} — #767676): Secondary text for timestamps, metadata, placeholder hints, and de-emphasized information.
• Muted Soft ({colors.muted-soft} — #999999): Tertiary text level for very subtle captions, disabled hints, or tertiary navigation.
• On Primary ({colors.on-primary} — #ffffff): White text for legibility on dark surfaces (nav bar, cookie banner, colored buttons).
• On Dark ({colors.on-dark} — #ffffff): Alias for on-primary, used when referencing near-black or very dark surfaces.
• On Surface ({colors.on-surface} — #4d4d4d): Alias for ink gray, explicitly indicating text-on-white-surface usage.

Hairlines & Borders

• Hairline Standard ({colors.hairline} — #919191): Medium-gray border for input fields, card outlines, and general dividers. Visible but unobtrusive.
• Hairline Soft ({colors.hairline-soft} — #dadada): Light-gray border for subtle separation (Google button border, minor dividers).
• Border Strong ({colors.border-strong} — #29235c): Indigo-colored border for outlined buttons (login, secondary actions), carrying brand color into edge definition.

Semantic

• Success Green ({colors.success} — #3aaa35): Maps to brand green, used for confirmation states, successful actions, and positive indicators.
• Error Pink ({colors.error} — #e6007e): Maps to brand pink, used for validation errors, destructive actions, or attention-demanding states.
• Info Blue ({colors.info} — #2dae1a): Maps to brand blue, used for informational tooltips, help text, and neutral guidance.
• Link Default ({colors.link} — #29235c): Indigo-colored inline links matching body heading color.
• Link Hover ({colors.link-hover} — #e6007e): Pink hover state for links, adding interactive energy on engagement.

Typography

Font Family

The entire system runs on Varela Round, a geometric humanist sans-serif designed by Joe Varela. Its defining characteristic—softened, almost blob-like terminal treatments and circular bowl shapes—creates immediate approachability and visual warmth perfectly aligned with a youth creative-products brand. The font's near-uniform stroke width means weight changes produce minimal visual difference, which is why the system relies almost exclusively on font-weight: 400 (normal), reserving font-weight: 700 (bold) only for the highest-conversion CTAs within the cookie consent modal. The fallback stack is `"Varela Round", sans-serif, ensuring graceful degradation to system round-ish faces if the CDN-hosted font fails to load.

Varela Round plays every role: display headlines, section titles, body copy, button labels, captions, and even uppercase navigation items. This mono-typeface approach creates strong cohesion but requires careful attention to size scaling to maintain hierarchy—there is no "switch to a serif for headings" escape hatch available in this system.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 32px | 700 | 1.2 | 0 | Hero headlines, campaign titles (rare—heavy weight reserved for impact) | | {typography.display-lg} | 26px | 400 | 1.1 | 0 | Page H1, main headlines, hero badge text | | {typography.title-md} | 18px | 400 | 1.1 | 0 | H2 section headings, sidebar card titles | | {typography.title-sm} | 16px | 400 | 1.31 | 0 | H4 sub-headings, card titles, feature labels | | {typography.body-md} | 16px | 400 | 1.38 | 0 | Paragraph text, product descriptions, cookie body copy | | {typography.body-sm} | 14px | 400 | 1.4 | 0 | Input placeholders, button labels, secondary body text | | {typography.caption} | 11.2px | 400 | 0.89 | 0 | Legal text, metadata, tiny labels (unusually tight leading) | | {typography.button} | 14px | 400 | 1.25 | 0 | Standard button labels, nav items | | {typography.button-heavy} | 16px | 700 | 1.25 | 0 | High-emphasis CTAs (cookie consent only) | | {typography.label-uppercase} | 14px | 400 | 1.25 | 0.05em | Uppercase utility labels ("PŘIHLÁSIT SE") |

Principles

The typography system trusts scale and color to carry almost all hierarchical work. With Varela Round's limited weight range (the jump from 400 to 700 is visually smaller than in Helvetica or Inter), the designer avoids weight-based emphasis entirely outside the cookie modal. Instead, a 26px headline in {colors.body} (indigo) reads clearly as more important than a 16px paragraph in {colors.ink} (gray), despite sharing the same font-weight. This color-size matrix is the primary organizational tool.

Line heights are consistently tight: display text sits at 1.1–1.2x (creating compact headline blocks), body text at 1.38x (comfortable but not loose), and the caption role at a remarkably constricted 0.89x (suggesting these elements are meant to be single-line or tightly stacked legal footers). Letter-spacing remains at normal (0) for all roles except the uppercase label token, which adds 0.05em to prevent the rounded glyphs from colliding in caps.

There are no italic variants in use, no monospace tokens (code samples would need special handling), and no custom letter-spacing treatments beyond the label-uppercase exception. The system's "signature typographic moment" is arguably the hero badge—a {typography.display-lg} headline rendered in white on indigo inside a pill-shaped container—which combines scale, color inversion, and shape rounding into a distinctive lockup that feels both playful and intentional.

Note on Font Substitutes

Varela Round is a freely available Google Font (hosted at fonts.google.com under the name "Varela Round"). For implementation, reference it directly via Google Fonts CDN:

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
  --font-family-base: 'Varela Round', sans-serif;
}

If Varela Round is unavailable (offline environments, strict CDN policies), the closest Google Font substitute is Quicksand (similar rounded geometry, slightly wider proportions) or Nunito (softer terminals, good weight range). Neither matches exactly—Varela Round's specific terminal treatment is unique—but both preserve the "friendly rounded" voice better than falling back to system sans-serifs like Arial or Helvetica. Define fallback variables in your design tokens to allow quick substitution without touching component code.

Layout

Spacing System

• Base unit: 10px ({spacing.lg}) serves as the atomic internal padding value for inputs, buttons, and card interiors.

• Tokens:

  • {spacing.xxs} (4px): Micro-gaps between inline elements, checkbox margins.
  • {spacing.xs} (5px): Small internal offsets, icon-text gaps.
  • {spacing.sm} (6px): Tight list item spacing, compact stack margins.
  • {spacing.md} (8px): Standard gap between sibling elements, small grid gutters.
  • {spacing.lg} (10px): Input padding vertical, button padding, card internal padding baseline.
  • {spacing.xl} (15px): Section-internal margins, form field gaps.
  • {spacing.xxl} (19px): Observed in specific component contexts (likely derived from a 20px base minus border).
  • {spacing.section-sm} (20px): Minor sectional breaks between content blocks.
  • {spacing.section-md} (30px): Medium vertical rhythm between major page sections.
  • {spacing.section-lg} (40px): Large padding for hero bands and featured content zones.
  • {spacing.section-xl} (158px): Exceptional break—likely the full viewport-height padding for the hero carousel or a major campaign section.

• Section padding (vertical): {spacing.section-lg} (40px) for standard content bands; {spacing.section-xl} (158px) for hero-level impact zones.

• Card internal padding: {spacing.lg} (10px) on most product and content cards, with some variations using {spacing.xl} (15px) for breathing room.

• Gutters: Grid gutter widths inferred at 20–30px based on the 1418px container width and visible column distribution in the hero/sidebar layout.

Grid & Container

• Max content width: 1418px (main container), 1425px (header container)—nearly identical, suggesting a ~1400px content max with slight header overflow for edge-to-edge nav bar treatment.
• Density choice: Marketplace-dense—the hero section splits roughly 65%/35% between carousel image and sidebar information, maximizing above-the-fold content exposure. Product grids appear to target 3-column layouts at desktop width (per the columns-3 body class).
• Desktop grid behavior: The homepage employs a two-zone layout below the header: a full-width hero carousel occupying the left ~66% of viewport width, with a right-rail sidebar (~33%) containing the "Jak PIXIE CREW funguje?" informational card and additional promotional imagery. This right rail does not appear sticky in current observations but may become so on longer scroll depths.
• Hero column splits: Left zone (carousel): image-forward, minimal text overlays via {component.hero-badge} pills. Right zone (sidebar): structured information card with list items, followed by photographic content block.

Whitespace Philosophy

This system practices generous containment with dense interiors. Sectional breaks (40–158px) provide ample vertical breathing room between major content blocks, preventing the colorful palette from feeling chaotic. However, within those blocks—particularly in the header, navigation bar, and sidebar card—spacing is comparatively tight, packing multiple interactive elements into compact horizontal bands. This mirrors physical retail environments where shelf displays are densely stocked but aisle widths remain generous.

Header Architecture

┌─────────────────────────────────────────────────────────────────────┐
│ [Phone] [Email]     O NÁS | DOPRAVA A PLATBA | KONTAKT | ...  CZK │  ← top-bar (30px)
├─────────────────────────────────────────────────────────────────────┤
│ [Logo]          [Search Input ██████████] [HLEDAT]   🛒 Košík       │  ← header-main (80px)
├─────────────────────────────────────────────────────────────────────┤
│ CELÝ KATALOG  ŠKOLNÍ POTŘEBY  DÁRKY  HRÁČKY  TÉMATICKÉ...  NOVINKY │  ← nav-bar (48px)
└─────────────────────────────────────────────────────────────────────┘
                                  ↑ max-width ~1425px container centering

Three-tier header structure: thin utility bar at top, main branding/search/cart row in middle, full-width category navigation at bottom (indigo background).

Hero Section

┌───────────────────────────────────┬─────────────────────────────────┐
│                                   │  ┌───────────────────────────┐  │
│                                   │  │ Jak PIXIE CREW funguje?   │  │  ← sidebar-card (pill)
│        [Hero Carousel Image]      │  └───────────────────────────┘  │
│                                   │                                 │
│  ┌─────────────────────────────┐  │  □ Nasad pixely na trny       │  │
│  │ Zábava a tvoření            │  │ □ Vytvoř Tvůj obrázek         │  │  ← sidebar-list-items
│  │ Léto plné dobrodružství     │  │ □ Sunděj pixely              │  │  (pink text)
│  └─────────────────────────────┘  │  □ Nasad pixely na trny       │  │
│        [Badge Pills]              │                                 │  │
│                                   │  ═══════════════════════════   │  │  ← divider-line (blue)
│                                   │                                 │  │
│                                   │  [Promotional Photo Block]     │  │
└───────────────────────────────────┴─────────────────────────────────┘
         ~66% width                           ~33% width

Left zone features a full-bleed carousel with overlaid text badges (green-icon + indigo text pills). Right zone contains the informational sidebar card with pink-accented checklist items, a blue horizontal rule separator, and secondary photographic content.

Cookie Consent Overlay

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│  SOUHLAS SE SOUBORY COOKIES                              [Souhlasím]   │  ← button-cookie-accept
│                                                                         │  ← cookie-banner (dark bg)
│  Tento web používá soubory cookie, které pomáhají webu                  │     (primary-dark)
│  fungovat...                                                            │
│                                                    [Nastavení]          │  ← button-cookie-settings
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
                    ↑ fixed bottom overlay, full-width, z-index high

Dark modal overlay with heavy-weight (700) CTAs positioned right-aligned. Accept button uses light background for emphasis; Settings button is transparent/outlined.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, solid {colors.surface} background | Header, main content areas, flat buttons | | 1 – Hairline | 1px solid {colors.hairline} border | Input fields, card edges, subtle dividers | | 2 – Soft Drop | rgba(27, 25, 57, 0.5) 0px 0px 30px 0px | Cookie consent modal (deep indigo tint) | | 3 – Modal Elevation | Same shadow as Level 2 + dark overlay backdrop | Full-screen cookie banner context |

Philosophy: The system is predominantly flat with strategic depth. Unlike SaaS products that layer shadows to create "floating card" hierarchies, Pixie Crew uses shadows sparingly—only the cookie consent modal exhibits significant elevation, and even then it's a single diffuse shadow with a cool-toned (indigo-tinted) cast rather than neutral gray. This keeps the focus on color blocking and photography rather than artificial layering. Buttons rely on background-color changes rather than inset/shadow depth cues. The one exception is the cookie banner's dramatic dark background, which creates perceived depth through value contrast (light-on-dark inversion) rather than z-axis positioning.

Decorative Depth: Photography provides the primary depth mechanism in the hero section—lush Minecraft-themed illustrated scenes create immersive visual space without any gradient washes, parallax layers, or glassmorphism effects. The system trusts imagery over CSS tricks for atmospheric depth.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 3px | Text inputs, social login buttons, cookie CTAs | | {rounded.DEFAULT} / {rounded.md} | 5px | Product cards, standard containers, default component corners | | {rounded.lg} | 8px | Card header tops (asymmetric {rounded.top-only}), larger containers | | {rounded.pill} | 50% (fully circular) | Navigation badges, sidebar card backgrounds, icon avatars, status dots | | {rounded.top-only} | 8px 8px 0px 0px | Card containers with squared bottoms (observed in potential card patterns) | | {rounded.bottom-only} | 0px 5px 5px 0px | Asymmetric corner treatment for specialized UI elements |

Photography Geometry

Hero carousel images render full-bleed within their container with no corner rounding, edge-to-edge filling the left content zone. Promotional photography in the sidebar (hands working with pixel board, product close-ups) appears in rectangular containers with possible subtle rounding (likely 5px matching the card system). Aspect ratios favor landscape orientation (roughly 16:9 or 4:3) for hero imagery, while sidebar photos may be square or slightly portrait to fit the narrow rail. Avatar-style circular elements (icon circles at 28px diameter) use the {rounded.pill} treatment. No observed use of mask clipping, diagonal crops, or organic blob shapes—geometry remains strictly rectilinear or fully circular.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-cookie-accept}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-search} — The primary conversion action in the header search bar. Bright green background ({colors.brand-green}) with white text ({colors.on-primary}), small 3px radius ({rounded.sm}), and 10px×16px padding. Sits immediately adjacent to {component.search-input} forming a connected search widget. Height locked to 42px for alignment with the input field.

{component.button-cookie-accept} — Highest-emphasis CTA in the entire system, appearing only in the cookie consent banner. Off-white background ({colors.surface-light}) with near-black text ({colors.primary-dark}), heavy 700 font weight ({typography.button-heavy}), and compact 44px height. Paired with {component.button-cookie-settings} which inverts the treatment (transparent background, light text, 2px border).

{component.button-cookie-settings} — Secondary action in cookie modal. Transparent background with 2px solid light-colored border ({colors.surface-light}), same heavy weight as accept button. Provides a "settings" pathway without competing visually with the primary accept action.

{component.button-login} — Text-only outline button in header utilities. White background, indigo text and 1px border ({colors.border-strong}), zero border-radius (sharp corners distinguishing it from softer elements), uppercase text transform, and compact 5px×15px padding. Links to authentication flow.

{component.button-facebook} — Social authentication option. Official Facebook blue ({colors.facebook}) background with white text, 3px radius, standard button padding. Would typically include a Facebook icon prefix (66px left padding observed suggests icon space).

{component.button-google} — Alternative social auth. White background with medium-gray border ({colors.google-border}), gray text ({colors.ink}), 3px radius. Mirrors Facebook button dimensions for alignment. Also includes 66px left padding for Google "G" icon.

Cards & Containers

{component.product-card} — Standard product display unit (inferred from marketplace structure). White background, gray body text, 5px rounded corners, 10px internal padding. Would contain product image, title in {colors.body}, price, and add-to-cart action. No explicit shadow detected—relies on background-color distinction from page surface.

{component.sidebar-card} — Informational container in the right-hand hero rail. Deep indigo background ({colors.primary}), white text ({colors.on-primary}), fully pill-shaped (50% radius) creating a badge-like appearance. Contains the "Jak PIXIE CREW funguje?" title in {typography.title-md}. Padded 12px×24px horizontally for comfortable text wrapping.

{component.cookie-banner} — Fixed-bottom overlay container. Near-black background ({colors.primary-dark}) spanning full viewport width with 24px×32px internal padding. Wraps explanatory text and dual CTA buttons. Uses the heaviest shadow in the system ({extensions.shadows.cookie-modal}) for lift from underlying content.

{component.promo-band} — Full-width promotional content area (inferred below hero). White background with large 40px vertical padding, hosting {typography.display-xl} headlines and marketing copy. Likely alternating with other content sections for rhythmic scrolling.

Inputs & Forms

{component.search-input} — Header search field. White background, gray placeholder/text color ({colors.ink}), 1px medium-gray border ({colors.hairline}), 3px rounded corners. Internal padding 10px×12px, 42px height matching adjacent button. Focus state ({component.text-input-focus}) maintains same visual properties with browser-default focus ring enhancement.

{component.text-input} — Generic form input pattern (extracted from email/password fields). Identical styling to search input: white background, gray text, bordered, 3px radius, 10px×12px padding, 42px height. Represents the canonical text entry component reused across checkout, account, and newsletter forms.

{component.text-input-focus} — Focused state of text inputs. Extracted CSS shows no explicit style change from default, suggesting either transparent focus treatment or JS-driven class toggling not captured in static extraction. Implementation should add a subtle border-color shift to {colors.primary} or a light box-shadow ring on :focus.

Navigation

{component.top-bar} — Thin utility strip at page top (30px height). White background with tiny 11.2px caption text ({typography.caption}) in gray ({colors.ink}). Houses phone number, email, utility links (O NÁS, KONTAKT, etc.), currency selector (CZK), and login trigger. Minimal visual weight—functional only.

{component.header-main} — Primary branding header (80px height). White background containing the colorful PIXIE CREW logo mark (left-aligned), central search widget ({component.search-input} + {component.button-search}), and right-aligned cart icon with "Prázdný košík" label. The visual anchor of the page.

{component.nav-bar} — Category navigation bar (48px height). Full-width indigo background ({colors.primary}) breaking out of container constraints. White uppercase text links ({typography.button}) for: CELÝ KATALOG, ŠKOLNÍ POTŘEBY, DÁRKY, HRÁČKY, TÉMATICKÉ KOLEKCE, NOVINKY. This is the most visually dominant navigational element.

{component.cart-button} — Cart access control in header. Transparent background (no fill), gray text, circular click target (40px×40px, 50% radius). Contains shopping cart icon and item count/status text "Prázdný košík". Functions as both icon button and text label hybrid.

Sub-Systems & Signature Components

{component.hero-carousel} — Full-width image carousel in the left hero zone. White background container (technically transparent over page surface) holding large photographic/illustrated content. Current slide shows Minecraft-themed summer camp illustration with overlaid text badges. No intrinsic padding—image fills container edge-to-edge.

{component.hero-badge} — Overlay badge component on carousel slides. Indigo background ({colors.primary}), white text ({typography.display-lg}), pill-shaped (50% radius). Used for "Zábava a tvoření" and "Léto plné dobrodružství" labels. Preceded by small circular icon indicators ({component.icon-circle} in green) creating a list-like appearance within the badge cluster.

{component.sidebar-list-item} — Informational checklist row inside {component.sidebar-card}. Transparent background, pink/magenta text ({colors.error} repurposed for brand energy), square checkbox icon (■) preceding each line. Items: "Nasad' pixely na trny", "Vytvoř Tvuj obrázek", "Sunděj pixely", etc. 8px vertical padding between items creates a breathable list density.

{component.divider-line} — Horizontal rule element. Solid {colors.brand-blue} (sky cyan) background, 4px height, full width of parent container. Used below the sidebar checklist to separate list content from the subsequent photographic block. Provides color-block punctuation without semantic meaning.

{component.icon-circle} — Status indicator or decorative bullet. Green circle ({colors.brand-green}) background with implied white icon inside, 28px diameter (fully rounded). Observed preceding hero badge text lines as visual anchors.

{component.footer} — Page footer region (inferred). White background, muted gray text ({colors.muted}), small body-sm typography, 30px vertical padding. Expected to contain company info, contact details, payment icons, and legal links based on e-commerce conventions.

Do's and Don'ts

Do

• Do use {colors.primary} (indigo) for all navigation backgrounds, heading text, and primary outline button borders—it's the authoritative brand anchor.
• Do apply {typography.display-lg} at 26px weight 400 for H1 headlines—never artificially bold them, let size carry emphasis.
• Do reserve {colors.brand-green} (#3aaa35) exclusively for the main search CTA button and success confirmations—its vibrancy signals "go" actions.
• Do implement cookie consent with {colors.primary-dark} (#1a1937) background and {typography.button-heavy} (weight 700) CTAs—this high-contrast modal treatment is non-negotiable for compliance visibility.
• Do use {rounded.pill} (50% radius) for the sidebar information card and any badge/label elements—this extreme rounding creates the signature "friendly capsule" shape.
• Do maintain 10px ({spacing.lg}) as the base internal padding for all inputs, buttons, and card interiors—this atomic unit ensures consistent tactile density.
• Do allow hero carousel images to render edge-to-edge without corner rounding or shadows—photography should feel immersive and unconstrained.
• Do apply {colors.error} (#e6007e pink) for sidebar list item text when you want brand-energy emphasis in informational contexts—this semantic repurposing is intentional.
• Do keep the three-tier header structure (utility bar → main header → category nav) intact—the indigo nav bar's full-width breakout is a critical visual landmark.
• Do use Varela Round at weight 400 for 95% of all type—reserve weight 700 only for cookie modal CTAs where conversion pressure justifies visual shout.

Don't

• Don't introduce gradients, glassmorphism, or textured backgrounds—the system is entirely flat color blocks and photography.
• Don't exceed 8px border radius on rectangular containers—anything needing more roundness should go fully circular with {rounded.pill} instead of intermediate values like 12px or 16px.
• Don't use black (#000000) for body text—always prefer {colors.ink} (#4d4d4d) for reading comfort, saving pure black for the cookie modal background only.
• Don't mix font families—every element from headlines to legal fine print must use Varela Round; there is no serif pairing or monospace exception in this design.
• Don't add drop shadows to product cards or standard UI elements—the only elevated component is the cookie banner, and even that uses a single diffuse shadow, not layered depth.
• Don't make the search button anything other than green ({colors.brand-green}) with white text—it's the highest-frequency conversion point and must maintain instant recognizability.
• Don't uppercase navigation items beyond what's already specified—the login button uses uppercase ({typography.label-uppercase}) but nav bar items should follow the extracted casing (observed as uppercase but verify per locale).
• Don't expand the color palette beyond the defined 30+ tokens—if you need a new shade, derive it from existing hex values (lighten/darken) rather than introducing unrelated hues.
• Don't reduce spacing below 4px ({spacing.xxs}) for any interactive element—this system maintains minimum touch-target clarity even in dense layouts.
• Don't forget that {colors.canvas} is conceptually magenta-pink (#e6007e), not white—the white pages represent {colors.surface}, and the canvas color appears in brand-edge contexts.

Motion & Animation

Transition Tokens

--transition-base: all 0.4s ease;
--transition-color: color 0.3s ease-out, background-color 0.3s ease-out;
--transition-transform: transform 0.6s ease-in-out;
--transition-opacity: opacity 0.3s ease-out, opacity 0.35s ease;
--transition-custom: 0.45s ease-out;

Keyframe Animations

• spin — Continuous 360-degree rotation (used for loading spinners, likely the cookie consent processing indicator).
• flash-bg — Background color flash/pulse (possibly for form validation feedback or sale badge attention-grabbing).
• fb_transform — Facebook-specific transform animation (social login button micro-interaction, possibly a scale or translate effect on auth hover/press).
• rotateSpinner — Dedicated spinner rotation variant (alternative to generic spin, possibly with easing differences for loading states).

Interaction Patterns

• Carousel slide transitions: Hero content cycles with 0.6s ease-in-out transform timing, suggesting smooth horizontal translation between slides (not crossfade or scale).
• Cookie banner entrance: The consent modal likely fades in with opacity transition (0.3–0.35s ease-out) combined with a subtle upward Y-translate for "slide-up-from-bottom" reveal.
• Button press states: Social auth and CTA buttons probably exhibit subtle scale-down (0.98–0.99) on active/click with 300ms timing, providing tactile feedback.
• Focus ring expansion: Input fields may animate border-color shift to {colors.primary} or grow a subtle box-shadow on focus (timing: 200–300ms ease-out).
• Nav hover behavior: Category navigation items likely show background-color lighten/darken shifts or underline growth on hover (not captured statically, infer from standard e-commerce patterns).
• Cart count update: Cart icon may pulse or briefly scale when items are added (opacity flash-bg animation candidate).
• Sidebar list interaction: Checklist items could toggle checkmark state with color transition from pink to green (success state) on completion/interaction.

No scroll-triggered parallax or intersection-observer animations were detected in extracted CSS—motion appears limited to direct user interaction responses (clicks, focus, hover) and continuous looping animations (spinner).

Imagery Style

• Photographic/Illustrated: Hero carousel features richly detailed 3D-rendered illustrations in a Minecraft/block-pixel aesthetic—vibrant outdoor scenes with campfires, character avatars in pixelated textures, fantasy landscapes with waterfalls and forests.
• Product Photography: Sidebar shows hands-on product shots (pixel board manipulation, pencil case close-ups) with warm natural lighting, shallow depth-of-field focusing on the product, and skin-tone-friendly color temperature suggesting child-user contexts.
• Color Treatment: Images are highly saturated, matching the brand's vivid palette—greens are lush, skies are bright blue, skin tones are warm. No grayscale, duotone, or desaturated filters applied.
• Subject Matter: Youth creativity themes dominate—craft activities, gaming culture (Minecraft), educational play, hands-on making. Imagery sells an aspirational lifestyle of creative engagement.
• Composition: Hero images use rule-of-thirds composition with negative space预留 for text badge overlays. Sidebar photos adopt close-up "detail shot" framing showing texture and interaction.
• Role: Imagery is dominant in the hero zone (occupying ~66% of above-fold real estate) but supportive elsewhere—product thumbnails would be smaller and more utilitarian.
• Technique: No observed use of masks, cutouts, or compositing over complex backgrounds. Images sit in simple rectangular frames with optional subtle rounding on non-hero placements.
• Accessibility consideration: High-contrast, brightly lit imagery supports users with visual impairments; avoid placing low-contrast text directly over busy image regions (the badge system solves this with solid-color backing).

Icon System

• Library: Custom SVG icons (no standard library detected—Lucide, Heroicons, Material, and Bootstrap Icons all absent from framework detection).
• Specific icons observed:
  • Phone handset (top bar contact)
  • Envelope (top bar email)
  • Shopping cart (header cart button)
  • Search magnifying glass (implied on search button)
  • Checkbox squares (sidebar list items: ■)
  • Circular status dots/icons (hero badge prefixes)
  • Facebook "f" logo (social auth button)
  • Google "G" logo (social auth button)
  • Spinner/loading indicator (animation target)
  • Arrow/navigation chevrons (carousel controls, inferred)
• Treatment: Icons appear to use currentColor inheritance for color flexibility—cart icon adopts header text color, social icons sit on branded button backgrounds in white. Stroke-based rendering for line icons (phone, envelope, search); fill-based for brand logos (FB, G) and UI symbols (checkbox squares).
• Size consistency: Small utility icons (phone, email) estimated at 14–16px matching caption text. Interactive icons (cart, social logos) at 20–24px. Decorative badge icons at 28px (matching {component.icon-circle} diameter). Carousel navigation arrows likely 24–32px for touch affordance.
• Alignment: Icons center vertically with adjacent text using flexbox alignment (inferred from button padding symmetry). Social auth buttons allocate 66px left padding specifically for icon+spacing before text begins.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React Server Components for product catalog SSR)
                 OR Nuxt 3 (Vue alternative, strong Czech/e-commerce ecosystem)
- Styling:        Tailwind CSS v3.4+ (utility-first maps cleanly to token system)
                 WITH custom design tokens in tailwind.config.js extending theme
- Fonts:          Google Fonts: Varela Round (free, weights: 400, 700)
                 Fallback: system-ui, -apple-system, 'Quicksand', sans-serif
- Animation:      Framer Motion (React) OR Vue Transition (Vue) + custom CSS
                 Keyframe definitions for spin, flash-bg, fb_transform, rotateSpinner
- Icons:          Custom SVG sprite sheet (inline SVG components for currentColor support)
                 Plus: Simple Icons library for Facebook/Google brand marks
- Component lib:  Shadcn/ui (headless primitives styled with Tailwind tokens)
                 OR custom components (system is straightforward enough to hand-roll)
- i18n:           next-intl or vue-i18n (Czech primary locale, potential EN/SK expansions)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column layout, hamburger nav, stacked hero (carousel above sidebar), full-width search bar | | Tablet | 768px – 1024px | Two-column product grids, condensed header (logo + collapsed search), sidebar becomes horizontal accordion | | Desktop | 1025px – 1400px | Three-column product grids, full header visible, 65/35 hero split maintained | | Wide | > 1400px | Max-width container (1418px) centered with side margins, no further layout expansion |

Touch Targets

• {component.button-search}: 42px height × ~80px width (passes WCAG AAA 44×44 minimum comfortably).
• {component.text-input}: 42px height × fluid width (height meets minimum; ensure min-width 44px on mobile).
• {component.button-cookie-accept}: 44px height × ~100px width (explicitly meets AAA threshold).
• {component.cart-button}: 40px × 40px (meets AA 44×44 requirement; consider bumping to 44px for AAA compliance).
• {component.nav-bar} links: 48px height (full touch strip) × variable width (adequate for finger tapping).
• Sidebar list items: ~44px effective height with 8px padding (acceptable; verify tap area doesn't fall below 44px on mobile).

Collapsing Strategy

• Top utility bar: Collapses entirely on mobile (phone/email hidden behind hamburger or moved to footer). Currency selector moves to footer or becomes a dropdown.
• Header main: Logo scales down, search input expands to full width below logo (or moves to dedicated search page), cart button persists but may shrink to icon-only (hide "Prázdný košík" text).
• Navigation bar: Transforms to hamburger menu (☰) triggering off-canvas drawer with full category list. Indigo background may persist on the toggle button only.
• Hero section: Stacks vertically—carousel becomes full-width (100vw) above the sidebar content, which converts to a horizontal scrollable card or accordion. Badge pills reposition over image with adjusted sizing.
• Product grid: Shifts from 3-column → 2-column → 1-column as viewport narrows. Card internal padding may reduce from 10px to 8px on mobile.
• Cookie banner: Remains fixed bottom but reduces padding (24px → 16px), stacks buttons vertically (Accept above Settings), and may increase text size slightly for mobile readability.
• Images: Hero carousel images maintain aspect ratio (use object-fit: cover with aspect-ratio: 16/9). Sidebar photos scale to full content width on mobile. Avoid fixed pixel widths—use percentage or viewport units.

Image Behavior

• Hero illustrations: Use <picture> element with srcset for 1x/2x/3x displays. On mobile, serve cropped focal-point versions (character/centered subject) rather than scaled-full landscape. Lazy-load below-fold images.
• Sidebar product photos: Switch from rectangular (desktop rail) to near-square or slightly portrait on mobile to maximize vertical space efficiency.
• Avatar/icon circles: Maintain 28–32px diameter across breakpoints—circular elements shouldn't scale down below thumb-print size.

Iteration Guide

1. Initialize with Tailwind + tokens: Create a new project (Next.js recommended for e-commerce SEO needs). Install Tailwind CSS v3.4+. Map every YAML frontmatter token to tailwind.config.js under theme.extend.colors, theme.extend.borderRadius, theme.extend.spacing, theme.extend.fontSize, etc. Never hard-code a hex value or pixel measurement that has a corresponding token.

2. Build the three-tier header first: Implement {component.top-bar} (30px, caption text), {component.header-main} (80px, logo + search + cart), and {component.nav-bar} (48px, full-width indigo, uppercase links) in exact vertical sequence. Test that the nav bar breaks out to viewport width regardless of container max-width (use w-screen or negative margin technique). Get this structural skeleton correct before adding body content.

3. Implement the hero split-layout: Create a 2-column grid (CSS Grid or Flexbox) with ~66%/33% ratio. Left column hosts {component.hero-carousel} (full-bleed image container). Right column builds the {component.sidebar-card} (pill-shaped indigo badge), {component.sidebar-list-item} rows (pink text + square bullets), {component.divider-line} (cyan 4px rule), and promotional photo block. Ensure the sidebar card's 50% border-radius creates the distinctive capsule shape.

4. Component-driven development: Build each component from the components: frontmatter as a standalone React/Vue component accepting className props for composition. Start with {component.button-search} (green, 3px radius), {component.text-input} (bordered, 3px radius), and {component.product-card} (white, 5px radius). Reference sibling components in JSDoc comments (e.g., "Pairs with {component.search-input}").

5. Add state variants per convention: For each interactive component, create -active, -focus, -disabled, and -hover variants as separate exported components or CSS class extensions (e.g., ButtonSearch, ButtonSearchActive). The spec documents Default and Active/Focus only—infer hover from brand color lighten (e.g., {colors.primary} → 10% lighter on hover) and disabled from opacity reduction (0.5 opacity).

6. Typography-first content population: When adding real copy, select typography tokens from the hierarchy table—never pick arbitrary sizes. Headlines use {typography.display-lg} (26px), section titles use {typography.title-md} (18px), body uses {typography.body-md} (16px). Apply the corresponding color tokens ({colors.body} for headings, {colors.ink} for paragraphs). Validate that Varela Round loads correctly from Google Fonts before finalizing layouts.

7. Implement the cookie consent overlay: Build {component.cookie-banner} as a fixed-position bottom overlay (z-index 9999). Use {colors.primary-dark} background, {typography.body-md} for body text, and the heavy-weight CTAs ({typography.button-heavy}, weight 700). Include the extracted shadow (rgba(27, 25, 57, 0.5) 0px 0px 30px 0px) for elevation. Wire up actual cookie consent logic post-design.

8. Responsive breakpoint testing: At each iteration step, test on Mobile (<768px), Tablet (768–1024px), and Desktop (>1024px). Verify: nav collapses to hamburger, hero stacks vertically, search expands full-width, product grid reduces columns, touch targets remain ≥44px. Use browser DevTools device emulation plus real device testing for touch accuracy.

9. Animation polish phase: Add the extracted transitions (0.3s ease-out for colors, 0.6s ease-in-out for transforms) to interactive elements. Implement the four keyframe animations (spin, flash-bg, fb_transform, rotateSpinner) as CSS @keyframes. Attach spin and rotateSpinner to loading states, flash-bg to validation feedback, fb_transform to social auth buttons. Keep motion "moderate" per the {extensions.motion.level} setting—nothing should feel sluggish or jarringly fast.

10. Lint and validate: Run npx @google/design.md lint DESIGN.md after any token additions or component changes. Watch for broken-ref errors (typos in {token.path} references), contrast-ratio warnings (especially {colors.primary-dark} text on dark backgrounds), and orphaned-tokens (tokens defined but never used in components or prose). Fix all linter errors before considering an iteration complete.

Font Setup: Import Varela Round via Google Fonts in your global stylesheet or _app.tsx/layout.vue:

@import url('https://fonts.googleapis.com/css2?family=Varela+Round:wght@400;700&display=swap');

:root {
  --font-family-base: 'Varela Round', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-family-base);
}

Define CSS custom properties mapping to your token system for easy consumption:

:root {
  --color-primary: #29235c;
  --color-brand-pink: #e6007e;
  --color-brand-green: #3aaa35;
  --color-surface: #ffffff;
  --color-ink: #4d4d4d;
  --radius-default: 5px;
  --radius-pill: 50%;
  --space-lg: 10px;
  /* ... continue for all tokens */
}

Known Gaps

• Hover state styling: Not extractable from static screenshot—all {component.*}-hover variants must be inferred from brand patterns (color lighten 10%, subtle scale 0.98, or underline growth).
• Loading/skeleton states: No skeleton loader, shimmer effect, or pending-state UI detected. E-commerce sites require these for product grid loading, image lazy-loading, and checkout processing.
• Form validation beyond focus: Error message styling, input red-borders on invalid, success checkmarks post-submit—not present in extracted CSS for text-input components.
• Authenticated/user dashboard flows: Account page, order history, wishlist, saved addresses—these authenticated surfaces weren't visible and may have distinct layout patterns.
• Checkout flow specifics: Cart page, shipping address form, payment method selection, order confirmation—critical e-commerce sub-systems not represented in homepage screenshot.
• Sub-brand or seasonal palettes: Holiday campaigns (Christmas, back-to-school), collaboration collections, or age-segment variants (kids vs. teen vs. adult) may introduce temporary palette extensions not in this base spec.
• Exact pixel values for inferred colors: Some surface tokens ({colors.surface-strong} #f1f1f1, {colors.surface-light} #f8fafb) appeared only once or twice in extraction—verify against production site before committing to these values.
• Carousel control styling: Previous/next arrows, dot indicators, autoplay pause/play button—present in DOM structure but visual styling (size, color, positioning) not fully captured.
• Accessibility attributes: ARIA labels, focus-visible rings, screen-reader-only text, skip-link implementation (one skip-link div detected but styling unclear)—require manual accessibility audit.
• Print stylesheet: No @media print rules detected. E-commerce sites benefit from print-friendly product pages and invoice views—add as future iteration.
• Dark mode support: System operates exclusively in {extensions.mode}: light mode. No dark-mode color inversions, prefers-color-scheme media queries, or theme toggle detected. If dark mode is planned, a full inverse palette pass will be required (pink canvas becomes problematic in dark contexts).