# Alan — Design System
> A comprehensive health insurance and prevention platform for individuals and businesses.
- **Canonical:** https://uiuxskills.com/library/alan
- **Source:** https://alan.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:58.534Z

---

---
version: alpha
name: Alan
description: A comprehensive health insurance and prevention platform for individuals and businesses.
tone: >-
  Friendly, transparent, pedagogical, and efficient. The brand uses a human-centric, empathetic
  voice that avoids insurance jargon in favor of clear, actionable language.
color-scheme: light
colors:
  primary: "#0055FF"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-dim: "#F8F9FA"
  on-surface: "#1A1A1A"
  neutral: "#707070"
  error: "#FF4D4D"
  success: "#00C853"
  outline: "#E0E0E0"
  focus-ring: "#0055FF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0044CC"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0044CC"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E8F5E9"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Alan is a modern, digital-first health partner that blends insurance, prevention, and daily health support into a seamless app experience. The brand identity is clean, friendly, and highly accessible, focusing on simplifying complex health systems through technology.

## Colors

The color palette is designed for clarity and trust, utilizing a high-contrast foundation for readability and a vibrant primary blue to anchor the brand's digital interface.

*   Primary (#0055FF): The core brand color used for primary CTAs and key brand elements.
*   On-Primary (inferred) (#FFFFFF): Text color for elements on primary backgrounds.
*   Surface (#FFFFFF): Main background color for the website.
*   Surface-Dim (inferred) (#F8F9FA): Light gray background for secondary sections and cards.
*   On-Surface (#1A1A1A): Primary text color for readability on light surfaces.
*   Neutral (inferred) (#707070): Secondary text and icon color.
*   Error (inferred) (#FF4D4D): Used for error states and critical alerts.
*   Success (inferred) (#00C853): Used for positive indicators and success states.
*   Outline (inferred) (#E0E0E0): Border color for cards and input fields.
*   Focus-Ring (inferred) (#0055FF): Focus state ring color for accessibility.

## Typography

Typography is set in a clean, sans-serif family to ensure maximum legibility and a pedagogical, approachable tone.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text for paragraphs and long-form content.
*   Label-md (inferred): Used for button labels and primary navigation metadata.

## Layout

The site follows a responsive, mobile-first grid system that prioritizes readability through generous whitespace and a 4px-based spacing scale. The page structure flows from navigation to hero, social proof, features, use cases, testimonials, and footer. The hero pattern features a centered headline and subhead with dual CTAs, supported by a large product-focused image.

## Elevation & Depth

Depth is applied sparingly to maintain a flat, modern aesthetic, using subtle single-layer shadows to distinguish interactive elements from the background.

*   Elevation.sm: Subtle lift for secondary UI elements.
*   Elevation.md: Standard lift for interactive cards.
*   Elevation.lg: Deeper shadow for modal or overlay components.

## Shapes

The brand employs a rounded corner philosophy to reinforce its friendly and empathetic nature. Medium-to-large radii are applied to cards and buttons to soften the interface, moving away from sharp, institutional edges.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for primary actions and transparent backgrounds with {colors.primary} borders for secondary actions. They are designed with {typography.label-md} and {rounded.md} to ensure they remain approachable and easy to interact with.

### Card
Cards are the primary container for features and testimonials, utilizing {colors.surface} with {rounded.lg} and a subtle {colors.outline} border. Use these to group related information and maintain a clean, organized layout.

### Input Field
Input fields prioritize accessibility by using {colors.outline} for borders and a clear {colors.focus-ring} when active. They feature {rounded.md} corners to match the overall friendly design language.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Never use {colors.error} for non-critical information. |
| Apply {rounded.lg} to all card components. | Avoid using sharp corners on {components.card}. |
| Use {typography.display-lg} for main hero headlines. | Do not mix {typography.body-md} with decorative fonts. |
| Maintain {spacing.md} between list items. | Never apply {colors.surface-dim} as a background for primary content. |
| Use {colors.success} for positive metrics in badges. | Do not use low-contrast text on {colors.surface}. |
| Ensure all input fields have a {colors.focus-ring} on focus. | Avoid excessive use of shadows on flat UI elements. |
| Use {components.badge-success} for growth metrics. | Never use {colors.neutral} for primary call-to-action text. |
| Apply {rounded.md} to {components.input-field}. | Do not use {components.divider} with high-contrast colors. |

## Content Style

CTA labels are imperative and action-oriented, using short, clear verbs like "Découvrir" or "Demander". They are designed to be direct and benefit-driven.

Headings are phrased to be slightly provocative, highlighting the need for change in the health sector while remaining pedagogical. They focus on the specific benefits the user gains by switching to Alan.

Copy density is kept low to ensure the site remains scannable. Paragraphs are short, and the brand makes frequent use of bullet points and bold text highlights to guide the user through complex insurance information.

## Imagery & Icons

The imagery style is mixed, combining high-quality photography, clean product screenshots, and custom illustrations. This treatment reinforces the brand's pedagogical tone by making abstract health concepts feel tangible and human. Icons should follow a minimal, friendly aesthetic that complements the sans-serif typography.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Alan, a minimal and accessible digital health platform. Match its friendly, pedagogical tone — clear and human-centric without insurance jargon. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name (`{colors.primary}`, `{typography.body-md}`, `{spacing.md}`) — never hardcode hex values, font sizes, or pixel measurements.
2. Use only the component variants listed under `components:`. Do not invent states, sizes, or variants the spec does not define.
3. Apply the Shapes narrative when choosing radii: cards always use `{rounded.lg}`, inputs use `{rounded.md}`, buttons use `{rounded.md}`. Never apply sharp corners to these elements.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values supersede the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, and elevation value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{elevation.md}` to interactive cards and `{elevation.lg}` only to modals or overlays.
- Keep CTA copy imperative, short, and verb-led per the Content Style section.
- Maintain a minimum 4.5:1 contrast ratio; never place low-contrast text on `{colors.surface}`.

**Must NOT:**
- Invent colors, radii, font families, or spacing values outside the spec.
- Use framework utility defaults (e.g. `text-gray-500`, `rounded-md` as literals) when a named token exists.
- Apply `{colors.error}` for non-critical information or `{colors.neutral}` for CTA text.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask before inventing one.
- For background colors, default to `{colors.surface}`; use `{colors.surface-dim}` only for secondary sections, never primary content areas.
- For unspecified breakpoints, follow mobile-first layout with one breakpoint at 768px.
- Compose existing components rather than introducing new tokens.
- Prefer `{colors.primary}` for the headline interactive action and `{colors.on-surface}` for body text on light surfaces.