For full details on all available styles, components and utilities, please refer to the Spectre documentation. Pages are built using blocks.

Logo

Colours

Core brand colours
#37BFA7
Primary/Turquoise
#1D3650
Dark Blue
#534582
Purple
#387AC4
Vibrant Blue
#8FE1A1
Pale Green
Control colours
#32b643
Success
#ffb700
Warning
#e85600
Error
Grey colours
#303742
Darkest Grey
#8E9AA7
Gray dark
#BCC3CE
Gray
#E6EBF1
Gray light
#FFFFFF
White

Typography

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

Lead paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Text elements

Bold
Italic
Strikethrough
Underline
Hello World!

Blockquotes

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates

Lists

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3
description list term 1
description list description 1
description list term 2
description list description 2
description list term 3
description list description 3

Tables

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Code blocks

<p><a href="#">Hello world!</a></p>
.foo {
  color: red;
}

Buttons

Primary button

Button sizes

Icon buttons

Forms

Input

Textarea

Select

Radio

Checkbox

Validation

The name is valid.

Passwords must have at least 8 characters.

Chips

Default Primary

Labels

default labelprimary label

Pagination

Media

Responsive images

Lake, by Fabrizio Conti
Lake, by Fabrizio Conti

Responsive video

Carousels

Images

3 x panels (carousel on mobile)