Audioengine

Style Guide

This page outlines the current styles and standards for the Audioengine website.

Colors

An overview of this site's brand colors.

Colors & Shades

Transparencies

action

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

primary

Primary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

secondary

Secondary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

accent

Accent

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

base

Base

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

shade

Shade

Ultra Light

Light

Medium

Dark

Ultra Dark

primary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

secondary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

accent

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

base

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

shade

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.

Headings

H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)

Heading 5 Regular

Heading Medium

Heading 5 Bold

H6 (--xs)

Heading 6 Regular

Heading 6 Medium

Heading 6 Bold

Body Text

BODY TEXT (--m)

Text m Regular

Text m Medium

Text m Bold

SMALL TEXT (--s)

Text s Regular

Text s Medium

Text s Bold

XTRA SMALL TEXT (--xs)

Text xs Regular

Text xs Medium

Text xs Bold

Examples

Heading 1 (H1)

This is large text. 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.

Heading 2 (H2)

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.

Heading 3 (H3)

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.

Heading 4 (H4)

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.

Heading 5 (H5)

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.

Heading 6 (H6)

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.

Buttons

Solid and outline buttons are available across all color sets including black and white.

BUTTONS ON LIGHT BACKGROUND

Action
Action Outline
Primary
Primary Outline
Secondary Secondary Outline
Accent
Accent Outline Base
Base Outline

BUTTONS ON DARK BACKGROUND

Action
Action Outline
Primary
Primary Outline
Secondary Secondary Outline
Accent
Accent Outline White
White Outline

BUTTON SCALE

btn--primary / btn--xs

btn--primary / btn--s

btn--primary / btn--m

btn--primary / btn--l

btn--primary / btn--xl

btn--primary / btn--xxl

Widths

There are six values you can use to control element width. They're automatically responsive.

--width-xs

--width-s

--width-m

--width-l

--width-xl

--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.

None

XS

S

M

L

XL

XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.

--space-xs

--space-s

--space-m

--space-l

--space-xl

--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.

Box shadow M

Box shadow L

Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.

Rounded XS

Rounded S

Rounded M

Rounded L

Rounded XL

Rounded XXL