Style guide

This page exists purely to preview the theme. Every component below is padded out with hipster ipsum so headings, body copy, links, and containers can all be eyeballed together instead of one at a time across a dozen real pages.

Color roles

Every Material 3 color role, laid out like the M3 color roles reference chart.

Primary
On Primary
Primary Container
On Primary Container
Secondary
On Secondary
Secondary Container
On Secondary Container
Tertiary
On Tertiary
Tertiary Container
On Tertiary Container
Primary Fixed
Primary Fixed Dim
On Primary Fixed
On Primary Fixed Variant
Secondary Fixed
Secondary Fixed Dim
On Secondary Fixed
On Secondary Fixed Variant
Tertiary Fixed
Tertiary Fixed Dim
On Tertiary Fixed
On Tertiary Fixed Variant
Error
On Error
Error Container
On Error Container
Inverse Surface
Inverse On Surface
Inverse Primary
Scrim
Shadow
Surface Dim
Surface
Surface Bright
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High
Surface Container Highest
On Surface
On Surface Variant
Outline
Outline Variant
Seed

Headings & text

Artisan kombucha tote bag single-origin coffee, before they sold out cold-pressed (em emphasis) meditation retreat according to the farm-to-table listicle. Direct trade mixtape forage sriracha (strong) chambray, definitely not (i italic) gluten-free, viral marfa woke selvage (b bold) tousled portland distillery, you probably haven't heard of it, ethical migas small batch --theme-accent woke selvage. Direct trade mixtape forage sriracha chambray (strong + em), gluten-free viral marfa.

Blog quote block: artisan kombucha tote bag single-origin coffee cold-pressed meditation retreat. Farm-to-table listicle direct trade mixtape, forage sriracha chambray gluten-free viral marfa. Also try clicking to reveal this spoiler: the narwhal bacons at midnight.

A subheading

Small batch meditation retreat (est. 2012), ethical migas tousled distillery. Portland woke selvage forage, direct trade mixtape before they sold out chambray.

Lists

Unordered

  • Artisan kombucha tote bag
  • Single-origin coffee, before they sold out
  • Cold-pressed meditation retreat
    • Farm-to-table listicle
    • Direct trade mixtape

Unordered, items in paragraphs

  • Artisan kombucha tote bag

  • Single-origin coffee, before they sold out cold-pressed meditation retreat. Farm-to-table listicle direct trade mixtape, forage sriracha chambray gluten-free viral marfa.

  • Cold-pressed meditation retreat, direct trade mixtape

    • Farm-to-table listicle

    • Direct trade mixtape, forage sriracha chambray gluten-free viral marfa tousled portland distillery

Ordered

  1. Forage sriracha chambray
  2. Gluten-free viral marfa
  3. Tousled portland distillery
  4. Ethical migas small batch

Definition list

Woke selvage
Forage sriracha chambray gluten-free viral marfa
Tousled portland
Distillery you probably haven't heard of it, ethical migas small batch

Table

Roast Origin Notes
Single-origin Marfa Cold-pressed, direct trade
Small batch Portland Woke selvage, forage
Artisan blend Williamsburg Gluten-free, viral

Code

// Artisan kombucha tote bag
function brew(beans, { direct = true } = {}) {
  const roast = direct ? "single-origin" : "blend";
  return roast + ", cold-pressed";
}

Inline code too: --theme-infobox maps to --md-secondary-container.

Details

Farm-to-table listicle

Direct trade mixtape, forage sriracha chambray gluten-free viral marfa. Cold-pressed listicle before they sold out, small batch tote bag distillery.

Tousled portland distillery

Ethical migas small batch, woke selvage forage sriracha. Artisan kombucha single-origin coffee, gluten-free viral marfa chambray meditation retreat.

Ethical migas, open by default

Woke selvage forage sriracha, gluten-free viral marfa before they sold out. Direct trade mixtape tousled portland distillery, farm-to-table listicle small batch tote bag.

Longer content

Single-origin, cold-pressed, direct trade (long version)

Artisan kombucha tote bag single-origin coffee, before they sold out cold-pressed meditation retreat. Farm-to-table listicle direct trade mixtape, forage sriracha chambray gluten-free viral marfa. Tousled portland distillery, ethical migas small batch woke selvage.

Direct trade mixtape before they sold out, small batch marfa chambray. Cold-pressed listicle forage sriracha, gluten-free viral woke selvage tousled distillery.

  • Artisan kombucha tote bag
  • Single-origin coffee, before they sold out
  • Cold-pressed meditation retreat
  • Farm-to-table listicle, direct trade mixtape

Ethical migas small batch, woke selvage forage sriracha chambray gluten-free viral marfa tousled portland distillery.

Cards

  • Maintained and improved an artisan kombucha pipeline

  • Shipped a direct-trade mixtape aggregator, gluten-free by default

  • Mentored several roasters (L1–L4)

Single-origin — Marfa
Cold-pressed, direct trade, small batch
Woke Selvage
Forage sriracha chambray gluten-free viral marfa
Roast
Single-origin
Origin
Marfa
Ethical migas
Chambray tousled
Direct trade, gluten-free by default
Before they sold out, viral marfa

Infoboxes

Artisan kombucha tote bag
Single-origin coffee, before they sold out, cold-pressed meditation retreat.
Farm-to-table listicle
Direct trade mixtape, forage sriracha chambray gluten-free viral marfa.

Menu

Single-origin Cold-pressed Direct trade Small batch Woke selvage

Buttons

Brew a batch → Small batch

Segmented control

Single choice

Multiple choice

Media

Artisan kombucha tote bag single-origin coffee, before they sold out cold-pressed meditation retreat. Farm-to-table listicle direct trade mixtape, forage sriracha chambray gluten-free viral marfa. Tousled portland distillery, ethical migas small batch woke selvage.

Dedenne
Teeny Sanguini
Orc Awooga
Elephant

Figure (regular)

Dedenne
Small caption text. Used for most figures throughout the site.

Figure (large)

Dedenne
Base-size caption text.
Used for prominent figures like the #1 project or for the art gallery.

Divider

Above the line: artisan kombucha tote bag.

Below the line: single-origin coffee, before they sold out.