Clearly Development Design System

Overview

Clearly Development presents as a dark-mode-first digital marketplace purpose-built for the Roblox creator economy. The visual language anchors itself in deep navy-canvas tones ({colors.canvas}) that evoke a professional gaming IDE or dashboard, while electric blue ({colors.primary}) injects brand voltage precisely where conversion intent lives—primary CTAs, the "Roblox" inline highlight within the hero headline, and the persistent chat widget anchor. The atmosphere balances technical credibility with marketplace approachability: this isn't a toy store, but it's also not an enterprise SaaS console—it occupies the confident middle ground where independent developers transact assets worth real money.

The typography system leans decisively into Poppins' geometric personality at heavier weights ({typography.display-lg} at 700 weight, 60px) for headlines that command attention without sacrificing readability. Body copy sits comfortably at 400 weight, letting the typeface's open counters carry legibility against the dark background. Shape language consistently favors pill-rounding ({rounded.pill}) for all interactive surfaces—buttons, badges, search inputs—creating a unified tactile vocabulary that feels modern and touch-friendly. Cards and containers default to {rounded.md} (8px) or {rounded.lg} (12px), providing subtle differentiation between atomic controls and structural panels.

Sub-systems observed include: the hero/search dialect (full-width search input, stats bar, prominent CTA pair), the product grid dialect (card placeholders with diagonal stripe patterns and centered "COMING SOON" badges), and the consent/modal dialect (elevated panel with stacked action buttons). The cookie consent modal demonstrates the system's layered surface strategy: {colors.surface-elevated} floats above the canvas, with clear visual hierarchy between title, explanatory text, and action trio.

Key Characteristics:

