Contour / Overview

Design with the terrain,
not against it.

Contour is the design system behind drewbmeyer.com — named for the topographic lines that open the site. It packages the portfolio's tokens, components and interaction patterns into one documented, accessible, dual-theme language. Every specimen on these pages is the real component, rendered live from the same stylesheet the site ships.

Principles#

One source of truth. The production stylesheet is the system. Documentation renders components live — if the docs and the site ever disagree, one of them is broken and you'll see it immediately.
Dark-first, dual-mode always. Every token ships a dark and a light value, and every component is designed in both from the start. The toggle in the top bar re-themes this entire documentation — try it.
Accessible by default. WCAG 2.2 AA is the floor, not the ceiling: verified contrast on every published pairing, a visible focus style everywhere, focus-trapped dialogs, and a reduced-motion fallback for every animation.
Motion with restraint. One easing curve, transform-and-opacity only, and animation that supports reading order instead of decorating it. If prefers-reduced-motion is set, the experience is calm — never empty.
Craft in the details. Museum placards, contact shadows, odometer numerals, magnetic buttons — the system exists so the expressive details can be consistent instead of chaotic.

What's inside#

01 · Foundations Tokens & rules Color with published contrast ratios, the type scale, spacing, radius, elevation, motion and the accessibility standards everything is held to. 02 · Components The building blocks Buttons, tags, cards, stats, navigation, toggles and chrome — documented with anatomy, states, do/don't guidance and copy-ready markup. 03 · Patterns Composed experiences The lightbox dialog, gallery walls, the museum walk-through, the Lab canvas, the case-study kit and the password gate — full interaction contracts.

Getting started#

Contour is a zero-build system: one stylesheet, semantic HTML, and small vanilla-JS behaviors. Consuming it takes three steps.

1. Link the stylesheet

<link rel="stylesheet" href="/css/style.css" />

2. Set a theme before first paint

Tokens are declared on [data-theme="dark"] and [data-theme="light"]. Boot the attribute from storage (or the OS preference) in the document head so there is no flash of the wrong theme.

<script>
  (function () {
    try {
      var t = localStorage.getItem('dbm-theme');
      if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', t);
    } catch (e) {}
  })();
</script>

3. Use documented markup

Each component page ships the exact HTML contract — classes, ARIA and states. Because tokens cascade from data-theme, any subtree can be re-themed independently, which is exactly how the per-specimen theme switches on these pages work.

Scope note. Contour documents the system as consumed by drewbmeyer.com. It is intentionally not published as a package — it's a working system and a design-engineering artifact, not a framework.

Status & versioning#

Contour versions with intent: breaking token or markup-contract changes bump the major, new components bump the minor.

Version	Date	Changes
`1.0.0`	July 2026	Initial release — foundations with published contrast ratios, 15 components, 7 patterns, dual themes, WCAG 2.2 AA verification via axe-core.

Design with the terrain,not against it.