# Component Brief

> mobilizon.fr — 2026-05-25
> Use with: `tokens.clean.css` + screenshots

**7 component variants** identified across 4 types.

## Buttons (2)

- **Suivre** — filled, bg: --color-action-jelly-bean, text: --cssVar-oruga-primary-invert, radius: 4px, padding: 8px 16px
- **Contact** — outlined, text: --color-neutral-100-2, border: --color-action-jelly-bean, radius: 4px, padding: 8px 16px

## Inputs (1)

- **Langue** — select, bg: --cssVar-oruga-primary-invert, border: 2px solid, radius: 4px

## Links (2)

- **Passer au contenu principal** — color: --color-neutral-100-2
- **Rechercher** — color: --color-neutral-100

## Navs (2)

- **Mobilizon LogoRechercherCalendrier(beta)Se connecterS'inscri** — bg: --cssVar-oruga-primary-invert, border: --color-brand-mercury
- **Fil d'Ariane** — border: --color-brand-mercury

---

### How to use this brief

1. Open the page screenshot to see the actual components
2. Reference `tokens.clean.css` for all design token values
3. Token names prefixed with `--` map directly to CSS custom properties
4. Build components using the tokens — don't hardcode colors or spacing