Developer Guidance

Associated project: Visual Essay

This explains the modules and styles used in the Visual Essay template.

July 03, 2021

Introduction

The following design guidelines are what I use to remind myself of design decisions while I have my developer hat on.

A description of the article would go here. Yes, this is filler text, and you'll see much more in this test page.

Coming soon: module usage

The extensive color palette shown here is meant to add visual interest by supplying subtle distinction while remaining visually consistent.

	Color	Purpose
	`white`	Primary background.
	`black`	Primary foreground.
	`turquoise`	Emphasis
	`gray`	Supplementary text, icons
	`grayBlueDark`	Information Hierarchy
	`blueDark`	Information Hierarchy. Complementary to `grayBlueDark`
	`navy`	Information Hierarchy. Complementary to `blueDark`
	`red`	Danger
	`redDark`	Emphasis, clickable things
	`silver`	Backgrounds
	`silverDark`	Borders, lines

The following tokens use (or are derived from) the above colors:

	Token Name	Purpose
	`bg.primary`	Text for the main part of the screen.
	`bg.secondary`	Use for navigational components, like topbar
	`bg.callout`	Expandable regions, callouts, zebra rows in tables, sidebar
	`bg.reverse`	Text selection
	`bg.warning`	Highlight draft sections (development only)

	Token Name	Purpose
Abc	`text.primary`	Text for the main part of the screen.
Abc	`text.secondary`	Of slightly lower importance than `text.primary`. `<figcaption>` text. In a list of items, the item’s description.
Abc	`text.emphasis`	Draw attention to keywords within paragraphs. `<strong>` text.
Abc	`text.interactive.primary`	Show clickable links, with extra emphasis. Call-to-action links.
Abc	`text.interactive.primaryHover`
Abc	`text.interactive.secondary`	Show clickable links contained in paragraphs.
Abc	`text.interactive.secondaryHover`
Abc	`text.accent.primary`	For special text. `<blockquote>` text
Abc	`text.accent.secondary`	For accompanying special text. `<cite>` text
Abc	`text.hierarchy.primary`	Main headers
Abc	`text.hierarchy.secondary`	Subheaders
Abc	`text.hierarchy.tertiary`	List Counters
Abc	`text.brand`	Brand identity
Abc	`text.reverse`	Brand identity
Abc	`text.warning`	Warning
Abc	`text.code`	Code

	Token Name	Purpose
	`icon.enabled`	Enabled
	`icon.disabled`	Disabled
	`border.primary`	Borders associated with primary content
	`border.callout`	Borders associated with callout content
	`border.header`	Borders associated section headers
	`divider`	Dividers `<hr>`