CFAO Mobility South Africa - VW Commercial

Style Kit

Background Colour Palette
Primary
Primary
.
Secondary
Secondary
.
Tertiary
Tertiary
.
Tertiary Offset
Tertiary Offset
.
Text Colour Palette
Primary
Primary
.
Secondary
Secondary
.
Tertiary
Tertiary
.
Grey Palette
Dark Grey
Dark Grey
.
Mid Dark Grey
Mid Dark Grey
.
Grey
Grey
.
Mid Light Grey
Mid Light Grey
.
Light Grey
Light Grey
.
Typography
Typography styles
Roboto Regular
Roboto Regular Line height:
Roboto Regular
Roboto Regular Line height:
Roboto Regular
Roboto Regular Line height:
Typography line heights

Heading 1

Heading 2

Paragraph

Hyperlink

Typography examples

H1 Lorem ipsum dolor sit amet.

H2 Lorem ipsum dolor sit amet.

Paragraph Lorem ipsum dolor sit amet. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.

Iconography
V10 icon set This is not a full list of the available icons, but a demonstration of whether they are using line or glyph icons.
Concertinas (Toggle Module)

Basic Toggle

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Tab System
LeftRight
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content
Tab Content
Data Tables
On Grey Background
Table Heading Table Heading Table Heading Table Heading
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
On White Background
Table Heading Table Heading Table Heading Table Heading
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Sliders
Slider Title
Value
Elements
Standard Modal
Small Modal
Jump Themes
Homepage Big Theme
Homepage Big Title
Homepage Big Title Homepage Big Sub Title Homepage Big Strapline Homepage Big Content Button
Homepage Small Theme
Homepage Small Title
Homepage Small Title Homepage Small Sub Title Homepage Small Strapline Homepage Small Content Button
Internal Big Theme
Internal Big Title
Internal Big Title Internal Big Sub Title Internal Big Strapline Internal Big Content Button
Internal Medium Theme
Internal Medium Title
Internal Medium Title Internal Medium Sub Title Internal Medium Strapline Internal Medium Content Button
Internal Small Theme
Internal Small Title
Internal Small Title Internal Small Sub Title Internal Small Strapline Internal Small Content Button