• Dark-first palette with {colors.canvas} (#212435) as the foundational background across all major bands
• Electric-blue brand color {colors.primary} (#297cfc) reserved for CTAs, links, and accent moments—not used as a background wash
• Poppins typeface at 600–700 weights for all headings; 400 for body text; never below 14px
• Pill-shaped ({rounded.pill}) interactive elements as the dominant shape motif
• Generous vertical rhythm with {spacing.section-xxl} (80px) between major sections
• Subtle elevation via {extensions.shadows.lg} and inset borders rather than heavy drop shadows
• Muted text tokens ({colors.muted}, {colors.muted-strong}) carrying secondary information at reduced opacity
• Toast notification system with bounce/slide keyframe animations (Toastify library detected)

Colors

Brand & Accent

• Primary ({colors.primary} — #297cfc): The signature electric blue applied to {component.button-primary} fill, {component.button-outline} borders, the "Roblox" wordmark highlight in the hero headline, {component.chat-widget} background, and all clickable links.
• Primary Hover ({colors.primary-hover} — #5a9bff): Lightened state for interactive hover feedback on primary-colored surfaces.
• Primary Active ({colors.primary-active} — #1e5fd4): Pressed/deeper state for primary buttons under active interaction.

Surface

• Canvas ({colors.canvas} — #212435): The dominant page background behind {component.hero-band}, body content, and all non-elevated regions.
• Surface Soft ({colors.surface-soft} — #13151b): Deepest surface tone for placeholder cards in the {component.product-card} grid, creating visual recession.
• Surface Elevated ({colors.surface-elevated} — #1f2328): Modal/panel background used by {component.cookie-modal} and elevated containers sitting above the canvas.
• Surface Input ({colors.surface-input} — #1e1e22): Input field background for {component.hero-search-input} providing slight contrast against canvas.
• Surface Strong ({colors.surface-strong} — #2b2b2f): Accent surface for hover states on ghost buttons and subtle separators.
• Surface Overlay ({colors.surface-overlay} — rgba(0, 0, 0, 0.7)): Semi-transparent backdrop for modals and dropdown overlays.

Text & Ink

• Ink ({colors.ink} — #e6e6ea): Primary text color for most body content, slightly warm-tinted near-white.
• Body ({colors.body} — #ffffff): Pure white reserved for highest-emphasis text—headlines, button labels, hero statistics values.
• Muted ({colors.muted} — #9ca3af): Secondary text for stat labels, placeholder text, descriptions, and de-emphasized information.
• Muted Strong ({colors.muted-strong} — #bebec2): Tertiary text slightly brighter than muted, used for less-critical metadata.
• On Primary ({colors.on-primary} — #ffffff): Text rendered atop {colors.primary} backgrounds, guaranteed AA contrast.
• On Dark ({colors.on-dark} — #ffffff): Text on any dark surface background.
• Error Text ({colors.error-text} — #ef4444): Red-toned text for error states like the "Error loading games" ghost button label.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(161, 161, 170, 0.2)): Subtle 1px borders on ghost buttons ({component.button-ghost}) and decorative dividers.
• Border Subtle ({colors.border-subtle} — rgba(156, 163, 175, 0.1)): Very faint fills for ghost button backgrounds and low-contrast containers.
• Border Input ({colors.border-input} — rgba(156, 163, 175, 0.2)): Input field border treatment.
• Focus Ring ({colors.focus-ring} — #272a30): Outline color for keyboard focus indicators on interactive elements.

Semantic

• Error ({colors.error} — #dc2626): Full-strength red for error states and destructive actions.
• Success ({colors.success} — #22c55e): Green for confirmation states.
• Warning ({colors.warning} — #f59e0b): Amber for caution indicators.
• Link ({colors.link} — #297cfc): Inline text links matching primary brand blue.
• Link Hover ({colors.link-hover} — #5a9bff): Lightened blue for link hover states.

Typography

Font Family

The entire type system runs on Poppins, a geometric sans-serif designed by Indian Type Foundry with excellent legibility at display sizes and clean letterforms that resist visual noise on dark backgrounds. The font stack includes "Poppins Fallback" followed by comprehensive system-ui fallbacks covering Segoe UI, Roboto, Helvetica Neue, Arial, and Noto Sans. Font files are self-hosted via Next.js static asset pipeline (woff2 format with unicode-range splitting for Latin and Devanagari subsets at weights 300, 400, and 500). An additional custom font face Alagard is registered (truetype, weight 400) for potential pixel-art or retro gaming accents, though it does not appear in the current viewport.

Poppins plays every role—headlines, body, buttons, labels—with weight doing the hierarchical heavy lifting rather than size alone. The 700 weight commands the hero headline ({typography.display-lg}), 600 carries sub-headings and button text, and 400 handles all prose. This creates a cohesive voice that feels both technical and friendly, appropriate for a developer-facing marketplace that doesn't take itself too seriously.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 700 | 1.15 | -0.02em | Reserved for future mega-hero contexts | | {typography.display-lg} | 60px | 700 | 1.25 | -0.01em | Hero H1 headline | | {typography.title-lg} | 32px | 700 | 1.3 | 0 | Section headings | | {typography.title-md} | 24px | 600 | 1.33 | 0 | Modal titles, sub-section heads | | {typography.title-sm} | 20px | 700 | 1.4 | 0 | Cookie modal heading, card titles | | {typography.stat-value} | 18px | 700 | 1.35 | 0 | Statistics numbers ($0, counts) | | {typography.body-md} | 16px | 400 | 1.5 | 0 | Paragraph text, input values | | {typography.body-sm} | 14px | 400 | 1.43 | 0 | Button ghost text, captions, metadata | | {typography.label} | 14px | 500 | 1.4 | 0 | Badge labels, "COMING SOON" text | | {typography.button} | 14px | 600 | 1.25 | 0 | All button labels | | {typography.caption} | 13px | 400 | 1.38 | 0 | Footer attribution, fine print | | {typography.stat-label} | 14px | 400 | 1.43 | 0 | Stat descriptors ("Processed Sales") |

Principles

The typography system trusts weight contrast over size jumps to establish hierarchy—the difference between {typography.display-lg} (60px/700) and {typography.title-md} (24px/600) is dramatic enough that intermediate steps aren't needed for typical landing-page depth. Line heights are deliberately loose (1.25–1.5) because dark-mode readability demands breathing room around glyphs; tight leading on dark backgrounds causes crowding that accelerates eye fatigue. Letter spacing remains at normal (0) for virtually all roles, with only the largest display token applying -0.01em to -0.02em optical tightening—a sign that the designer trusts Poppins' native spacing.

Color-as-hierarchy appears strategically: the hero headline renders most words in {colors.body} (pure white) but spotlights "Roblox" in {colors.primary} (blue), creating an inline brand moment without requiring separate markup. Stat values use pure white against the dark canvas, while their accompanying labels step down to {colors.muted} gray—a classic value/label pairing. The "Error loading games" ghost button demonstrates error-state typography: same structural role as other ghost buttons, but text color shifts to {colors.error-text} red.

Uppercase is avoided entirely—all button text uses text-transform: capitalize or sentence case. Italics are not observed in the viewport. The system prefers semantic clarity over typographic flair: you won't find decorative italics, all-caps headers, or extreme tracking adjustments.

Note on Font Substitutes

Poppins is available on Google Fonts, making substitution straightforward if self-hosted files are unavailable. For production implementations targeting the Google Fonts CDN, use:

--font-heading: 'Poppins', sans-serif;
--font-body: 'Poppins', sans-serif;

Import both weight 400, 600, and 700 from the Google Fonts API. The custom Alagard font (pixel-art style, loaded locally as /fonts/alagard.ttf) has no Google Fonts equivalent—if retro-gaming decorative text is needed, substitute "Press Start 2P" from Google Fonts for similar pixel-art character. All fallback chains should preserve the system-ui sequence observed in the extracted stack.

Layout

Spacing System

• Base unit: 4px (implied by the xs token).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps, internal paddings), {spacing.sm} (8px — compact element spacing), {spacing.md} (12px — list gaps), {spacing.base} (16px — standard component padding), {spacing.lg} (20px — comfortable internal padding), {spacing.xl} (24px — card gutters, section spacing), {spacing.xxl} (32px — large gaps), {spacing.section-xl} (40px — section vertical padding), {spacing.section} (48px — major band spacing), {spacing.section-xxl} (80px — hero-level breathing room).
• Section padding (vertical): {spacing.section-xxl} (80px) — used on {component.hero-band} for maximum impact; standard content sections use {spacing.section-xl} (40px) per the extracted section container.
• Card internal padding: Product cards appear visually empty (placeholder state); the cookie modal uses {spacing.xl} (24px) internal padding.
• Gutters: Grid gap between product cards is approximately {spacing.xl} (24px). Horizontal container padding is {spacing.base} (16px) on nav, scaling up at larger viewports.

Grid & Container

The layout operates within a 1440px max-width content area (extracted from main and section selectors) centered in the viewport. The navigation constrains further to 1280px with horizontal padding of 32px. This creates a design that feels spacious on 1920px displays without stretching uncomfortably on 1366px laptops.

The hero section uses a single-column centered layout with the headline, stats row, search+CTA group, and card grid stacking vertically. No multi-column text split is observed—the hero is a confident vertical stack optimized for the marketplace's search-first interaction model. The product grid beneath the hero arranges cards in a horizontal row (4 visible in viewport), suggesting a flex or CSS Grid with auto-fill / minmax() behavior.

Editorial density is moderate-to-low: this is a marketplace landing page, not a documentation site or dashboard. Whitespace is deployed generously between the headline and search bar, and again between search and the product grid. The overall impression is "curated discovery" rather than "dense catalog."

Whitespace Philosophy

Clearly Development embraces generous vertical whitespace as a luxury signal. The 80px padding above and below the hero headline, combined with 24px+ gaps between the stats row, search cluster, and card grid, creates a scrolled experience that feels premium and unhurried. Dark mode amplifies this effect—black space reads as more "expansive" than equivalent white space. The system refuses to pack elements tightly; even the cookie modal (often crammed) enjoys 24px internal padding and clear separation between its three action buttons.

Header Architecture

|<- 1280px max ->|
┌─────────────────────────────────────────────────────────────┐
│ [CLEARLY LOGO]  [Error btn] [===Search Input===] [USD] [CTA] │
│                                                              │
└─────────────────────────────────────────────────────────────┘
       ↑ logo         ↑ ghost        ↑pill input   ↑ghost  ↑outline

Navigation structure: flush-left logo, followed by a ghost button (error state indicator), a wide pill-shaped search input centered in the remaining space, a ghost "USD" currency selector, and a flush-right outlined "Start Selling" CTA. The nav has no visible bottom border—separation from the hero comes from background continuity (both share {colors.canvas}). Height is approximately 72px based on standard nav proportions.

Hero Section

|<-------- centered column -------->|

          ┌─────────────────────────────────┐
          │  "The All-In-One Marketplace     │
          │   for [Roblox] Developers"       │  ← {typography.display-lg}
          └─────────────────────────────────┘

    $0 Processed · 0 Purchases · 0 Uploaded   ← {typography.stat-label}

  ┌──────────────────────────┐  ┌───────────┐
  │ Search assets, scripts.. │  │Start Sell │  ← {component.hero-search-input}
  └──────────────────────────┘  └───────────┘   + {component.button-primary}

  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐
  │ IMG  │  │ //// │  │ //// │  │ //// │  ← {component.product-card}
  │Roblox│  │COMING│  │COMING│  │COMING│     grid row
  └──────┘  └──────┘  └──────┘  └──────┘

The hero follows a value-prop → social-proof → action → preview narrative arc. The headline dominates with the "Roblox" word in blue. Below, a stats bar establishes credibility (even at zero values, the pattern signals "this is a metrics-driven platform"). The search input is the conversion focal point—large, prominent, with a primary CTA button adjacent. The product card grid provides immediate visual proof that this is a marketplace, not just a landing page.

Cookie Consent Modal

┌──────────────────────────────────────────┐
│ 🍪 Cookies                               │  ← {typography.title-sm}
│                                          │
│ We use cookies to keep the site running, │  ← {typography.body-sm}
│ understand how it's used, and improve    │
│ your experience. Learn more.             │
│                                          │
│ ┌────────────────────────────────────┐   │
│ │         Accept all                 │   │  ← {component.cookie-button-primary}
│ └────────────────────────────────────┘   │
│ ┌────────────────────────────────────┐   │
│ │     Reject non-essential           │   │  ← {component.cookie-button-secondary}
│ └────────────────────────────────────┘   │
│            Customize                    │  ← text link
└──────────────────────────────────────────┘

Bottom-left positioned overlay modal with {rounded.lg} (12px) corners. Title in 20px/700 weight, body in 14px/400 gray. Primary action is full-width blue button; secondary is outlined transparent button; tertiary "Customize" is a simple text link below. This three-tier action pattern (primary > secondary > tertiary) is a reusable modal convention for the system.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base page surface, hero band | | 1 (Hairline) | 1px {colors.hairline} border | Ghost button outlines, subtle dividers | | 2 (Soft) | {extensions.shadows.sm} — 0 1px 2px rgba(0,0,0,0.1) | Cards, minor lift | | 3 (Raised) | {extensions.shadows.md} — 0 4px 6px -1px + 0 2px 4px dropdowns, toasts | | 4 (Modal) | {extensions.shadows.lg} — 0 10px 15px -3px + 0 4px 6px | Cookie modal, dialogs | | 5 (Overlay) | {extensions.shadows.xl} — 0 25px 50px -12px rgba(0,0,0,0.5) | Heavy modals, chat widget float | | Inset | {extensions.shadows.inset} — inset 0 0 0 1px rgb(31,35,40) | Input fields, pressed states |

Philosophy: The system favors color-layering over aggressive shadow work. On a dark canvas, shadows must be handled carefully—they can muddy into the background or create unintended "glow." Clearly Development keeps shadows neutral (no blue/cast tints) and relatively tight (spread radius rarely exceeds 50px). The deepest elevation (xl) is reserved for elements that truly "float" above the interface like the chat widget. Input fields use an inset shadow technique (inner border glow) rather than outer drop shadows, which reads crisply on dark surfaces and matches the {extensions.shadows.input} compound value extracted from the DOM.

Decorative Depth

The product card placeholders feature diagonal stripe patterns (dark lines on {colors.surface-soft}) that create texture without imagery. This is a deliberate "skeleton" aesthetic signaling "content coming soon"—the stripes are purely CSS-generated (likely repeating-linear-gradient). No gradient washes, noise textures, or photographic depth layers are present in the viewport. The hero background appears to use a very faint environmental image (office/workspace) at extremely low opacity behind the canvas—this is atmospheric, not structural.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small inner elements, tag corners | | {rounded.DEFAULT} | 6px | Default input fields, search bars | | {rounded.md} | 8px | Product cards, modal containers | | {rounded.lg} | 12px | Cookie modal, larger panels | | {rounded.xl} | 16px | Large cards, feature boxes | | {rounded.pill} | 9999px | Buttons, badges, search inputs | | {rounded.full} | 9999px | Circular elements (chat widget avatar circle) |

The shape vocabulary is intentionally binary: interactive things are fully round (pill/circle), structural things are softly square (8–12px). There's no intermediate "squircle" territory. This creates a clear visual grammar: if you see a pill shape, it's almost certainly clickable. The {rounded.pill} dominance (appearing on 7 instances in the extracted radii count) establishes the brand's friendly, approachable personality—sharp corners would read as cold or enterprise-grade, which contradicts the indie-developer positioning.

Photography Geometry

Product imagery (the single visible Roblox-branded thumbnail) appears in a landscape rectangle roughly 16:9 or 3:2 aspect ratio within its card container. Corners follow {rounded.md} (8px) matching the card's own radius. The image fills its container edge-to-edge with no visible padding or border treatment. Future product thumbnails will likely maintain this consistent aspect ratio for grid alignment. Avatar-style circular imagery is not observed in this viewport but would logically use {rounded.full}.

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-primary-hover}, {component.button-outline-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — Solid blue filled button with white text, used as the principal conversion action. Background {colors.primary}, text {colors.on-primary} at {typography.button} (14px/600), rounded {rounded.pill}, padding 10px 20px. Appears in two locations: beside the hero search input ("Start Selling") and inside the cookie modal ("Accept all"). Hover variant is {component.button-primary-hover} with lightened blue background. No visible shadow; relies on color contrast for prominence.

{component.button-outline} — Transparent button with blue border and blue text, used for secondary actions that shouldn't compete with primary CTAs. Background transparent, text {colors.primary}, 2px solid {colors.primary} border, {typography.button} weight, {rounded.pill}, padding 8px 16px. Used in the top navigation ("Start Selling" outline version). Hover state ({component.button-outline-hover}) flips to solid blue background with white text—an elegant "fill-on-hover" interaction common in dark-mode systems.

{component.button-ghost} — Subtle low-contrast button for utility actions like currency switching. Background {colors.border-subtle} (10% white-gray), text {colors.body}, 1px {colors.hairline} border, {typography.body-sm}, {rounded.pill}, padding 8px 20px. The "USD" selector in the nav uses this treatment. It's deliberately quiet—you notice it only when you need it.

{component.button-ghost-error} — Identical structure to {component.button-ghost} but with {colors.error-text} replacing body-white text. Used for the "Error loading games" status indicator in the nav. Same dimensions and rounding, just a semantic color swap to signal problems without breaking layout consistency.

Cards & Containers

{component.product-card} — Rectangular container for marketplace items. Background {colors.surface-elevated}, rounded {rounded.md}, no internal padding (content fills edge-to-edge). Current state shows either a thumbnail image (first card, Roblox branded) or a diagonal-striped placeholder pattern on {colors.surface-soft}. Cards sit in a horizontal flex/grid row with consistent gutter spacing. Future states will likely add hover elevation, price overlays, and seller attribution.

{component.card-placeholder} — The "empty" state for unreleased product slots. Background {colors.surface-soft} with CSS repeating-linear-gradient diagonal stripes in a slightly lighter/darker shade, rounded {rounded.md}, generous internal padding {spacing.xl} (24px). Contains a {component.coming-soon-badge} centered within. The stripe pattern is a signature visual motif—recognizable, non-distracting, and clearly communicates "not yet available" without requiring imagery.

{component.coming-soon-badge} — Small pill-shaped label reading "COMING SOON". Transparent background, {colors.body} text at {typography.label} (14px/500), thin border (likely {colors.hairline}), {rounded.pill}, compact padding 6px 16px. Centered within {component.card-placeholder}. Could be repurposed for "SOLD OUT", "NEW", or category tags elsewhere in the system.

{component.cookie-modal} — Bottom-left overlay panel for GDPR/consent management. Background {colors.surface-elevated} floating above a semi-transparent backdrop, rounded {rounded.lg} (12px), internal padding {spacing.xl} (24px), text color {colors.body} at {typography.body-sm}. Contains three child components stacked vertically: {component.cookie-title}, {component.cookie-body}, and action buttons. Width appears to be approximately 380–420px based on text line lengths. Shadow treatment is {extensions.shadows.lg} providing clear separation from underlying content.

Inputs & Forms

{component.hero-search-input} — The dominant search field below the hero headline. Background {colors.surface-input} (slightly lighter than canvas), text {colors.body} at {typography.body-md} (16px/400), rounded {rounded.DEFAULT} (6px—notably less round than buttons, distinguishing it as a text-entry vs. click-only control), padding 16px 48px 16px 16px (extra right padding for search icon). Placeholder text reads "Search for assets, scripts, models..." in {colors.muted}. Shadow treatment uses the compound {extensions.shadows.input} with an inset border glow. This is the highest-conversion element on the page.

{component.nav-search-input} — Smaller search field in the navigation bar. Transparent background, {colors.muted} placeholder text, {typography.body-sm}, {rounded.pill} (fully round, matching nav buttons), compact padding 8px 12px. Less prominent than hero search, supporting quick-navigation queries without stealing focus from the main CTA.

Navigation

{component.top-nav} — Fixed/sticky header spanning full viewport width. Transparent background (blends with {colors.canvas} hero), height ~72px, max-content width 1280px centered. Contains: left-aligned logo ("CLEARLY"), then {component.button-ghost-error} (error status), then {component.nav-search-input}, then {component.button-ghost} (USD), then {component.button-outline} (Start Selling). No visible border-bottom; separation from content relies on spacing alone. Z-index is high (modal layer).

{component.footer-attribution} — Small pill badge in the lower-right area reading "CQB Arena by Kyntra Studios". Background {colors.border-subtle}, text {colors.muted} at {typography.caption} (13px), {rounded.pill}, padding 8px 16px. This is a credit/attribution element, likely dynamically populated per featured game or experience. Unobtrusive but present.

Signature Components

{component.chat-widget} — Persistent floating action button in bottom-right corner. Circular ({rounded.full}), size 56px, solid {colors.primary} background with white chat bubble icon (SVG, likely custom). Shadow {extensions.shadows.xl} for maximum float perception. This element stays visible during scroll and provides access to support/chat functionality. Its position overlaps the footer attribution area but sits on a higher z-index layer.

{component.stats-container} — Horizontal row of metric items below the headline. Transparent background, text {colors.muted} at {typography.stat-label}. Each item pairs a {component.stat-value} (bold white number) with a {component.stat-label} (gray descriptor). Separator is a middle dot (·) or spacer. Currently shows "$0 Processed Sales · 0 Total Purchases · 0 Products Uploaded"—zero-state content that demonstrates the pattern. Values update dynamically as marketplace activity occurs.

Do's and Don'ts

Do

• Use {colors.primary} (#297cfc) exclusively for CTAs, links, and the single brand-word highlight in headlines—never as a background wash or section color.
• Apply {rounded.pill} to all buttons, badges, search inputs, and clickable pills—this is the system's signature shape and signals interactivity immediately.
• Set body text to {colors.ink} (#e6e6ea) or {colors.body} (#ffffff) depending on emphasis level; reserve pure white for headlines and primary button labels only.
• Give hero-level sections {spacing.section-xxl} (80px) vertical padding to maintain the spacious, premium feel that distinguishes this from cluttered marketplaces.
• Use {typography.body-md} (16px/400) as the minimum readable size for paragraph text—never go smaller than {typography.body-sm} (14px) for interface chrome.
• Layer {component.cookie-modal}-style panels on {colors.surface-elevated} (#1f2328) with {extensions.shadows.lg} elevation when they need to float above content.
• Maintain the {colors.surface-soft} (#13151b) + diagonal-stripe pattern for placeholder/empty states—it's become a recognizable visual shorthand for "coming soon."
• Pair {component.stat-value} (18px/700 white) with {component.stat-label} (14px/400 muted gray) when displaying metric pairs—the weight and color contrast carries the hierarchy.
• Keep the chat widget at {rounded.full} with {colors.primary} fill and position it bottom-right with {extensions.shadows.xl} depth—it's a persistent utility, not content.
• Use {colors.border-subtle} (10% opacity gray) as ghost-button background fills rather than flat transparency—it provides just enough mass to locate the button without competing for attention.

Don't

• Don't apply {colors.primary} as a section or card background—the brand blue is an accent voltage, not a surface color. Only {component.button-primary} and {component.chat-widget} fill with it.
• Don't use sharp corners (0px radius) anywhere—the minimum is {rounded.sm} (4px) and the dominant interactive shape is always pill.
• Don't drop below 14px font size for any user-facing text; {typography.caption} (13px) is reserved solely for fine-print attributions like {component.footer-attribution}.
• Don't add gradients or colorful washes to the hero background—the canvas is solid {colors.canvas} with optional ultra-faint environmental imagery at minimal opacity.
• Don't mix font families—everything uses Poppins. The Alagard pixel font exists in the font stack but hasn't been deployed in this viewport; don't introduce it without a specific retro-gaming context.
• Don't elevate cards beyond {extensions.shadows.md} in normal grid state—reserve {extensions.shadows.lg} and higher for modals and truly floating elements.
• Don't remove the 2px border from {component.button-outline}—the visible edge is what defines it as an outline variant versus a ghost button.
• Don't center-align long body text—the system uses left-aligned paragraphs with generous line-height (1.5) for readability on dark backgrounds.
• Don't use {colors.error-text} (#ef4444) for anything other than actual error states—it's a semantic color, not a decorative accent.
• Don't crowd the hero section—the 80px padding above/below the headline and the 24px+ gaps between elements are intentional breathers that signal quality.

Motion & Animation

Transition Tokens

Transitions extracted from the live DOM show a consistent animation vocabulary built on Material Design-standard easings:

/* Color transitions (buttons, links, state changes) */
--transition-color: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Transform transitions (scale, translate on interactives) */
--transition-transform: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity transitions (fade effects) */
--transition-opacity: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Broad transition catch-all */
--transition-all: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Slower transitions for complex state */
--transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-toast: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

The dominant easing curve is cubic-bezier(0.4, 0, 0.2, 1)—Material Design's "standard" curve producing smooth deceleration. Duration clustering occurs at 150ms (micro-interactions), 200ms (standard state changes), 300ms (panel reveals), and 500ms (toast notifications).

Keyframe Animations

Twenty keyframe animation definitions were extracted, all belonging to the React-Toastify library's notification system:

• Toastify__trackProgress — Animates the progress bar countdown on auto-dismissing toast notifications.
• Toastify__bounceInRight / Toastify__bounceOutRight — Enter/exit animation for toasts appearing from the right edge.
• Toastify__bounceInLeft / Toastify__bounceOutLeft — Mirror animations for left-positioned toasts.
• Toastify__bounceInUp / Toastify__bounceOutUp — Vertical enter/exit for bottom-positioned toasts.
• Toastify__bounceInDown / Toastify__bounceOutDown — Top-positioned toast animations.
• Toastify__zoomIn / Toastify__zoomOut — Scale-based alternative entrance/exit.
• Toastify__flipIn / Toastify__flipOut — 3D flip animation variant.
• Toastify__slideInRight/Left/Up/Down / slideOutRight/Left/Down — Directional slide alternatives to bounce.

These are library-provided and should not be manually authored—import React-Toastify and reference its animation names via the transition prop.

Interaction Patterns

• Button hover fill: {component.button-outline} transitions from transparent background + colored border to solid {colors.primary} fill + white text over 200ms.
• Ghost button brightening: {component.button-ghost} background opacity increases on hover (likely to {colors.surface-strong}) over 150ms.
• Focus rings: All interactive elements gain a 2px offset outline in {colors.focus-ring} (#272a30) on keyboard focus—this is the focus-visible pattern, not hover.
• Toast notifications: Slide in from screen edge with bounce ease, display progress bar countdown, exit with matching reverse animation. Duration ~500ms.
• Input focus: {component.hero-search-input} likely gains enhanced border glow or ring on focus (inset shadow intensification) over 150–200ms.
• Cookie modal reveal: Slides up or fades in (opacity 0→1) when triggered, likely using --transition-slow (300ms).
• Card hover elevation: Product cards probably lift to {extensions.shadows.md} on hover with subtle Y-translate (-2px or -4px)—standard e-commerce pattern though not directly observable in static screenshot.

If implementing new motion not covered here, default to 200ms duration with cubic-bezier(0.4, 0, 0.2, 1) easing for state changes, and avoid springy or elastic curves that would conflict with the system's professional-meets-approachable tone.

Imagery Style

• Product thumbnails are expected to be Roblox-style 3D renders or screenshots—brightly lit, centered-subject, likely with transparent or solid-color backgrounds that blend with the dark card surface.
• Hero background uses an extremely desaturated, low-opacity (~10-15%) photograph of what appears to be a modern office or workspace environment—providing organic texture without competing with overlaid content.
• Placeholder graphics employ the diagonal-stripe pattern (CSS repeating-linear-gradient at ~45 degrees) on {colors.surface-soft}—this is a code-generated graphic, not a raster image, ensuring crisp rendering at any resolution.
• Logo treatment for "CLEARLY" uses bold, uppercase, tracked-out letterforms in white/light gray with a small superscript or suffix glyph (visible as a tiny icon after "CLEARLY").
• Chat widget icon is a simplified SVG speech-bubble shape in white, centered within the circular blue button—minimal stroke weight, no fill complexity.
• Imagery supports rather than dominates—the design trusts typography and layout to carry the message, using images as confirmation (yes, this is a marketplace with products) not as hero content.
• Color treatment for any future photography should favor slightly boosted saturation and contrast to pop against {colors.canvas}—flat or washed-out images will recede too far into the dark background.
• No illustration style is established yet—the viewport contains only UI elements, placeholder patterns, and the ambient hero photo. If illustrations are added later, they should match the geometric precision of Poppins and the tech-indie vibe (isometric 3D, clean vector icons, or subtle gradient meshes would fit).
• Avatar imagery (user profiles, seller photos) will likely use {rounded.full} circles based on the chat widget's circular precedent, sized 32–48px.

Icon System

• Library: Custom SVG icons (no third-party icon font library detected in imports or class names). Icons are inline SVGs or React components.
• Specific icons observed:
  • Search magnifying glass (inside {component.nav-search-input} and {component.hero-search-input})
  • Chat/speech bubble (inside {component.chat-widget})
  • Cookie/biscuit (beside {component.cookie-title})
  • External link or arrow (potentially on "Learn more" link)
  • Clear/close (X icon, likely on dismissible elements)
  • Chevron or caret (potential dropdown indicators on "USD" selector)
• Treatment: Stroke-based vector icons (not filled), rendered in currentColor to inherit parent text color. Size ranges: 16px for inline/icons-within-text, 20px for button accompaniments, 24px for standalone icons like the chat bubble.
• Alignment: Icons are vertically centered relative to adjacent text using Flexbox align-items: center or similar. Search icons sit inside input fields with horizontal offset from the right edge (accounting for the 48px right-padding on hero search).
• Stroke width: Appears to be 1.5px or 2px—substantial enough to remain legible on dark backgrounds without looking heavy.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — detected via _next/static asset paths and script injection patterns
- Styling:        Tailwind CSS v3+ — confirmed by utility class naming (rounded-full, px-5, py-2, bg-main, etc.) and framework detection flag
- Fonts:          Self-hosted Poppins woff2 via Next.js @font-face optimization (already implemented); fall back to Google Fonts CDNs for development
- Animation:      CSS transitions (native) + React-Toastify for notification motion; Framer Motion optional for scroll-triggered reveals
- Icons:          Custom SVG components (inline React); consider Lucide React for expanded icon needs (stroke-weight compatible)
- Component lib:  Custom components (no shadcn/Radix detected); React-Toastify for toast system
- State mgmt:     Likely React Context or lightweight state; Next.js App Router conventions

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column everything; hero search stacks above CTA; product grid becomes horizontal scroll or 2-column; nav collapses to hamburger; cookie modal goes full-width bottom-sheet | | Tablet | 640px – 1024px | 2-column product grid; nav search shortens; hero headline scales down (maybe 40–48px); stats wrap to 2 lines | | Desktop | 1024px – 1280px | Full layout as observed; 3-4 column product grid; nav at 1280px max | | Wide | > 1280px | Content centers in 1440px max with increased side margins; extra columns in product grid possible |

Touch Targets

• {component.button-primary}: ~40px height × variable width (padding 10px 20px + text) — meets WCAG 44×44px minimum comfortably.
• {component.button-outline}: ~36px height (padding 8px 16px) — may need height boost to 44px for mobile AAA compliance.
• {component.hero-search-input}: ~52px height (padding 16px vertical × 2) — excellent touch target, exceeds minimum.
• {component.button-ghost}: ~36px height (padding 8px 20px) — borderline for mobile; recommend increasing to py-3 (12px) on small screens.
• {component.chat-widget}: 56px diameter — exceeds 44×44px requirement, easy thumb reach in bottom-right corner.
• {component.cookie-button-primary}: ~48px height (padding 12px vertical) — good touch target for the primary modal action.

Collapsing Strategy

• Navigation: At mobile widths, the horizontal nav bar (logo + error btn + search + USD + CTA) collapses into a hamburger menu with off-canvas drawer. Search moves inside the drawer or becomes a dedicated search page/icon.
• Hero headline: {typography.display-lg} (60px) scales down proportionally—expect 36–40px on mobile with line-height adjustment to prevent overflow.
• Search + CTA pair: Stacks vertically on mobile (search full-width on top, CTA full-width below) instead of side-by-side.
• Product card grid: Transitions from 4-column desktop to 2-column tablet to single-column with horizontal scroll (or vertical stack) on mobile. Card aspect ratio may shift taller to compensate.
• Stats row: Wraps from single-line inline format to a 2×2 or 3×1 grid, maintaining value/label pairing integrity.
• Cookie modal: Converts from bottom-left floating panel to full-width bottom sheet with slide-up gesture, maintaining button stack order (Accept > Reject > Customize).
• Chat widget: Remains fixed bottom-right on all breakpoints but may reduce from 56px to 48px on mobile to avoid obscuring content.

Image Behavior

• Hero background image: Uses background-size: cover with background-position: center; on mobile the focal point shifts to ensure the subject (workspace/office) remains visible without cropping awkwardly.
• Product card thumbnails: Use object-fit: cover within fixed-aspect-ratio containers (likely 16:9 or 4:3). On mobile, card width reduces but aspect ratio locks—images crop from center.
• Roblox branding image (first card): Scales proportionally with card container; alt-text essential for accessibility since it carries brand recognition.
• Diagonal stripe placeholders: These are CSS-generated (repeating-linear-gradient), so they're resolution-independent and require no responsive image handling—just adjust the container dimensions.

Iteration Guide

1. Build a landing page that closely mimics the design system in this DESIGN.md using Next.js with Tailwind CSS. Initialize with npx create-next-app@latest and configure Tailwind to extend the theme with the exact tokens defined in the YAML frontmatter.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Define Tailwind theme extensions in tailwind.config.js: colors from colors.*, fontSize/fontWeight/lineHeight/letterSpacing from typography.*, borderRadius from rounded.*, spacing from spacing.*. Never hard-code a hex or px value that has a corresponding token.

3. Add state variants (-hover, -active, -focus, -disabled) per Tailwind's variant conventions; the spec documents Default and Active/Pressed only for buttons. Implement hover by adding hover: prefixed utility classes (e.g., hover:bg-[#5a9bff] referencing {colors.primary-hover}). Focus states use focus-visible: to respect user preference.

4. When adding a new component, decide first which sub-system it belongs to: hero/search dialect (high-prominence, conversion-focused), product grid dialect (card-based, scannable), modal/dialog dialect (elevated, overlay), or utility dialect (nav, footers, widgets). Each sub-system has distinct padding, rounding, and elevation rules documented above.

5. Variants of an existing component live as separate frontmatter entries (button-primary-hover, never nested under button-primary.states.hover). When authoring Tailwind classes, create component-level CSS or apply variants directly to the element.

6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Ensure every {token.path} in your implementation resolves to a defined token.

7. When in doubt about emphasis: bigger type before bolder type (the system already uses 700-weight headlines, so don't push to 800/900), signature surface card before solid accent (use {colors.surface-elevated} panels before reaching for {colors.primary} backgrounds), and pill shapes before sharp rectangles for anything clickable.

8. For fonts: Use the provided @font-face declarations for self-hosted Poppins (weights 300, 400, 500 are pre-loaded; add 600 and 700 if needed for headings). Define CSS custom properties --font-sans: 'Poppins', ... and set them as fontFamily in Tailwind config. For the Alagard font (pixel-art), register it conditionally only on pages that need retro-gaming aesthetics.

9. Implement the cookie consent modal using React-Toastify or a similar library that provides the bounce/slide keyframe animations already extracted. Match the three-tier action hierarchy: solid primary button → outlined secondary → text-link tertiary.

10. Test dark-mode contrast ratios using a tool like axe DevTools or WebAIM's contrast checker. Critical pairs to validate: {colors.primary} on {colors.canvas} (blue on dark navy), {colors.ink} on {colors.canvas} (near-white on navy), and {colors.muted} on {colors.canvas} (gray on navy). Target WCAG AA (4.5:1 for normal text, 3:1 for large text).

Known Gaps

• Hover state styling is incompletely documented per the no-hover policy—only {component.button-primary-hover} and {component.button-outline-hover} are explicitly specified. All other components' hover behavior (card lift, ghost-button brightness, link underline appearance) must be inferred from the design language or added during implementation.
• Loading skeletons/pending states are not visible in the viewport. The product card placeholders show "COMING SOON" rather than loading spinners or shimmer effects. A skeleton loader system (animated gradient shimmer) should be designed following the {colors.surface-input} and {colors.border-subtle} palette.
• Form validation states beyond focus are unobserved—no error messages, success checkmarks, or disabled-input treatments appear in the screenshot. These should follow semantic colors ({colors.error}, {colors.success}) with accompanying text in {typography.body-sm}.
• Authenticated/user-specific surfaces (dashboard, profile settings, purchase history, seller analytics) are not represented in this landing-page viewport. Their design language should extend the established tokens but may require new components like tables, tabs, avatars, and dropdown menus.
• Sub-brand or tier palettes (e.g., "Verified Seller" badges, "Premium" listings, "Enterprise" accounts) don't exist yet. Future badge/token systems should build on the existing color vocabulary without introducing clashing hues.
• Pixel-exact values for the diagonal-stripe pattern are inferred from the screenshot's visual appearance—the exact angle (appears ~45°), stripe width (~8-10px), and color delta (slightly lighter than {colors.surface-soft}) should be confirmed with design tools or the original CSS source.
• The "Error loading games" button's specific error icon (if any precedes the text) and its associated tooltip or expanded error detail panel are not captured—only the ghost-button state with red text is documented.
• Responsive breakpoint-specific measurements (exact mobile headline size, collapsed nav height, mobile card grid columns) are projected from best practices rather than extracted from actual media queries, which weren't included in the CSS data payload.
• Accessibility annotations (ARIA labels, focus management order, screen reader announcements for the cookie banner, skip-navigation links) are absent from the visual/CSS extraction and must be engineered separately following WCAG 2.1 AA guidelines.
• The Alagard custom font is declared in @font-face but unused in the viewport—its intended application context (retro-game titles? Easter egg? Brand lockups?) remains unknown and shouldn't be integrated until its design role is clarified.