Page structure

Header band

The full-bleed indigo header of every page except the home: the way back, the title, and one sentence that states what the page claims.

Examples

Top level (Management README)Open “Top level (Management README)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Second level with breadcrumb and source (article)Open “Second level with breadcrumb and source (article)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Book: the cover straddles the band edge (Unresolved)Open “Book: the cover straddles the band edge (Unresolved)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

App: two devices straddle the band edge (Hirsla)Open “App: two devices straddle the band edge (Hirsla)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

One per page, at the top of main. Top-level pages carry “← Index”; second-level pages carry the breadcrumb (.band-sub). The top of the band is what the page’s Index tile shows.

Live: Every page but the home.

Anatomy

Way back: a.band-back “← Index” (top level) or nav.crumbs (second level). 15/22, 1px underline. Hit area extended to 44px.
Label column: .band-label: the page’s kind, or the date and “Originally on …” for articles. Empty div when there is none.
Title: h1.display, the only h1. Title Case.
Lede: p.lede, Newsreader. A claim, not a teaser; ends with a full stop.
Extras: Optional .btn-row (call to action, button inverts on the band) and .band-note.

Variants

Top level: header.band.wrap with .band-back.
Second level: .band.band-sub with nav.crumbs; 8px top padding on phone so 44px targets keep the band’s height.
Book: .band-cover: the cover straddles the band edge below the lede.
App: .band-app: two phones straddle the edge.

States

Links: Off-white, hover lavender #AAB4F0. Focus ring off-white.

Behaviour

Phone, tablet, desktop: Padding 20/56 phone, 28/80 tablet, 28/112 desktop. Way back to title: 72, 96, 136. Label column beside the title from 768.
Motion: The band is where page transitions start and end: a tile grows into the whole page; a Thoughts row grows into the article’s band (see Patterns, Page transitions).

Accessibility

Band text and links are off-white, 10.5:1; the lavender hover is 5.6:1. One h1. The way back is a real link, not a button.

Words

Title in Title Case, no full stop (unless a statement headline, like Advisory’s). Lede one sentence, 110 to 155 characters is a good length.

Code

Classes: .band .band-sub .band-back .band-title .band-label .band-meta .band-note .band-cover .band-app. Styles in site/assets/css/site.css.

<header class="band wrap">
<a class="band-back" href="/"><span aria-hidden="true">←  </span>Index</a>
<div class="band-title cols">
<div></div>
<div>
<h1 class="display">Management README</h1>
<p class="lede">A practical guide to how I think, lead, and work, so we can work well together from day one.
</p>
</div>
</div>
</header>