Welcome To The Preview!

Discover a streamlined SCSS structure designed for modern web development.

Colors And Their Variables

Here you see the colors from primary to quinary, and also black and white.
Change the values of the variables and reload the page to view the adjustments.

$clr-primary

$clr-secondary

$clr-tertiary

$clr-quaternary

$clr-quinary

$clr-black

$clr-primaryLight

$clr-secondaryLight

$clr-tertiaryLight

$clr-quaternaryLight

$clr-quinaryLight

$clr-white

This is the Primary Heading

This is the most important heading in our content hierarchy. It sets the tone and establishes the main topic for the entire page. All subsequent headings and content will stem from this primary topic.

The Secondary Heading, H2

The secondary heading offers a sub-topic or a related topic to the primary heading. It provides a more in-depth dive into a specific aspect of the main topic, guiding readers through the flow of content.

Heading 3 (Tertiary Heading)

This tertiary heading breaks down the secondary topic further, giving more specific details or subdividing the information. This heading helps organize content and gives structure to the information presented.

Quaternary Heading H4

The quaternary heading offers an even more granular look at the topic, possibly addressing minor points or specific examples related to the tertiary topic. It serves as a tool to organize and present detailed information.

Button Components

These are the button components wrapped in a grid.
To adjust their appearance, edit the variables accordingly