Specimen 01

Design System — Starter

A framework-free component set: plain HTML, Tailwind v4 utilities, and native Web Components for anything with state. Every token on this page is defined once in src/styles/theme.css.

🎨 Colors

Couleurs utilisées dans l’élaboration du site

Couleurs GH

Colors/GH/Blue-Cyan

BLUE CYAN

500

RGB 0, 111, 255
HEX 006FFF
HSB 214, 100, 100
50
100
200
300
400
500
600
700
800
900
950
300

Blue Royal

950

Blue Ciel

Colors/GH/Blue-Iris

BLUE IRIS

500

RGB 15, 10, 48
HEX 0F0A30
HSB 248, 79, 19
50
100
200
300
400
500
600
700
800
900
950

Colors/GH/Blue-Iris

BLANC

White

RGB 255, 255, 255
HEX FFFFFF
HSB 0, 0, 100
50
100
200
300
400
500
600
700
800
900
White

Gradient

DÉGRADÉ

66deg, #000 9.07%, #0F3E7A 97.16%

Couleurs System

Colors/GH/Red

Rouge

400

RGB 0, 111, 255
HEX 006FFF
HSB 214, 100, 100
50
100
200
300
400
500
600
700
800
900
950

Colors/GH/Orange

Orange

400

RGB 15, 10, 48
HEX 0F0A30
HSB 248, 79, 19
50
100
200
300
400
500
600
700
800
900
950

Colors/GH/Vert

Vert

200

RGB 255, 255, 255
HEX FFFFFF
HSB 0, 0, 100
50
100
200
300
400
500
600
700
800
900
950

✏️Typography

Typographies utilisées dans l’élaboration du site

HEADLINES

Aa

GUYHOQUET

Desktop

HEADLINE H0 3XL

Bold 32px / 120% / 0%

class: headline-h0

HEADLINE H1 2XL

Bold 24px / 120% / 0%

class: headline-h1

HEADLINE H2 XL

Bold 20px / 120% / 0%

class: headline-h2

HEADLINE H3 MD

Bold 16px / 120% / 0%

class: headline-h3

HEADLINE H4 SM

Bold 14px / 120% / 0%

class: headline-h4

Mobile

HEADLINE H0 3XL

Bold 20px / 120% / 0%

class: headline-h0

HEADLINE H1 2XL

Bold 16px / 120% / 0%

class: headline-h1

HEADLINE H2 XL

Bold 14px / 120% / 0%

class: headline-h2

BODY

Aa

Montserrat

Desktop

Body md 1

Bold 16px / 120% / 0%

class: body-md-1

Body md 2

Medium 16px / 150% / 0%

class: body-md-2

Body sm 1

Bold 14px / 120% / 0%

class: body-sm-1

Body sm 2

Medium 14px / 120% / 0%

class: body-sm-2

Body xs 1

Bold 12px / 120% / 0%

class: body-xs-1

Body xs 1

Medium 12px / 120% / 0%

class: body-xs-2

Mobile

Body md 1

Bold 16px / 120% / 0%

class: body-md-1

Body md 2

Medium 16px / 150% / 0%

class: body-md-2

Body sm 1

Bold 14px / 120% / 0%

class: body-sm-1

Body sm 2

Medium 14px / 120% / 0%

class: body-sm-2

Body xs 1

Bold 12px / 120% / 0%

class: body-xs-1

Body xs 1

Medium 12px / 120% / 0%

class: body-xs-2

SPACING

2xs / 4px
xs / 8px
sm / 12px
md / 16px
lg / 24px
xl / 32px
2xl / 48px

💡Iconography

Typographies utilisées dans l’élaboration du site

Arrows

arrow-left-line arrow-left-up-line arrow-up-line arrow-right-up-line arrow-right-line arrow-right-down-line arrow-down-line arrow-reset arrow-expand-diagonal-line arrow-collapse-diagonal-line arrow-down-s-line arrow-up-s-line arrow-down-double-line

User & IA

user-line team-line robot robot-2-fill

Menu

menu-parcours menu-presentiel menu-battles menu-classement menu-trophy menu-thematiques menu-stat menu-attestation menu-list-view-fill menu-presentation-line menu-menu

Système

align-left list-check filter search send lock money star-line star-fill verified-badge-fill checkbox-fill checkbox-line close-circle-fill close-line exclamation-point aide checkbox-blank-line toggle-line toggle-fill edit calendar-line map-pin-line timer time-line crown-fill logout filter add building faq minus

Media

mic-line youtube-line notification

LOGO

GH logo blue
GH logo white

Components

Button

static markup

Card

static markup

Input

static markup

Dropdown

web component