theo/mobilizon-ui-ux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mobilizon-ui-ux/design-extract/health-report.md
theopaolo 66f33e2bfe init commit
2026-06-03 11:43:07 +02:00

374 lines
9.9 KiB
Markdown
Raw Blame History

# CSS Health Report
> Source: https://mobilizon.fr
> Generated: 2026-05-25
## Overview
| Metric | Value |
| ---------------------- | -------------------------------------- |
| Total tokens extracted | 79 |
| Unique values | 55 |
| Duplicate tokens | 24 |
| Duplication ratio | 30% |
| **Health grade** | **D** — Poor — significant duplication |
## Page Stats
| Metric | Value |
| --------------------- | ----- |
| Elements | 473 |
| External stylesheets | 8 |
| Inline style elements | 0 |
| Style rules | 1907 |
**Selectors:** 2050 class, 6 ID, 123 type, 3 universal, 221 attribute
## Colors by Usage
### Background colors: 6
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(255, 213, 153)` | 6 |
| `rgb(255, 255, 255)` | 5 |
| `rgb(248, 113, 113)` | 2 |
| `rgb(239, 238, 244)` | 1 |
| `rgb(30, 125, 151)` | 1 |
| `rgb(71, 68, 103)` | 1 |
### Text colors: 10
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(0, 0, 0)` | 141 |
| `rgb(60, 55, 110)` | 46 |
| `rgb(255, 255, 255)` | 23 |
| `rgb(63, 63, 70)` | 6 |
| `rgb(255, 213, 153)` | 4 |
| `rgb(156, 163, 175)` | 2 |
| `rgb(55, 65, 81)` | 2 |
| `rgb(31, 41, 55)` | 1 |
| `rgb(75, 85, 99)` | 1 |
| `rgb(54, 54, 54)` | 1 |
### Border colors: 4
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(229, 231, 235)` | 210 |
| `rgb(255, 213, 153)` | 6 |
| `rgb(243, 244, 246)` | 4 |
| `rgb(30, 125, 151)` | 3 |
### Fill colors: 3
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(60, 55, 110)` | 12 |
| `rgb(255, 255, 255)` | 4 |
| `rgb(156, 163, 175)` | 2 |
## Font Info
### system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif
**font-size:**
| Size | Occurrences |
| ------- | ----------- |
| 16px | 196 |
| 18px | 12 |
| 24px | 6 |
| 20px | 5 |
| 12px | 2 |
| 48px | 1 |
| 10.8px | 1 |
| 15.36px | 1 |
| 10px | 1 |
| 8.4px | 1 |
**font-weight:**
| Weight | Occurrences |
| ------ | ----------- |
| 400 | 182 |
| 600 | 22 |
| 700 | 14 |
| 500 | 7 |
| 800 | 1 |
**line-height:**
| Line height | Occurrences |
| ----------- | ----------- |
| 24px | 197 |
| 28px | 14 |
| 32px | 6 |
| 16px | 2 |
| 36px | 2 |
| 9.6px | 2 |
| 48px | 1 |
| 13.44px | 1 |
| 9px | 1 |
### ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
**font-size:**
| Size | Occurrences |
| ---- | ----------- |
| 16px | 1 |
**font-weight:**
| Weight | Occurrences |
| ------ | ----------- |
| 400 | 1 |
**line-height:**
| Line height | Occurrences |
| ----------- | ----------- |
| 24px | 1 |
## Media Queries
| Query | Rules |
| ------------------------------ | ----- |
| `(min-width: 1024px)` | 124 |
| `(min-width: 768px)` | 113 |
| `(min-width: 1280px)` | 100 |
| `(min-width: 640px)` | 24 |
| `(forced-colors: active)` | 3 |
| `(min-width: 1536px)` | 1 |
| `(prefers-color-scheme: dark)` | 1 |
## Brand Assets
### Logo
| Property | Value |
| ---------- | --------------------- |
| Type | svg |
| Dimensions | 160 x 30.16px |
| Links to | https://mobilizon.fr/ |
### Favicons & Meta Images
| Type | URL | Sizes |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- |
| apple-touch-icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png | 152x152 |
| icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png | 152x152 |
| mask-icon | https://mobilizon.fr/img/icons/safari-pinned-tab.svg | - |
| og:image | https://mobilizon.fr/media/868b694cf69b3aa27114ddb9289e9cc4a67c28850d29b8f5b49213478ec9c1fa.png?name=aldil_lyon%27s%20avatar.png | - |
| favicon | https://mobilizon.fr/favicon.ico | - |
## Color Formats
| Token | Hex | LCH | OKLCH |
| ------------------------- | --------- | -------------------------- | ---------------------------- |
| `color.neutral.100` | `#3f3f46` | `lch(26.89% 4.56 291.08)` | `oklch(37.03% 0.012 285.84)` |
| `color.neutral.100-2` | `#000000` | `lch(0.00% 0.00 0.00)` | `oklch(0.00% 0.000 0.00)` |
| `color.brand.mercury` | `#e5e7eb` | `lch(91.60% 2.17 271.44)` | `oklch(92.76% 0.006 264.60)` |
| `color.brand.astronaut` | `#3c376e` | `lch(26.21% 35.95 299.35)` | `oklch(37.09% 0.092 285.12)` |
| `color.action.jelly-bean` | `#1e7d97` | `lch(48.48% 27.74 231.24)` | `oklch(54.88% 0.092 221.11)` |
| `color.accent.cherokee` | `#ffd599` | `lch(87.56% 35.81 78.98)` | `oklch(89.53% 0.090 76.06)` |
| `color.accent.sunglo` | `#f87171` | `lch(64.13% 57.61 26.24)` | `oklch(71.06% 0.166 22.22)` |
## Spacing Scale
| Property | Value |
| ---------------- | ----- |
| Base unit | 4px |
| Grid conformance | 84% |
## Border Combinations
| Border | Count | Elements |
| ------------------------------ | ----- | -------- |
| `2px solid rgb(255, 213, 153)` | 24 | section |
| `1px solid rgb(30, 125, 151)` | 12 | button |
| `1px solid rgb(229, 231, 235)` | 4 | img |
## Button Variants (7)
### Suivre
**default:**
- backgroundColor: `rgb(30, 125, 151)`
- color: `rgb(255, 255, 255)`
- padding: `8px 16px`
- borderRadius: `4px`
- border: `1px solid undefined`
- fontSize: `16px`
- fontWeight: `700`
### Passer au contenu principal
**default:**
- color: `rgb(0, 0, 0)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(0, 0, 0) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### Rechercher
**default:**
- color: `rgb(63, 63, 70)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(63, 63, 70) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### Mes groupes
**default:**
- color: `rgb(31, 41, 55)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(31, 41, 55) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### Contact
**default:**
- color: `rgb(0, 0, 0)`
- padding: `8px 16px`
- borderRadius: `4px`
- border: `1px solid rgb(30, 125, 151)`
- fontSize: `16px`
- fontWeight: `600`
### Voir tous
**default:**
- color: `rgb(60, 55, 110)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(60, 55, 110) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### À propos
**default:**
- color: `rgb(255, 255, 255)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(255, 255, 255) undefined 3px`
- fontSize: `18px`
- fontWeight: `400`
## Input Variants (1)
### select
**default:**
- backgroundColor: `rgb(255, 255, 255)`
- color: `rgb(54, 54, 54)`
- border: `2px solid undefined`
- borderRadius: `4px`
- padding: `3px 32px 3px 8px`
- boxShadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- fontSize: `16px`
## Breakpoints
`1536px` -> `1280px` -> `1024px` -> `768px` -> `640px`
## Duplicate Groups
14 values are defined multiple times:
### `#ffffff` (6x)
- `--cssVar-oruga-primary-invert`
- `--cssVar-oruga-secondary-invert`
- `--cssVar-oruga-success-invert`
- `--cssVar-oruga-info-invert`
- `--cssVar-oruga-danger-invert`
- `--cssVar-oruga-white`
### `#1e7d97` (5x)
- `--color-action-jelly-bean`
- `--cssVar-oruga-primary`
- `--cssVar-oruga-variant-primary`
- `--cssVar-oruga-radio-active-background-color`
- `--cssVar-oruga-switch-checked-background`
### `#000000` (3x)
- `--color-neutral-100-2`
- `--cssVar-oruga-warning-invert`
- `--cssVar-oruga-black`
### `16px` (3x)
- `--typography-fontSize-h4`
- `--typography-lineHeight-0`
- `--spacing-4`
### `4px` (3x)
- `--spacing-1`
- `--borderRadius-sm`
- `--cssVar-oruga-base-border-radius`
### `400` (2x)
- `--typography-fontWeight-regular`
- `--cssVar-oruga-base-font-weight`
### `system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif` (2x)
- `--typography-fontFamily-primary`
- `--cssVar-oruga-base-font-family`
### `48px` (2x)
- `--typography-fontSize-display`
- `--typography-lineHeight-5`
### `24px` (2x)
- `--typography-fontSize-h1`
- `--typography-lineHeight-1`
### `12px` (2x)
- `--typography-fontSize-h5`
- `--spacing-3`
### `32px` (2x)
- `--typography-lineHeight-3`
- `--spacing-5`
### `8px` (2x)
- `--spacing-2`
- `--borderRadius-md`
### `9999px` (2x)
- `--borderRadius-full`
- `--cssVar-oruga-base-border-radius-rounded`
### `white` (2x)
- `--cssVar-oruga-checkbox-background-color`
- `--cssVar-oruga-checkbox-active-background-color`
Reference in a new issue View git blame Copy permalink