Pavise Design System

Overview

Pavise is a biotechnology skincare brand whose digital presence is defined by radical darkness—a design choice that signals clinical precision, laboratory-grade authority, and luxury-market confidence. The entire interface rests on {colors.canvas} (#000000), creating a void-like stage where product photography glows with near-supernatural intensity and white text reads with the clarity of engraved metal. There is no gradient wash, no ambient texture, no decorative noise—just absolute black, absolute white, and carefully calibrated shades of charcoal between them.

The brand's voltage lives in inversion: where most e-commerce sites use dark ink on light paper, Pavise flips the contract to {colors.primary} (#ffffff) against darkness, making every headline feel like it's backlit by a lightbox. This isn't merely aesthetic; it's semantic. DiamondCore® technology—the brand's patented molecular innovation—is positioned as something that exists outside ordinary cosmetic logic, and the dark mode canvas visually enforces that exceptionalism. Product photography is rendered in high-key monochrome or desaturated tones, allowing packaging details (the pink "STRESS REPAIR" band on the Night Therapy bottle, for instance) to become chromatic focal points within the monochrome field.

Typography is the system's quietest but most deliberate move. Every role—from {typography.display-lg} at 50px down to {typography.caption} at 13px—uses weight 400 (regular). Even the display headlines refuse boldness. This is intentional: the hierarchy is carried entirely by scale (64px → 50px → 24px → 16px → 15px → 10px) and by the generous leading baked into each token. When emphasis is required—as in button labels or navigation items—the system reaches for {typography.button} at weight 600, which is the only semi-bold weight in the entire vocabulary. The result is a typographic voice that whispers rather than shouts: confident, unhurried, laboratory-precise.

Shape language is equally restrained. The dominant radius is {rounded.DEFAULT} (8px), used across cards and containers, while interactive elements skew toward extremes: {rounded.full} (9999px) for pill-shaped buttons and {rounded.pill} (27px) for search inputs. There are no organic blobs, no soft squircles—only geometric precision. Navigation links are uppercase-tracked (letter-spacing: 0.05em), reinforcing the clinical, almost pharmaceutical register of the brand voice.

Key Characteristics:

• Pure {colors.canvas} (#000000) background throughout—no off-blacks, no gradients, no texture layers.
• All text rendered in {colors.ink} (#ffffff) or its muted derivatives ({colors.muted}, {colors.muted-medium}).
• Primary CTA uses {component.button-primary-outline}: transparent background, 2px solid {colors.border-strong}, fully rounded corners.
• Display typography tops out at {typography.display-xl} (64px, weight 400)—never bold, never condensed.
• Single typeface family: Suisse Intl (with FK Roman Standard reserved for editorial accents).
• Spacing scale anchored at {spacing.hero} (145px) for vertical hero rhythm, compressing to {spacing.xxs} (5px) for micro-adjustments.
• Product photography is high-contrast, often monochrome, with selective brand-color accents.
• No drop shadows on the main canvas; depth is achieved through layer stacking and opacity.

Colors

Brand & Accent

• Primary ({colors.primary} — #ffffff): The sole brand voltage color. Used for all primary text, button borders, icon fills, and interactive highlights. On this dark canvas, white functions as both information carrier and brand signature.
• Primary Hover ({colors.primary-hover} — #f5f5f5): Subtle warm shift on hover states for white-on-black elements. Barely perceptible but provides interaction feedback.
• Active ({colors.active} — #e5e5e5): Pressed/focused state for white elements—slightly dimmed to indicate engagement without losing legibility.

Surface

• Canvas ({colors.canvas} — #000000): Absolute black. The foundational background for the entire site—hero bands, nav bars, footer, modals, everything. Never deviated from.
• Surface ({colors.surface} — #0a0a0a): Near-black elevation. Used for the top navigation bar to create subtle separation from the hero below without introducing a visible border line.
• Surface Elevated ({colors.surface-elevated} — #111111): Slightly lighter charcoal. Applied to raised containers like testimonial cards and modal panels to suggest physical lift.
• Surface Strong ({colors.surface-strong} — #1a1a1a): Medium charcoal. Reserved for input fields, hover states on cards, and any element requiring clear differentiation from the base canvas.
• Surface Card ({colors.surface-card} — #141414): Card-specific surface tone. Used for product grid cards to create a distinct "tile" feeling against the darker page background.

Text / Ink

• Ink ({colors.ink} — #ffffff): Pure white. Headlines, navigation, button labels, primary body copy—anything that must be read at maximum priority.
• Body ({colors.body} — #ffffff): Identical to Ink in this dark-mode system. Both tokens exist to support future light-mode variants where they would diverge.
• Body Inverse ({colors.body-inverse} — #000000): Black text on white backgrounds. Currently used only in the announcement bar (which has a white strip at the very top of the viewport).
• Muted ({colors.muted} — #d1d1d1): Light gray. Secondary body copy, subheadlines, descriptive text beneath hero headlines. Provides comfortable reading contrast without competing with primary text.
• Muted Medium ({colors.muted-medium} — #8c8c8c): Mid-gray. Tertiary information—footer links, metadata, timestamps, disabled-state text.
• Muted Strong ({colors.muted-strong} — #a3a3a3): Gray between Muted and Muted Medium. Placeholder text, subtle captions, supporting details that should be scannable but not prominent.
• On Primary ({colors.on-primary} — #000000): Black text for use on white/large primary-colored surfaces. Ensures AA contrast when text sits atop {colors.primary} backgrounds.
• On Dark ({colors.on-dark} — #ffffff): White text on any dark surface. Canonical dark-mode text token.
• On Surface ({colors.on-surface} — #ffffff): Surface-layer text color. Functionally identical to {colors.ink} but semantically bound to elevated surface contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — #333333): Dark gray divider lines. Used between footer sections, list item separators, subtle structural boundaries.
• Hairline Soft ({colors.hairline-soft} — #262626): Near-invisible dividers. For the faintest possible separation—card internal divisions, table row borders.
• Border Strong ({colors.border-strong} — #ffffff): White borders. The signature treatment for {component.button-primary-outline} CTAs—2px solid white creates maximum visibility against the black canvas.
• Border Input ({colors.border-input} — #ffffff): White input field borders. Search fields, email captures—any text entry area requiring clear affordance.

Semantic

• Error ({colors.error} — #ef4444): Red for form validation errors, system alerts, out-of-stock badges.
• Success ({colors.success} — #22c55e): Green for confirmation messages, add-to-cart feedback, success states.
• Link ({colors.link} — #d1d1d1): Inline link color. Matches {colors.muted} so links integrate seamlessly into body copy flow.
• Link Active ({colors.link-active} — #ffffff): Hovered/active link state. Brightens to full white for clear interaction signal.

Typography

Font Family

The Pavise type system is built on Suisse Intl, a Swiss neo-grotesque designed by Swiss Typefaces. It is the sole workhorse across all UI roles—from navigation microcopy at 10px to hero headlines at 64px. The font-face declarations load two weights: Regular (400) and SemiBold (600), with the latter reserved exclusively for button labels, uppercase labels, and navigation dropdown indicators. The fallback stack extends through system sans-serifs (ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto...) ensuring graceful degradation if the custom WOFF2 fails to load.

A secondary typeface, FK Roman Standard, appears in the font-face declarations (Regular 400, Medium 500, Bold 700 weights), suggesting it is deployed in long-form editorial contexts—product descriptions, science-explainer sections, or brand manifestos—not visible in the above-fold viewport but architecturally present in the system. It brings a serif warmth that contrasts with Suisse Intl's geometric precision, likely creating a "laboratory notebook meets luxury journal" tonal pairing when both appear together.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 400 | 1.1 | -0.02em | Epic headlines (future use) | | {typography.display-lg} | 50px | 400 | 1.1 | -0.01em | Hero headline ("Outsmart skin aging…") | | {typography.title-md} | 50px | 400 | 1.1 | -0.01em | Section titles (same spec as display-lg) | | {typography.title-sm} | 24px | 400 | 1.25 | 0 | Subsection headings, card titles | | {typography.label-md} | 16px | 400 | 1.5 | 0 | Feature labels, form labels | | {typography.label-sm} | 10px | 600 | 1.4 | 0.04em UPPERCASE | Overline labels, category tags, badges | | {typography.body-md} | 15px | 400 | 1.4 | 0 | Primary body copy, hero subheadline | | {typography.body-sm} | 14px | 400 | 1.43 | 0 | Secondary body, legal text | | {typography.caption} | 13px | 400 | 1.38 | 0 | Metadata, timestamps, footnotes | | {typography.button} | 15px | 600 | 1.2 | 0 | Button labels, CTA text | | {typography.nav-link} | 14px | 400 | 1.4 | 0.05em UPPERCASE | Main navigation items | | {typography.mono} | 15px | 400 | 1.5 | 0 | Editorial/serif context (FK Roman) |

Principles

The Pavise type system operates on a philosophy of scale-only hierarchy. Notice that {typography.display-lg} and {typography.title-md} share identical specifications (50px, weight 400, tracking -0.01em)—this is not redundancy but intentionality. The system does not use weight to distinguish heading levels; it uses spatial position and surrounding whitespace instead. A 50px headline inside a hero band carries different semantic weight than a 50px headline inside a product grid card, even though the token values match. This approach prevents the "bold everything" trap that plagues many e-commerce designs.

Weight 600 (SemiBold) is a controlled substance in this system. It appears in exactly three contexts: {typography.button} (CTA labels demanding finger-pointing clarity), {typography.label-sm} (uppercase micro-labels that function like architectural signage), and {typography.nav-link} dropdown arrows (interaction affordances). Nowhere else. Body copy never exceeds weight 400. Headlines never exceed weight 400. This restraint is what makes the rare semi-bold moments feel decisive rather than desperate.

Letter-spacing follows a binary pattern: neutral (0) for readable prose, expanded (0.04em–0.05em) for uppercase navigational and labeling text. The expansion prevents uppercase letters from feeling cramped—a common failure mode in dark-mode UIs where tight tracking reduces legibility against black backgrounds. The display sizes carry slight negative tracking (-0.01em to -0.02em) to optically tighten large letterforms, counteracting the natural "airiness" that occurs at 50px+ scales.

Note on Font Substitutes

Suisse Intl is a commercial font from Swiss Typefaces and requires licensing for production use. For prototyping or open-source implementations, substitute with Inter (Google Fonts) which shares similar proportions, x-height, and geometric skeleton. Define CSS variables:

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

FK Roman Standard can be substituted with Source Serif 4 (Google Fonts) or DM Serif Display for display contexts, maintaining the editorial warmth that contrasts with the primary sans-serif.

Layout

Spacing System

• Base unit: 5px ({spacing.xxs}), derived from the smallest extracted spacing value.
• Tokens: {spacing.xxs} (5px — micro-gaps, icon padding), {spacing.xs} (7px — tight internal padding), {spacing.sm} (8px — standard small gap), {spacing.md} (10px — button vertical padding, form gaps), {spacing.base} (12px — list item spacing), {spacing.lg} (13px — compact container padding), {spacing.xl} (16px — standard padding, gutters), {spacing['2xl']} (20px — section-internal spacing), {spacing['3xl']} (32px — card padding, block spacing), {spacing['4xl']} (40px — major section breaks), {spacing.section} (80px — between-section vertical rhythm), {spacing.hero} (145px — hero-specific vertical padding), {spacing.wide} (48px — footer/extra-wide zones).
• Section padding (vertical): {spacing.hero} (145px) for the hero band; {spacing.section} (80px) for standard content sections; {spacing.wide} (48px) for footer.
• Card internal padding: {spacing['3xl']} (32px) for feature cards, {spacing.lg} (13px–16px) for dense product tiles.
• Gutters: {spacing.xl} (16px) on mobile scaling to {spacing['4xl']} (40px) on desktop for content margins.

Grid & Container

• Max content width: 1440px (extracted from <main> container).
• Density choice: Editorial-luxury density. Generous whitespace between elements (the hero uses 145px vertical padding alone). Content never crowds the viewport edges.
• Desktop grid behavior: Single-column hero layout with centered text block (approximately 50-60% width) and overlapping/asymmetric product imagery. Below-fold sections likely adopt multi-column grids (3–4 columns for product listings) though not visible in the current viewport.
• Hero column split: Text column left-aligned or center-aligned within a constrained width (~680px), with product photography positioned to the right or as a full-bleed background layer. The current screenshot shows the bottle image dominating the right portion of the hero with text overlaid or adjacent on the left.

Whitespace Philosophy

Pavise practices architectural whitespace—not empty space to be filled, but structural negative space that defines boundaries and focus. The {spacing.hero} value of 145px is extraordinary (nearly 9rem), creating a hero band that breathes like a print magazine spread. Between components, {spacing['4xl']} (40px) ensures each content block feels autonomous. This is not "airy" in the sense of minimal-content landing pages; it's controlled spaciousness that makes the limited chromatic and textual elements feel inevitable rather than sparse.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [←] Get 10% off when you sign up for emails and texts.     [→]  │ ← Announcement Bar (h: 40px, bg: white, text: black)
├─────────────────────────────────────────────────────────────────┤
│ SHOP ▾   SCIENCE ▾   REWARDS ▾          pavise         PARTNER LOCATOR 🔍 👤 🛒 │
│                                                                 │ ← Nav Bar (h: 72px, bg: #0a0a0a, text: white, uppercase)
└─────────────────────────────────────────────────────────────────┘
                                 ↑ max-width: 1440px centered

The header uses a two-tier structure: a thin white announcement strip at the very top (the only non-dark element in the viewport), followed by the main navigation bar in {colors.surface} (#0a0a0a). Logo is center-aligned. Utility icons (search, account, cart) are flush-right. Navigation categories (Shop, Science, Rewards) are flush-left with chevron dropdown indicators.

Hero Section

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│                                                                  │
│     Outsmart skin aging with DiamondCore®                        │ ← display-lg (50px, white, regular)
│                                                                  │
│     Skin that behaves younger, powered by patented               │ ← body-md (15px, muted white)
│     DiamondCore® biotechnology.                                  │
│                                                                  │
│                     ┌─────────────────┐                          │
│                     │   SHOP NOW      │                          │ ← button-primary-outline (white border, pill)
│                     └─────────────────┘                          │
│                                                                  │
│            ╭──────────────────────╮                             │
│            │                      │                             │
│            │    [Product Photo]   │                             │ ← High-contrast monochrome bottle
│            │    (Night Therapy)   │                             │
│            │                      │                             │
│            ╰──────────────────────╯                             │
│                                                                  │
│                                              ⊙                   │ ← pause button (circle, 44px)
└──────────────────────────────────────────────────────────────────┘
  ↑ padding-top: 145px                              padding-bottom: ~120px

The hero centers the headline and subheadline horizontally (or left-aligns within a central column) with the CTA button positioned below. Product photography appears as a large-scale image—likely positioned absolutely or via CSS Grid overlap—to the right of or behind the text. A circular pause button (suggesting video or animated content) sits in the lower-right corner of the hero band.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | {colors.canvas}, no shadow, no border | Base page background, hero bands, footer | | 1 (Raised) | {colors.surface} (#0a0a0a), no visible shadow | Top navigation bar—separated by value difference alone | | 2 (Card) | {colors.surface-card} (#141414), optional 1px {colors.hairline} border | Product grid cards, feature tiles | | 3 (Elevated) | {colors.surface-elevated} (#111111), subtle shadow | Testimonial cards, modals, dropdown panels | | 4 (Overlay) | {colors.canvas} with opacity (0–100%), z-index stacking | Quick-view modal backdrop, mega-menu overlays | | 5 (Focus Ring) | 2px solid {colors.border-strong} (white) | Input focus states, keyboard-navigable elements |

Philosophy: Pavise's depth system is value-based rather than shadow-based. Because the canvas is pure black, traditional drop shadows (which are inherently dark) would be invisible. Instead, elevation is communicated through luminance steps: each level gets progressively lighter (#000000 → #0a0a0a → #111111 → #141414 → #1a1a1a). This is a dark-mode-specific technique where "lighter = higher." Borders appear only when necessary for interaction clarity (input fields, outline buttons); otherwise, surfaces abut directly and the eye perceives depth through brightness contrast alone.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small inner elements, tag badges (if needed) | | {rounded.DEFAULT} | 8px | Default card corners, container rounding | | {rounded.md} | 12px | Medium cards, image containers | | {rounded.lg} | 15px | Feature cards, modal panels | | {rounded.xl} | 17px | Large cards, testimonial blocks | | {rounded.xxl} | 20px | Hero image masks, oversized containers | | {rounded.pill} | 27px | Search input field, capsule-shaped elements | | {rounded.circle} | 44px | Icon buttons, avatar placeholders, pause/play controls | | {rounded.full} | 9999px | Fully rounded buttons (primary CTAs), pill tags |

Photography Geometry

Product photography in the hero section appears as full-bleed or near-full-bleed imagery with no corner rounding (or possibly {rounded.xxl} / 20px if softly masked). The Night Therapy bottle is photographed in studio lighting against a neutral-to-dark background, rendered in high-contrast monochrome that emphasizes the cylindrical form and label typography. Aspect ratio appears to be roughly 3:4 (portrait) or 1:1 (square) depending on crop. Brand accent colors (the pink "STRESS REPAIR" band) retain their hue while surrounding elements desaturate, creating selective-color impact. Future implementation should maintain sharp (unrounded) or generously rounded (20px+) corners—never tight 8px radii on hero images, as that would feel incongruously "app-like."

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

Announcement Bar & Navigation

{component.announcement-bar} — The thin promotional strip at the absolute top of the viewport. Background {colors.canvas} (appears white in the screenshot due to inverse rendering for this specific element), text {colors.body-inverse} (black on white). Height locked to 40px. Contains carousel-capable messaging with left/right chevron navigation buttons ({component.announcement-nav-button}). Typography uses {typography.body-md} at 15px.

{component.announcement-nav-button} — Transparent-background chevron buttons within the announcement bar. Size 24px. Color matches the inverted text color (black in the announcement context). These control message rotation in the promo carousel.

{component.top-nav} — The main navigation container spanning full viewport width. Background {colors.surface} (#0a0a0a), creating a barely-perceptible lift from the pure-black hero below. Height 72px. Contains logo (center-aligned), category links (left-aligned, {typography.nav-link}, uppercase, tracked), and utility tools (right-aligned).

{component.nav-link} — Individual navigation items (SHOP, SCIENCE, REWARDS). Transparent background, {colors.ink} text, {typography.nav-link} styling (14px, uppercase, 0.05em letter-spacing). Each includes a dropdown chevron ({component.nav-dropdown-arrow}) indicating expandable sub-menus. Padding is minimal ({spacing.sm} horizontal) to maintain the sleek, uncluttered nav feel.

{component.partner-locator-link} — A special navigation utility link positioned before the icon group. Same styling as {component.nav-link} but without a dropdown indicator. Links to the partner/store finder tool.

{component.nav-search-icon}, {component.nav-account-icon}, {component.nav-cart-icon} — Three utility icons in the nav's right-hand cluster. Each is a transparent-background icon button at 20px size, colored {colors.ink}. They provide access to search, account management, and shopping cart respectively.

Hero Components

{component.hero-band} — The full-width hero section container. Background {colors.canvas} (pure black). Vertical padding {spacing.hero} (145px) top and approximately 120px bottom. Horizontal padding {spacing.xl} (16px). Contains the overlaid or adjacent headline, subheadline, CTA, and product image.

{component.hero-headline} — The primary H1: "Outsmart skin aging with DiamondCore®". Uses {typography.display-lg} (50px, weight 400, {colors.ink}). No bold weight—confidence through scale alone. Line height 1.1 keeps the multi-line headline tightly stacked.

{component.hero-subheadline} — Supporting paragraph beneath the headline: "Skin that behaves younger, powered by patented DiamondCore® biotechnology." Uses {typography.body-md} (15px, {colors.muted}). Provides scientific credibility without competing for attention.

{component.hero-cta-container} — Wrapper div positioning the CTA button below the subheadline. Adds top padding {spacing.lg} to ensure proper vertical rhythm between text and action.

Buttons

{component.button-primary-outline} — The principal call-to-action style, exemplified by the "SHOP NOW" button in the hero. Transparent background with 2px solid {colors.border-strong} (white) border. Text {colors.ink}, {typography.button} (15px, weight 600). Fully rounded ({rounded.full} / 9999px). Padding 9px 40px (generous horizontal padding creates an elongated pill shape). This is the signature interactive element of the entire brand—inverted, outlined, impossible to miss against the black void.

{component.button-primary-filled} — Solid white variant. Background {colors.primary}, text {colors.on-primary} (black). Same dimensions and rounding as the outline version. Used when a button needs more visual weight than the outline treatment provides (e.g., in carousel overlays, sticky add-to-bars).

{component.button-secondary} — Elevated-surface button. Background {colors.surface-elevated} (#111111), text {colors.ink}. For actions that are important but not primary conversion paths.

{component.button-ghost} — Minimal text-only button. Transparent background, {colors.ink} text. Used for tertiary actions like "Learn More," "View Details," or dismiss controls.

{component.button-shop-all} — Sharp-cornered (border-radius 0px) button variant seen in the extracted CSS as "SHOP ALL". Background {colors.canvas}, 2px solid {colors.border-strong} border, {typography.button} text. The absence of rounding is deliberately brutalist—likely used in collection headers or editorial contexts where the pill shape would feel too "friendly."

{component.icon-button} — Square touch target for standalone icons. Size {rounded.circle} (44px), transparent background, {colors.ink} icon color. Used for play/pause, close, menu toggle, and other icon-only interactions.

Inputs

{component.search-input} — The global search field. Transparent background (blends into whatever surface it sits on), {colors.ink} text, {colors.border-input} (white) border at 2px. Rounded {rounded.pill} (27px). Padding 7.5px 10px 7.5px 38px (left padding accommodates a magnifying glass icon). Typography {typography.body-md}. The pill shape and white border make it highly discoverable against dark backgrounds.

{component.search-input-focus} — Focus state for search input. Maintains transparent background and {rounded.pill} shape. Implementation should add a subtle white outer glow or border-intensity increase to indicate focus.

Cards & Containers

{component.card-product} — Standard product listing tile. Background {colors.surface-card} (#141414), text {colors.ink}. Rounded {rounded.DEFAULT} (8px). Internal padding {spacing.lg}. Would contain product image, title, price, and quick-add trigger.

{component.card-feature} — Marketing/feature explanation card. Background {colors.surface} (#0a0a0a or slightly elevated), {colors.ink} text. Rounded {rounded.lg} (15px). Generous padding {spacing['3xl']} (32px) to give feature copy room to breathe.

{component.card-testimonial} — Customer review or endorsement card. Background {colors.surface-elevated} (#111111), {colors.muted} text (review quotes can be slightly dimmer than primary copy). Rounded {rounded.xl} (17px). Padding {spacing['4xl']} (40px) for luxurious reading margins.

Media & Overlay Components

{component.media-pause-button} — Circular control button visible in the hero's lower-right corner. Transparent background, {colors.ink} icon (two vertical bars), size {rounded.circle} (44px). Indicates the hero contains playable/pausable video content.

{component.quick-view-overlay} — Full-screen backdrop for the quick-view product modal. Background {colors.canvas} (black) with initial opacity: 0, transitioning to full opacity on activation. Z-index layered above all page content.

{component.quick-view-panel} — The slide-up panel containing quick-view product details. Background {colors.canvas}, text {colors.ink}. Rounded {rounded.lg} (15px) on top corners (bottom corners hidden by screen edge). Padding 20px 16px 24px. Translates vertically on enter/exit.

Footer

{component.footer} — Site-wide footer container. Background {colors.canvas} (black), text {colors.muted-medium} (#8c8c8c—noticeably dimmer than body copy to establish visual hierarchy bottom-of-page). Typography {typography.body-sm} (14px). Padding {spacing.wide} (48px) vertical, {spacing.xl} horizontal.

Labels & Badges

{component.label-uppercase} — Micro-label for categorization, badges, and overline text. {typography.label-sm} (10px, weight 600, 0.04em letter-spacing, text-transform: uppercase). {colors.ink} text. Used for "NEW," "BESTSELLER," "SCIENCE-BACKED" tags above product names or section titles.

Do's and Don'ts

Do

• Do use {colors.canvas} (#000000) as the universal background—never introduce off-black (#111111, #1a1a1a) as a page-level canvas color; reserve those for elevated cards and inputs only.
• Do keep all headline weights at 400 (regular)—the {typography.display-lg} and {typography.title-md} tokens explicitly avoid boldness, trusting scale to carry emphasis.
• Do apply {rounded.full} (9999px) to all primary CTA buttons—the pill shape is the signature interactive motif of this brand, as seen in {component.button-primary-outline}.
• Do use {typography.label-sm} (10px, uppercase, 0.04em tracking) for all categorical labels and overlines—this creates consistent "signage" throughout the interface.
• Do maintain {spacing.hero} (145px) vertical padding for the hero section—it establishes the editorial, luxury pacing that distinguishes this brand from conventional e-commerce.
• Do render product photography in high-contrast monochrome with selective brand-color accents—the pink "STRESS REPAIR" band on the Night Therapy bottle demonstrates this technique perfectly.
• Do use {colors.muted} (#d1d1d1) for body/subheadline text rather than pure white—this creates a two-level text hierarchy (primary vs. supporting) that guides the eye naturally.
• Do limit {typography.button} (weight 600) to actual button labels and navigation items—never apply semi-bold to body copy or headlines.
• Do employ value-based elevation (progressively lighter blacks) rather than drop shadows for depth—shadows are invisible on a {colors.canvas} background.
• Do uppercase and track (0.05em) all {typography.nav-link} items—this transforms navigation into architectural signage rather than mere links.

Don't

• Don't introduce gradients, noise textures, or ambient glow effects to the canvas—the brand aesthetic is flat-black precision, not atmospheric depth.
• Don't round hero product image corners tighter than {rounded.xxl} (20px)—sharp or generously curved edges maintain the photographic integrity; tight app-like radii cheapen the effect.
• Don't substitute {colors.link} (#d1d1d1) for {colors.primary} (#ffffff) in CTAs—links are intentionally muted to serve inline reading; conversion buttons demand full white voltage.
• Don't use the sharp-cornered {component.button-shop-all} (radius 0px) pattern for primary user actions—that variant is reserved for editorial/collection contexts; hero and product CTAs must remain pill-shaped.
• Don't add visible borders between the top nav ({component.top-nav}) and the hero band—the #0a0a0a nav background creates sufficient separation through value contrast alone.
• Don't exceed weight 600 anywhere in the type system—the loaded font-faces only include 400 and 600; attempting 700 will cause fallback to a system bold that breaks the visual voice.
• Don't crowd the hero headline with insufficient margin below—"Outsmart skin aging…" needs the full {spacing.lg} gap before the subheadline to command respect.
• Don't render the announcement bar in dark mode—it is intentionally inverted (white background, black text) to break the dark monotony and signal "promotional content here."
• Don't use {colors.muted-medium} (#8c8c8c) for anything above the fold—it's too dim for primary reading; reserve it for footer and metadata contexts.
• Don't implement hover effects as background-color changes on {component.button-primary-outline}—on a dark canvas, the appropriate hover is probably a subtle opacity reduction or a thin white shadow/glow, not a fill.

Motion & Animation

Transition Tokens

--transition-base: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-color: background-color 1.5s ease-in-out, color 0.2s ease-in-out;
--transform-only: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--opacity-fade: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--stagger-in: 0.5s cubic-bezier(0.76, 0, 0.24, 1) 0.6s;
--bounce-enter: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--bg-size-expand: background-size 0.3s ease-in-out 0.2s;

Keyframe Animations

• scroll-x — Marquee-style horizontal scrolling for announcement bar messages or logo strips.
• bounceX — Horizontal bounce effect, likely for cart-add feedback or attention-drawing micro-interactions.
• bounceEffect — Multi-axis bounce, possibly for notification toasts or success indicators.
• pulseEffect — Gentle pulsing opacity/scale animation, potentially for "live" indicators or loading states.
• wiggle — Small rotational oscillation, used for playful attention cues (e.g., the pause button drawing focus).
• fillIn — Width/height fill animation, possibly for progress bars or underline reveals on hover.
• shopify-rotator — SVG stroke-dashoffset animation for loading spinners (Shopify-specific utility).
• shopify-dash — Complementary dash-pattern animation paired with rotator for complex loaders.
• acceleratedCheckoutLoadingSkeleton — Skeleton shimmer effect for checkout loading states.

Interaction Patterns

• Announcement bar carousel: The top promo strip auto-advances messages with horizontal slide transitions (scroll-x keyframe). Left/right chevrons allow manual navigation. Transition timing is slow (background-color 1.5s) suggesting crossfade or smooth slide behavior.
• Hero video/pause toggle: The circular {component.media-pause-button} toggles hero video playback. Clicking likely triggers a state change with a brief scale transition (transform 0.15s).
• Quick-view modal: Slide-up panel triggered from product cards. The overlay fades in (opacity 0.3s) while the panel translates from below (stagger-in with 0.6s delay for choreographed entrance).
• Button interactions: Primary outline buttons likely gain a subtle white glow or border-intensity boost on hover (not a fill, per the Don'ts). Active state uses {colors.active} (#e5e5e5) for pressed appearance.
• Nav dropdowns: Mega-menu panels descend on hover with cubic-bezier(0.4, 0, 0.2, 1) easing—standard material-design-ish motion curve.
• Search input focus: The {component.search-input} likely expands slightly or gains a box-shadow ring on focus, using the --transition-base timing.

Imagery Style

• Photography approach: High-contrast studio product photography with dramatic directional lighting. The Night Therapy bottle is lit to emphasize its cylindrical geometry, metallic cap, and label typography.
• Color treatment: Predominantly monochrome/desaturated with selective brand-color preservation. The pink/magenta "STRESS REPAIR" band retains full saturation while the bottle and background fade toward grayscale—this "color pop" technique draws the eye precisely to branded elements.
• Subject matter: Macro/close-up product shots showing packaging detail (ingredient lists, volume measurements, technology names like "BioIntelligent Catalyst"). No lifestyle/human imagery in the hero—focus is entirely on the product as scientific object.
• Background integration: Product photos either blend seamlessly into the black canvas (shot on black/gray backgrounds) or are masked with soft edges to dissolve into {colors.canvas}. No white-background cutouts that would create jarring contrast islands.
• Aspect ratios: Portrait orientation (~3:4 or 2:3) for tall bottles, allowing the product to dominate vertical space without excessive cropping.
• Role of imagery: Supportive but commanding. The photo doesn't wallpaper the hero—it occupies the right portion (or background layer) while text claims the left/center. The image validates the scientific claims made by the copy.
• Future patterns expected: Split-composition layouts (text-left/image-right), full-bleed product galleries with horizontal scroll, before/after clinical imagery in desaturated medical-aesthetic style, microscopic/molecular visualization of DiamondCore® technology.

Icon System

• Library: Custom SVG icons (no detected third-party library usage in the CSS classnames). Icons appear to be hand-crafted or sourced from a custom set matching the brand's geometric precision.
• Specific icons observed:
  • Chevron left/right (announcement bar navigation)
  • Chevron down (nav dropdown indicators)
  • Search magnifying glass (nav search trigger)
  • User/person outline (account icon)
  • Shopping bag/cart (cart icon)
  • Pause symbol (two vertical bars, hero media control)
• Treatment: Stroke-based icons (not filled), rendered in currentColor which inherits {colors.ink} (white). Line weight appears consistent at ~1.5px–2px.
• Size: Navigation utilities at 20px, announcement chevrons at 24px, media controls at 44px (within their circular touch target).
• Alignment: Icons are optically aligned with accompanying text (nav icons sit on the same baseline as the "PARTNER LOCATOR" text; cart icon aligns with search and account icons in the utility cluster).

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro (for Shopify Hydrogen/custom headless setups)
- Styling:        Tailwind CSS v4 (utility-first, strongly indicated by extracted class patterns)
- Fonts:          Self-hosted WOFF2 files for Suisse Intl + FK Roman Standard (loaded via @font-face from CDN)
- Animation:      Tailwind built-in transitions + CSS keyframes (Framer Motion optional for complex scroll-triggered animations)
- Icons:          Custom SVG components (Lucide or Heroicons acceptable for utility icons if custom set unavailable)
- Component lib:  Custom components (no shadcn/Radix dependency detected; Shopify theme architecture)
- CMS:           Shopify (evidenced by shopify-section classes, accelerated checkout references, Yotpo widget)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero (text stacks above image), hamburger menu replaces full nav, announcement bar text truncates, CTA button becomes full-width | | Tablet | 640px – 1024px | Two-column hero begins (text left, image right), nav condenses to icon-only or horizontal scroll, product grid shifts to 2-column | | Desktop | 1024px – 1440px | Full nav visible, 3-4 column product grids, hero maintains side-by-side composition | | Wide | > 1440px | Content maxes at 1440px container width with auto margins, hero padding may increase further |

Touch Targets

• {component.button-primary-outline}: ~58px height × ~200px+ width (padding 9px 40px plus text) — comfortably exceeds 44×44px WCAG AAA minimum.
• {component.search-input}: ~42px total height (padding 7.5px × 2 plus 15px font + border) — meets minimum but consider increasing padding to 10px vertical for mobile.
• {component.icon-button}: 44px × 44px exactly — hits the AAA threshold precisely.
• {component.media-pause-button}: 44px × 44px — same as icon button, adequate for touch.
• {component.nav-link}: Tap area likely extended via padding beyond the 14px text size to meet mobile targets.

Collapsing Strategy

• Navigation: At tablet/mobile breakpoints, the horizontal nav (SHOP, SCIENCE, REWARDS, PARTNER LOCATOR, icons) collapses into a hamburger menu icon ({component.icon-button} style) triggering a full-screen overlay drawer.
• Hero layout: Mobile stacks the headline, subheadline, and CTA vertically in a single centered column; the product image moves below the text (or becomes a background layer with reduced opacity to ensure text readability).
• Announcement bar: Persists at all widths but may truncate long messages with ellipsis, relying on the chevron navigation to reveal full text.
• Quick-view modal: On mobile, the slide-up panel becomes full-width (minus small horizontal margin) occupying the bottom 80% of the viewport, with the overlay covering remaining content.
• Product grid: Shifts from desktop 3–4 columns → tablet 2 columns → mobile 1 column, maintaining {rounded.DEFAULT} card corners and {spacing['3xl']} internal padding throughout.

Image Behavior

• Hero product image: On mobile, scales down to ~60–70% width, centered below the text stack. May switch from right-positioned to background-layer positioning with a dark gradient overlay to preserve text contrast.
• Product card thumbnails: Maintain aspect ratio (likely 3:4 or 1:1) across breakpoints, scaling to fill grid cell width. Corner rounding stays at {rounded.DEFAULT} (8px) or {rounded.md} (12px).
• Logo: Scales proportionally; in the nav, it remains center-aligned but reduces in max-width on smaller screens to prevent crowding utility icons.

Iteration Guide

1. Initialize with dark defaults: Set your CSS custom properties root to --color-canvas: #000000 immediately. Build every component against this black baseline first—light mode (if ever needed) comes later as an override layer.
2. Implement the font stack: Load Suisse Intl (400 and 600 weights) via @font-face from the CDN URLs found in the extracted CSS. Define --font-sans and apply it globally. Add FK Roman Standard as a variable for editorial sections.
3. Build the two-tier header: Create the announcement bar (white bg, black text, 40px height, carousel-enabled) and the nav bar (#0a0a0a bg, 72px height, uppercase tracked links) as distinct components. Center the logo. Flush utilities right.
4. Construct the hero with {spacing.hero} padding: Use 145px top padding non-negotiably. Implement the headline at {typography.display-lg} (50px, weight 400—do not bold it), the subheadline at {typography.body-md} in {colors.muted}, and the CTA as {component.button-primary-outline} (white border, pill shape).
5. Apply the button system: Every CTA uses {rounded.full} unless it's the specific {component.button-shop-all} variant (sharp corners, reserved for editorial contexts). Weight is always 600 inside buttons, 400 everywhere else.
6. Use value-based elevation: When you need a card or raised surface, step through the {colors.*} surface tokens (#000000 → #0a0a0a → #111111 → #141414). Avoid shadows—they're invisible on this canvas.
7. Implement the spacing rhythm: Reference {spacing.hero} for hero zones, {spacing.section} (80px) for inter-section gaps, {spacing['4xl']} (40px) for major internal breaks, and {spacing.xxs} (5px) for the tightest adjustments. Never use arbitrary pixel values when a token exists.
8. Add motion conservatively: Use cubic-bezier(0.4, 0, 0.2, 1) as your default easing. Keep durations under 400ms for UI transitions. Reserve the longer 1.5s timing specifically for announcement bar color-crossfades.
9. Test contrast ratios: White-on-black passes easily (21:1), but verify that {colors.muted} (#d1d1d1, ~12.6:1) and {colors.muted-medium} (#8c8c8c, ~7.5:1) still meet AA requirements for their respective text sizes. If body text dips below 4.5:1, bump it closer to {colors.muted}.
10. Run validation: Execute npx @google/design.md lint DESIGN.md after completion. Fix any broken-ref, orphaned-tokens, or contrast-ratio warnings before shipping to development.

Font Setup for Prototyping: If you cannot license Suisse Intl, substitute with Inter from Google Fonts. In your tailwind.config.js or global CSS, define:

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

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif; /* Substitute for FK Roman Standard */
}

Set font-display: swap on all @font-face declarations to prevent FOIT (Flash of Invisible Text) on slower connections.

Known Gaps

• Hover state specifics: The exact hover treatment for {component.button-primary-outline} (glow? opacity? border thickening?) is inferred from dark-mode conventions but not visually confirmed. Implementers should test multiple approaches.
• Mega-menu / dropdown panels: The nav includes dropdown chevrons but the panel contents (sub-categories, featured products, imagery) are not visible in the static screenshot.
• Loading / skeleton states: While acceleratedCheckoutLoadingSkeleton keyframe exists, the exact visual treatment of product card skeletons, image placeholders, and content-loading shimmer is undetermined.
• Form validation states: Beyond {component.search-input-focus}, error/warning/success treatments for forms (red/green borders, helper text positioning) are extrapolated from semantic color tokens but not observed.
• Footer detailed layout: The footer's column structure (links, newsletter signup, social icons, legal text) is confirmed only as a container with {colors.muted-medium} text—internal arrangement is unknown.
• Cart / drawer panel: The cart icon implies a slide-out drawer or dedicated cart page, but neither is visible. Spacing, product-list-within-cart, and checkout CTA styling are absent.
• Product detail page (PDP): The quick-view modal structure gives clues about PDP layout (image gallery left, details right, add-to-bar sticky bottom), but the full PDP—including ingredient accordions, clinical study tabs, related products—is not captured.
• Yotpo review widget: A yotpo-widget-instance div appears in the DOM but renders no visible content in the screenshot. Star ratings, review text, and photo-review styling are unknown.
• Mobile navigation drawer: The collapsed nav state (hamburger menu, full-screen overlay, accordion sub-menus) is assumed based on breakpoint strategy but not visually documented.
• Accessibility focus indicators: Beyond input focus borders, the exact focus-ring treatment for keyboard navigation (outline style, offset, color) on buttons, links, and cards is not extractable from a static image.