Rugiet Design System

Overview

Rugiet presents a cinematic, high-contrast design system built on an absolute black canvas that evokes premium editorial photography and men's health advertising. The dominant mood is confident, direct, and unapologetically masculine—achieved through stark white-on-black typography at aggressive weights, minimal chrome, and a single voltage color ({colors.primary} — #ffa200) that appears sparingly but memorably in promotional banners and interactive category pills.

The brand lives in tension between two geometric languages: sharp, zero-radius rectangles dominate structural components—buttons, nav containers, and content frames carry the brutalist edge of {rounded.none}—while product category tags and filter pills soften into {rounded.pill} (20px) curves, creating a visual dialectic between institutional authority and consumer-friendly approachability.

Typography is the system's strongest signal. The type hierarchy relies almost entirely on weight contrast rather than size variation: {typography.display-lg} and {typography.title-md} both sit at 45px with weight 700, while body copy drops only to 14px/400. This compressed scale forces density into every frame. The headline "This is the science of never settling" occupies roughly 40% of the viewport width in the hero, set tight against a moody lifestyle photograph that bleeds edge-to-edge.

Sub-systems visible in this viewport include: (1) the announcement bar subsystem using {component.announcement-bar} with the orange brand field, (2) the navigation cluster mixing sharp {component.nav-link} items with soft {component.pill-category} tags, and (3) the treatment card rail at the bottom employing {component.treatment-card} with chevron affordances. No pricing or dashboard surfaces are visible in this extraction.

Key Characteristics:

