Design tokens (YAML front matter)

name: Alan
colors:
  primary: '#5c59f3'
  primary-hover: '#2f33a8'
  primary-pressed: '#0c0a66'
  indigo-100: '#d6dbff'
  indigo-50: '#f0f3ff'
  heading: '#282830'
  foreground: '#464754'
  caption: '#656779'
  grey-500: '#9da3ba'
  border: '#ecf1fc'
  surface: '#f5f8fe'
  canvas: '#ffffff'
  cream: '#fffcf5'
  fluo-yellow: '#fcff7e'
  teal: '#2aa79c'
  teal-dark: '#124548'
  orange: '#ff9359'
  danger: '#ed4e4e'
  success: '#7fca6c'
typography:
  button:
    fontSize: 16px
    fontWeight: 500
    use: hero buttons
  nav:
    fontSize: 13.33px
    fontWeight: 400
    use: segment navigation
rounded:
  md: 12px
  lg: 16px
components:
  button-primary:
    type: button
    backgroundColor: '#5c59f3'
    textColor: '#ffffff'
    rounded: 16px
    height: 48px
    typography: 16px / 500
    shadow: rgba(40,40,48,0.06) 0 1px 4px
    hover: '#2f33a8'
    pressed: '#0c0a66'
    use: Mon devis en 2 min in the hero — --c-indigo500, darkening to --c-indigo700 on hover and --c-indigo900 on press. Focus is the browser's ring.
  button-secondary:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#5c59f3'
    border: '#ecf1fc'
    rounded: 16px
    height: 48px
    typography: 16px / 500
    shadow: rgba(40,40,48,0.06) 0 1px 4px
    pressed: 'border #f5f8fe'
    use: Demander une démo beside it — white with an indigo label and a --c-grey100 border; hover changes nothing, press lightens the border to --c-grey50.
  nav-segment:
    type: button
    backgroundColor: transparent
    textColor: '#000000'
    rounded: 16px
    height: 40px
    typography: 13.33px / 400
    hover: '#f5f8fe'
    pressed: '#f5f8fe'
    use: Entreprises, Indépendants, Particuliers — the audience switch in the header; hover and press fill it with --c-grey50.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Alan Sans

Design System Inspiration of Alan

Overview

Visual Theme & Atmosphere

Alan is a French health insurer founded on 10 February 2016 and based at 117 quai de Valmy in Paris, according to its own structured data. It sells health cover to companies, the self-employed, individuals and the public sector — the four audiences its header switches between — and describes itself as a health partner rather than only an insurer.

The site is soft and friendly: white and pale-blue surfaces, dark grey headings #282830, and Alan’s indigo #5c59f3 on the main actions, with cream, teal and a fluorescent yellow for illustration and highlights. Buttons and panels are rounded at 16px and carry a faint shadow. Everything is set in Alan Sans, a variable typeface Alan designed and released as open source.

What makes it worth reading:

Its own typeface, open-sourced. Alan Sans is published at github.com/alan-eu/Alan-Sans under the SIL Open Font License, and the site loads it as one variable file (weights 300–900).
Indigo in three steps. --c-indigo500 rests, --c-indigo700 hovers, --c-indigo900 presses — the state ramp is the colour ramp.
Sizes as tokens. 168 --t-* properties split exactly into 56 radius, 56 space and 56 size steps.

Primary tasks

Get a quote (“Mon devis en 2 min”) or book a demo, by audience.
Sign in to the member space.

Brand Narrative

Alan calls itself a health partner, and its site speaks softly: pale surfaces, rounded shapes and one indigo for the things to press. It went as far as designing its own typeface and giving it away — Alan Sans is open source — so the brand’s voice in type is its own.

Principles

Soft, not clinical. Pale surfaces, 16px corners, faint shadows.
One colour, three steps. Indigo at rest, deeper on hover, deepest on press.
Our own type. Alan Sans everywhere.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on alan.com/fr-fr: 299 root custom properties — --c-* 86, --t-* 168, --website-* 4, and 41 --toastify-* from the react-toastify library (excluded).

