Lassie

---
version: alpha
name: "Lassie AI — Warm Editorial Medical"
description: "Primary visual anchor uses #e5e7eb with universal border color on nav, inputs, cards, and dividers; highest count in cssom. Typography baseline relies on abcMarist for hero headline; full-bleed cinematic overlay text."
colors:
  grey-200-border-hairline: "#e5e7eb"
  stone-100-surface-base: "#f9f8f5"
  black-800-deep-text: "#1a1613"
  get-started-cta-primary-action: "#000000"
  grey-600-muted-text: "#666666"
  pure-black-primary-text: "#000000"
  white-overlay-text-and-surface: "#ffffff"
  stone-500-warm-accent-border: "#e3ddcf"
typography:
  heading-1-hero-display:
    fontFamily: "abcMarist"
    fontSize: "76.928px"
    fontWeight: "350"
    lineHeight: "73.08px"
    letterSpacing: "-1.539px"
  heading-2-section-title:
    fontFamily: "abcMarist"
    fontSize: "51.84px"
    fontWeight: "350"
    lineHeight: "54.43px"
    letterSpacing: "-0.518px"
  heading-3-sub-section:
    fontFamily: "abcMarist"
    fontSize: "22.2px"
    fontWeight: "350"
    lineHeight: "24.42px"
    letterSpacing: "-0.2px"
  body-default:
    fontFamily: "dmSans"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "22.1px"
  body-small:
    fontFamily: "dmSans"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18.2px"
    letterSpacing: "0.07px"
  body-large:
    fontFamily: "dmSans"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "26px"
    letterSpacing: "0.2px"
  input-field-text:
    fontFamily: "dmSans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  mono-data-label:
    fontFamily: "dmMono"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "19.6px"
    letterSpacing: "-0.14px"
  mono-micro:
    fontFamily: "dmMono"
    fontSize: "10px"
    fontWeight: "400"
    lineHeight: "14px"
    letterSpacing: "-0.1px"
rounded:
  xs: "4px"
  sm: "12px"
  md: "16px"
  lg: "18px"
  xl: "32px"
  pill: "64px"
spacing:
  xs: "4px"
  sm: "6px"
  md-sm: "8px"
  md: "12px"
  base: "14px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "40px"
  5xl: "80px"
  6xl: "100px"
  7xl: "160px"
  container: "1760px"
components:
  button-nav-cta:
    fontFamily: "dmSans"
    fontSize: "14px"
    fontWeight: "400"
    textColor: "{colors.pure-black-primary-text}"
    backgroundColor: "rgba(0,0,0,0)"
    rounded: "{rounded.pill}"
    borderColor: "{colors.grey-200-border-hairline}"
    padding: "6px 16px"
    boxShadow: "none"
  cta-form-split-pill:
    rounded: "{rounded.pill}"
    inputBackgroundColor: "rgba(0,0,0,0)"
    inputColor: "{colors.white-overlay-text-and-surface}"
    inputPadding: "0px 16px"
    inputFontSize: "16px"
    buttonBackgroundColor: "{colors.pure-black-primary-text}"
    buttonColor: "{colors.white-overlay-text-and-surface}"
    buttonFontFamily: "dmSans"
    boxShadow: "none"
  data-callout-inline-metric:
    fontFamily: "dmMono"
    fontSize: "14px"
    fontWeight: "400"
    letterSpacing: "-0.14px"
    textColor: "{colors.white-overlay-text-and-surface}"
    rounded: "{rounded.xl}"
  hero-full-bleed-photo-overlay:
    backgroundColor: "rgba(0,0,0,0)"
    textColor: "{colors.white-overlay-text-and-surface}"
    headlineFontFamily: "abcMarist"
    headlineFontSize: "76.928px"
    headlineFontWeight: "350"
    headlineLetterSpacing: "-1.539px"
    bodyFontFamily: "dmSans"
    bodyFontSize: "17px"
    boxShadow: "none"
  navigation:
    rounded: "{rounded.pill}"
    borderColor: "{colors.grey-200-border-hairline}"
    borderWidth: "1px"
    backgroundColor: "{colors.white-overlay-text-and-surface}"
    padding: "6px 6px 6px 16px"
    boxShadow: "none"
    fontSize: "14px"
    fontFamily: "dmSans"
    textColor: "{colors.pure-black-primary-text}"
  navigation-link:
    fontFamily: "dmSans"
    fontSize: "14px"
    fontWeight: "400"
    textColor: "{colors.pure-black-primary-text}"
    backgroundColor: "rgba(0,0,0,0)"
    rounded: "0px"
    padding: "0px"
---

## Overview

Primary visual anchor uses #e5e7eb with universal border color on nav, inputs, cards, and dividers; highest count in cssom. Typography baseline relies on abcMarist for hero headline; full-bleed cinematic overlay text.

