Style Guide

TYPOGRAPHY — HEADINGS (u-h1 → u-h6, OSWALD)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

TYPOGRAPHY — BODY & LABEL (INTER)

Body Texte (u-body) — Inter 18px / 1.47. Le réseau SATEP accompagne ses clients partout en France avec des solutions adaptées à chaque métier. Ce paragraphe montre le style de texte courant utilisé sur l'ensemble du site.

Body Texte Small (u-body-small) — Inter 14px / 1.36. Texte secondaire utilisé pour les mentions, descriptions courtes et contenus d'appui.

LABEL (u-label) — INTER 12PX / 1.36

BACKGROUND COLORS (u-bg-*)

White · #FFFFFF

u-bg-white

Off White · #F5F7FF

u-bg-off-white

Gris · #D0CEC1

u-bg-gris

Soft Blue · #3883F6

u-bg-soft-blue

Blue Mid · #005BD2

u-bg-blue-mid

Blue Premium · #0F1134

u-bg-blue-premium

Black · #191918

u-bg-black

Rouge · #FF592A

u-bg-rouge

TEXT COLORS (u-text-*)

Texte coloré

u-text-white

Texte coloré

u-text-off-white

Texte coloré

u-text-gris

Texte coloré

u-text-soft-blue

Texte coloré

u-text-blue-mid

Texte coloré

u-text-blue-premium

Texte coloré

u-text-black

Texte coloré

u-text-rouge

FONT WEIGHTS (u-text-[weight])

Le réseau SATEP

u-text-400 · Regular

Le réseau SATEP

u-text-500 · Medium

Le réseau SATEP

u-text-600 · Semibold

Le réseau SATEP

u-text-700 · Bold

TEXT ALIGN (u-text-[align])

Le réseau SATEP

u-text-left

Le réseau SATEP

u-text-center
‍

Le réseau SATEP

u-text-right

TEXT DECORATION (u-text-[decoration])

Le réseau SATEP

u-text-underline

Le réseau SATEP

u-text-strikethrough

Le réseau SATEP

u-text-italic

Le réseau SATEP

u-text-uppercase

TEXT DECORATION (u-text-[decoration])

Le réseau SATEP

desktop-only

Le réseau SATEP

tablet-down-only

Le réseau SATEP

tablet-only

Le réseau SATEP

tablet-up-only

Le réseau SATEP

mobile-only

SIZES (u-w-[sizes])

u-w-18

u-w-24

u-w-48

u-w-56

u-w-64

u-w-88

u-w-105

u-w-120

u-w-160

u-w-200

u-w-full
‍

u-max-md
‍

u-max-lg
‍

COMPONENT — NAVBAR

COMPONENT — BUTTON (VARIANTS: WHITE / BLUE MID / BLUE PREMIUM / ROUGE)

Nous rejoindre

COMPONENT — FOOTER

Shape — u-bg-shape

A drop-in slanted shape built from a CSS mask. Put u-bg-shape-wrap on the parent, then stack u-bg-shape plus a u-bg-* colour (and optionally u-bg-shape-extrude / u-bg-shape-rotate) on a child div.

Gourdon

Chauffage & plomberie

Gourdon

Chauffage & plomberie

Gourdon

Chauffage & plomberie

Gourdon

Chauffage & plomberie

Spacing — padding & margin utilities

Single-property helper classes built on the Spacer scale. Each class links to a Spacer/* size variable, so editing a token updates every utility at once. Compound classes set physical longhand properties: x = inline (left + right), y = block (top + bottom), no axis = all four sides. Margin classes (u-m*) mirror the padding set exactly.

xxs8px · --_layout---spacer--xxs

xs16px · --_layout---spacer--xs

s24px · --_layout---spacer--s

m50px · --_layout---spacer--m

l72px · --_layout---spacer--l

xl120px · --_layout---spacer--xl

xxl160px · --_layout---spacer--xxl

Class reference

Padding · u-p*

u-pt-*padding-top

u-pb-*padding-bottom

u-pl-*padding-left

u-pr-*padding-right

u-px-*inline · left + right

u-py-*block · top + bottom

u-p-*all four sides

Margin · u-m*

u-mt-*margin-top

u-mb-*margin-bottom

u-ml-*margin-left

u-mr-*margin-right

u-mx-*inline · left + right

u-my-*block · top + bottom

u-m-*all four sides

Replace * with a size: xxs (8) · xs (16) · s (24) · m (50) · l (72) · xl (120) · xxl (160) px.

Spacer scale

Applied examples — keep-alive

Every spacing utility class is applied to one box below, so Webflow’s “Clean up unused styles” will never purge them. Padding shows as the orange band around the dark dot; margin shows as the box offset inside its white frame.

Padding · sides

u-pt-xxs

u-pt-xs

u-pt-s

u-pt-m

u-pt-l

u-pt-xl

u-pt-xxl

u-pb-xxs

u-pb-xs

u-pb-s

u-pb-m

u-pb-l

u-pb-xl

u-pb-xxl

u-pl-xxs

u-pl-xs

u-pl-s

u-pl-m

u-pl-l

u-pl-xl

u-pl-xxl

u-pr-xxs

u-pr-xs

u-pr-s

u-pr-m

u-pr-l

u-pr-xl

u-pr-xxl

Padding · inline / block / all

u-px-xxs

u-px-xs

u-px-s

u-px-m

u-px-l

u-px-xl

u-px-xl-s

u-px-xxl-s

u-px-xxl

u-py-xxs

u-py-xs

u-py-s

u-py-m

u-py-l

u-py-xl

u-py-xxl

u-p-xxs

u-p-xs

u-p-s

u-p-m

u-p-l

u-p-xl

u-p-xxl

Margin · sides

u-mt-xxs

u-mt-xs

u-mt-s

u-mt-m

u-mt-l

u-mt-xl

u-mt-xxl

u-mb-xxs

u-mb-xs

u-mb-s

u-mb-m

u-mb-l

u-mb-xl

u-mb-xxl

u-ml-xxs

u-ml-xs

u-ml-s

u-ml-m

u-ml-l

u-ml-xl

u-ml-xxl

u-mr-xxs

u-mr-xs

u-mr-s

u-mr-m

u-mr-l

u-mr-xl

u-mr-xxl

Margin · inline / block / all

u-mx-xxs

u-mx-xs

u-mx-s

u-mx-m

u-mx-l

u-mx-xl

u-mx-xxl

u-my-xxs

u-my-xs

u-my-s

u-my-m

u-my-l

u-my-xl

u-my-xxl

u-m-xxs

u-m-xs

u-m-s

u-m-m

u-m-l

u-m-xl

u-m-xxl

Thank you for your submission!

Oops! Something went wrong while submitting the form.