Indigo

Primary (#5c59f3) — --c-indigo500; the quote button and link accents.
Primary hover (#2f33a8) — --c-indigo700.
Primary pressed (#0c0a66) — --c-indigo900.
--c-indigo100 #d6dbff · --c-indigo50 #f0f3ff (tinted panels).

Text

Heading (#282830) — --c-heading, --c-grey900.
Foreground (#464754) — --c-paragraph, --c-grey800; body copy.
Caption (#656779) — --c-caption; the most frequent <p> colour, used for labels and captions.
--c-grey500 #9da3ba.

Surfaces

Canvas #ffffff · Surface #f5f8fe (--c-grey50) · Border #ecf1fc (--c-grey100) · Cream #fffcf5 · Fluo yellow #fcff7e.

Accents and status

Teal #2aa79c (--c-teal500) with a deep #124548 · Orange #ff9359 · Danger #ed4e4e (--c-red500Base) · Success #7fca6c (--c-green500). Several families carry HighContrast variants (for example --c-red500HighContrast #9e1924).

Typography

Font family

Alan Sans — AlanSans, Helvetica, Arial, sans-serif on body and headings, served by alan.com as a single variable woff2 (AlanSans-variable.*.woff2) and loaded across weights 300–900. Buttons use 500.

Scale

Measured: hero buttons 16px/500, the audience switch 13.33px/400. The --t-size-* tokens hold the size scale.

Layout

--website-header-height 84px; the hero sits 137px below the top (--website-header-hero-offset).
The header switches the whole site by audience.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

One low shadow does most of the work: rgba(40,40,48,0.06) 0 1px 4px, with a near twin rgba(70,71,84,0.06) 0 1px 4px.

Motion & Easing

Not measured.

Components

Measured on the home page after declining cookies (“Continuer sans accepter”), focus read under a real Tab key, and a hover counted only when :hover matched. The buttons are links whose own colour is the browser default; the visible label is a child element, and its colour is recorded.

Primary — Mon devis en 2 min: #5c59f3, white 16px/500 label, radius 16px, 48px, shadow rgba(40,40,48,0.06) 0 1px 4px. Hover #2f33a8, press #0c0a66. Focus is the browser’s auto ring.
Secondary — Demander une démo: #ffffff, indigo label, #ecf1fc border, same shape. Hover changes nothing; press lightens the border to #f5f8fe.
Audience switch — Entreprises and its siblings: transparent, #000000 13.33px, radius 16px, 40px. Hover and press fill it with #f5f8fe.

Radius

16px on buttons and the switch; 12px on header links; asymmetric 12px 12px 12px 2px speech-bubble corners appear on chat-style elements.

States

Hover: the primary to #2f33a8, the audience switch to #f5f8fe, the secondary unchanged. Press: #0c0a66; the secondary’s border to #f5f8fe. Focus: the browser’s ring. No disabled state was observed.

Do’s and Don’ts

Do

Use indigo #5c59f3 for the main action and step to #2f33a8, then #0c0a66.
Set type in Alan Sans; keep body copy in #464754 and headings in #282830.
Round at 16px and keep shadows faint.

Don’t

Don’t count react-toastify’s --toastify-* variables as Alan’s.
Don’t use the fluo yellow #fcff7e for text.
Don’t make captions the body colour; #656779 is secondary.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#5c59f3 indigo · #2f33a8 hover · #0c0a66 pressed · #282830 heading · #464754 body · #656779 caption · #f5f8fe surface · #ecf1fc border · #fffcf5 cream · #fcff7e fluo

Example Component Prompts

“A 48px button, #5c59f3, white 16px/500 Alan Sans label, 16px radius, faint shadow; hover #2f33a8, press #0c0a66.”
“A white secondary button with an indigo label and a #ecf1fc border.”

Governance

Known Gaps

Contrast, nav-segment. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.

Palette

At a glance

Design System · Alan