---
version: alpha
name: Act Actuaires
description: Warm actuarial humanism — a cream canvas with near-black ink, a serif/sans pairing (Stringer display headings over SkandiaSN body), and a confident accent quartet of safety-orange, sunshine-yellow, mint and teal that turns dry pension-and-insurance math into something playful and human.

colors:
  # Canvas + ink
  background: "#efebe8"      # warm cream page
  surface: "#ffffff"         # white cards
  surface-ink: "#241f20"     # near-black inverted surface
  ink: "#241f20"             # primary text — warm near-black
  ink-pure: "#000000"
  ink-muted: "#6f6a68"       # secondary text on cream

  # Accent quartet
  primary: "#ff4e00"         # safety orange — primary CTA / brand
  accent-yellow: "#f4c500"   # sunshine yellow
  accent-mint: "#92d9a6"     # soft mint green
  accent-teal: "#2babb6"     # teal
  accent-red: "#c50b0b"      # alert / deep red

  # Neutral scale
  gray-400: "#9ca3af"
  gray-200: "#d8d3cf"
  gray-100: "#e4dfdb"

  # Interactive
  focus-blue: "#007aff"

  # On-color
  on-primary: "#ffffff"      # white on orange
  on-ink: "#efebe8"          # cream on near-black
  on-yellow: "#241f20"       # ink on yellow

typography:
  display-hero:
    fontFamily: "Stringer-Regular-Web, Georgia, serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -1px
  display-large:
    fontFamily: "Stringer-Regular-Web, Georgia, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading-1:
    fontFamily: "Stringer-Regular-Web, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-2:
    fontFamily: "Stringer-Regular-Web, Georgia, serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  heading-3:
    fontFamily: "SkandiaSN, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "SkandiaSN, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "SkandiaSN, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "SkandiaSN, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "SkandiaSN, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.4px
  caption:
    fontFamily: "SkandiaSN, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  lg: 20px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.circle}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.circle}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.circle}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.circle}"
    padding: 14px 28px
    borderColor: "{colors.gray-200}"
  badge:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.caption}"
    rounded: "{rounded.circle}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.gray-100}"
  card-feature:
    backgroundColor: "{colors.surface-ink}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.lg}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.gray-200}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus-blue}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 32px
---

# Act Actuaires Design System

## Overview

Act Actuaires is a French actuarial consultancy working in compensation, retirement, group insurance, and occupational health — fields that usually wear gray suits. Their website refuses that template. The whole page sits on a warm cream canvas (`{colors.background}`), text is set in a near-black with a faint warmth to it (`{colors.ink}`, `#241f20` rather than pure `#000000`), and the headings are a serif display face (Stringer) that gives the brand an editorial, almost literary confidence. The effect is human and unhurried — actuarial rigor delivered with a warm voice.

The signature move is the accent quartet. Against the muted cream, the brand deploys a small set of saturated, almost candy-bright colors: a safety-orange primary (`{colors.primary}`), a sunshine yellow (`{colors.accent-yellow}`), a soft mint (`{colors.accent-mint}`), and a teal (`{colors.accent-teal}`). These show up as pill buttons, illustration fills, and playful decorative objects (the site leans on quirky illustrated props — a biscuit, a four-leaf clover, a pair of dice — that literalize "we leave nothing to chance"). Color is used generously but never muddily; the cream background keeps everything legible and calm.

Typographically the system is a two-voice pairing. Stringer-Regular-Web, a serif, carries all the display and heading sizes — and the brand pushes it large, up to roughly 96px on hero statements, so the serif reads as a graphic element, not just text. SkandiaSN, a clean grotesque sans, handles body copy, labels, and UI, mostly at weight 400 with weight 700 for emphatic labels and small headings. The contrast between expressive serif headlines and quiet sans body is what makes the page feel designed rather than templated.

