Style Guide

Color

An overview of the color palette used in this template

Primary

This color is used for interactive important elements like Buttons, links

100
500
900

Grayscale

Gray tones are the essence of the UI and it will be used for text or cards

100
300
900

Base

Base color used for the background color of sections, cards

Main Background
Additional background
Border

Typography

A responsive typography scale that excels across all breakpoints

Heading 1

Pack my box with five dozen liquor jugs

Heading 2

Bright vixens jump, dozy fowl quack

Heading 3

John quickly extemporized five tow bags

Heading 4

Viewing quizzical abstracts mixed up hefty jocks

Heading 5

My girl wove six dozen plaid jackets before she quit

Heading 6

Monsieur jack, vous dactylographiez bien mieux que votre ami wolf

Body

This web component serves as the main content of a webpage, providing detailed information and paragraphs of text. It typically uses a standard font size and style, ensuring readability and easy comprehension for the audience.

Caption

A caption web component is designed to accompany images, illustrations, or media elements on a webpage

Sub Title

This is a subtitle

Quote

Success is not final, failure is not fatal: it is the courage to continue that counts.

The pursuit of knowledge is an endless journey, a path where questions beget answers and answers beget more questions

Big

A big font web component features large and prominent text, making it a focal point of the webpage’s design.

Small

It is designed to convey information that is secondary in importance and doesn’t require the same level of emphasis as larger text elements.

Components

A selection of widgets as a testament to the power of color and typography

Button In Dark Background

A selection of widgets as a testament to the power of color and typography

Button In Brand Color Background

A selection of widgets as a testament to the power of color and typography

Form

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.