Couleurs
Base Clair
var(--color-base-light)
Base
var(--color-base)
Base Foncé
var(--color-base-dark)
Contraste Plus Bas
var(--color-contrast-lower)
Contrast Bas
var(--color-contrast-low)
Contrast Moyen
var(--color-contrast-medium)
Contrast Haut
var(--color-contrast-high)
Contrast Plus Haut
var(--color-contrast-higher)
Accent 1 (Rouge)
var(--color-accent-1)
Accent 2 (Rose)
var(--color-accent-2)
Accent 3 (Fushia)
var(--color-accent-3)
Accent 4 (Orange)
var(--color-accent-4)
Accent 5 (Jaune)
var(--color-accent-5)
Accent 6 (Vert)
var(--color-accent-6)
Accent 7 (Aqua)
var(--color-accent-7)
Accent 8 (Turquoise)
var(--color-accent-8)
Accent 9 (Bleu)
var(--color-accent-9)
Accent 10 (Violet)
var(--color-accent-10)
Accent 11 (Lune)
var(--color-accent-11)
Noir
var(--color-black)
Blanc
var(--color-white)
Base Alpha 20%
color-mix(in srgb, var(--color-base) 20%, transparent)
Base Alpha 10%
color-mix(in srgb, var(--color-base) 10%, transparent)
Current Alpha 75%
color-mix(in srgb, currentColor 75%, transparent)
Current Alpha 50%
color-mix(in srgb, currentColor 50%, transparent)
Current Alpha 20%
color-mix(in srgb, currentColor 20%, transparent)
Current Alpha 10%
color-mix(in srgb, currentColor 10%, transparent)
Entity Contrast
var(--bsaweb--entity-colors--contrast)
Entity Base
var(--bsaweb--entity-colors--base)
Typographie
Général
Font Families
Primary (DM Sans)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
DM Sans, system-ui, sans-serif
Secondary (Fractul)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fractul, DM Sans, system-ui, sans-serif
System
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
system-ui, sans-serif
Heading + Body
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium commodo nulla, non fringilla nibh laoreet vel. Curabitur leo libero, mattis vulputate neque quis, euismod malesuada metus. In eget pharetra risus, et tincidunt mi. Vivamus congue, leo ac commodo tristique, mi nibh blandit lacus, a sodales nibh dui sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus blandit leo id urna accumsan porta. Curabitur suscipit augue id porttitor imperdiet. Pellentesque auctor rhoncus pulvinar. Praesent id fringilla nisl, ut commodo risus. Phasellus sollicitudin est nulla, at egestas sapien molestie dapibus.
Typographie
Échelle de tailles
XS (12px)
Lorem ipsum
var(--text-xs)
S (14px)
Lorem ipsum
var(--text-sm)
Base (16px)
Lorem ipsum
var(--text-base)
M (20px)
Lorem ipsum
var(--text-md)
L (24px)
Lorem ipsum
var(--text-lg)
XL (32px)
Lorem ipsum
var(--text-xl)
2XL (36px)
Lorem ipsum
var(--text-2xl)
3XL (40px)
Lorem ipsum
var(--text-3xl)
4XL (48px)
Lorem ipsum
var(--text-4xl)
5XL (52px)
Lorem ipsum
var(--text-5xl)
6XL (64px)
Lorem ipsum
var(--text-6xl)
7XL (80px)
Lorem ipsum
var(--text-7xl)
8XL (96px)
Lorem ipsum
var(--text-8xl)
9XL (128px)
Lorem ipsum
var(--text-9xl)
Fluide SM → Base (14px → 16px)
Lorem ipsum
var(--text-sm-base)
Fluide MD → LG (20px → 24px)
Lorem ipsum
var(--text-md-lg)
Fluide LG → XL (24px → 32px)
Lorem ipsum
var(--text-lg-xl)
Fluide LG → 2XL (24px → 36px)
Lorem ipsum
var(--text-lg-2xl)
Fluide XL → 2XL (32px → 36px)
Lorem ipsum
var(--text-xl-2xl)
Fluide XL → 3XL (32px → 40px)
Lorem ipsum
var(--text-xl-3xl)
Fluide XL → 4XL (32px → 48px)
Lorem ipsum
var(--text-xl-4xl)
Fluide XL → 6XL (32px → 64px)
Lorem ipsum
var(--text-xl-6xl)
Fluide 5XL → 6XL (52px → 64px)
Lorem ipsum
var(--text-5xl-6xl)
Fluide 5XL → 8XL (52px → 96px)
Lorem ipsum
var(--text-5xl-8xl)
Fluide 6XL → 8XL (64px → 96px)
Lorem ipsum
var(--text-6xl-8xl)
Fluide 8XL → 9XL (96px → 128px)
Lorem ipsum
var(--text-8xl-9xl)
Espacements
3XS (4px)
var(--space-3xs)
2XS (8px)
var(--space-2xs)
XS (12px)
var(--space-xs)
S (16px)
var(--space-sm)
M (24px)
var(--space-md)
LG (32px)
var(--space-lg)
XL (48px)
var(--space-xl)
2XL (64px)
var(--space-2xl)
3XL (96px)
var(--space-3xl)
4XL (112px)
var(--space-4xl)
5XL (128px)
var(--space-5xl)
6XL (144px)
var(--space-6xl)
Fluide 3XS → 2XS (4px → 8px)
var(--space-3xs-2xs)
Fluide 2XS → XS (8px → 12px)
var(--space-2xs-xs)
Fluide XS → SM (12px → 16px)
var(--space-xs-sm)
Fluide SM → MD (16px → 24px)
var(--space-sm-md)
Fluide MD → LG (24px → 32px)
var(--space-md-lg)
Fluide LG → XL (32px → 48px)
var(--space-lg-xl)
Fluide XL → 2XL (48px → 64px)
var(--space-xl-2xl)
Fluide 2XL → 3XL (64px → 96px)
var(--space-2xl-3xl)
Fluide 3XL → 4XL (96px → 112px)
var(--space-3xl-4xl)
Fluide 4XL → 5XL (112px → 128px)
var(--space-4xl-5xl)
Fluide 5XL → 6XL (128px → 144px)
var(--space-5xl-6xl)
Fluide 2XL → 5XL (64px → 128px)
var(--space-2xl-5xl)
Fluide 3XL → 6XL (96px → 144px)
var(--space-3xl-6xl)
Marge des conteneurs X (24px)
var(--container-margin-x)
Boutons
Images par défaut
BSA Web UI
arrow-right
arrow-left
close
menu
plus
minus
Font Awesome – Light
location-dot
mobile-screen-button
Marques
facebook
flickr
google
instagram
linkedin
mail
pinterest
snapchat
spotify
twitch
twitter
vimeo
wordpress
youtube
Marques en couleur
facebook
instagram
twitter
Big Sharp
book
arrow
globe
pen
education
light
Brush
people-graduation
motion
illustration
comics
concept-art
check
flag-goals
document-list-check
dashboard-composition-year
preparatory-years
System
menu
close-cross
dashboard
chevron-right
filters