Flawless — Chill Design System

Overview

Flawless is a premium e-commerce template system built around editorial warmth and photographic storytelling. The design language centers on a clean off-white canvas ({colors.canvas}) punctuated by rich, warm neutrals and a single vibrant green primary action color ({colors.primary}) reserved for high-intent conversions. The overall mood is sophisticated yet approachable—like a specialty coffee journal or boutique lifestyle publication.

Brand voltage lives primarily in two places: the forest-green primary CTAs that appear sparingly but decisively, and the rust-orange accent ({colors.accent-rust}) used within hero image overlays for maximum contrast against lifestyle photography. Everything else stays in the neutral palette—deep espresso ink ({colors.body}) for readable prose, softer taupes for secondary information.

The typography system relies heavily on Inter Var's variable weight capabilities, pushing into the semibold-to-bold range (weights 450–700) even at relatively modest sizes. This creates a confident, modern voice without resorting to display faces. Letter-spacing is consistently tight (negative tracking on larger headlines), giving text a compact, intentional feel.

Shape language is dominated by fully rounded corners ({rounded.pill} at 9999px) for all buttons, badges, and tag elements, while cards and containers use gentler radii of {rounded.md} through {rounded.xl}. This dual-radius strategy keeps interactive elements feeling tactile and friendly while maintaining structural dignity for content containers.

A key subsystem is the theme preview chrome—the outer wrapper provided by Shopify's theme store—which uses a dark inverted surface ({colors.surface-dark}) to frame the actual storefront content. Within that frame lives the merchant's site, which follows its own light-canvas rules. Understanding this nested-context architecture is essential for implementation.

Key Characteristics:

