Style Guide

Use this style guide to see common components at a glance.

Revenir en arrière

Logo du site

Logo officiel du site internet et de marque.

Logo principal - Header + footer

Autre(s) logo

Toggle Dark Mode

Changer la couleur du site.
Emplacement : Footer

Colors

Palette de couleurs du site.

Primary Color
rgb(237, 193, 0)

Btn primary Color
rgb(255 223 81)

Btn primary Hover
rgba(255, 236, 163, 1)

Dark Color
rgb(17, 17, 17)

Paragraph Color
rgb(137, 138, 143)

Border Color
rgb(69, 69, 69)

Placeholder Color
rgb(24, 27, 33)

Background Color
Light : rgb(255, 255, 255)
Dark : rgb(25, 30, 33)

Secondary Color
rgb(85, 179, 48)

Pusle Color
rgb(99, 202, 109)

Light Color
rgb(255, 255, 255)

Paragraph Alt
Pas utilisé

Border Alt Color
Pas utilisé

Placeholder Alt
Pas utilisé

Background Alt
Pas utilisé

Background Alt 2
Plus utilisé

Background Alt 3
Light : rgb(247, 247, 242)
Dark : rgb(37, 42, 46)

Tertiary Color
Pas utilisé

Black Color
rgb(0, 0, 0)

White Color
rgb(255, 255, 255)

Success Color
rgb(56, 161, 115)

Warning Color
rgb(214, 158, 46)

Error Color
rgb(229, 62, 62)

success Light
Pas utilisé

Warning Light
Pas utilisé

Error Light color
rgb(255, 245, 249)

Extra Color-1
rgb(249, 250, 251)

Extra Color-2
rgb(243, 244, 246)

Extra Color-3
rgb(255, 255, 255)

Extra Color-4
rgb(255, 255, 255)

Typography

Titres, corps et autres éléments de texte courants.

Police en place:
- Titres : [ Inter ]
- Paragraphe : [ system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" ]

Heading H1

Heading h2

Heading H3

Heading H4

Heading H5

Heading H6

Text double extra large

Text extra large

Text large

Text base

Text small

Text extra small

Text underline

Text hover-underline

Text uppercase

text capitalize

Text Lowercase

Text font-normal

Text font-medium

Text font-semibold

Text font-bold

Avatars

Styles d'avatars pour présenter les équipes / membres / etc.

Avatar small

Avatar normal

Avatar large

Avatar extra large

Icons

Icons de l'interface - Style des icons "Font Awesome" ou "Lunearicons"

Icon xl Primary

Icon lg Primary

Icon md Primary

Icon sm Primary

Icon 3xl Light

Icon 2xl Light

Icon xl Light

Icon lg Light

Icon md Light

Icon sm Light

Icon xl Dark

Icon lg Dark

Icon md Dark

Icon sm Dark

Icon lg Paragraph

Icon md Paragraph

Icon sm Paragraph

Icon Solid lg primary

Icon Solid md primary

Icon Solid sm primary

icon solid lg Light

icon solid md Light

Icon Solid sm Light

icon solid lg Light
background-color: var(--success-light-color);
border: 1px solid var(--success-light-color);
padding: 8px;
color: var(--secondary-color);