Nudge

---
version: alpha
name: Nudge
description: Change begins with Nudge.
colors:
  primary: "#000000"
  tertiary: "#e8e6d9"
  neutral: "#fcfdfd"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Inter
    fontSize: 29px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: -0.031em
  headline-sm:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
  headline-xs:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#26251e"
    rounded: "{rounded.full}"
    padding: 12px 16px
    height: 40px
  button-secondary:
    backgroundColor: "#f3f2eb"
    textColor: "#26251e"
    rounded: "{rounded.full}"
    padding: 12px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Nudge: Warm Sand Palette and Capsule CTAs

## Overview

Nudge serves healthcare providers and care teams who need to keep patients engaged between visits. The interface should feel calm, trustworthy, and human while remaining clinical-grade. Expect spacious sections, restrained color, and copy-first layouts that foreground outcomes and workflows. When tokens don't specify, prefer warm neutrals, clear hierarchy, and generous spacing over decorative effects.

## Colors

- **primary (#000000):** Core ink for headlines, body text, icons, and high-emphasis CTAs.
- **tertiary (#e8e6d9):** Warm sand used for soft sections, subtle dividers, and light-filled buttons.
- **neutral (#fcfdfd):** Porcelain base for the page background and card surfaces.
- **surface (#fcfdfd):** Alias of neutral; use for standard content containers and cards.
- **on-surface (#000000):** Alias of primary; use for text and controls that sit on neutral or surface.

## Typography

Inter is the sole family across headings and body. It is a freely available Google font and can be loaded directly. Suitable substitutes when Google Fonts cannot be used: system-ui/Segoe UI, Helvetica Neue, or Arial.
- Headline Large — Inter 36px, 500, 1.11, -0.025em: Page and section heroes.
- Headline Medium — Inter 29px, 500, 1.38, -0.031em: Feature intros and key claims.
- Headline Small — Inter 24px, 500, 1.33: Card titles and sub-section headers.
- Headline XS — Inter 20px, 500, 1.2: Eyebrows and compact headings.
- Body Medium — Inter 16px, 400, 1.5: All narrative copy and supporting text.

## Layout

Spacing uses an 8px base with steps at 8/16/32/64/128. Build vertical rhythm by pairing md (32px) for intra-section spacing, lg (64px) as section padding, and xl (128px) for hero and major breaks. Lists and cards pad with sm–md. Favor a simple content column with generous margins; let the warm tertiary panels span full width when emphasis is needed.

## Elevation & Depth

Measured shadows are none at all sizes. Hierarchy is achieved through tonal blocks (neutral vs. tertiary), weight/size shifts in Inter, and whitespace. When separation is needed, use 1px hairline rules or keylines in primary at low opacity; avoid drop shadows and heavy gradients.

## Shapes

Two radii define the language: sm (8px) for cards and panels, and full (9999px) for buttons, pills, and badges. Use full radius for anything interactive that needs high affordance; reserve 8px for content containers to keep structure crisp.

## Components

Tokened components:
- Button Primary — Background #e8e6d9, text #26251e, full radius, 40px height, 12px 16px padding. Use for standard CTAs on neutral or image-free backgrounds.
- Button Secondary — Background #f3f2eb, text #26251e, full radius, 40px height, 12px 16px padding. Use for low-emphasis actions.
- Button Link — Text #000000, no radius. Inline actions and "Explore ..." links.
- Card — Background #fcfdfd, text #000000, 8px radius, 16px padding.

Distinct components on this page:
### Announcement Badge
- Use full radius (9999px) with a light fill (tertiary #e8e6d9) and body-md text. Inline icon/chevron optional. Horizontal padding sm (16px), vertical xs (8px).
### Illustrated Hero Banner
- Neutral surface (#fcfdfd) with a soft top-to-bottom tonal shift; center the H1 (headline-lg) and body-md intro. CTA may use the darker treatment (primary background, neutral text) for contrast against artwork.
### Platform Module Panel
- For "Nudges/Workflows/Insights/Rewards/RTM/Patient Portal." Use card base (#fcfdfd), heading at headline-sm, body-md copy, and a Button Link for "Explore ...". Spacing: md inside, lg above/below.
### Use Cases Grid
- Grid of linked cards using 8px radius, md padding. Title set in headline-xs or headline-sm with bold lead line and supporting sentence in body-md.
### Testimonial Block
- Quotation in headline-sm with body-md attribution. Place on tertiary background to differentiate; inner padding lg, outer margin lg–xl.
### Partners Row
- Logo strip or tiles on neutral/sand. Keep logos monochrome or subdued; pad with md and maintain consistent vertical rhythm.
### Footer Contact CTA
- Compact section with headline-md, supporting sentence in body-md, and a primary button. Consider the dark CTA (primary background) when preceding section is light.

## Do's and Don'ts

- Do keep text on neutral or surface using primary (#000000) at body-md 16/1.5 for readability.
- Do reserve full-radius pills for CTAs, badges, and key nav; use 8px radius for content cards.
- Do use tertiary (#e8e6d9) for soft section breaks and emphasis instead of shadows.
- Don't introduce new accent colors beyond primary/tertiary without brand approval.
- Don't exceed headline-lg (36px) for page titles; maintain the provided letter-spacing values for polish.
- Don't add drop shadows; use tonal contrast and spacing to separate layers.

## Agent Prompt Guide

Quick color reference — Text: #000000; Background: #fcfdfd; Border/Keyline: #e8e6d9; Accent Block: #e8e6d9.

1) Build a centered hero on neutral
- Container background #fcfdfd; top/bottom padding 128px.
- H1: Inter, 36px, weight 500, line-height 1.11, letter-spacing -0.025em, color #000000.
- Lead: Inter, 16px, weight 400, line-height 1.5, color #000000; max-width comfortable text.
- CTA: 40px high pill; background #e8e6d9, text #26251e, padding 12px 16px, border-radius 9999px.

2) Announcement badge above H1
- Inline pill with background #e8e6d9, text #000000.
- Inter 16px/1.5; padding 8px 16px; border-radius 9999px; place 16px above the H1.

3) Feature panel card
- Card background #fcfdfd; 8px radius; padding 32px inside; outer margin 64px between cards.
- Title: Inter 24px, 500, 1.33, color #000000.
- Body: Inter 16px, 400, 1.5.
- Link: text-only button in #000000.

4) Use cases grid (3-up)
- Section background #e8e6d9; section padding 64px.
- Each item: card on #fcfdfd with 8px radius and 16px padding.
- Title: Inter 20px, 500, 1.2; Body: Inter 16px/1.5; Card gap 32px.

5) Footer contact CTA (dark button option)
- Neutral background #fcfdfd.
- Heading: Inter 29px, 500, 1.38, -0.031em.
- Button: pill 40px high with background #000000 and text #fcfdfd; padding 12px 16px; radius 9999px.

## Similar Brands

One Medical — Warm neutrals and rounded controls for a calm clinical feel; Nudge is sparser and uses fewer brand colors.
Calm Business — Soft typography and tonal blocks; Nudge is more functional and text-led.
Noom — Behavior-change framing with generous whitespace; Nudge is less consumer-y and more provider oriented.
Headspace Health — Friendly sans and illustrated moments; Nudge keeps illustrations minimal and monochrome.
Eden Health — Clean, pill-shaped CTAs and restrained palette; Nudge leans warmer with sand tones.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-tertiary: #e8e6d9;
  --color-neutral: #fcfdfd;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 36px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.11;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 29px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.38;
  --text-headline-md-tracking: -0.031em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.33;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #26251e;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 12px 16px;
  --button-primary-height: 40px;
  --button-secondary-background-color: #f3f2eb;
  --button-secondary-text-color: #26251e;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 12px 16px;
  --button-secondary-height: 40px;
  --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": "Change begins with Nudge.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.91,
          0.902,
          0.851
        ],
        "hex": "#e8e6d9"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.988,
          0.992,
          0.992
        ],
        "hex": "#fcfdfd"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.988,
          0.992,
          0.992
        ],
        "hex": "#fcfdfd"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 128,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.025,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 29,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.031,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}