Skip to Main Content

Boilerplate Style Guide

This page previews every element in the design system. Update your tokens in style.css and refresh to see the whole system update at once. This page is for internal use only — not for clients.

01 — Color Tokens

These swatches pull directly from your :root CSS variables. Update the tokens and the swatches update automatically.

--color-primary
--color-secondary
--color-accent
--color-accent-hover
--color-bg
--color-bg-alt
--color-bg-dark
--color-text
--color-text-muted
--color-border

02 — Typography

Headings use --font-heading. Body text uses --font-body. Code uses --font-accent.

Headings — H1 through H6

H1 — The quick brown fox

H2 — The quick brown fox

H3 — The quick brown fox

H4 — The quick brown fox

H5 — The quick brown fox
H6 — The quick brown fox

Type Scale

text-4xl — 48px

text-3xl — 36px

text-2xl — 28px

text-xl — 24px

text-lg — 20px

text-md — 18px

text-base — 16px

text-sm — 14px

text-xs — 12px

Paragraph

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

This paragraph has bold text, italic text, and a text link to show how inline elements look alongside regular copy.

Blockquote

"Good design is obvious. Great design is transparent." — Joe Sparano

03 — Links

Standard text link — uses --color-accent with hover transition.

Underlined link — same color, explicit underline.

Link styled as button

04 — Buttons

Primary Button Outline Button

05 — Lists

Unordered List

  • First list item
  • Second list item with a link inside
  • Third list item
    • Nested item one
    • Nested item two
  • Fourth list item

Ordered List

  1. First list item
  2. Second list item with bold text
  3. Third list item
    1. Nested item one
    2. Nested item two
  4. Fourth list item

06 — Code

Inline Code

Use get_template_part() to include partials. Font is --font-accent (JetBrains Mono by default).

Code Block

function boilerplate_setup() {
    register_nav_menus([
        'main-menu'   => __('Main Menu'),
        'footer-menu' => __('Footer Menu'),
    ]);
}
add_action('after_setup_theme', 'boilerplate_setup');

07 — Forms

08 — Table

Token Value Usage
--color-accent Project color Links, buttons, highlights
--font-heading Project heading font All H1–H6 elements
--font-body Project body font Paragraphs, UI, forms
--max-width 1200px default Wrapper / container width
--space-8 32px Standard section spacing

09 — Spacing Scale

All spacing tokens visualized as horizontal bars.

--space-1  — 4px
--space-2  — 8px
--space-3  — 12px
--space-4  — 16px
--space-5  — 20px
--space-6  — 24px
--space-8  — 32px
--space-10 — 40px
--space-12 — 48px
--space-16 — 64px
--space-20 — 80px
--space-24 — 96px

10 — Radius & Shadows

radius-sm
shadow-sm
radius-md
shadow-md
radius-lg
shadow-lg
radius-xl
shadow-lg
radius-full
shadow-md

11 — Utility Classes

Text Alignment

.text-left — Left aligned text

.text-center — Center aligned text

.text-right — Right aligned text

WordPress Block Alignment

.alignleft — Float left with right margin

.alignright — Float right with left margin

.aligncenter — Block centered

.alignwide — Full container width

.alignfull — Full viewport width

12 — New Project Checklist

Run through this at the start of every new project.

  1. Swap the three font @import URLs at the top of style.css (Sections 1a, 1b, 1c)
  2. Update --font-body, --font-heading, --font-accent in :root to match
  3. Update color tokens — at minimum --color-primary, --color-accent, --color-bg, --color-bg-dark
  4. Update --max-width and --wrapper-padding if the layout calls for it
  5. Refresh this page — confirm everything looks right
  6. Add project-specific brand styles to Section 10 of style.css
  7. Update the theme header in style.css with the client project name
  8. Remove test font imports (Section 1d) and font test classes (Section 8c) once fonts are chosen
  9. Delete or unpublish the Font Test page once fonts are locked in
  10. Create the GitHub repo and push the boilerplate — github.com/MattDee87/boilerplate-master