Heidi

---
version: alpha
name: Heidi
description: Heidi. By your side.
colors:
  primary: "#f9f4f1"
  secondary: "#331316"
  tertiary: "#fbf582"
  neutral: "#121212"
  border: "#374151"
  brand-willow: "#8c7c44"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: exposure
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.05em
  headline-md:
    fontFamily: exposure
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.031em
  headline-sm:
    fontFamily: exposure
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.01
    letterSpacing: -0.042em
  headline-xs:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.03em
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 36px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#28030f"
    rounded: "{rounded.md}"
    padding: 10px 20px
    height: 44px
  button-secondary:
    backgroundColor: "#28030f"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Heidi: Dark-Mode Healthcare with One Soft Yellow CTA

## Overview

Heidi's interface speaks to clinicians and enterprise buyers: serious, calm, and confidence-building. The default is dark mode with warm off-white text and a single yellow accent for action. Spacing is generous and sections are compactly labeled, keeping complex safety and compliance content readable. When a case isn't tokened, bias toward high contrast, minimal decoration, and the yellow accent as the action signal.

## Colors

- **primary (#f9f4f1):** Off-white body text and default iconography on dark backgrounds.
- **secondary (#331316):** Deep accent for chips, counters, and supportive fills; pairs with primary text.
- **tertiary (#fbf582):** The action color—primary CTAs, announcement bars, and highlights.
- **neutral (#121212):** Base surface across hero, sections, and cards.
- **border (#374151):** Subtle separators for cards, tables, and section dividers.
- **brand-willow (#8c7c44):** Brand accent used sparingly in illustrations or secondary highlights.
- **surface (#121212):** Synced to neutral; use for any page-level background.
- **on-surface (#f9f4f1):** Text and icon color when placed on surface/neutral.

## Typography

- Exposure (custom). Used for display headlines: headline-lg 72px/1 with -0.05em, headline-md 52px/1.19 with -0.031em, headline-sm 38px/1.01 with -0.042em. This font is self-hosted; agents cannot fetch it directly. Suitable Google substitutes: Fraunces (soft, high-contrast serif), Playfair Display (classic display serif), or Newsreader (editorial serif). Match letter-spacing from tokens.
- Inter (Google). Body and small headlines: headline-xs 28px/1.21 and body-md 20px/1.4 with -0.03em. Load from Google Fonts for all UI copy, nav, menus, and legal.
- Emphasis: Use italics within headlines sparingly (as in "relief") and avoid bolding Exposure; weight 400 is the norm. Keep body copy at 20px for comfortable reading on dark surfaces.

## Layout

Spacing runs on an 8-based scale with larger jumps for section rhythm: 8, 16, 36, 48, 80. Use xl (80px) above and below major sections, lg (48px) for feature groups, and md (36px) for card grids and testimonials. Inside cards and banners, use sm (16px) padding; small controls can use xs (8px) gaps. Favor a simple grid (two or three columns on desktop) with wide gutters to preserve legibility on dark backgrounds.

## Elevation & Depth

Depth is mostly tonal. Large shadows are disabled; only the subtle sm shadow is available and should be reserved for floating elements like menus. Distinguish layers with the neutral surface (#121212), on-surface text (#f9f4f1), and hairline separators in border (#374151). Use contrast and whitespace to create hierarchy before reaching for shadow.

## Shapes

Corners are softly squared: sm 8px for cards and logo tiles; md 12px for buttons and prominent pills. Keep shapes consistent within a component family—do not mix radii on one element. Square edges (0px) are reserved for text links and full-bleed banners.

## Components

Buttons
- Primary: background #fbf582, text #28030f, 12px radius, 44px height, 10px 20px padding. Use for main CTAs ("Get Heidi free").
- Secondary: background #28030f, text #f9f4f1, same dimensions as primary. Pairs with primary in dual-CTA groups.
- Link: text #f9f4f1, no radius; ideal for tertiary actions.

Card
- Background #121212, text #f9f4f1, 8px radius, 16px padding. Add a #374151 top or full border when grouping.

Distinctive components on this page

### Announcement Bar
- Full-width strip at the very top highlighting NHS procurement. Use background #fbf582 and on-surface text #121212 or #28030f; 16px vertical padding and body-md text.

### Hero Video with Dual CTAs
- Dimmed video over the neutral surface. Headline uses headline-lg (72px). Place primary and secondary buttons side-by-side with 16px gap.

### Patient-Visit Counter
- A labeled stat: "Heidi has enabled care for [number] patient visits this week." Render the number inside a dark pill (12px radius) using #28030f with #f9f4f1 text.

### Partner Logo Row
- Row of logo cards with 8px radius and 16px padding on each tile; use #374151 borders. Two to four logos per row on mobile.

### Feature Trio (Scribe, Remote, Evidence)
- Three equal columns; each item can host a short looping video. Headings use headline-sm (38px); body uses body-md.

### Enterprise Task Grid
- Multi-column checklist of capabilities. Use body-md with 16px vertical spacing between items and #374151 dividers for long lists.

### Testimonial Quote Banner
- Pull quote set in headline-md (52px) with attribution in body-md. 48–80px vertical padding and a subtle top border.

### Footer Mega-Menu
- Multi-column navigation. Section titles in headline-xs (28px), links in body-md, 16px row spacing; strong use of compliance links.

## Do's and Don'ts

Do
- Use #fbf582 only for primary CTAs, the announcement bar, and critical highlights.
- Keep headline letter-spacing exactly as tokened; the tight tracking is part of the voice.
- Maintain 12px corner radius for buttons and 8px for cards; be consistent across a section.
- Prefer borders (#374151) and spacing to separate groups; avoid heavy shadows.

Don't
- Add new accent colors or gradients to CTAs.
- Mix more than two display sizes in one section; rely on headline-lg/md/sm and body-md only.

## Agent Prompt Guide

Quick color reference
- Text: #f9f4f1
- Background: #121212
- Border: #374151
- Accent (CTA): #fbf582

1) Build a dark hero with dual CTAs
- Section background #121212. Headline: "Real relief." in Exposure, 72px, weight 400, letter-spacing -0.05em, line-height 1, color #f9f4f1. Subhead in Inter 20px/1.4, color #f9f4f1 at 80% opacity. Buttons: Primary (#fbf582 text #28030f, radius 12px, height 44px, padding 10px 20px) and Secondary (#28030f text #f9f4f1) with 16px gap.

2) Create a stat counter band
- Container padding 48px vertical. Label in Inter 20px, #f9f4f1. Number inside a pill: background #28030f, text #f9f4f1, radius 12px, 10px 20px padding. Add subtle divider #374151 above.

3) Three-card feature row
- Grid of 3 columns, gap 36px. Each card: background #121212, border 1px #374151, radius 8px, padding 16px. Title in Exposure 38px (-0.042em), body in Inter 20px/1.4. Optional video placeholder fills card top.

4) Testimonial block
- Section padding 80px top/bottom. Quote in Exposure 52px (-0.031em), color #f9f4f1. Attribution in Inter 20px, 60% opacity. Add a top border #374151.

5) Footer mega-menu
- Background #121212. Column titles in Inter 28px/1.21; links in Inter 20px/1.4. Use 16px row spacing and 36px column gaps; draw 1px separators in #374151.

## Similar Brands

- Suki AI — Dark surfaces with bright action color and clinician-focused messaging; Heidi uses a warmer yellow accent and a serif display face.
- Raycast — Command-palette cue (⌘K) and disciplined dark UI; Heidi adapts the approach to healthcare storytelling and compliance content.
- Vercel — Minimalist dark theme with off-white type and subtle borders; Heidi adds a softer accent and friendlier radii.
- Ada Health — Calm healthcare tone and restrained palette; Heidi leans harder on a single CTA color and bolder display headlines.

:root {
  /* Colors */
  --color-primary: #f9f4f1;
  --color-secondary: #331316;
  --color-tertiary: #fbf582;
  --color-neutral: #121212;
  --color-border: #374151;
  --color-brand-willow: #8c7c44;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 52px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.19;
  --text-headline-md-tracking: -0.031em;
  --text-headline-sm-size: 38px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.01;
  --text-headline-sm-tracking: -0.042em;
  --text-headline-xs-size: 28px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: -0.03em;
  --font-exposure: "exposure";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 36px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #28030f;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 10px 20px;
  --button-primary-height: 44px;
  --button-secondary-background-color: #28030f;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 10px 20px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Heidi. By your side.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.976,
          0.957,
          0.945
        ],
        "hex": "#f9f4f1"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.2,
          0.075,
          0.086
        ],
        "hex": "#331316"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.984,
          0.961,
          0.51
        ],
        "hex": "#fbf582"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.071,
          0.071,
          0.071
        ],
        "hex": "#121212"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-willow": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.549,
          0.486,
          0.267
        ],
        "hex": "#8c7c44"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.071,
          0.071,
          0.071
        ],
        "hex": "#121212"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.976,
          0.957,
          0.945
        ],
        "hex": "#f9f4f1"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 12,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "exposure",
        "fontSize": {
          "value": 72,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.05,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "exposure",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.031,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "exposure",
        "fontSize": {
          "value": 38,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.042,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 28,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    }
  }
}