colorful style guide

Components designed to fit nicely together

Color palette

Primary

Secondary

Info

Light

Dark

Typography

Display

Heading

Lead paragraph

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquoute

Someone famous in My memories

Buttons

Primary Secondary Info Light Dark Link
Primary Secondary Info Light Dark
Toggle
Btn 1 Btn 2 Btn 3
Dropdown header
Option 1 Option 2 Disabled option
Separated link
Action Another action Something else here
Separated link
BadgeNew! Icon Active Disabled Small Regular Large

Navs and components

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit, sed do eiusmod tempor incididunt.
50%

Forms

We'll never share your email with anyone else.
@
Please provide a valid input.

Pictures

Card image
Card image
Card image

Cards

A Card

Some quick example text to build on the card title and make up the bulk of the card's content.

A Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.

A Card footer
Card image

Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Image Overlay

Card image

Listing

# Striped table bordered
1 example one
2 example two
3 example three

Navigation

Sections

Parallax

Dark filter