This system uses a 8px base grid with scale values 4, 6, 8, 12, 14, 16, 20, 24, 32, 40, 80, 100, 160.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 8 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `stone-100-surface-base`: Role "background" is grounded by usage context "Primary page and main content background; body and main element background-color".
- **action-text** maps to `pure-black-primary-text`: Role "text" is grounded by usage context "Primary body text, nav links, and default foreground; highest frequency text color".
- **surface-text** maps to `white-overlay-text-surface`: Role "text" is grounded by usage context "Hero headline text overlaid on dark photography; also used for card surfaces and nav background".
- **border-primary** maps to `grey-200-border-hairline`: Role "primary" is grounded by usage context "Universal border color on nav, inputs, cards, and dividers; highest count in CSSOM".

### Primary Brand
- **Grey 200 — Border Hairline** (#e5e7eb): Universal border color on nav, inputs, cards, and dividers; highest count in CSSOM. Role: primary. {authored: rgb(229, 231, 235), space: rgb}

### Text Scale
- **Black 800 — Deep Text** (#1a1613): Footer and secondary text; warm near-black for body copy on stone surfaces. Role: text. {authored: rgb(26, 22, 19), space: rgb}
- **Get Started CTA — Primary Action** (#000000): Primary CTA button ('Get started') uses black fill with white text, serving as the action-primary color. Role: text. {authored: rgb(0, 0, 0), space: rgb}
- **Grey 600 — Muted Text** (#666666): Subdued labels, captions, and secondary UI text. Role: text. {authored: rgb(102, 102, 102), space: rgb}
- **Pure Black — Primary Text** (#000000): Primary body text, nav links, and default foreground; highest frequency text color. Role: text. {authored: rgb(0, 0, 0), space: rgb}
- **White — Overlay Text & Surface** (#ffffff): Hero headline text overlaid on dark photography; also used for card surfaces and nav background. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.1}

### Interactive
- **Stone 500 — Warm Accent Border** (#e3ddcf): Warm-toned dividers and subtle surface accents in header and footer zones. Role: border. {authored: rgba(227, 221, 207, 0.2), space: rgb, alpha: 0.2}

### Surface & Shadows
- **Stone 100 — Surface Base** (#f9f8f5): Primary page and main content background; body and main element background-color. Role: background. {authored: rgb(249, 248, 245), space: rgb}

## Typography

Typography uses abcMarist, dmSans, dmMono across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes abcMarist and dmSans and dmMono for visual contrast. Sizes range from 10px to 76.928px.

### Font Roles
- **Headline Font**: abcMarist
- **Body Font**: abcMarist

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline; full-bleed cinematic overlay text | abcMarist | 76.928px | 350 | 73.08px | -1.539px | abcMarist, abcMarist Fallback, serif | Extracted token |
| Section headings and feature titles | abcMarist | 51.84px | 350 | 54.43px | -0.518px | abcMarist, abcMarist Fallback, serif | Extracted token |
| Sub-section labels and card headings | abcMarist | 22.2px | 350 | 24.42px | -0.2px | abcMarist, abcMarist Fallback, serif | Extracted token |
| Primary body copy and nav link text | dmSans | 17px | 400 | 22.1px | normal | dmSans, dmSans Fallback, sans-serif | Extracted token |
| Secondary body text, captions, and footer copy | dmSans | 14px | 400 | 18.2px | 0.07px | dmSans, dmSans Fallback, sans-serif | Extracted token |
| Lead paragraph and CTA supporting text | dmSans | 20px | 400 | 26px | 0.2px | dmSans, dmSans Fallback, sans-serif | Extracted token |
| Email input field placeholder and value text | dmSans | 16px | 400 | 24px | normal | dmSans, dmSans Fallback, sans-serif | Extracted token |
| Metric labels, payment amounts, and data callouts | dmMono | 14px | 400 | 19.6px | -0.14px | dmMono, dmMono Fallback, monospace | Extracted token |
| Micro data labels and badge text | dmMono | 10px | 400 | 14px | -0.1px | dmMono, dmMono Fallback, monospace | Extracted token |

## Layout

Responsive system uses 3 breakpoint tier(s): mobile, desktop, wide.

### Responsive Strategy
- **mobile (>= 394px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (>= 1024px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1440px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| xs | 4px | 4 | Extracted spacing token |
| sm | 6px | 6 | Extracted spacing token |
| md-sm | 8px | 8 | Extracted spacing token |
| md | 12px | 12 | Extracted spacing token |
| base | 14px | 14 | Extracted spacing token |
| lg | 16px | 16 | Extracted spacing token |
| xl | 20px | 20 | Extracted spacing token |
| 2xl | 24px | 24 | Extracted spacing token |
| 3xl | 32px | 32 | Extracted spacing token |
| 4xl | 40px | 40 | Extracted spacing token |
| 5xl | 80px | 80 | Extracted spacing token |
| 6xl | 100px | 100 | Extracted spacing token |
| 7xl | 160px | 160 | Extracted spacing token |
| container | 1760px | 1760 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(8px) ; blur(13px) ; blur(16px) |
| Light | outline-style | solid |
| Light | outline-color | rgb(0, 0, 0) ; rgb(255, 255, 255) ; rgba(0, 0, 0, 0) |
| Light | outline-width | 3px ; 2px |
| Light | outline-offset | 0px ; 2px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(-1, 0, 0, -1, 0, 0) ; matrix(1, 0, 0, 1, 0, 30) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| xs | 4px | 4 | Subtle corner |
| sm | 12px | 12 | Control corner |
| md | 16px | 16 | Card corner |
| lg | 18px | 18 | Card corner |
| xl | 32px | 32 | Large surface corner |
| pill | 64px | 64 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| xs | 4px | px |
| sm | 12px | px |
| md | 16px | px |
| lg | 18px | px |
| xl | 32px | px |
| pill | 64px | px |

## Components

Components should be recreated from token references first, then tuned with variant notes and probe-backed state guidance.
- **Floating Pill Navigation**: A horizontally centered floating nav bar with a pill/capsule shape, hairline border, and transparent/white background. Contains logo mark, text links, and a Login CTA button.
- **Hero Section**: Full-bleed cinematic photograph background with centered overlay text. Large abcMarist serif headline (regular + italic) with DM Sans supporting copy and a split email-capture CTA below.
- **Email Capture CTA**: A split pill-shaped form with an email input on the left and a filled black 'Get started' button on the right. Both share a unified pill container with 64px border-radius.
- **Metric Badge**: An inline badge or pill showing a real-time metric (e.g. 'Posted $12,430 in payments') using DM Mono for the numeric value. Appears below hero subheading.
- **Nav Link**: Text navigation links within the floating pill nav. Uses DM Sans at 14px with normal weight.
- **Login Button**: A secondary-style button in the nav bar for Login action. Appears as a pill-shaped outlined or filled button.

### Button

**Nav CTA**
- fontFamily: dmSans
- fontSize: 14px
- fontWeight: 400
- textColor: #000000
- backgroundColor: rgba(0,0,0,0)
- rounded: 64px
- borderColor: #e5e7eb
- padding: 6px 16px
- boxShadow: none
- State guidance: Probe-confirmed: button element has color #000000, borderColor #e5e7eb. Pill radius from 64px CSSOM data.

### CTA Form

**Split Pill**
- rounded: 64px
- inputBackgroundColor: rgba(0,0,0,0)
- inputColor: #ffffff
- inputPadding: 0px 16px
- inputFontSize: 16px
- buttonBackgroundColor: #000000
- buttonColor: #ffffff
- buttonFontFamily: dmSans
- boxShadow: none
- State guidance: Probe-confirmed: input.flex-1 has padding 0px 16px, color #ffffff, fontSize 16px. Button uses black fill inferred from screenshot visual.

### Data Callout

**Inline Metric**
- fontFamily: dmMono
- fontSize: 14px
- fontWeight: 400
- letterSpacing: -0.14px
- textColor: #ffffff
- rounded: 32px
- State guidance: DM Mono confirmed in CSSOM frequency data. Visual shows white text on dark photo background with icon prefix.

### Hero

**Full-bleed Photo Overlay**
- backgroundColor: rgba(0,0,0,0)
- textColor: #ffffff
- headlineFontFamily: abcMarist
- headlineFontSize: 76.928px
- headlineFontWeight: 350
- headlineLetterSpacing: -1.539px
- bodyFontFamily: dmSans
- bodyFontSize: 17px
- boxShadow: none
- State guidance: Probe-confirmed: h1.text-heading-1 color #ffffff, fontSize 76.928px. section.relative has transparent background.

### Navigation

**Default**
- rounded: 64px
- borderColor: #e5e7eb
- borderWidth: 1px
- backgroundColor: #ffffff
- padding: 6px 6px 6px 16px
- boxShadow: none
- fontSize: 14px
- fontFamily: dmSans
- textColor: #000000
- State guidance: Probe-confirmed: nav.flex has color #000000, borderColor #e5e7eb, no shadow. Pill radius inferred from 64px CSSOM frequency data and visual screenshot.

### Navigation Link

**Default**
- fontFamily: dmSans
- fontSize: 14px
- fontWeight: 400
- textColor: #000000
- backgroundColor: rgba(0,0,0,0)
- rounded: 0px
- padding: 0px
- State guidance: Probe-confirmed: a.relative has color #000000, transparent background, no border radius.

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | >= 394px | (min-width: 394px) |
| Desktop | >= 1024px | (min-width: 1024px) |
| Desktop | >= 1280px | (min-width: 1280px) |
| Desktop | >= 1440px | (min-width: 1440px) |
| Breakpoint 5 | Unknown | (hover: hover) |

## Agent Prompt Guide

### Example Component Prompts
- Create Email Capture CTA variant that preserves A split pill-shaped form with an email input on the left and a filled black 'Get started' button on the right. Both share a unified pill container with 64px border-radius..
- Create Floating Pill Navigation variant that preserves A horizontally centered floating nav bar with a pill/capsule shape, hairline border, and transparent/white background. Contains logo mark, text links, and a Login CTA button..
- Create Hero Section variant that preserves Full-bleed cinematic photograph background with centered overlay text. Large abcMarist serif headline (regular + italic) with DM Sans supporting copy and a split email-capture CTA below..

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.