mobilizon-ui-ux/design-extract/components/components.md
2026-06-03 11:43:07 +02:00

1.1 KiB

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