• Dual-mode canvas: {colors.surface-black} / {colors.surface-dark} for shell UI; {colors.canvas} / {colors.surface-soft} for merchant content
• Single brand voltage color: {colors.primary} (#16a249) used exclusively on conversion CTAs and links
• Accent rust ({colors.accent-rust}) reserved for hero-overlay CTAs where photography demands warmer contrast
• Fully pill-shaped buttons ({rounded.pill}) as the default interactive shape
• Inter Var across all roles, weights 450–650 for hierarchy, never below 400
• Generous vertical rhythm: {spacing.section} (80px) between major sections, {spacing.xl} (24px) internally
• Shadow elevation limited to three tiers: flat, {extensions.shadows.sm}, and {extensions.shadows.lg}
• Typography scale tops out at ~48px for display, with most headlines in the 23–29px range

Colors

Brand & Accent

• Primary ({colors.primary} — #16a249): Forest green used for the primary conversion button states, active links, success indicators, and the "SHOP ALL" prominent CTA in the store navigation.
• Primary Hover ({colors.primary-hover} — #15803d): Darker green variant for hover/active states on primary buttons and links.
• Primary Active ({colors.primary-active} — #166534): Deepest green shade for pressed/focused states.
• Accent Rust ({colors.accent-rust} — #c2410c): Warm burnt orange used specifically on the hero-image CTA button ("SIP IT NOW") where it contrasts beautifully against cool-toned lifestyle photography.
• Accent Rust Hover ({colors.accent-rust-hover} — #9a3412): Deepened rust for the accent button's active state.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline surface for the merchant storefront content area—the dominant background behind all product imagery, navigation, and body copy.
• Surface Soft ({colors.surface-soft} — #fafaf9): Near-white with the faintest warm undertone; used for subtle section alternation and card backgrounds that need separation from pure white.
• Surface Warm ({colors.surface-warm} — #f5f5f4): Light warm gray used for elevated card surfaces, input backgrounds, and secondary container fills.
• Surface Strong ({colors.surface-strong} — #e7e5e4): Medium warm gray for borders, dividers, disabled-state backgrounds, and strong visual separators.
• Surface Dark ({colors.surface-dark} — #131111): Near-black with subtle warmth; the primary background of the Shopify theme-store chrome/navigation shell.
• Surface Black ({colors.surface-black} — #000000): Pure black used for the absolute darkest elements: the topmost global nav bar and extreme-contrast decorative areas.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Used for modals, dropdowns, and popover panels that float above content—typically white with shadow treatment.

Text

• Ink ({colors.ink} — #000000): Pure black for maximum-contrast headings, logo marks, and primary navigation labels.
• Body ({colors.body} — #56524e): Warm medium-gray (espresso tone) for paragraph text, descriptions, and extended reading content—softer than pure black for reduced eye strain.
• Muted ({colors.muted} — #78726d): Mid-tone taupe for secondary labels, metadata timestamps, prices in supporting contexts, and placeholder text.
• Muted Soft ({colors.muted-soft} — #a8a29f): Light taupe for truly tertiary information: disabled labels, hints, decorative elements, and low-emphasis captions.
• On Primary ({colors.on-primary} — #ffffff): White text placed over {colors.primary} or {colors.accent-rust} backgrounds—always satisfies WCAG AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): White text for any element sitting on {colors.surface-dark} or {colors.surface-black} surfaces.
• On Surface Dark ({colors.on-surface-dark} — #ffffff): White text variant specifically tuned for readability against the dark chrome shell backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #e7e5e4): Very light warm gray for subtle dividers between list items, card edges, and input bottom borders.
• Hairline Soft ({colors.hairline-soft} — #d6d3d1): Slightly stronger warm gray for visible-but-gentle borders on cards, containers, and focus rings.
• Border Strong ({colors.border-strong} — #a8a29f): Medium-strength border color for outlined buttons, active input borders, and emphasized separators.

Semantic

• Error ({colors.error} — #ff7578): Soft red for form validation errors, out-of-stock badges, and alert messages.
• Success ({colors.success} — #16a249): Matches primary green; used for confirmation states, "in stock" indicators, and positive feedback.
• Warning ({colors.warning} — #f59e0b): Amber for cautionary notices, limited-stock warnings, and attention-requiring alerts.
• Link ({colors.link} — #16a249): Green inline links within body text; matches primary for brand consistency.
• Link Active ({colors.link-active} — #166534): Visited/darker link state.

Typography

Font Family

Flawless uses a single typeface family throughout: Inter Var, loaded as a variable font from Shopify's CDN with weights ranging from 100 to 900. The CSS stack is "Inter var", ShopifySans, Helvetica, Arial, sans-serif, ensuring graceful degradation through system fonts if the variable font fails to load. Inter Var provides exceptional legibility at small sizes (the 12px {typography.body-md} role) while delivering crisp, modern character at display sizes. Its variable weight axis allows the system to use precise intermediate values like 450 and 650 rather than jumping between standard 400/500/700 steps.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 650 | 1.15 | -0.03em | Major campaign headlines (rare, reserved for mega-hero) | | {typography.title-md} | 29.008px | 650 | 1.25 | -0.29008px | Section titles, product names, H2-level emphasis | | {typography.hero-overlay} | 36px | 700 | 1.1 | -0.02em | Hero image text overlays (all-caps, white on photo) | | {typography.display-lg} | 23.008px | 650 | 1.25 | -0.23008px | Card titles, feature headings, H1 equivalents | | {typography.title-sm} | 18px | 650 | 1.35 | 0 | Subsection headers, card subtitles | | {typography.heading-sm} | 16px | 450 | 1.45 | 0 | Body-level headings, list item titles | | {typography.body-sm} | 13px | 400 | 1.4 | 0 | Extended body copy, product descriptions | | {typography.body-md} | 12px | 500 | 1 | 0 | Labels, metadata, nav items, small UI text | | {typography.caption} | 11px | 500 | 1.35 | 0.02em | Legal lines, timestamp metadata, tiny labels | | {typography.button} | 14px | 600 | 1 | 0.01em | Button labels, CTA text | | {typography.label} | 12px | 600 | 1.35 | 0.05em | Uppercase category labels, badges, tags |

Principles

The Flawless typography system trusts weight and size to carry almost all hierarchy—color is used minimally (only for links and semantic states). Notice that even the smallest text role ({typography.body-md} at 12px) sits at weight 500, which gives the entire interface an inherently confident, substantial feel. There are no "light" or "thin" moments anywhere in the system; the floor is 400 weight for reading text, and most functional text pushes to 500+.

Negative letter-spacing is applied systematically to headlines 23px and above, creating the tightly-set, editorial look associated with premium fashion and lifestyle publications. Body text uses normal spacing or very slight positive tracking for accessibility.

Uppercase is reserved exclusively for the {typography.label} role—category pills, "NEW" or "SALE" badges, and filter group headers. Headlines remain in sentence case (or title case for proper nouns), preserving a conversational, approachable tone.

Note on Font Substitutes

Inter Var is freely available from Google Fonts as well as the Rasmus Anderssen source. For implementations without access to Shopify's CDN-hosted version, substitute via:

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

Define CSS variables: --font-body: 'Inter', sans-serif; and apply to the root. No proprietary fonts are in use—Inter serves both headline and body roles, making substitution straightforward.

Layout

Spacing System

• Base unit: 4px (implied by the 4px/8px/12px/16px/24px progression).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps, tight padding), {spacing.sm} (5px — special internal spacing), {spacing.md} (8px — default component internal gap), {spacing.base} (12px — form spacing), {spacing.lg} (16px — card padding), {spacing.xl} (24px — section-internal margins), {spacing.2xl} (40px — large gaps), {spacing.3xl} (48px — major breaks), {spacing.4xl} (64px — hero padding), {spacing.section} (80px — between-section vertical rhythm).
• Section padding (vertical): {spacing.section} (80px) — applied between major content bands (hero → features → product grid).
• Card internal padding: {spacing.lg} (16px) for compact cards, up to {spacing.xl} (24px) for featured cards.
• Gutters: Content container uses {spacing.lg} (16px) horizontal padding on mobile, scaling to {spacing.3xl} (48px) on desktop.

Grid & Container

• Max content width: 1440px for the outer theme-preview container; 950px for the inner merchant-content area (where navigation, product grids, and text columns live).
• Editorial density: The 950px content column creates a comfortable reading width (~65–75 characters per line at body size).
• Desktop grid behavior: Product grids appear to use a flexible 3–4 column layout within the 950px constraint, with auto-sizing for variable-width cards.
• Hero column split: Full-bleed imagery with centered or left-aligned text overlay, no rigid grid—the photograph dominates 100% of viewport width with floating text positioned via absolute placement.

Whitespace Philosophy

Flawless practices editorial generosity: significant vertical whitespace ({spacing.section} at 80px) between major bands prevents visual crowding, while internal component spacing remains tight ({spacing.md} at 8px). This creates a "breathing" layout where photography and headlines have room to land emotionally. It is not marketplace-dense—it is magazine-aired.

Header Architecture

The page actually has two stacked navigation contexts:

Layer 1 — Global Shopify Chrome (Dark):

┌─────────────────────────────────────────────────────────────┐
│ [bag] Shop Theme Store    Browse themes ▾  🔍 Log in  [Start] │
│                                    [desktop] [mobile] toggles│
└─────────────────────────────────────────────────────────────┘
  ┌─ X  f  instagram ─ SIP BETTER... DON'T MISS OUT... [SGD$]▾ EN▾ ─┐
  └───────────────────────────────────────────────────────────────┘

Layer 2 — Merchant Store Nav (Light Canvas):

┌──────────────────────────────────────────────────────────────┐
│ FLAWLESS        SHOP ▾  MUST TRY BREWS ▾  BUNDLES  EXPLORE ▾  [SHOP ALL] 🔍 👤 🛒² │
└──────────────────────────────────────────────────────────────┘

The merchant nav sits at max-width 950px centered within the 1440px preview frame, with {colors.canvas} background.

Hero Section

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│   ┌──────────────────────────────────────────────────────────┐   │
│   │                                                          │   │
│   │         "This One Just Works"                            │   │
│   │                                                          │   │
│   │     SMOOTH. BOLD. READY                                  │   │
│   │     WHENEVER.                                            │   │
│   │                                                          │   │
│   │              [ SIP IT NOW ]                              │   │
│   │                                                          │   │
│   │          (Cold brew product photography                   │   │
│   │           fills entire hero area)                        │   │
│   │                                                          │   │
│   └──────────────────────────────────────────────────────────┘   │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Text is overlaid directly onto photography using {colors.on-dark} (#ffffff) with subtle text-shadow or backdrop support. The CTA uses {colors.accent-rust} for warmth against cool blue-toned imagery.

Theme Info Bar (Sticky Footer)

┌─────────────────────────────────────────────────────────────────┐
│ Chill    $300 USD • 👍 100%              [View demo] [Try theme] │
└─────────────────────────────────────────────────────────────────┘

This bar floats at the viewport bottom with {rounded.pill} geometry, {colors.canvas} background, and {extensions.shadows.lg} elevation.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} or transparent background | Base page surfaces, nav bars, inline elements | | 1 — Hairline | 1px {colors.hairline} border or {colors.hairline-soft} outline | Card boundaries, input fields, divider lines | | 2 — Soft drop | {extensions.shadows.sm} (0 4px 6px -1px rgba(0,0,0,0.1)) | Elevated cards, dropdown menus, popovers | | 3 — Modal/Dropdown | {extensions.shadows.md} (0 10px 15px -3px rgba(0,0,0,0.1)) | Modal sheets, large tooltips, sticky bars | | 4 — Prominent | {extensions.shadows.lg} (0 10px 30px 0 rgba(0,0,0,0.2)) | Theme info sticky bar, promotional toasts |

The depth philosophy is layered but restrained: shadows are always neutral-toned (no colored shadows), opacity is conservative (never exceeding 0.2 alpha), and blur radii stay moderate. The system prefers color-block differentiation (surface-soft vs. canvas) over heavy shadow stacking. The dark chrome shell provides natural depth inversion—content inside the 950px column feels "forward" because it's surrounded by {colors.surface-dark} negative space.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.DEFAULT} / {rounded.pill} / {rounded.full} | 9999px | All buttons, badges, tags, avatar circles, pill-shaped containers | | {rounded.xl} | 24px | Large card corners, modal panels, image frames, theme info bar | | {rounded.lg} | 16px | Feature cards, product image wrappers, callout boxes | | {rounded.md} | 12px | Standard cards, input fields, dropdown panels | | {rounded.sm} | 8px | Small inner elements, tooltip containers, compact chips | | {rounded.top-rounded} | 24px 24px 0px 0px | Modal sheet (top-rounded only, bottom flush to viewport) |

Photography Geometry

Product and lifestyle photography appears in full-bleed hero treatments (no corner radius, edge-to-edge within its container) and contained card formats with {rounded.lg} (16px) or {rounded.xl} (24px) rounding. Aspect ratios favor cinematic widescreen (roughly 16:9 or 3:2) for hero shots and 4:3 or 1:1 for product grid thumbnails. Images are never cropped to perfect circles—that shape is reserved for avatar/icon purposes only.

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-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.global-nav-button} — The "Start for free" button in the top-global Shopify chrome. Background {colors.canvas}, text {colors.ink}, fully rounded {rounded.pill}, compact horizontal padding. Lives on the dark shell background, so it inverts visually.

{component.button-primary} — The "SHOP ALL" prominent CTA in the merchant navigation. Background {colors.primary} (#16a249), text {colors.on-primary} (white), type {typography.button}, {rounded.pill} geometry. High-intent conversion point; appears only once in the main nav area.

{component.button-primary-hover} — Hover state of primary: shifts to {colors.primary-hover} darker green. Same text and radius tokens.

{component.button-accent} — The "SIP IT NOW" hero-overlay button. Uses {colors.accent-rust} (burnt orange) instead of primary green—this is a deliberate choice for warmth against cool photography. Text {colors.on-primary}, type {typography.button}, {rounded.pill}. This is the signature CTA of the Chill preset.

{component.button-accent-hover} — Active state shifting to {colors.accent-rust-hover} deeper rust.

{component.button-secondary} — Outlined or ghost-style secondary action. Transparent background with {colors.border-strong} border (or just text color alone), text {colors.ink} or {colors.primary}, {rounded.pill}. Used for "View demo" and less-committal actions.

{component.button-secondary-hover} — Gains {colors.surface-soft} background fill on hover.

{component.icon-button} — Square or circular icon-only trigger (search, user account, cart, social shares). Transparent background, {colors.ink} or {colors.on-dark} icon color depending on context, {rounded.pill} when circular, typically 40×44px touch target size.

{component.theme-try-button} — The solid dark "Try theme" button in the sticky info bar. Background {colors.surface-dark} or {colors.surface-black}, text {colors.on-dark}, {rounded.pill}.

{component.theme-view-demo} — The adjacent outlined "View demo" button. Transparent with border, pairs with try-button.

Cards & Containers

{component.merchant-nav} — The main store navigation band. Background {colors.canvas}, height approximately 72–80px, containing logo, menu dropdowns, search/user/cart icons, and the SHOP ALL CTA. Max-width 950px centered.

{component.hero-band} — Full-width hero image container. Background is the product photograph itself (no color token), with overlaid text and CTA. Occupies roughly 60–70% of initial viewport height.

{component.hero-text-overlay} — Positioned absolutely over the hero image. Text color {colors.on-dark} (white), uses {typography.hero-overlay} for the main headline and {typography.body-sm} for the subheading above it. Centered or slightly offset left.

{component.product-card} — Individual product thumbnail card (visible in the hero composition as the cold brew packages). Background {colors.surface-soft} or transparent over image, {rounded.lg}, with optional price/name text overlay.

{component.theme-info-bar} — The sticky bottom bar showing theme name, price, rating, and action buttons. Background {colors.canvas}, {rounded.xl} (24px) or {rounded.pill} depending on exact implementation, {extensions.shadows.lg} shadow elevation, fixed to viewport bottom. Contains {component.theme-view-demo} and {component.theme-try-button} side by right side.

{component.promo-banner} — The scrolling marquee text strip ("SIP BETTER, FEEL BETTER — DON'T MISS OUT — FREE GIFT ON ORDERS ABOVE $100"). Background transparent or extremely subtle, text {colors.muted}, {typography.caption} size, uppercase, with generous letter-spacing.

{component.modal-sheet} — Bottom sheet panel (for theme details). Background {colors.elevated} (white), {rounded.top-rounded} (24px top, sharp bottom), {extensions.shadows.lg} shadow. Slides up from viewport bottom.

Inputs & Forms

{component.text-input} — Search field and form inputs. Background transparent or {colors.canvas}, text {colors.ink}, bottom-border only ({colors.hairline}), no visible border-radius on the input itself (or {rounded.sm} if contained). Height ~40–44px, type {typography.body-sm} or native 16px for mobile zoom prevention.

{component.text-input-focus} — On focus, border transitions to {colors.border-strong} or {colors.primary} color, possibly with a subtle {extensions.shadows.sm} ring. Transition timing follows {extensions.motion.easing} at 500ms.

{component.select-dropdown} — Currency/language selectors. Background {colors.surface-dark} in the chrome context (with white text) or {colors.canvas} in merchant context, custom chevron indicator, {rounded.sm}.

{component.search-clear} — "Clear" button inside search input. Transparent background, text {colors.muted}, {typography.caption}, uppercase label style, no border or radius.

Navigation

{component.global-top-nav} — The absolute top Shopify navigation. Background {colors.surface-black}, text {colors.on-dark}, height ~56px, contains "Shopify Theme Store" branding, Browse themes dropdown, search, login, and "Start for free" button.

{component.social-link} — X/Twitter, Facebook, Instagram icon links in the promo bar. Icon color {colors.ink} or {colors.on-dark} per context, 20px icon size, transparent circular hit area.

{component.nav-menu-trigger} — Dropdown triggers (SHOP ▾, MUST TRY BREWS ▾, etc.). Text {colors.ink}, type {typography.body-md}, chevron-down indicator, hover reveals submenu panel.

{component.cart-icon-badge} — Cart button with numeric badge (shows "²" or similar count). Badge circle is {colors.accent-rust} or {colors.primary} with white count text, 16–18px diameter, positioned top-right of icon.

{component.locale-selector} — Language/Currency dropdown pair in the upper-right promo row. Small flag icon + "(SGD $)" text + chevron, {typography.caption} sizing.

Signature Components

{component.flawless-logo} — The "FLAWLESS" wordmark in the merchant nav. Bold serif or heavy sans (appears as a distinctive brand lockup), {colors.ink}, roughly 24–28px, tracking tight. This is the merchant's identity—not a system-provided component, but documented here as it anchors the visual hierarchy.

{component.device-toggle} — Desktop/mobile preview toggle icons (monitor and phone icons) in the chrome bar. Icon buttons with active/inactive states, used to switch preview viewport width.

Do's and Don'ts

Do

• Use {colors.primary} (#16a249) sparingly—reserve it for the single most important conversion action per screen (usually one button, plus inline links).
• Apply {rounded.pill} (9999px) to every button, badge, and tag element; this is the default interactive shape and defines the friendly, tactile feel.
• Set body copy to {typography.body-md} at 12px/weight 500 minimum—never go smaller or lighter for readable text; the system has no "light" weight moment.
• Use {colors.body} (#56524e) for paragraphs and descriptions rather than pure {colors.ink}—the warm gray reduces harshness during extended reading.
• Reserve {colors.accent-rust} for hero-overlay CTAs only where photography demands warmer contrast; don't promote it to a general-purpose secondary button color.
• Maintain {spacing.section} (80px) vertical rhythm between major content bands—the airy, editorial pacing is essential to the premium feel.
• Apply negative letter-spacing (-0.02em to -0.03em) to all headlines 23px and larger; this tight setting is a signature typographic detail.
• Use {extensions.shadows.sm} for standard card elevation and reserve {extensions.shadows.lg} for the sticky info bar and modals—don't invent new shadow tiers.

Don't

• Don't use {colors.primary} for the hero CTA button when the hero contains cool-toned photography—the {colors.accent-rust} override exists for good contrast reasons.
• Don't round card corners below {rounded.md} (12px) for content containers—only inputs and tiny elements should use {rounded.sm}.
• Don't introduce a new font family for headlines; Inter Var handles the full range from 12px captions to 48px display text with consistent character.
• Don't add gradient backdrops behind hero text—the design relies on direct photographic contrast with white text overlays, not color washes.
• Don't expand the radius vocabulary beyond the six defined tokens; {rounded.pill} covers 95% of interactive needs, and the 8→12→16→24px progression covers all container needs.
• Don't set body text weight below 400 or heading weight below 450; the system's confidence comes from these substantial weights.
• Don't use {colors.surface-dark} (#131111) inside the merchant content area—that color belongs exclusively to the Shopify chrome shell; merchant surfaces stay in the {colors.canvas} → {colors.surface-strong} range.
• Don't apply uppercase beyond the {typography.label} role (badges, category tags); headlines must remain in sentence/title case to preserve the approachable, conversational voice.

Motion & Animation

Transition Tokens

/* Core transition preset — used for color, background, border, and text-decoration changes */
--transition-colors: 
  color 0.5s cubic-bezier(0, 0, 0.2, 1), 
  background-color 0.5s cubic-bezier(0, 0, 0.2, 1), 
  border-color 0.5s cubic-bezier(0, 0, 0.2, 1), 
  text-decoration-color 0.5s cubic-bezier(0, 0, 0.2, 1);

/* Opacity transitions — for fade-in/out effects */
--transition-opacity: 
  opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity-fast: 
  opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Transform transitions — for movement, scale, rotation */
--transition-transform: 
  transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Backdrop-filter transitions — for blur effects on overlays */
--transition-backdrop: 
  backdrop-filter 0.5s cubic-bezier(0, 0, 0.2, 1), 
  -webkit-backdrop-filter 0.5s cubic-bezier(0, 0, 0.2, 1);

/* Fallback generic */
--transition-base: 
  0.5s cubic-bezier(0, 0, 0.2, 1);

Keyframe Animations

• spin — Continuous 360° rotation for loading spinners and refresh indicators.
• fadeInSlide — Upward-fade entrance animation for modals, sheets, and scroll-revealed content blocks (translateY + opacity).
• tw-pulse — Subtle opacity pulse for drawing attention to notification badges or live indicators.
• tw-shimmer — Horizontal shimmer sweep for skeleton loading placeholders (gradient mask animation).

Interaction Patterns

• Sticky nav color transition: The merchant navigation smoothly transitions background color (via {--transition-colors}) when scrolling past the hero threshold—likely shifting from transparent-over-hero to solid {colors.canvas}.
• Modal sheet slide-up: Theme details panel rises from viewport bottom with {--transition-transform} easing over 200–300ms, accompanied by backdrop fade-in.
• Dropdown reveal: Menu dropdowns (SHOP, MUST TRY BREWS, etc.) expand downward with opacity and subtle translateY transform, timed to the cubic-bezier(0.4, 0, 0.2, 1) ease.
• Button state shifts: All color changes on buttons use the 500ms cubic-bezier(0, 0, 0.2, 1) curve—deliberately relaxed for a premium, non-twitchy feel.
• Search overlay fade: The expanded search input area fades in with backdrop-blur support, transitioning opacity and filter properties simultaneously.
• Theme info bar lift: The bottom-sticky info bar may animate into view after initial scroll, using transform Y translation.
• Icon button scale: Icon-only buttons likely gain a subtle scale(1.05) on press via the fast 200ms transform transition.

Imagery Style

• Photography style: Professional lifestyle/product photography with shallow depth of field; the hero shot features a hand pouring cold brew into an iced glass with product packages arranged artfully in soft-focus background.
• Color temperature: Hero photography skews cool (blue-tiled kitchen background) creating complementary contrast with the warm rust CTA button—this is an intentional color-design choice, not accidental.
• Subject matter: Food/beverage lifestyle (cold brew coffee products), hands-on preparation imagery suggesting freshness, craft quality, and everyday ritual.
• Treatment: Full-bleed hero with centered text overlay in white ({colors.on-dark}); product photography within cards uses contained frames with {rounded.lg} corners.
• Role: Imagery dominates the visual hierarchy—text is subordinate, overlaid, and minimal (one subhead + one headline + one CTA). This is a photo-first design system.
• No illustrations or 3D renders detected: All visual assets are photographic. No flat illustration, pattern fills, or abstract shapes observed in the hero or surrounding chrome.
• Aspect ratio: Hero appears to be approximately 16:9 or 2:1 widescreen cinematic ratio, optimized for immediate emotional impact above the fold.
• Overlay technique: Text sits directly on photography (not in a semi-transparent color block), relying on image composition to provide readable contrast zones—likely with a very subtle gradient fade at the bottom if needed.

Icon System

• Library: Custom SVG icons (no standard library detected in class names; icons appear to be Shopify's internal icon set or theme-specific SVGs).
• Specific icons observed: Shopping bag (global nav), Chevron/down arrow (dropdown indicators), Search magnifying glass, User/account person silhouette, Shopping cart with badge counter, X/Twitter logo, Facebook "f" logo, Instagram camera logo, Monitor/screen icon (device toggle), Mobile phone icon (device toggle), Flag icon (locale selector), Heart/thumbs-up (rating indicator).
• Treatment: Stroke-based icons (outline style) for UI elements; filled/logomark style for social brand icons. Color is almost always currentColor, inheriting from parent text color ({colors.ink} on light backgrounds, {colors.on-dark} on dark).
• Size alignment: Icons align to a 20×20px or 24×24px grid for navigation/utility icons; social icons may be slightly larger (24px). Cart badge is a separate overlaid circle element.
• Stroke width: Appears to be 1.5px or 2px stroke weight—consistent with Inter's geometric precision and modern, lightweight icon aesthetic.

Recommended Frontend Stack

- Framework:      Next.js 14+ or Remix (React-based, matching Shopify's ecosystem)
- Styling:        Tailwind CSS v3.4+ (utility classes detected: tw-rounded-full, tw-bg-canvas-primary, etc.)
- Fonts:          Inter Variable (Google Fonts CDN or Shopify CDN); CSS variable: --font-sans
- Animation:      Tailwind-built-in transitions + Framer Motion for complex scroll/entrance effects
- Icons:          Custom SVG sprite or Lucide React (closest visual match for the stroke style observed)
- Component lib:  None required (custom components) or Radix UI Primitives for accessible dropdowns/modals
- Build tool:     Vite or Next.js built-in bundler

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hamburger menu replaces horizontal nav; hero text scales down; sticky info bar stacks vertically | | Tablet | 640px – 1024px | Two-column product grids; condensed nav; device toggle becomes relevant; hero maintains full bleed | | Desktop | 1024px – 1440px | Full merchant nav visible; 3–4 column grids; 950px content column centered in 1440px preview frame | | Wide | > 1440px | Preview frame maxes at 1440px with side margins; chrome shell expands to fill viewport |

Touch Targets

• {component.button-primary}: ~40–44px height, exceeds WCAG AAA 44×44px minimum ✓
• {component.text-input}: 40–44px height, meets minimum ✓
• {component.icon-button}: 40×40px or 44×44px hit area, meets minimum ✓
• {component.nav-menu-trigger}: Tap area extends to at least 44px vertical height ✓
• {component.theme-try-button} / {component.theme-view-demo}: ~40–44px height in the sticky bar ✓

All interactive elements meet or exceed the 44×44px touch target recommendation for mobile usability.

Collapsing Strategy

• Navigation: Horizontal menu collapses to hamburger drawer below tablet breakpoint; the "SHOP ALL" CTA moves inside the drawer or becomes a standalone persistent button.
• Hero columns: Overlay text scales from 36px ({typography.hero-overlay}) down to ~24–28px on mobile; CTA button remains prominent but may reduce padding slightly.
• Product grids: Shift from multi-column (3–4) to single or two-column stack; card internal padding may compress from {spacing.lg} (16px) to {spacing.md} (12px).
• Sticky info bar: Remains fixed at bottom on all viewports but may collapse price/rating into a more compact arrangement on narrow screens; buttons maintain tap-friendly sizing.
• Device toggle: Hidden on mobile (irrelevant since viewport IS mobile); appears on tablet+ as a useful preview control within the theme-store chrome.
• Modal sheets: On mobile, modal rises from bottom edge (bottom sheet pattern) occupying ~90% viewport height; on desktop, centers as a traditional dialog with {rounded.lg} on all corners.

Image Behavior

• Hero illustration: Maintains full-bleed width at all breakpoints; height scales proportionally (aspect-ratio based) or switches to a taller crop on mobile to preserve impact. No hardcoded pixel dimensions.
• Product card images: Contained within their card boundaries; switch from landscape (3:2 or 4:3) orientation on desktop to potentially square or portrait-friendly crops on mobile depending on grid column count.
• Logo/wordmark: "FLAWLESS" text mark remains at consistent size or scales down modestly (< 20%) on mobile; never disappears or becomes an icon-only mark.
• Avatars/social icons: Remain at fixed pixel size (20–24px) regardless of viewport—they're functional indicators, not responsive graphics.

Iteration Guide

1. Build a landing page that closely mimics the Flawless Chill preset using Next.js with Tailwind CSS v3.4+. Initialize with the Inter Variable font from Google Fonts or Shopify's CDN.
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths defined above. Never hard-code a hex code or pixel value that has a corresponding token—for example, always write bg-{colors.primary} (or your framework's equivalent) not bg-[#16a249].
3. Implement the dual-context architecture: build an outer "chrome" shell with {colors.surface-dark} background that wraps an inner 950px-wide merchant content area on {colors.canvas}. This nesting is non-obvious but essential to matching the reference.
4. Add state variants (-hover, -disabled, -focus) per Tailwind conventions for each button and input; the spec documents Default and Active/Pressed states explicitly. Use the transition tokens from the Motion section for all animated properties.
5. When adding a new component, decide first which sub-system it belongs to: Global Chrome (dark background, white text) or Merchant Content (light background, dark text). These two contexts have different surface/text color rules.
6. Variants of an existing component must live as separate frontmatter entries (e.g., button-primary and button-primary-active are siblings, never nested objects). Follow this pattern for any new component you create.
7. Run npx @google/design.md lint DESIGN.md after edits—broken-ref, contrast-ratio, and orphaned-tokens warnings will catch missing token definitions or unresolved references automatically.
8. When in doubt about emphasis: rely on size and weight before color (the typography system carries hierarchy), use shadow elevation before border thickness for depth, and prefer {rounded.pill} for anything a user will click/tap.
9. For the hero section: start with a full-width <img> or <div> with background-image, position text overlay using absolute centering with flexbox, and apply the {typography.hero-overlay} token to the headline with {colors.on-dark} color. Place the {component.button-accent} CTA below the headline with generous margin ({spacing.xl}).

Font Setup: Define the following CSS variables in your :root or tailwind config:

:root {
  --font-sans: 'Inter var', ShopifySans, Helvetica, Arial, sans-serif;
}

If using Tailwind, extend the fontFamily config:

fontFamily: {
  sans: ['"Inter var"', 'ShopifySans', 'Helvetica', 'Arial', 'sans-serif'],
}

No Google Fonts substitute is strictly necessary since Inter is available freely, but ensure the variable font axes are enabled (weight range 100–900, slant axis for italics).

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles must be inferred from active/disabled states. Button hover likely darkens the background color by ~10% and may add a subtle y-translate lift (-1px or -2px).
• Loading/skeleton states: While tw-shimmer keyframe is detected in CSS, the exact skeleton component markup and color values for loading placeholders weren't observable from the static screenshot.
• Form validation states: Only default and focus input states were extractable; error ({colors.error}) and success border/background treatments for invalid/valid fields are assumed but unconfirmed.
• Authenticated/user flows: The screenshot shows the anonymous/theme-store browsing experience. Dashboard surfaces, order history, checkout flows, and account settings pages were not available for analysis.
• Sub-brand palette variants: The "Chill" preset is one of three designs mentioned in the meta description ("Flawless comes with 3 ready-made designs"). The other two presets (likely with different color/personality treatments) are not represented in this spec.
• Mobile navigation drawer: The collapsed/hamburger menu state, its slide-in animation, and internal link structure couldn't be captured from the desktop-focused screenshot.
• Search results overlay: The search expansion state (full-width overlay with results) is referenced in CSS classes (theme-search-overlay) but its rendered appearance wasn't present in the static viewport.
• Pixel-exact values for translucent surfaces: Some RGBA values (e.g., rgba(0, 0, 0, 0.1) for shadows, rgba(255, 255, 255, 0.1) for subtle overlays) were extracted from computed styles but their exact semantic naming in the source design system isn't certain.
• CSS variable naming mismatches: Several Tailwind utility classes reference semantic color names (tw-bg-canvas-primary, tw-text-fg-tertiary) whose mapped hex values might differ in other presets—this spec captures the "Chill" preset mapping specifically.