The tokens, typography, spacing, and components used to build principles.design.

Note: (18th Feb 2026) Work in progress, this documentation is being expanded.

Colors

Typographic Scale

Root size: 19px. Scale ratio derived from the baseline unit. All sizes in rem.

Vertical Rhythm

All vertical spacing is based on the baseline unit: 1.5263rem (29px) — one line of body text.

Heading Rhythm

Heading margins snap to whole baseline units. This specimen demonstrates the vertical rhythm in context.

Measure

Body text has a maximum width of 40rem (~65–75 characters per line) for optimal readability. This paragraph demonstrates the measure. Long lines of text are harder to read because the eye struggles to track back to the start of the next line. Constraining the measure prevents this.

Components

Header

Site header with logo and navigation. Responsive layout with two breakpoints.

States

• Hover: Underline with --transition-fast fade-in
• Active: Bold text (current page)

Accessibility

• aria-label="Main" on <nav>
• aria-current="page" on active link
• sr-only text for logo link

Background

• Homepage: --color-primary (yellow)
• Other pages: --color-surface (white)

Footer

Two-section footer: newsletter signup (yellow) and credit section (dark).

Newsletter Signup

Credit Section

Responsive

• Mobile (<600px): Form fields stack vertically, button full width
• Desktop (600px+): Form fields inline

CTA Button

Primary call-to-action button with hover effect and optional price display.

Parameters

Usage

{% include components/cta-button.html url="#pricing" text="Get the field guide" price="$29" %}
{% include components/cta-button.html url="/field-guide/" text="Buy now" %}

Styling

• Background: --color-text (#333)
• Text: White (#fff)
• Font: 1.15em, weight 500
• Padding: 1.15em 1.35em
• Border radius: 0.3em
• Hover: Scale to 1.03 with --transition-fast

Component file

_includes/components/cta-button.html

Pricing Card

Pricing card with title, price, features list, and CTA button. Supports primary and secondary styles.

Parameters

Usage

{% include components/pricing-card.html 
  title="Individual" 
  subtitle_text="For personal use."
  price="$29"
  features="Full PDF field guide,All worksheets,Free updates"
  button_text="Buy now"
  button_url="#"
  style="primary"
%}

Styling

• Background: White (#fff)
• Border: 2px solid #333 (primary) or #e6e6e6 (secondary)
• Border radius: 0.4em
• Padding: 1.5em
• Layout: Flex column, min-width 240px
• Features list: Grows to fill available space

Component file

_includes/components/pricing-card.html

Author Card

Author profile card with circular image and bio. Responsive layout with mobile-specific alignment.

Written by Ben Brignell, a design consultant who has spent 25 years helping teams make better decisions

Parameters

Usage

{% include components/author-card.html 
  name="Ben Brignell" 
  bio="a design consultant who has spent 25 years helping teams make better decisions"
  image="ben-brignell-profile-small.jpg"
  image_alt="Ben Brignell"
  image_size="80"
%}

Styling

• Layout: Flex row with 1.5em gap
• Image: Circular (border-radius: 50%), object-fit: cover
• Text: "Written by [name], [bio]" format
• Mobile: Aligns to top, adds 0.5em margin to image and text

Component file

_includes/components/author-card.html

Layout

12-column CSS grid. Maximum width 1080px, 85% viewport width.

Breakpoints

Tokens Reference

All design decisions are expressed as CSS custom properties defined in tokens.css.

Color tokens

Spacing tokens

Transition tokens

Built with plain CSS custom properties. No preprocessors, no build tools.