Design System Inspiration of Alan

1. 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.

2. Color Palette & Roles

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).

3. Typography Rules

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.

4. Component Stylings

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.

5. Layout Principles

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

6. Depth & Elevation

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.

7. 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.

8. Responsive Behavior

Not measured. Desktop 1440×1000 only.

9. 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."

10. Voice & Tone

Not assessed as authored voice.

11. 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.

12. 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.

13. Personas

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

14. 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.

15. Motion & Easing

Not measured.

Tier 1 sources: https://alan.com/fr-fr (live homepage — 299 root custom properties read via getComputedStyle, react-toastify excluded; Alan Sans loaded; three components measured at rest, hover, pressed and focus after declining cookies; structured data giving foundingDate 2016-02-10 and 117 quai de Valmy, Paris, captured 2026-09-26); https://alan.com/fr-fr/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://github.com/alan-eu/Alan-Sans (Alan Sans repository — OFL-1.1, read 2026-09-26)