Style & Substance

A Pattern Library

Color Schemes

Accent Colors:

Extended Colors:

Color1
Color1 Container
Color2
Color2 Container
Color3
Color3 Container
Color4
Color4 Container
Color5
Color5 Container

Surface Colors:

Inverse Colors:

Outline Colors:

Actions

Buttons:

Button Group:

Icon Button:

Tab Buttons:

Toggle Button Group:

Inputs

Checkbox

Radio

Range

Select

Switch

Textarea

Text Field

Data Display

Accordion

Variants

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Elevated

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Outlined

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Tonal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Group

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.

Actions

Accordion with actions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.

Custom Arrow

Custom arrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.

Custom arrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.

Avatar

Image

Letter

AK
BK
NA

Icon

Variants

RG

Grouped

IJ
GH
EF
CD
AB

Badge

Variants

Color

Alignment

Visibility

Card

Variants

Text
Outlined
Tonal
Elevated

Outlined Example

Overline

Headline

Subhead

Explain more about the topic shown in the headline and subhead through supporting text.

Chip

Variants

Tonal
Outlined

Icon

Text
Text

Button

Link

Without icon With icon

Sizes

Small
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales.

Definition list

Default

  • Price 6 950 000
  • Size 64 m²
  • Rooms 3

Bordered

  • Price 6 950 000
  • Size 64 m²
  • Rooms 3
  • Price 6 950 000
  • Size 64 m²
  • Rooms 3

List

Default

  • Headline

    Supporting text

In progress . . .

Table

Nordic Countries Overview
Country Major Cities Nature
Capital 2nd Largest 3rd Largest National Animal National Bird
Norway Oslo Bergen Trondheim Elk White-throated Dipper
Sweden Stockholm Göteborg Malmö Elk Common Blackbird
Denmark København Aarhus Odense Mute Swan Mute Swan
Finland Helsinki Espoo Tampere Brown Bear Whooper Swan
Iceland Reykjavík Kópavogur Hafnarfjörður Gyrfalcon Gyrfalcon
Scandinavia != The Nordics

Feedback

In progress . . .

Typography

In progress . . .