BASE SYSTEM ✦ VERSION 1.0

Base Style Guide

The Base System is a Visual Development Framework created for both designers and developers, aimed at helping them create clean, optimized, and scalable Webflow projects. It offers a set of standardized, reusable classes and layout frameworks that simplify the process of building enterprise-level websites and products that are easily understood by everyone on the team.

Global HTML Tags

H1 Heading

The quick brown fox...

H2 Heading

The quick brown fox...

H3 Heading

The quick brown fox...

H4 Heading

The quick brown fox...

H5 Heading

The quick brown fox...

H6 Heading

The quick brown fox...

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Unordered List

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Ordered List

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Headings

Display

The quick brown fox...

H1 Heading

The quick brown fox...

H2 Heading

The quick brown fox...

H3 Heading

The quick brown fox...

H4 Heading

The quick brown fox...

H5 Heading

The quick brown fox...

H6 Heading

The quick brown fox...

Paragraph

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph X Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Label

Label Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Label Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Label Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Label X Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Subheading

Subheading Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Subheading Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Subheading Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Overline

Overline Large

Lorem ipsum dolor sit amet

Overline Regular

Lorem ipsum dolor sit amet

Overline Small

Lorem ipsum dolor sit amet

Caption

Caption Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Colors

Text Color Black

Text Color Black

Text Color Gray 950

Text Color Gray 950

Text Color Gray 900

Text Color Gray 900

Text Color Gray 800

Text Color Gray 800

Text Color Gray 700

Text Color Gray 700

Text Color Gray 600

Text Color Gray 600

Text Color Gray 500

Text Color Gray 500

Text Color Gray 400

Text Color Gray 400

Text Color Gray 300

Text Color Gray 300

Text Color Gray 200

Text Color Gray 200

Text Color Gray 100

Text Color Gray 100

Text Color Gray 50

Text Color Gray 100

Text Color White

Text Color White

Text Weights

Text Weight Bold

Text Weight Bold

Text Weight Semibold

Text Weight Semibold

Text Weight Medium

Text Weight Medium

Other

Text Align Center

Text Align Center

Text Link Primary

Text Link Secondary

Sections

Section X Large

Section Large

Section Regular

Section Small

Section X Small

Containers

Container X Large

Container Large

Container Regular

Container Small

Container X Small

Spacing (Columns)

Column X Large

Column Large

Column Regular

Column Small

Column X Small

Column Tiny

Column

Column Left

Column Center

Column Space Between

Spacing (Rows)

Row X Large

Row Large

Row Regular

Row Small

Row X Small

Row Tiny

Row

Row Space Between

Max Widths

Max Width Large

Max Width Regular

Max Width Small

Grids

Grid Four Column

Grid Three Column

Grid Two Column

Title Wrappers

Title Center X Large

Title Center Large

Title Center

Title Center Small

Title Grid

Title Grid Small

Title Left

Utility Classes

Hide

Hide Tablet

Hide Landscape

Hide Mobile

Code Embed

Relative

Buttons

Button Primary

Button Primary Center

Button Secondary Large

Button Secondary

Button Secondary Small

Button Outline Large

Button Outline

Button Outline Small

Button Ghost Large

Button Ghost

Button Ghost Small

Button Link Large

Button Link

Button Link Small

Icon Buttons

Icon Button Primary

Icon Button Secondary

Icon Button Outline

Icon Button Ghost

Icons

Icon

Icon X Large

Icon Large

Icon Regular

Icon Small

Icon X Small

Badges

Badge Small

Badge

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Images

Image Cover

Dividers

Divider Gray 200

Divider Gray 100

Background Colors

Background White

Background Black

Background Gray 100

Background Gray 200

©2025 Tous droits réservés.

Panno 583 Rue De La Juine 45160 OLIVET