hims_app___style_reference:
  info: "> spa brochure on vellum paper"

  theme: "light"

  info: "Hims App operates as a calm, monochrome wellness interface where one violet accent does all the emotional work against an otherwise achromatic canvas. The system is built for breath: oversized type in a custom geometric sans (sofia), generously rounded surfaces (30–52px radii), and long-spread soft shadows that make cards appear to float rather than sit. The hero is photographic and intimate — a hand holding a phone, product color bleeding into real skin — but the surrounding UI stays austere: white canvas, black type, hairline borders. Violet #5d48db is reserved almost exclusively for headlines and occasional borders, never for filled buttons. Components feel like printed editorial spreads: large negative space, no decorative gradients in chrome, and a single type family carrying every weight of meaning."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Hims Violet | `#5d48db` | `--color-hims-violet` | Headline text, display borders, brand accent — the single chromatic voice in an otherwise monochrome system |"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Primary text, hairline borders, icon fills, nav dividers — the structural ink of the interface |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav background, image backgrounds — the base surface at every elevation level |"
    info: "| Vellum Gray | `#f0f0f0` | `--color-vellum-gray` | List dividers, subtle row separators, muted list text — the quietest structural neutral |"
    info: "| Graphite | `#2e2e2e` | `--color-graphite` | Secondary heading text, heading borders — slightly softer than pure black for non-display headings |"
    info: "| Linen | `#e0e0e0` | `--color-linen` | Hairline borders, list separators, thin structural strokes |"
    info: "| Stone | `#8f8f8f` | `--color-stone` | Muted body copy, subdued links, secondary metadata text |"
    info: "| Soft Mint | `#3fd194` | `--color-soft-mint` | Decorative product accent — appears inside app screenshot tiles (e.g. Acne Program card), not a UI token |"
    info: "| Iris | `#9685ff` | `--color-iris` | Decorative product accent — appears in product gradient washes inside phone mockup content |"

  tokens___typography:

    sofia___sofia_is_the_sole_typeface__its_geometric__low_contrast_letterforms_carry_everything_from_14px_nav_labels_to_280px_display_heroes__weight_400_is_the_default_at_all_sizes__weight_500_is_reserved_for_emphasis__the_extreme_size_range_14_280px_with_consistent_tight_tracking__0_012em_to__0_057em_creates_a_system_that_scales_smoothly_from_caption_to_billboard__signature_choice__the_ultra_tight_tracking_even_at_body_sizes__0_012em_at_14px_gives_body_text_a_compressed__editorial_density_unusual_for_a_consumer_health_app_____font_sofia:
      - "**Substitute:** Inter, Manrope, or DM Sans"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14, 16, 18, 20, 24, 32, 35, 37, 39, 44, 81, 84, 85, 141, 220, 280"
      - "**Line height:** 1.00, 1.04, 1.10, 1.15, 1.18, 1.20, 1.25, 1.33, 1.43, 1.67, 2.44, 2.50, 2.78"
      - "**Letter spacing:** -0.057em at 280px, -0.047em at 220px, -0.017em at 84px, -0.012em at 14–20px"
      - "**Role:** Sofia is the sole typeface. Its geometric, low-contrast letterforms carry everything from 14px nav labels to 280px display heroes. Weight 400 is the default at all sizes; weight 500 is reserved for emphasis. The extreme size range (14→280px) with consistent tight tracking (-0.012em to -0.057em) creates a system that scales smoothly from caption to billboard. Signature choice: the ultra-tight tracking even at body sizes (-0.012em at 14px) gives body text a compressed, editorial density unusual for a consumer health app."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.67 | -0.012px | `--text-caption` |"
      info: "| body-sm | 16px | 1.43 | -0.012px | `--text-body-sm` |"
      info: "| body | 18px | 1.33 | -0.012px | `--text-body` |"
      info: "| subheading | 20px | 1.25 | -0.012px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.2 | -0.017px | `--text-heading-sm` |"
      info: "| heading | 44px | 1.15 | -0.017px | `--text-heading` |"
      info: "| heading-lg | 84px | 1.1 | -0.017px | `--text-heading-lg` |"
      info: "| display | 141px | 1.04 | -0.047px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 156 | 156px | `--spacing-156` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 52px |"
      info: "| cards | 30px |"
      info: "| buttons | 30px |"
      info: "| app-icon | 45px |"
      info: "| feature-cards | 45px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.12) 0px 27px 104px 0px` | `--shadow-xl` |"
      info: "| xl-2 | `rgba(0, 0, 0, 0.11) 0px 8px 127px 0px` | `--shadow-xl-2` |"
      info: "| xl-3 | `rgba(0, 0, 0, 0.25) 0px 9px 46px 0px` | `--shadow-xl-3` |"
      info: "| xl-4 | `rgba(0, 0, 0, 0.06) 0px 8px 30px 0px` | `--shadow-xl-4` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 90px"
      - "**Card padding:** 32px"
      - "**Element gap:** 20px"

  components:

    display_headline:
      role: "Hero-level typographic statement"

      info: "Sofia weight 400 at 84–141px, line-height 1.04–1.10, letter-spacing -0.017em to -0.047em. Color: Hims Violet #5d48db for primary displays, Carbon Black #000000 for section dividers. Centered alignment. No accompanying subtitle at this level — the type stands alone against white space."

    section_heading:
      role: "Mid-page section anchors"

      info: "Sofia weight 400 at 32–44px, line-height 1.15–1.20, letter-spacing -0.017em. Color: Carbon Black #000000 or Graphite #2e2e2e. Centered or left-aligned depending on layout. Often paired with a rounded-square icon tile above (45px radius, white card, soft shadow, single-stroke icon)."

    icon_tile:
      role: "Decorative section marker"

      info: "White card at 45px border-radius, approximately 120×120px, containing a single outlined/filled icon in Carbon Black. Shadow: rgba(0,0,0,0.12) 0px 27px 104px. Floats above the heading it labels."

    phone_mockup_frame:
      role: "Hero visual anchor"

      info: "iPhone device frame held by a human hand (photographic). Device shadow: rgba(0,0,0,0.25) 0px 9px 46px. Sits centered on a soft purple/lavender radial glow gradient (violet bleed from the product imagery into white canvas). The phone screen content is the product — not a static screenshot but styled with internal gradient cards."

    top_nav_bar:
      role: "Primary site navigation"

      info: "Pill-shaped container at 52px border-radius, white fill, shadow rgba(0,0,0,0.06) 0px 8px 30px. Left: Hims & Hers wordmark in sofia. Right: Apple App Store download badge (pill, white background, 1px black border at 30px radius, 16px vertical padding, 22px horizontal padding). Padding: 16px top/bottom, 22px sides."

    app_store_download_button:
      role: "Primary conversion action"

      info: "Pill shape at 30px border-radius, white fill, 1px Carbon Black border. Apple logo + 'Download now' text in sofia 16px weight 400. No filled CTA variant — the outlined pill IS the action style for this system."

    program_card_in_app:
      role: "Product category card inside phone mockup"

      info: "Rounded card with product-tinted gradient background (e.g. iris-to-lavender, or mint-to-teal). Small badge label ('ED Program', 'Acne Program') at top-right in white text on a translucent dark pill. Headline text overlaid in white. Represents the product's own UI, not the marketing site's UI."

    feature_row:
      role: "Content section with icon and heading"

      vertical_stack: "Icon Tile (120×120, 45px radius) → 40px gap → Section Heading (32–44px) → 32px gap → body text. Centered or left-aligned. All spacing uses the 4px base unit scaled up (32, 40, 64, 90px)."

    footer:
      role: "Site footer with legal and nav"

      info: "White background, 100px top padding, 64px horizontal padding. Carbon Black text at 14–16px. Hairline borders at 1px in Vellum Gray #f0f0f0 separate columns."

  do_s_and_don_ts:

    do:
      - "Use Hims Violet #5d48db only for display headlines and occasional 1px borders — never for filled buttons, backgrounds, or body text"
      - "Set card border-radius to 30px for standard cards, 45px for feature/hero cards, and 52px for the nav pill"
      - "Apply shadow rgba(0,0,0,0.12) 0px 27px 104px to standard cards — the long spread is essential to the floating effect"
      - "Set page background to #ffffff and let cards share the same color; differentiation comes from shadow and radius, not fill"
      - "Use sofia at weight 400 for all body and display text; reserve weight 500 sparingly for emphasis"
      - "Center headlines at 84px+ and apply letter-spacing between -0.017em and -0.047em — tight tracking is signature"
      - "Maintain 90px vertical gaps between major sections and 32px internal card padding"

    don_t:
      - "Do not introduce a second accent color into the marketing UI — violet #5d48db is the only chromatic voice"
      - "Do not use filled colored buttons — the action style is the white pill with black border at 30px radius"
      - "Do not apply tight shadows (0 2px 4px) — every shadow in this system spreads 27px+ vertically"
      - "Do not use black at less than 2e2e2 for heading text — the slightly softer graphite prevents harshness on white"
      - "Do not add decorative gradients to UI surfaces — gradients are reserved for product imagery inside phone mockups"
      - "Do not set card radii below 30px or above 52px — the system has exactly three radius tiers"
      - "Do not use body type above 20px without shifting to heading role and applying -0.017em tracking"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Base background for all sections |"
    info: "| 1 | Card Surface | `#ffffff` | Elevated cards, app icon tiles, program cards — same color as canvas, distinguished by shadow and radius only |"
    info: "| 2 | Nav Surface | `#ffffff` | Top navigation bar, pill-shaped container at 52px radius with soft shadow |"

  elevation:

    - "**Card (standard):** `rgba(0, 0, 0, 0.12) 0px 27px 104px 0px`"
    - "**Card (large/feature):** `rgba(0, 0, 0, 0.11) 0px 8px 127px 0px`"
    - "**Phone mockup:** `rgba(0, 0, 0, 0.25) 0px 9px 46px 0px`"
    - "**Nav bar:** `rgba(0, 0, 0, 0.06) 0px 8px 30px 0px`"

  imagery:

    imagery_is_photographic_and_intimate: "a human hand (appears to be a woman's hand with neutral-toned nails) holding an iPhone in soft, diffused light. The device is the hero — there is no lifestyle context, no room, no environment. The phone screen displays the actual product UI, which uses its own gradient-washed cards (mint-to-teal, iris-to-lavender) as secondary color language. Behind the device, a soft radial glow in pale violet bleeds into the white canvas, connecting the product to the brand accent. No illustrations, no 3D renders, no abstract graphics. Treatment: full-bleed centered, no rounded masking on the device itself, and the lavender glow is the only atmospheric element."

  layout:

    info: "Page model is centered and max-width contained (1200px). The hero is a full-width white canvas with a centered headline pair ('Total care. / Totally different.') stacked vertically at 84–141px, with the phone mockup floating below. Sections flow vertically with 90px gaps, no alternating dark/light bands — the entire page stays on white. Content is arranged in centered stacks: headline → icon tile → body text. No asymmetric compositions, no side-by-side text+image pairs in the visible flow. Navigation is a pill-shaped floating bar at the top. The overall rhythm is editorial: each section gets the full viewport's attention before the next begins."

  agent_prompt_guide:

  quick_color_reference:

    - "Primary text: #000000 (Carbon Black)"
    - "Background: #ffffff (Paper White)"
    - "Muted text: #8f8f8f (Stone)"
    - "Hairline border: #e0e0e0 (Linen) or #f0f0f0 (Vellum Gray)"
    - "Headline accent: #5d48db (Hims Violet)"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    1__display_headline_section:
    info: "White #ffffff canvas. Centered headline 'Total care. Totally different.' in sofia weight 400, 141px, line-height 1.04, letter-spacing -0.047em, color #5d48db. No subtitle. 90px gap below before next section."

    2__icon_tile___section_heading:
    white_canvas__centered_icon_tile: "120×120px, 45px border-radius, white fill, shadow rgba(0,0,0,0.12) 0px 27px 104px. Contains a single black outlined icon centered. 40px gap below, then heading 'Programs' in sofia weight 400, 84px, line-height 1.10, letter-spacing -0.017em, color #000000."

    3__feature_card_grid:
    info: "White canvas. 3-column grid of cards, each 30px border-radius, 32px padding, white fill, shadow rgba(0,0,0,0.11) 0px 8px 127px. Card heading in sofia 32px weight 400 #000000. Card body in sofia 18px weight 400 #8f8f8f. 20px gap between cards horizontally, 32px vertically."

    4__outlined_pill_download_button:
    info: "White fill, 1px #000000 border, 30px border-radius, padding 16px vertical × 22px horizontal. Apple logo icon (16px, black) + text 'Download now' in sofia 16px weight 400 #000000. No fill variant exists."

    5__floating_nav_bar:
    info: "Pill-shaped container, 52px border-radius, white fill, shadow rgba(0,0,0,0.06) 0px 8px 30px. Padding 16px top/bottom. Left: 'hims & hers' wordmark in sofia. Right: outlined download pill (see component 4). Fixed position at top of page."

  similar_brands:

    - "**Calm** — Same oversized type-in-near-empty-space approach, soft long-spread shadows, and near-monochrome palette with a single muted accent"
    - "**Headspace** — Shared spacious, breathy layout with centered headlines, rounded-everything components, and warm-but-restrained visual tone"
    - "**Stripe** — Same editorial precision: custom geometric sans, tight letter-spacing at display sizes, and a violet/purple accent used sparingly for emphasis"
    - "**Whoop** — Similar health/wellness positioning with minimal UI, soft shadows, and product-foreground photography on pure white"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-hims-violet: #5d48db;
          --color-carbon-black: #000000;
          --color-paper-white: #ffffff;
          --color-vellum-gray: #f0f0f0;
          --color-graphite: #2e2e2e;
          --color-linen: #e0e0e0;
          --color-stone: #8f8f8f;
          --color-soft-mint: #3fd194;
          --color-iris: #9685ff;
        
          /* Typography — Font Families */
          --font-sofia: 'sofia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.67;
          --tracking-caption: -0.012px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.012px;
          --text-body: 18px;
          --leading-body: 1.33;
          --tracking-body: -0.012px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.012px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.017px;
          --text-heading: 44px;
          --leading-heading: 1.15;
          --tracking-heading: -0.017px;
          --text-heading-lg: 84px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.017px;
          --text-display: 141px;
          --leading-display: 1.04;
          --tracking-display: -0.047px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-100: 100px;
          --spacing-156: 156px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 90px;
          --card-padding: 32px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-3xl: 30px;
          --radius-3xl-2: 45px;
          --radius-full: 52px;
        
          /* Named Radii */
          --radius-nav: 52px;
          --radius-cards: 30px;
          --radius-buttons: 30px;
          --radius-app-icon: 45px;
          --radius-feature-cards: 45px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.12) 0px 27px 104px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.11) 0px 8px 127px 0px;
          --shadow-xl-3: rgba(0, 0, 0, 0.25) 0px 9px 46px 0px;
          --shadow-xl-4: rgba(0, 0, 0, 0.06) 0px 8px 30px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #ffffff;
          --surface-nav-surface: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-hims-violet: #5d48db;
          --color-carbon-black: #000000;
          --color-paper-white: #ffffff;
          --color-vellum-gray: #f0f0f0;
          --color-graphite: #2e2e2e;
          --color-linen: #e0e0e0;
          --color-stone: #8f8f8f;
          --color-soft-mint: #3fd194;
          --color-iris: #9685ff;
        
          /* Typography */
          --font-sofia: 'sofia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.67;
          --tracking-caption: -0.012px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.012px;
          --text-body: 18px;
          --leading-body: 1.33;
          --tracking-body: -0.012px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.012px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.017px;
          --text-heading: 44px;
          --leading-heading: 1.15;
          --tracking-heading: -0.017px;
          --text-heading-lg: 84px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.017px;
          --text-display: 141px;
          --leading-display: 1.04;
          --tracking-display: -0.047px;
        
          /* Spacing */
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-100: 100px;
          --spacing-156: 156px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-3xl: 30px;
          --radius-3xl-2: 45px;
          --radius-full: 52px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.12) 0px 27px 104px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.11) 0px 8px 127px 0px;
          --shadow-xl-3: rgba(0, 0, 0, 0.25) 0px 9px 46px 0px;
          --shadow-xl-4: rgba(0, 0, 0, 0.06) 0px 8px 30px 0px;
        }