Shapes are friendly. Buttons are fully rounded pills (`{rounded.circle}`), decorative dots and avatars are circles, and cards take a generous 20px corner radius (`{rounded.lg}`). Nothing is sharp; nothing is heavy. The brand earns trust the way a good advisor does — by being precise underneath and warm on the surface.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of clinical white — humanizes a technical field
- Near-black warm ink (`{colors.ink}`, `#241f20`) over pure black
- Serif/sans pairing: Stringer display headings over SkandiaSN body and UI
- Oversized serif headlines (up to ~96px) used as graphic elements
- Saturated accent quartet — orange, yellow, mint, teal — used generously but legibly
- Fully-rounded pill buttons and circular decorative shapes
- Playful illustrated props (biscuit, clover, dice) reinforcing the "nothing left to chance" message

## Colors

### Canvas & Ink
- **Cream** (`{colors.background}`): The page canvas — warm, low-glare, humanizing.
- **White** (`{colors.surface}`): Card and panel surfaces that lift off the cream.
- **Warm Near-Black** (`{colors.ink}`): Primary text and headings — softer than pure black.
- **Inverted Surface** (`{colors.surface-ink}`): Dark feature cards and footer, with cream text on top.
- **Muted Ink** (`{colors.ink-muted}`): Secondary and supporting copy.

### Accent Quartet
- **Safety Orange** (`{colors.primary}`): Primary CTA, brand color, highest-energy accent.
- **Sunshine Yellow** (`{colors.accent-yellow}`): Highlights, badges, illustration fills (use ink text on top).
- **Mint** (`{colors.accent-mint}`): Soft positive accent, illustration and tag fills.
- **Teal** (`{colors.accent-teal}`): Cool counterpoint to the orange, secondary highlight.
- **Deep Red** (`{colors.accent-red}`): Alerts and rare high-emphasis marks.

### Neutrals & Interactive
- **Gray 400 / 200 / 100** (`{colors.gray-400}`, `{colors.gray-200}`, `{colors.gray-100}`): Borders, dividers, disabled states, subtle card outlines.
- **Focus Blue** (`{colors.focus-blue}`): System focus ring on interactive elements.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on orange.
- **On Ink** (`{colors.on-ink}`): Cream text on dark surfaces.
- **On Yellow** (`{colors.on-yellow}`): Ink text on yellow — never white (yellow fails contrast with white).

## Typography

### Font Family
- **Display / Headings**: `Stringer-Regular-Web`, a serif, fallbacks `Georgia, serif`.
- **Body / UI**: `SkandiaSN`, a grotesque sans, fallbacks `Helvetica, Arial, sans-serif`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | ~96px serif hero statement — graphic headline |
| `display-large` | Large serif section openers |
| `heading-1` | Serif page/section titles |
| `heading-2` | Serif sub-section titles |
| `heading-3` | Sans bold small headings / card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, captions in forms |
| `label` | Bold sans button text and eyebrow labels |
| `caption` | Metadata, tags, fine print |

