Normal

Style showcase

A complete overview of the website’s colors, typography and elements. Each section appears first in a normal setting and then in an inverted setting with the same content.

Compare the appearance as you change the shared styles. Try the links, buttons, tabs and expandable content with both a mouse and keyboard.

Colors · Typography · Rich Text · Lists · Buttons · Accordion and Tabs · Forms

Inverted

Style showcase

A complete overview of the website’s colors, typography and elements. Each section appears first in a normal setting and then in an inverted setting with the same content.

Compare the appearance as you change the shared styles. Try the links, buttons, tabs and expandable content with both a mouse and keyboard.

Colors · Typography · Rich Text · Lists · Buttons · Accordion and Tabs · Forms

Normal

Colors and basic styles

Neutrals

--neutral-9

--neutral-7

--neutral-5

--neutral-3

--neutral-1

Alpha

--alpha-9

--alpha-7

--alpha-5

--alpha-3

--alpha-1

Accent colors

--color-1

--color-2

--color-3

Status colors

--success

--warning

--error

Alpha on different surfaces

--alpha-5 over --neutral-1

--alpha-5 over --neutral-3

--alpha-5 over --color-1

Border radii

--border-radius-small

--border-radius-default

--border-radius-large

Borders

--border-width-default

--border-width-thick

Shadows

--box-shadow-small

--box-shadow-default

--box-shadow-large

Inverted

Colors and basic styles

Neutrals

--neutral-9

--neutral-7

--neutral-5

--neutral-3

--neutral-1

Alpha

--alpha-9

--alpha-7

--alpha-5

--alpha-3

--alpha-1

Accent colors

--color-1

--color-2

--color-3

Status colors

--success

--warning

--error

Alpha on different surfaces

--alpha-5 over --neutral-1

--alpha-5 over --neutral-3

--alpha-5 over --color-1

Border radii

--border-radius-small

--border-radius-default

--border-radius-large

Borders

--border-width-default

--border-width-thick

Shadows

--box-shadow-small

--box-shadow-default

--box-shadow-large

Normal

Typography

.meta-text — Supporting information that adds context to the content.

.lead-text — A clear introduction invites the reader into the story. This longer opening paragraph shows how the lead text sets the tone and creates a natural transition into the body text.

Huge — A heading that gives content direction

H1 — A heading that gives content direction

H2 — A heading that gives content direction

H3 — A heading that gives content direction

H4 — A heading that gives content direction

Large — It starts with a simple idea.

Medium — It starts with a simple idea.

Base — It starts with a simple idea.

Small — It starts with a simple idea.

Tiny — It starts with a simple idea.

Body text — This longer passage helps us assess readability, line height and rhythm. As the content flows across several lines, the differences between text sizes and available width become clearer. Thoughtful typography makes it easy to follow an idea from beginning to end.

Muted text for supporting information.

Regular text with bold emphasis and italic emphasis.

Line height default — A longer sample that spans several lines and shows how line height affects rhythm and readability when you change the website’s typography.

Line height medium — A longer sample that spans several lines and shows how line height affects rhythm and readability when you change the website’s typography.

Line height small — A longer sample that spans several lines and shows how line height affects rhythm and readability when you change the website’s typography.

Inverted

Typography

.meta-text — Supporting information that adds context to the content.

.lead-text — A clear introduction invites the reader into the story. This longer opening paragraph shows how the lead text sets the tone and creates a natural transition into the body text.

Huge — A heading that gives content direction

H1 — A heading that gives content direction

H2 — A heading that gives content direction

H3 — A heading that gives content direction

H4 — A heading that gives content direction

Large — It starts with a simple idea.

Medium — It starts with a simple idea.

Base — It starts with a simple idea.

Small — It starts with a simple idea.

Tiny — It starts with a simple idea.

Muted text for supporting information.

Regular text with bold emphasis and italic emphasis.

Line height default — A longer sample that spans several lines and shows how line height affects rhythm and readability when you change the website’s typography.

Line height medium — A longer sample that spans several lines and shows how line height affects rhythm and readability when you change the website’s typography.

Line height small — A longer sample that spans several lines and shows how line height affects rhythm and readability when you change the website’s typography.

Normal

Rich Text

A story in several parts

This is regular text with clear emphasis, a softer tone and a link to the typography section. The content helps us see how different formats work together.

Every project begins with a few ideas. As those ideas take shape, thoughtful choices give the content a clear direction. A longer passage shows how lines wrap and how the spacing between paragraphs feels.

A smaller subheading

A subheading divides the content and makes it easier to find the next thought. Here we can also compare bold and italic text together and a link that opens in a new tab.

Small changes in color, typography and spacing can affect the experience of the whole page.

A new paragraph follows the divider. This ending shows the spacing before the next element and how the shared styles bring the content together.

Inverted

Rich Text

A story in several parts

This is regular text with clear emphasis, a softer tone and a link to the typography section. The content helps us see how different formats work together.

A smaller subheading

A subheading divides the content and makes it easier to find the next thought. Here we can also compare bold and italic text together and a link that opens in a new tab.

Small changes in color, typography and spacing can affect the experience of the whole page.

A new paragraph follows the divider. This ending shows the spacing before the next element and how the shared styles bring the content together.

Normal

Lists

A standard bullet list
A slightly longer item that shows how text wraps when the available space becomes narrower and the content continues onto another line.
Nested content
- The first nested item
- The second nested item

Standard numbered list — Gather the ideas.
Develop the content.
1. Clarify the headings.
2. Check the details.
Compare the final result.

Plain — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Bullet — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Check Mark — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Chevron — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Divider — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Striped — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Numbered — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Inverted

Lists

A standard bullet list
A slightly longer item that shows how text wraps when the available space becomes narrower and the content continues onto another line.
Nested content
- The first nested item
- The second nested item

Standard numbered list — Gather the ideas.
Develop the content.
1. Clarify the headings.
2. Check the details.
Compare the final result.

Plain — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Bullet — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Check Mark — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Chevron — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Divider — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Striped — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Numbered — A short list item.
A longer list item that provides room to compare wrapping, indentation, markers and spacing when the text continues across several lines.
A final item to complete the list.

Normal

Buttons and links

A link within body text and a link that opens in a new tab.

Filled — Button as a link

Inverted

Buttons and links

A link within body text and a link that opens in a new tab.

Filled — Button as a link

Normal

Accordion and Tabs

Accordion — A short answer

A clear message starts with a simple idea. This short paragraph shows the basic presentation of expandable content.

Accordion — A longer answer with mixed formatting

This answer contains more text and a link within the content.

A first item.
A longer item that shows how lists work within expandable content.

Closing text with bold emphasis.

Accordion — An answer with a button

Here is a short paragraph and a button that can receive keyboard focus.

A simple introduction

Good content begins with a clear introduction. The first tab shows how a heading and text work together.

A first item.
A second item with slightly longer content that can wrap across several lines.
A third item.

The final tab combines text and a button.

Inverted

Accordion and Tabs

Accordion — A short answer

A clear message starts with a simple idea. This short paragraph shows the basic presentation of expandable content.

Accordion — A longer answer with mixed formatting

This answer contains more text and a link within the content.

A first item.
A longer item that shows how lists work within expandable content.

Closing text with bold emphasis.

Accordion — An answer with a button

Here is a short paragraph and a button that can receive keyboard focus.

A simple introduction

Good content begins with a clear introduction. The first tab shows how a heading and text work together.

A first item.
A second item with slightly longer content that can wrap across several lines.
A third item.

The final tab combines text and a button.

Normal

Forms

Inverted