• Absolute black canvas ({colors.canvas} — #000000) with no gradient or texture overlays
• Electric orange brand accent ({colors.primary} — #ffa200) reserved for CTAs and active states
• Pure white ink ({colors.ink} — #ffffff) for all headlines and primary navigation
• Aggressive 700 weight across all display and title roles ({typography.display-lg}, {typography.title-sm})
• Sharp-cornered buttons ({rounded.none}) contrasting with 20px-radius category pills ({rounded.pill})
• Compressed vertical rhythm with {spacing.section} at 100px for major band breaks
• Dual typeface system: Space Grotesk for display moments, Inter for all UI and body text
• Zero box-shadow elevation—the system is flat by philosophy, relying on color inversion instead

Colors

Brand & Accent

• Primary ({colors.primary} — #ffa200): The sole brand voltage color. Used for the top announcement banner background, the active/selected state of {component.pill-category-active}, and hover accents. Appears nowhere else in the static viewport.
• Primary Hover ({colors.primary-hover} — #e69100): Darkened orange for hover states on primary-colored surfaces.
• Primary Dark ({colors.primary-dark} — #cc8000): Deepest brand tone for pressed/active states on orange elements.

Surface

• Canvas ({colors.canvas} — #000000): The foundational background. Pure black, covering the entire hero region, navigation bar, and body background. No tints, no noise.
• Surface Soft ({colors.surface-soft} — #292524): Warm near-black used for elevated containers, subtle panel fills, or secondary background zones where pure black would flatten too aggressively.
• Surface Warm ({colors.surface-warm} — #d5d3d1): Mid-tone warm grey serving as the default fill for inactive {component.pill-category} tags and neutral badge backgrounds.
• Surface Light ({colors.surface-light} — #e7e5e4): Light warm grey appearing as muted text on dark surfaces and subtle description copy in certain contexts.

Text / Ink

• Ink ({colors.ink} — #ffffff): Primary text color on dark surfaces. All headlines, navigation labels, button text on {component.button-secondary}, and the vertical logo wordmark render in pure white.
• Body ({colors.body} — #000000): Black text for light-surface contexts. Used inside {component.button-primary}, {component.pill-category}, and any component with a white/light background.
• Muted ({colors.muted} — #e7e5e4): Reduced-opacity white equivalent. Hero subtext ("Board-certified doctors...") and treatment card descriptions use this token.
• Muted Warm ({colors.muted-warm} — #d5d3d1): Slightly warmer muted tone for secondary descriptive text on very dark fields.
• On Primary ({colors.on-primary} — #ffffff): Text color guaranteed to pass WCAG AA against {colors.primary}. White on orange.
• On Dark ({colors.on-dark} — #ffffff): Alias for {colors.ink} when referencing dark-surface text conventions.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.2)): Subtle dividers and inactive borders. The bottom treatment card row likely uses a hairline separator.
• Border Light ({colors.border-light} — rgba(255, 255, 255, 0.15)): Barely-visible container outlines for focus rings or disabled states.
• Border Strong ({colors.border-strong} — #ffffff): Full-opacity white borders. Applied to {component.button-secondary} and {component.button-primary} as their defining 1px stroke.

Semantic

No explicit semantic colors (error, success, warning) appear in the extracted viewport. These should be added during implementation following standard accessible patterns: red-toned error states against the dark canvas, green success confirmations, amber warnings aligned toward {colors.primary} warmth.

Typography

Font Family

The system employs a dual-typeface strategy. Inter (aliased as mainFont in the codebase) handles all UI text: body copy, navigation labels, button text, pill categories, and metadata. It is loaded via self-hosted WOFF2 files with a fallback chain through "mainFont Fallback" (an Arial override with metric adjustments). Space Grotesk (aliased as secondaryFont) is reserved for display moments—the large-scale vertical "RUGIET" logotype and any {typography.display-xl} headings that might appear lower on the page. Space Grotesk brings a geometric, slightly technical character that contrasts with Inter's neo-grotesk neutrality.

Both fonts support variable weight ranges (Inter: 100–900; Space Grotesk: 300–700), though the extracted viewport uses only 400 and 700 weights, suggesting a binary weight discipline.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 700 | 1.05 | -0.56px | Vertical logo lockup, oversized section openers | | {typography.display-lg} | 45px | 700 | 1.0 | -0.45px | Hero headline ("This is the science of never settling") | | {typography.title-md} | 45px | 700 | 1.0 | -0.45px | Equivalent to display-lg; alternate role name | | {typography.title-sm} | 20px | 700 | 1.1 | -0.4px | Treatment card titles ("Have better sex with Ready™") | | {typography.label-md} | 14px | 700 | 1.35 | 0.14px | Navigation links, "All Treatments" button, bold UI labels | | {typography.body-md} | 14px | 400 | 1.35 | 0.14px | Paragraph text, descriptions, standard body | | {typography.body-sm} | 11px | 400 | 1.35 | 0 | Pill category text, fine print, micro-copy | | {typography.button} | 14px | 700 | 1.25 | 0.02em | CTA button text ("GET STARTED"), uppercase-transformed | | {typography.button-sm} | 11px | 400 | 1.25 | 0 | Pill button internal text |

Principles

The typography system trusts weight over size to create hierarchy. Notice that {typography.display-lg} (hero headline) and {typography.label-md} (nav link) share the same 14px baseline in some interpretations—but in practice, the 45px display role dominates the viewport while UI elements compress into dense clusters. The 700 weight is applied liberally: headlines, buttons, nav items, and card titles all hit bold. Only body paragraphs and pill micro-text sit at 400. This creates a "shouty" editorial voice appropriate to direct-response health marketing.

Letter-spacing is consistently negative for display sizes (-0.45px at 45px, -0.56px at 56px), tightening the bold forms for impact. Body text carries slight positive tracking (+0.14px) for legibility at small sizes. Uppercase transformation appears exclusively on {typography.button} roles ("GET STARTED", "ALL TREATMENTS" implied), creating a distinct typographic register for calls-to-action.

Note on Font Substitutes

Inter maps directly to Google Fonts' Inter (same family). For the CSS variable layer, define --font-main: 'Inter', 'mainFont Fallback', sans-serif;. Space Grotesk also exists on Google Fonts as Space Grotesk. Define --font-display: 'Space Grotesk', 'secondaryFont Fallback', sans-serif;. If the proprietary fallback stacks contain metric overrides (the @font-face declarations show ascent-override and size-adjust properties for Inter Fallback), preserve those overrides when switching to Google Fonts CDN sources to maintain layout stability.

Layout

Spacing System

• Base unit: 4px (inferred from the {spacing.xs} token).
• Tokens: {spacing.xxs} (1px — hairline thickness), {spacing.xs} (4px — icon gaps, tight insets), {spacing.sm} (8px — internal element spacing), {spacing.md} (12px — compact padding), {spacing.base} (16px — standard gap), {spacing.lg} (20px — button padding, card gutters), {spacing.xl} (24px — loose padding), {spacing.2xl} (29px — observed in specific component gaps), {spacing.3xl} (32px — section-internal breaks), {spacing.4xl} (50px — major vertical rhythm), {spacing.5xl} (60px — band transitions), {spacing.section} (100px — hero-to-content break).
• Section padding (vertical): {spacing.section} — used between the hero photograph zone and the treatment card rail below.
• Card internal padding: Treatment cards use {spacing.lg} (20px) vertical padding with horizontal alignment driven by grid columns.
• Gutters: Navigation items receive 8–12px horizontal gaps; pill categories pack tighter at ~4px between edges.

Grid & Container

• Max content width: 1440px (extracted from main, section, and header container widths). Content is left-biased in the hero with the photograph occupying roughly 55% of width and text column taking the remaining 45%, pushed rightward.
• Editorial density: High. The hero packs logo + nav + headline + subtext + three treatment cards into approximately 90vh with minimal whitespace expansion.
• Grid behavior at desktop: The bottom treatment cards appear to follow a 3-column equal-width grid with {spacing.hairline} vertical dividers between them.
• Hero column split: Approximately 55/45 photograph-to-text ratio, with the headline block right-aligned within its column.

Whitespace Philosophy

This system practices constrained generosity. Vertical bands breathe at {spacing.section} (100px), but intra-component spacing is ruthlessly tight—button padding sits at {spacing.lg} (20px) total, pill heights collapse to 25px, and the nav bar compacts into 64px. The effect is magazine-layout density: information-forward, photography-dominant, with whitespace deployed as dramatic pause rather than breathing room.

Header Architecture

|-----------------------------------------------------------------------|
| [LOGO VERTICAL]   [All Tx]  Sex  Testosterone  Sleep  Weight    [GET STARTED]  Log in |
|  R                [btn]     [pill][pill]       [link] [link]      [btn]         [link]  |
|  U                                                                                      |
|  G           ← 1440px max-width container, left-aligned content →                     |
|  H                                                                                      |
|  E                                                                                      |
|  T                                                                                      |
|-----------------------------------------------------------------------|
|  Announcement Bar: full-width, {colors.primary} background, centered text              |
|-----------------------------------------------------------------------|

Hero Section

|---------------------------------------------|-------------------------------------------|
|                                             |                                           |
|   [Photograph: man in moody lighting]       |  This is the science                     |
|   Full-bleed, left-aligned subject          |  of never settling                        |
|                                             |                                           |
|                                             |  Board-certified doctors. Innovative...  |
|                                             |  Results you can count on.               |
|                                             |                                           |
|---------------------------------------------|-------------------------------------------|
|  Have better sex with Ready™      >  |  Increase your testosterone    >  |  Wake up rested  >  |
|  Best-selling 3-in-1 for ED        |  Personalized iRT                |  3-in-1 Sleep Rx    |
|-------------------------------------|----------------------------------|--------------------|

Treatment Card Rail

Three equal-width columns separated by thin vertical rules ({colors.hairline}). Each card contains: bold label line (14px/700), lighter description (11px/400), and right-aligned chevron affordance. The entire row sits on {colors.canvas} with no card background elevation—flat against the dark field.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Base canvas, hero photograph background | | 1 — Outline | 1px solid {colors.border-strong} or {colors.hairline} | Buttons ({component.button-secondary}), treatment card separators | | 2 — Inversion | Background color swap (transparent → white or {colors.surface-warm}) | {component.button-primary} (white fill), {component.pill-category} (warm grey fill) | | 3 — Active State | Color shift to {colors.primary} or darken | {component.pill-category-active} (orange fill) |

The system rejects traditional drop-shadow elevation entirely. Depth is communicated through background inversion: a secondary button starts transparent and gains a white background on hover; a pill tag shifts from warm grey to orange when selected. This is a flat-design philosophy pushed to its logical extreme—the only "shadow" observed is {extensions.shadows.sm} at extremely low opacity for potential modal/dropdown use cases.

No decorative depth (gradients, noise textures, photographic blur layers) appears in the hero. The photograph sits crisp-edged against the black canvas with no vignette or gradient overlay.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | All structural buttons, nav containers, logo frame, treatment cards, input fields | | {rounded.DEFAULT} | 0px | Default radius (inherits none) | | {rounded.sm} | 4px | Minor rounding for future tooltip or badge additions | | {rounded.md} | 8px | Medium rounding for potential card components not yet observed | | {rounded.lg} | 20px | Category pill tags, filter chips, soft UI badges | | {rounded.pill} | 20px | Fully pill-shaped tags (synonym for {rounded.lg} in this system) | | {rounded.full} | 9999px | Avatar circles, circular icon buttons (reserved for future use) |

Photography Geometry

Hero imagery is full-bleed, edge-to-edge within the left hero column, with no corner radius, no border, and no mask. The photograph appears cropped to a portrait aspect ratio (~3:4 or 4:5) with the subject positioned left-of-center, leaving negative space on the right for text overlay. No avatar imagery is visible in this viewport.

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

Buttons & CTAs

{component.announcement-bar} — Full-width promotional strip at the viewport top. Background {colors.primary} (orange), text {colors.on-primary} (white), using {typography.body-sm} at 11px. Contains underlined link text ("Try 2 months of Ready™, get 1 free"). Height locked to approximately 32px with centered content. No border, no radius.

{component.button-primary} — The principal call-to-action ("GET STARTED"). Solid white background ({colors.ink}), black text ({colors.body}), 700 weight {typography.button} in uppercase. Sharp corners ({rounded.none}), 1px solid {colors.border-strong} (white) border creating a defined rectangle. Padding {spacing.lg} horizontally (20px), ~40px height. See {component.button-primary-hover} for interaction state.

{component.button-primary-hover} — Hover/active state for the primary CTA. Background shifts to {colors.muted} (light grey), maintaining black text and sharp corners. Implement as a CSS :hover or JS state class.

{component.button-secondary} — Outlined action button ("All Treatments", "Menu"). Transparent background with 1px solid white ({colors.border-strong}) border, white text ({colors.ink}), 700 weight {typography.button}. Identical dimensions to primary button but inverted fill. See {component.button-secondary-hover} for interaction.

{component.button-secondary-hover} — Hover state for secondary buttons. Gains a subtle {colors.ink} background at 8% opacity (rgba(255, 255, 255, 0.08)). Border and text remain white.

Navigation

{component.top-nav} — The persistent header bar spanning 64px height. Background {colors.canvas} (black), containing the vertical logo, navigation links, utility actions, and CTA button arranged horizontally. No border-bottom; separation from content comes from the photograph edge.

{component.logo-vertical} — The stacked "RUGIET" wordmark running vertically down the left side of the hero. Uses {typography.display-xl} (56px/700, Space Grotesk), white on transparent. Each letter is individually sized and spaced; the overall column width is approximately 80–100px. This is a signature brand moment—never abbreviate or rotate to horizontal without design review.

{component.nav-link} — Standard navigation text link ("Sex", "Sleep", "Weight"). Transparent background, white text ({colors.ink}), {typography.label-md} (14px/700). Padding {spacing.sm} vertical, {spacing.md} horizontal. No underline in default state.

{component.nav-link-active} — Currently-selected navigation item. Visual treatment identical to {component.nav-link} in the extracted data; may gain underline or color shift in live interaction.

Category Pills & Tags

{component.pill-category} — Inactive/unselected product category tag (observed: "Testosterone", "Sleep", "Weight"). Background {colors.surface-warm} (warm grey #d5d3d1), black text ({colors.body}), {typography.button-sm} (11px/400). Fully rounded at {rounded.pill} (20px), fixed height 25px, horizontal padding {spacing.base} (10px). 1px border matching background color. These sit inline beside the active pill in the nav area.

{component.pill-category-active} — Selected/active category tag (observed: "Sex"). Background {colors.primary} (orange #ffa200), black text ({colors.body}), same dimensions and radius as inactive variant. The orange fill makes it visually pop against the dark nav bar and adjacent grey pills. See {component.pill-category-hover} for mouse-over behavior (extracted CSS shows hover shifts to white background with black text).

{component.pill-category-hover} — Hover state for inactive pills. Extracted CSS indicates hover:bg-text! hover:border-text—meaning the background inverts to {colors.ink} (white) and text becomes readable (black).

Hero & Content Sections

{component.hero-band} — The full-viewport hero section. Background {colors.canvas} (black), containing the split-column layout with photograph left and text right. Vertical padding {spacing.section} (100px) top and bottom (or equivalent). Typography defaults to {typography.display-lg} for the headline slot.

{component.hero-headline} — The H1-level headline ("This is the science of never settling"). Transparent background, white text ({colors.ink}), {typography.title-md} (45px/700, -0.45px tracking). No padding inherited; positioning handled by parent flex/grid context.

{component.hero-subtext} — Supporting paragraph beneath the headline ("Board-certified doctors. Innovative prescription treatments. Results you can count on."). Transparent background, {colors.muted} (light grey #e7e5e4) text, {typography.body-md} (14px/400). Top margin/padding of {spacing.md} (12px) separates it from the headline.

Cards & List Items

{component.treatment-card} — Individual item in the bottom three-column rail (e.g., "Have better sex with Ready™"). Transparent background (inherits canvas black), white text for title. Uses {typography.title-sm} (20px/700) for the bold label line. Vertical padding {spacing.lg} (20px). Separated from siblings by thin vertical rule ({colors.hairline}). Contains child components {component.treatment-card-label}, {component.treatment-card-description}, and {component.chevron-link}.

{component.treatment-card-label} — The bold first line of each treatment card ("Have better sex with Ready™"). White text, {typography.label-md} (14px/700). Small bottom spacing before description.

{component.treatment-card-description} — The lighter second line ("Best-selling 3-in-1 for ED"). Uses {colors.muted} (light grey) at {typography.body-sm} (11px/400).

{component.chevron-link} — Right-pointing arrow affordance (>) indicating the card is clickable/navigable. White ({colors.ink}), aligned to the right edge of the card column. Likely implemented as an SVG icon or CSS pseudo-element.

{component.footer-divider} — Horizontal rule separating content sections. Color {colors.hairline} (20% white), 1px height, spanning full container width.

Do's and Don'ts

Do

• Do maintain absolute black ({colors.canvas}) as the hero and body background—never tint toward dark grey or add texture overlays.
• Do apply 700 weight to all headlines, button text, navigation labels, and card titles per the {typography.display-lg} and {typography.label-md} specs.
• Do keep primary CTA buttons ({component.button-primary}) as solid white rectangles with sharp corners ({rounded.none})—this is the system's most recognizable UI shape.
• Do reserve {colors.primary} (orange) exclusively for the announcement bar and active category pill states—avoid using it for body text, icons, or decorative lines.
• Do use {rounded.pill} (20px) for all category/filter tags and {rounded.none} (0px) for all structural buttons—maintain this geometric duality throughout new components.
• Do set letter-spacing to negative values for display text (-0.45px at 45px) and positive for body text (+0.14px at 14px) to match the optical tuning.
• Do uppercase the {typography.button} role text ("GET STARTED") while keeping navigation and body text in sentence case.
• Do place the vertical logo ({component.logo-vertical}) as the leftmost element in the hero, allowing it to span the full height of the photograph zone.
• Do use {colors.muted} (light grey #e7e5e4) for supporting description text—never drop below this brightness on the black canvas.
• Do implement hover states as background-color inversions (transparent ↔ white/grey/orange) rather than shadow or scale transforms.

Don't

• Don't introduce border radius to {component.button-primary} or {component.button-secondary}—their sharp corners are intentional and brand-defining.
• Don't substitute {colors.muted-warm} for {colors.muted} in hero subtext—the cooler grey provides better legibility against pure black.
• Don't expand the type scale beyond the documented roles; if you need something between 45px and 20px, use {typography.title-sm} (20px) with increased letter-spacing rather than inventing a 28px token.
• Don't apply drop shadows to any component—the system is flat; use color inversion or border strokes for elevation.
• Don't use {colors.primary} as a text color on light backgrounds—it fails contrast checks; always pair it with {colors.on-primary} (white) or use {colors.body} (black) on the orange field.
• Don't convert the vertical logo to horizontal without explicit direction—its stacked orientation is a key brand identifier in the hero composition.
• Don't add gradient backgrounds to the hero photograph or overlay vignettes—the image sits flush against {colors.canvas} with no transition treatment.
• Don't reduce button text weight below 700—all actionable elements in this system are bold by convention.
• Don't increase {spacing.section} beyond 100px for standard band breaks; the system's density is deliberate.
• Don't mix Space Grotesk (secondaryFont) into body text or UI labels—reserve it strictly for {typography.display-xl} and the vertical logo lockup.

Motion & Animation

Transition Tokens

--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-color: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transform-enter: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.125s, translate 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.125s, scale 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.125s;
--stagger-1: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, translate 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, scale 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
--stagger-2: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.075s, translate 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.075s, scale 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
--stagger-3: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, translate 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, scale 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
--stagger-4: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.025s, translate 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.025s, scale 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.025s;

Keyframe Animations

• swiper-preloader-spin — Continuous rotation for image carousel loading indicators (360deg transform loop).
• progress — Linear width growth for progress bars or step indicators.
• progress-end — Terminal state animation completing a progress sequence.
• spin — Generic rotation utility for loading spinners.
• pulse — Opacity pulse for attention-drawing elements (likely 0→1→0 opacity cycle).

Interaction Patterns

• Color-inversion hovers: All buttons and pills swap background fill on hover (transparent→white, grey→white, or grey→orange for the active pill). No scale, lift, or shadow changes observed.
• Staggered entrance animations: The --stagger-* transition tokens suggest list items (treatment cards, pill rows) animate in sequence with cascading delays (125ms → 100ms → 75ms → 50ms → 25ms).
• Carousel behavior: The presence of swiper-preloader-spin indicates an image slider/carousel component exists (likely for testimonial or product imagery below the fold).
• Smooth scrolling: Section navigation probably uses smooth scroll behavior given the single-page landing architecture.
• Focus rings: Inputs and buttons likely gain a {colors.border-light} or {colors.primary} outline on keyboard focus (not visible in static screenshot).

Imagery Style

• Photography genre: Cinematic lifestyle portraiture with male subjects, shot in warm low-key lighting (practical lamp sources, shallow depth of field).
• Color grading: Warm-toned with lifted blacks (crushed but not clipped), skin tones leaning amber/olive, deep shadow areas holding subtle blue-green separation.
• Composition: Subject positioned left-third with gaze directed toward camera or slightly off-axis; hands often included in frame suggesting physicality/vitality.
• Treatment: Full-bleed placement with no border, mask, corner radius, or gradient overlay—photographs sit raw against {colors.canvas}.
• Role in layout: Images dominate the hero (55%+ of viewport width); text is secondary and overlaid in the negative space.
• Subject matter: Masculine health, vitality, confidence—subjects appear fit but not hyper-muscular, styled casually (t-shirt, relaxed posture).
• Future imagery needs: Product shots (sublingual tablets/rugs), doctor portraits (lab coat/casual professional), before-after lifestyle comparisons, texture close-ups (fabric, skin detail).

Icon System

• Library: Custom SVG (no external icon library detected in the extracted CSS class names or font references).
• Specific icons observed:
  • Chevron-right arrow (>) — Treatment card navigation affordance
  • Menu hamburger (implied by "Menu" button class name header-break:hidden)
  • Possible close/X icon for mobile nav (not visible in desktop screenshot)
• Treatment: Stroke-based vector paths (implied by SVG architecture), rendered in currentColor.
• Size: Chevron appears at approximately 16–18px height, aligned with {typography.body-sm} (11px) or {typography.body-md} (14px) text baselines.
• Alignment: Icons sit inline with text, vertically centered via flexbox (inline-flex items-center pattern observed in pill classes).

Recommended Frontend Stack

- Framework:      Next.js (App Router) — detected via __next_s scripts and _next/static asset paths
- Styling:        Tailwind CSS v3+ — confirmed by utility class patterns (rounded-[20px], px-[10px], h-[25px], theme-main)
- Fonts:          Self-hosted WOFF2 (Inter variable + Space Grotesk variable) with metric-adjusted Arial fallbacks
- Animation:      CSS transitions (cubic-bezier(0.4, 0, 0.2, 1)) + potential Swiper.js for carousels
- Icons:          Custom inline SVG (no library dependency)
- Component lib:  Custom headless components (no Radix/shadcn detected; raw HTML + Tailwind classes)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Vertical logo collapses or hides; nav becomes hamburger menu (header-break:hidden class); hero stacks photo above text; treatment cards become scrollable horizontal row or vertical stack | | Tablet | 640–1024px | Two-column hero (photo shrinks); nav links may truncate to icons; pill row wraps to two lines | | Desktop | 1024–1440px | Full layout as shown: 55/45 hero split, 3-column treatment rail, horizontal nav with all links visible | | Wide | > 1440px | Container maxes at 1440px with centered margin; content does not stretch further |

Touch Targets

• {component.button-primary}: ~44px height × 88px+ width (passes WCAG AAA 44×44 minimum)
• {component.button-secondary}: Same dimensions as primary
• {component.pill-category}: 25px height × variable width (falls below 44px recommendation—consider increasing to 36–40px height for mobile)
• {component.nav-link}: Text-only, inherits line-height ~20px height (needs tap-area expansion via padding for mobile)
• {component.treatment-card}: Full-width touch target in mobile stack; minimum 48px recommended height

Collapsing Strategy

• Navigation: The header-break:hidden! class on the Menu button suggests a breakpoint where the full nav collapses to a hamburger trigger, revealing a slide-out drawer or dropdown menu.
• Logo: Vertical "RUGIET" wordmark likely converts to a horizontal lockup or abbreviated "R" mark on mobile to reclaim horizontal space.
• Hero columns: Photograph and text column switch from side-by-side (flex-row) to stacked (flex-col-reverse or flex-col) with the photograph potentially reduced to 60–70vh height.
• Treatment cards: Three-column rail converts to a horizontal scroll container (overflow-x: auto) or a vertically-stacked accordion list with chevrons rotating on expand.
• Pill categories: Wrap to multiple lines or move into a filter drawer below the nav bar on narrow screens.

Image Behavior

• Hero photograph: Maintains aspect ratio (~3:4 portrait) while scaling width to fill container; on mobile, likely crops to a 16:9 or 4:5 landscape crop focusing on subject's face/upper body.
• Product images (future): Would adopt similar full-bleed treatment within card containers; on mobile, center-crop with object-fit: cover.
• Avatar images (future): Circle-cropped at 40–48px diameter for user profile indicators.

Iteration Guide

1. Build a Next.js landing page using App Router with Tailwind CSS for styling. Reference this DESIGN.md for all token values via the YAML frontmatter paths (e.g., {colors.canvas}, {typography.display-lg}, {rounded.pill}).
2. Establish CSS custom properties for the font families: --font-main: 'Inter', 'mainFont Fallback', sans-serif; and --font-display: 'Space Grotesk', 'secondaryFont Fallback', sans-serif;. Import from Google Fonts or use the self-hosted WOFF2 files from /_next/static/media/.
3. Implement the dual-shape language rigorously: every button gets {rounded.none} (0px), every category tag gets {rounded.pill} (20px). Do not blur this distinction—geometric contrast is a core brand signal.
4. Reserve {colors.primary} (#ffa200) for exactly two surface types: the {component.announcement-bar} and {component.pill-category-active}. If you need an additional accent, introduce a new token rather than overloading primary.
5. Create state variants as separate component entries (e.g., button-primary, button-primary-hover, button-primary-disabled) following the flat-top-level-key pattern in the frontmatter. Never nest states inside a single component object.
6. Apply the staggered entrance animation pattern for list items using the --stagger-* transition tokens with incrementally decreasing delays (125ms → 100ms → 75ms → 50ms → 25ms) to create the cascade effect visible in the extracted CSS.
7. Maintain the 1440px max-width container constraint. Content wider than this should be center-padded, not stretched.
8. When adding new sections below the hero (testimonials, how-it-works, FAQ), decide whether they belong to the editorial dialect (dark canvas, white text, photo-heavy) or transactional dialect (potentially light surfaces for form inputs, checkout flows). The extracted viewport shows only the editorial dialect.
9. Run npx @google/design.md lint DESIGN.md after any edits to catch broken token references, orphaned components, or contrast-ratio violations before committing.
10. For font substitution in prototyping environments: use Inter from Google Fonts (weights 400 and 700) and Space Grotesk (weights 400 and 700). Define fallback metric overrides matching the @font-face declarations: Inter Fallback uses ascent-override: 90.44%; descent-override: 22.52%; size-adjust: 107.12%.

Font Setup for Implementation:

/* In globals.css or tailwind.config.js */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Grotesk:wght@700&display=swap');

:root {
  --font-main: 'Inter', 'mainFont Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'secondaryFont Fallback', ui-sans-serif, system-ui, sans-serif;
}

If using the production self-hosted font files, map the src: URLs in your @font-face declarations to /_next/static/media/*.woff2 paths and preserve the unicode-range splitting for optimal loading performance.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover color values for {component.button-secondary-hover}, {component.pill-category-hover}, and nav link hovers are inferred from partial CSS extracts (hover:bg-text! fragments) but not visually verified.
• Loading/skeleton states: No skeleton loaders, shimmer effects, or pending-state placeholders were extractable from the static viewport. Recommend implementing a pulse animation (keyframe: pulse detected) for async content zones.
• Form validation states: No input fields, error messages, success toasts, or validation styling appear in the screenshot. Design these using semantic color tokens (error, success) against {colors.canvas} with red/green accents.
• Mobile navigation drawer: The hamburger menu mechanism (class="button header-break:hidden!") implies a off-canvas or dropdown nav, but its internal structure (links, logo placement, close button) is not visible in the desktop viewport.
• Below-fold sections: Testimonials, doctor profiles, how-it-works steps, FAQ accordion, pricing table, and footer are not captured in this extraction. Their surface treatments (whether they continue the dark canvas or switch to light) remain undetermined.
• Authenticated/dashboard surfaces: Post-login views (prescription status, consultation scheduling, account settings) are entirely absent. These may introduce a lighter surface palette or different density requirements.
• Sub-brand palettes: Products like "Ready™" (ED), iRT (testosterone), and "Recharge" (sleep) may eventually require product-specific accent colors beyond the global {colors.primary}. No such differentiation is visible here.
• Exact pixel values for warm greys: {colors.surface-warm} (#d5d3d1) and {colors.surface-light} (#e7e5e4) were sampled from CSS rgb() values; minor perceptual drift may occur depending on monitor calibration. Verify against production screenshots.
• Misleading CSS variables: The class theme-main and theme-mid-grey observed on pill buttons suggest a theme-token system exists internally, but the actual resolved values (orange vs. grey) must be mapped carefully to avoid swapping brand and neutral colors.