Visual Box

Style Guide

This page outlines the current styles and standards for the Visual Box website.

Colors

An overview of this site's brand colors.

Action

Action
rgba(0, 0, 0, 0)

Ultra Light
rgba(0, 0, 0, 0)

Light
rgba(0, 0, 0, 0)

Medium
rgba(0, 0, 0, 0)

Dark
rgba(0, 0, 0, 0)

Ultra Dark
rgba(0, 0, 0, 0)

Comp
rgba(0, 0, 0, 0)

Primary

Primary
rgba(0, 0, 0, 0)

Ultra Light
rgba(0, 0, 0, 0)

Light
rgba(0, 0, 0, 0)

Medium
rgba(0, 0, 0, 0)

Dark
rgba(0, 0, 0, 0)

Ultra Dark
rgba(0, 0, 0, 0)

Comp
rgba(0, 0, 0, 0)

Secondary

Secondary
rgba(0, 0, 0, 0)

Ultra Light
rgba(0, 0, 0, 0)

Light
rgba(0, 0, 0, 0)

Medium
rgba(0, 0, 0, 0)

Dark
rgba(0, 0, 0, 0)

Ultra Dark
rgba(0, 0, 0, 0)

Comp
rgba(0, 0, 0, 0)

Accent

Accent
rgba(0, 0, 0, 0)

Ultra Light
rgba(0, 0, 0, 0)

Light
rgba(0, 0, 0, 0)

Medium
rgba(0, 0, 0, 0)

Dark
rgba(0, 0, 0, 0)

Ultra Dark
rgba(0, 0, 0, 0)

Comp
rgba(0, 0, 0, 0)

Base

Base
rgba(0, 0, 0, 0)

Ultra Light
rgba(0, 0, 0, 0)

Light
rgba(0, 0, 0, 0)

Medium
rgba(0, 0, 0, 0)

Dark
rgba(0, 0, 0, 0)

Ultra Dark
rgba(0, 0, 0, 0)

Comp
rgba(0, 0, 0, 0)

Shade

Shade
rgba(0, 0, 0, 0)

Ultra Light
rgba(0, 0, 0, 0)

Light
rgba(0, 0, 0, 0)

Medium
rgba(0, 0, 0, 0)

Dark
rgba(0, 0, 0, 0)

Ultra Dark
rgba(0, 0, 0, 0)

Action

Trans 10
rgba(0, 0, 0, 0)

Trans 20
rgba(0, 0, 0, 0)

Trans 40
rgba(0, 0, 0, 0)

Trans 60
rgba(0, 0, 0, 0)

Trans 80
rgba(0, 0, 0, 0)

Trans 90
rgba(0, 0, 0, 0)

Primary

Trans 10
rgba(0, 0, 0, 0)

Trans 20
rgba(0, 0, 0, 0)

Trans 40
rgba(0, 0, 0, 0)

Trans 60
rgba(0, 0, 0, 0)

Trans 80
rgba(0, 0, 0, 0)

Trans 90
rgba(0, 0, 0, 0)

Secondary

Trans 10
rgba(0, 0, 0, 0)

Trans 20
rgba(0, 0, 0, 0)

Trans 40
rgba(0, 0, 0, 0)

Trans 60
rgba(0, 0, 0, 0)

Trans 80
rgba(0, 0, 0, 0)

Trans 90
rgba(0, 0, 0, 0)

Accent

Trans 10
rgba(0, 0, 0, 0)

Trans 20
rgba(0, 0, 0, 0)

Trans 40
rgba(0, 0, 0, 0)

Trans 60
rgba(0, 0, 0, 0)

Trans 80
rgba(0, 0, 0, 0)

Trans 90
rgba(0, 0, 0, 0)

Base

Trans 10
rgba(0, 0, 0, 0)

Trans 20
rgba(0, 0, 0, 0)

Trans 40
rgba(0, 0, 0, 0)

Trans 60
rgba(0, 0, 0, 0)

Trans 80
rgba(0, 0, 0, 0)

Trans 90
rgba(0, 0, 0, 0)

Shade

Trans 10
rgba(0, 0, 0, 0)

Trans 20
rgba(0, 0, 0, 0)

Trans 40
rgba(0, 0, 0, 0)

Trans 60
rgba(0, 0, 0, 0)

Trans 80
rgba(0, 0, 0, 0)

Trans 90
rgba(0, 0, 0, 0)

Success

Success
rgba(0, 0, 0, 0)

Success Light
rgba(0, 0, 0, 0)

Success Dark
rgba(0, 0, 0, 0)

Success Hover
rgba(0, 0, 0, 0)

Danger

Danger
rgba(0, 0, 0, 0)

Danger Light
rgba(0, 0, 0, 0)

Danger Dark
rgba(0, 0, 0, 0)

Danger Hover
rgba(0, 0, 0, 0)

Warning

Warning
rgba(0, 0, 0, 0)

Warning Light
rgba(0, 0, 0, 0)

Warning Dark
rgba(0, 0, 0, 0)

Warning Hover
rgba(0, 0, 0, 0)

info

Info
rgba(0, 0, 0, 0)

Info Light
rgba(0, 0, 0, 0)

Info Dark
rgba(0, 0, 0, 0)

Info Hover
rgba(0, 0, 0, 0)

Buttons

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

BUTTONS ON LIGHT BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

BUTTONS ON DARK BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Button scale
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

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 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading 5 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.

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