Style Guide

Color

Text Color

Default Color

var(--text-strongest)

Strongest Text

var(--text-strongest)

Strongest Text

var(--text-strongest)

Body Text

var(--text-strongest)

Muted text

On dark background / Dark Scheme

var(--text-strongest)

Strongest Text Light

var(--text-strongest)

Strongest Text Light

var(--text-strongest)

Body Text Light

var(--text-strongest)

Muted Text Light

Background Color

Default Color

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

On dark background / Dark Scheme

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Brand Primary Color

Primary

var(--bg-body)

Primary Hover

var(--bg-body)

Primary Dark

var(--bg-body)

Primary Light

var(--bg-body)

Primary 80%

var(--bg-body)

Primary 60%

var(--bg-body)

Primary 40%

var(--bg-body)

Primary 20%

var(--bg-body)

Brand Secondary Color

Secondary

var(--bg-body)

Secondary Hover

var(--bg-body)

Secondary Dark

var(--bg-body)

Secondary Light

var(--bg-body)

Secondary 80%

var(--bg-body)

Secondary 60%

var(--bg-body)

Secondary 40%

var(--bg-body)

Secondary 20%

var(--bg-body)

Static Color

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

System Color

--success

--info

--warning

--danger

Typography

Heading

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

var(--text-strongest)

The quick brown fox jumps over the lazy dog.

Text

var(--text-strongest)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit

var(--text-strongest)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit

var(--text-strongest)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit

Space

Spacing Level

var(--space-2xs)

var(--space-xs)

var(--space-s)

var(--space-m)

var(--space-l)

var(--space-xl)

var(--space-2xl)

var(--space-3xl)

var(--space-4xl)

Contextual Spacing Preview

blue fabric sofa chair near brown wooden pedestal table

Example

Quick preview of contextual spacing based on common content

Button

Section Space Y

var(--section-space-x)

Dedicated space to give some breathspace on top and bottom section.

Section Space X

var(--section-space-x)

Dedicated space on the side of section to prevent the content of touching the edge of screen.

Block Gap

var(--section-space-x)

Dedicated space to give consistent gap between elements blocks (ex: content and media).

Content Gap

var(--section-space-x)

Dedicated space to give consistent gap between heading and the content.

Grid Gap

Grid Gap

var(--section-space-x)

Dedicated space to give consistent gap between repeating items.

Grid Gap

var(--section-space-x)

Dedicated space to give consistent gap between repeating items.

Grid Gap

var(--section-space-x)

Dedicated space to give consistent gap between repeating items.

Component

Button Main

Default

Button MainButton Main with IconButton Main with Icon

On Dark Background

Button Main BrightButton Main Bright with IconButton Main Bright with Icon

Button Subtle

Default

Button SubtleButton Subtle with IconButton Subtle with Icon

On Dark Background

Button Subtle BrightButton Subtle Bright with IconButton Subtle Bright with Icon

Icon Size

--icon-xs

--icon-s

--icon-m

--icon-l

--icon-xl

Icon

Default

Button main icon only

Button subtle icon only

Slider Arrow

On Dark Background

Button main icon only

Button subtle icon only

Slider Arrow Bright

Effects

Border Radius

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Box Shadow

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Background Body

var(--bg-body)

Input & Form

Search Form

Default

On Dark Background

Form

Default

On Dark Background

Subscription Form

Default

On Dark Background

Dropdown

Default

  • Placeholder Select

    • On Dark Background

  • Placeholder Select

    • Post Element

    Breadcrumbs

    Default

    On Dark Background

    Pagination

    Default

    On Dark Background

    Animation

    Animation on Scroll

    Animate on Scroll Primary

    Animate on Scroll Secondary

    Mouse Animation

    Hover Zoom In

    Hover Translate up

    Pressed Zoom Out

    Animation Rotation

    Animation Pulse

    Animaion Jumping