Design Guide

A complete guide to all Oxyelements modular elements.

Typography

Headings, body and other

common text elements.

Display one

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

Label

Text Muted

Subheading

Small text

Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum. Integer et augue id enim vestibulum ullamcorper

Larger text – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Colors

A complete color swatch

used to color all interface

elements on the website.

Primary 1
#333333

Primary hover
#243029

Gray
#333333

Dimgray
#696969

Dark Gray
#111112

Black
#000000

Light Grey
#f7f7f7

White
#ffffff

Success
#51d37e

Review star
#f9bb00

Warning
#e67a00

Danger
#fc4343

Spacing and border radius

A complete spacing guide

Selectors for padding, margin

and space below items

Padding 1x

Padding 2x

Padding 3x

Space 1x

Space 2x

Space 3x

Space 4x

border-radius

Space Bottom 1x

Space Bottom 2x

Space Bottom 3x

Space Bottom 4x

Buttons

Button styles and size variations

use .btn for size and use primary,

outline or other selectors for styling

Button Primary Button small Button Outline

Button White

Icons

Common interface

and social network iconography

icon-1x

icon-2x

icon-3x

icon-4x

Image mute

image-muted is grayscale.

good for logos

Normal image

.image-muted (gray scale 100%)

Shadow

If you need an element to stand out

you can use the .shadow class

.shadow