Guide de style

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 2XL → LG (36px → 24px)

Lorem ipsum

var(--text-2xl-lg)

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 → SM (24px → 16px)

var(--space-md-sm)

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
chevron-left
dashboard
plus
chevron-right
minus
big-chevron-right
filters