2010–2016
Base card
Used as-is for story chapters. Background, border, radius, and hover lift live here once.
System
Design System
The tokens, components, and principles that hold paulmress.com together — documented here and pulled directly from the same stylesheet the live site runs on, so this page and the site can never quietly drift apart.
01 · Foundations
The primitives everything else is built from
Color, type, space, radius, and motion — five small scales that, used consistently, are most of what "design system" actually means.
Color
Type scale
Dr. Paul
The narrow path
As iron sharpens iron.
15+
Foundation
15+ years of experience.
Three values that power how he operates.
Connect on LinkedIn
years of performance marketing experience
01 · Story
2010–2016
Spacing scale · 4px grid
Radius
--radius-sm · 8px
--radius · 12px
--radius-full · pills & buttons
Motion · hover to feel each one
Fast · 150ms
--duration-fast · buttons
Base · 200ms
--duration-base · card hover lift
Slow · 700ms
--duration-slow + --ease-out · scroll reveal
02 · Atoms
The smallest reusable pieces
Buttons, pills, labels, inputs — built once, referenced everywhere. If a new one-off version of any of these shows up in the code, it should have been one of these instead.
Buttons · .btn
Pill · .pill
AI Strategy
AI Enablement
AI Governance
Kicker · .kicker
04 · Example Section
Form input · .form-row (dark-surface component)
03 · Molecules
Small groups with one job
Atoms combined into a repeatable unit — a stat tile, a section header, a card. Each shows up more than once on the site with identical structure.
Stat tile
4.0
GPA across both the MBA & DBA
Section header · kicker + title + lede
02 · Values
Human operational model
Used identically at the top of every section on the homepage.
Card · .card (base, .card--value, .card--current)
.card--value
Adds the alt background and icon slot. Everything else is inherited from .card.
2025–Present
.card--current
Adds the accent outline used to mark the active chapter.
04 · Organisms
Full sections, assembled from the above
Complete, page-level patterns. Shown here at reduced scale with real classes — see them full-size and in motion on the homepage.
Hero pattern
Dark surface pattern · Connect
“As iron sharpens iron, so one person sharpens another.” Proverbs 27:17
03 · Connect
05 · Principles
How to use this without breaking it
Tokens and components only hold consistency together if the decisions around them are also written down.
01
New spacing or sizing needs a token, not a number. If nothing in the scale fits, that's a sign the scale needs a new step — not an excuse for a one-off pixel value.
02
--color-accent-2 (orange) is a spark, not a surface. It appears in gradients and single accents only — never as a button, background, or block of color on its own.
03
Cards always get the hover lift. If a new card-like component doesn't want transform: translateY(-4px) on hover, it isn't a card — give it its own name.
04
Section headers are always kicker + title + lede, in that order. The numbered kicker (01 · Story) is how a visitor tracks position on a single long-scrolling page.
05
Motion respects prefers-reduced-motion everywhere, including the hero network canvas. Nothing here should ever be the only way information is conveyed.
06
This page is documentation, not decoration. When a token or component changes in styles.css, this page changes with it automatically — if it ever doesn't, something is wrong.