Style Guide

Theme colors

Thoreau provides designers with a pure, honest palette, including three brilliant colors that embrace simplicity for writers and storytellers.

Theme colors are defined in the theme.json file:

{
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#ffffaa",
					"name": "Primary",
					"slug": "primary"
				}
			]
		}
	}
}

The Thoreau primary color passes both WCAG 2.0 level AA and WCAG level AAA contrast tests for the following: Normal Text, Large Text, Graphical Objects and User Interface Components. (View test results)

Theme typeface

Thoreau features Newsreader, a beautifully crafted serif variable font family by Production Type. Designed for long-form reading, Newsreader blends elegance, sturdiness, and subtle contemporary charm without sacrificing personality.

Button styles

The Button block allows you to add buttons on your website or to an external page. Buttons have two styles (Fill, Outline), five widths (Auto, 25%, 50%, 75%, 100%), and three alignments (Left, Center, Right).