35 lines
1.1 KiB
Markdown
35 lines
1.1 KiB
Markdown
|
# 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
|