A Noubu^© template built by Cris Ace

Style Guide

An overview of all base components used in Eclore.

Colors

Primaries and grays controlled by the Global Swatch feature.

BG Dark 100
#233a2f

BG Dark 90
#564c3b

BG Dark 80
#f3eee4

BG Dark 70
#f7f2e4

BG Dark 60
#f6f4ee

BG Dark 50
#f6f6f6

White
#ffffff

typography

Headings, body and other common text elements.

Display Heading L | 6.17em

Typography

Display Heading M | 4em

Typography

H1 | 3.56em

Modular
design blocks

H2 | 2.83em

Make your
design workflow

H3 | 22.2em

Faster and
more efficient

H4 | 1.78em

Stylish and
playful layouts

H5 | 1.44em

Perfectly crafted
for your ideal website

H6 | 1.22em

Modular designs

Body Display L | 1.44em

Stylish and playful layouts for beautiful adaptive landings

Body Display M | 1.33em

Stylish and playful layouts for beautiful adaptive landings

Body Display S | 1.22em

Stylish and playful layouts for beautiful adaptive landings

Body L | 1.11em

Stylish and playful layouts for beautiful adaptive landings

Body M | 1em

Stylish and playful layouts for beautiful adaptive landings

Body S | 0.89em

Stylish and playful layouts for beautiful adaptive landings

Uppercase Text Small | 0.89em

Uppercase Text Small

Underline Link | 1.0em

Underlined Link

Buttons

Component, text style and size variations

Main Buttons

Button Interaction

Button Interaction

Button Interaction

Button Interaction

Button Interaction

Button Interaction

Button Interaction

Button Interaction

Primary Button Secondary Button Secondary Button

Forms

General style and state variations for text inputs.

Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Form Selectables

Styling for checkboxes, selects and radios.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.