Color contrast

Check out a grid of color contrast values across this theme’s palette using the excellent EightShapes Contrast Grid.

Variables

Variable name	Value
$font-body	"Inter","Roboto","Helvetica Neue","Arial Nova","Nimbus Sans","Arial",sans-serif
$font-weight-light	300
$font-weight-regular	400
$font-weight-medium	500
$font-weight-bold	700
$font-weight-black	900
$border-thin	.0625rem
$border-thick	.1875rem
$color-background	#fff
$color-background-secondary	#203851
$color-background-tertiary	#f0f0f0
$color-highlight	#fd0
$color-border	#cbcbcb
$color-text-accent	#595959
$color-text-body	#333
$color-text-heading	#222
$color-link	#1e69cd
$mq-smallest	20em
$mq-small	40em
$mq-medium	50em
$mq-large	70em
$content-max-width	40em
$content-line-length	70ch
$line-height-reset	1
$line-height-heading	1.2
$line-height-text	1.5

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Home Heading 1 with icon

post with a name of 1

Post 1 excerpt and so on
what comes after post 2?

Post 2 excerpt and so on
it's post 3

Post 3 excerpt and so on
that's what this example is 4

Post 4 excerpt and so on

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

List Item 1
List Item 2
List Item 3
List Item 4

Figure-Caption

The figcaption element example

Horizontal Rule

Text Elements

The a element and external a element examples

Visually hidden, visible focus → a element

Visually hidden, hidden focus → a element

The abbr element and an abbr element with title examples

The code element example

The em element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>

Paragraph with inline <code> tag. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2.2
3. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4

Table

Column a	Column b	Column c
Row 1	Row 2	Row 3
Row 1	Row 2	Row 3
Row 1	Row 2	Row 3

Style guide

Color contrast

Variables

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Home Heading 1 with icon

post with a name of 1

what comes after post 2?

it's post 3

that's what this example is 4

Headings with Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Blockquote

Figure-Caption

Horizontal Rule

Text Elements

Monospace / Preformatted

List Types

Ordered List

Unordered List

Table