### Principles
- **Two voices, strict roles**: Stringer serif announces (headings only); SkandiaSN sans explains (body and UI). Don't set body in the serif.
- **Big serif as graphic**: Display headings run large enough to read as composition, not just copy.
- **Weight discipline in sans**: 400 for reading, 700 for labels and small headings; 300 reserved for large soft display sans where used.
- **Ink on yellow, never white**: Yellow accent always pairs with `{colors.ink}` text.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Built on a loose 8px rhythm with generous jumps (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for the airy, editorial vertical rhythm.

### Grid & Container
- Centered content column, roughly 1200px max width
- Hero: single large serif statement with an accompanying illustration prop
- Service sections: 2–4 column card grids over the cream canvas
- Dark feature bands (`{colors.surface-ink}`) break up the cream for emphasis

### Whitespace Philosophy
- **Calm and roomy**: Cream canvas plus generous vertical spacing keeps a technical subject feeling unhurried.
- **Color as punctuation**: Accents arrive in small, deliberate doses against the neutral field, so each pop reads as intentional.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Inputs, small chips |
| `sm` | 8px | Inputs, small containers |
| `lg` | 20px | Cards, panels |
| `circle` | 9999px | Pill buttons, badges, dots, avatars |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Orange pill, white text, bold sans label. The default CTA. Hover flips to ink-on-cream.
- **`button-secondary`** — White pill with ink outline.
- **`button-ghost`** — Cream pill with light gray outline for low-emphasis actions.

### Badges
- **`badge`** — Yellow pill with ink text for tags and highlights.

### Cards
- **`card`** — White surface, 20px radius, soft gray outline.
- **`card-feature`** — Dark inverted surface (`{colors.surface-ink}`) with cream text, used to spotlight a service.

### Inputs
- **`input`** — White surface, 8px radius, gray outline; focus shifts the border to `{colors.focus-blue}`.

### Navigation
- **`nav-bar`** — Cream header, bold sans labels in ink, FR/EN language toggle.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`) as the default page background
- Pair Stringer serif headings with SkandiaSN sans body
- Let serif headlines run large enough to act as graphic elements
- Use the accent quartet generously but as deliberate punctuation
- Put `{colors.ink}` text on yellow, white text on orange
- Use fully-rounded pills for all buttons

### Don't
- Don't set body copy in the serif — sans only below heading sizes
- Don't put white text on the yellow accent (contrast failure)
- Don't use pure black (`{colors.ink-pure}`) for text — the warm near-black is the brand
- Don't use sharp 0px corners on buttons or cards — the system is friendly and rounded
- Don't let accents go muddy by stacking many at once on one element

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down sharply, props shrink |
| Tablet | 600–1024px | 2-column card grids, expanded padding |
| Desktop | 1024–1400px | Full multi-column layout, max content width |
| Large | >1400px | Centered with generous cream margins |

### Touch Targets
- Pill buttons use comfortable 14px vertical padding
- Nav labels and language toggle sized for tap on mobile

### Collapsing Strategy
- Hero serif: ~96px → scales down while staying the dominant element
- Service cards: 3–4 column → 2 → single column
- Dark feature bands maintain full-bleed edge-to-edge treatment
- Navigation collapses to a menu toggle on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Cream `{colors.background}`
- Heading / body text: Warm near-black `{colors.ink}`
- Primary CTA: Safety Orange `{colors.primary}` with white text
- Highlight badge: Yellow `{colors.accent-yellow}` with ink text
- Cool accent: Teal `{colors.accent-teal}` / Mint `{colors.accent-mint}`
- Focus ring: `{colors.focus-blue}`

### Example Component Prompts
- "Create a hero on cream `{colors.background}`. Headline in Stringer serif at 96px weight 400, color `{colors.ink}`, line-height 1.02. Subtitle in SkandiaSN sans at 20px weight 400, `{colors.ink-muted}`. Orange pill CTA (`{colors.primary}`, white text, 9999px radius, 14px 28px padding)."
- "Design a card: white `{colors.surface}`, 20px radius, soft `{colors.gray-100}` border, 32px padding. Title in SkandiaSN bold 24px `{colors.ink}`, body 18px weight 400."
- "Build a dark feature band: `{colors.surface-ink}` background, cream `{colors.on-ink}` text, serif heading at 44px."
- "Yellow tag badge: `{colors.accent-yellow}` background, `{colors.ink}` text, fully rounded, 4px 12px padding — never white text on yellow."

### Iteration Guide
1. Cream canvas + warm near-black ink is the foundation — not white/black.
2. Serif (Stringer) for headings, sans (SkandiaSN) for everything else.
3. Accents are punctuation: small deliberate pops of orange/yellow/mint/teal.
4. All buttons are pills; cards get a 20px radius. Nothing sharp.
5. Pair colors safely: white on orange, ink on yellow.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Act Actuaires. Brand names and trademarks belong to their respective owners.