Brand Colours

▼

#DF0000

Car Keys Red

$brand-primary

#A10000

Car Keys Dark Red

$brand-primary-alt

#F34C4C

Car Keys Light Red

$brand-primary-accent

#FFF

Car Keys White

$brand-secondary

TRANSPARENT

Car Keys Transparent

$brand-secondary-alt

TRANSPARENT

Car Keys Light Transparent

$brand-secondary-accent

#19B6CD

Car Keys Blue

$brand-tertiary

Neutral Colours

▼

#383838

Car Keys Black

$brand-black

#FFF

Car Keys White

$brand-white

#4C4C4C

Car Keys Dark Grey

$gray-dark

#777

Car Keys Mid Grey

$gray

#878787

Car Keys Mid Light Grey

$gray-light

#FCFCFC

Car Keys Light Grey

$gray-lightest

Gradients

▼

#2B2B2B (85%)

Gradient Lighter

@include overlay-gradient--light()

#414141 (65%)

Gradient Darker

@include overlay-gradient--dark()

Utility Colours

▼

E20D0D

Error

$brand-success

2DCC70

Positive

$brand-info

1397E1

Neutral

$brand-info

Fonts

▼

Primary font: Proxima Nova
Primary font italic: Proxima Nova
Primary font bold: Proxima Nova

Secondary font: Proxima Nova
Secondary font bold: Proxima Nova
Secondary font bold: Proxima Nova

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Body

▼

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance.

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, n

~~This text is deleted and~~

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for fine print, etc.

Abbreviation: HTML

Keyboard input: Ctl+Alt+Del

This text is a short inline quotation

This is a citation

The dfn indicates a definition

This is what inline code looks like.

This is sample output from a computer program

A simple equation: x = y + 2

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Inline Elements

▼

This is a text link

Strong is used to indicate strong importance

Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie. Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel tristique quam.

Preformatted Text

▼

    P R E F O R M A T T E D T E X T
    ! " # $ % & ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; < = > ?
    @ A B C D E F G H I J K L M N O
    P Q R S T U V W X Y Z [ \ ] ^ _
    ` a b c d e f g h i j k l m n o
    p q r s t u v w x y z { | } ~