Design process

A progressive workflow where nothing gets thrown away.

The key idea

Everything you build takes you closer to the final product. No Figma comps to hand off and translate. No configs to fight against. No throwaway wireframes.

Start with real content in real HTML, then progressively add design.

To top

Phase 1: Start with content

Don’t design empty boxes. Begin with actual content—either directly in HTML or through a CMS like Craft CMS.

Option A: Static HTML

  1. Create pages in /public/
  2. Write semantic HTML—headings, paragraphs, lists
  3. Add layout primitives—.stack, .grid, .sidebar
  4. Use <html-include> for repeated elements

Option B: CMS integration

Connect Live Wires to a CMS like Craft CMS and start content modelling immediately. Your templates become the prototype. The content model becomes the information architecture. Nothing is throwaway. Your process becomes less waterfall, more iterative, and more collaborative.

At this stage, your site is functional and readable. The baseline styles handle typography, spacing, and color automatically. This is your wireframe.

CMS starters coming soon.

To top

Phase 2: Configure tokens

Adjust the design tokens to establish your visual foundation. Changes here ripple through everything.

typography-base.css
Font stacks, base size, line height. The --line variable drives all spacing.
color.css
Color palette, semantic colors, schemes. Define your brand here.
spacing.css
Spacing scale derived from --line.
borders.css
Border radius scale.

Use the Guide to review. Browse the Elements and Components pages to see how your token changes affect the entire system.

To top

Phase 3: Add art direction

Layer utility classes for specific visual adjustments.

<!-- Before: semantic HTML with layout -->
<article class="stack">
  <h2>Article Title</h2>
  <p>Content...</p>
</article>

<!-- After: adding art direction -->
<article class="stack scheme-warm px-3 py-4">
  <h2 class="text-3xl">Article Title</h2>
  <p class="text-lg measure">Content...</p>
</article>

Use utilities sparingly. If you’re adding the same classes everywhere, adjust the token or create a component instead.

If you’re using a CMS, use the utility classes as styling hooks in custom fields for art direction from inside the content editor.

If you do want to lean more on utility classes and LiveWires isn’t enough, the class names are compatible with Tailwind CSS. Add it when you’ve outgrown the existing utlities and don’t want to rewrite your markup.

To top

Phase 4: Build components

As patterns emerge, extract them into components in /src/css/6_components/.

Create a component when:

  • You’re repeating the same utility combination 3+ times
  • The pattern has internal structure
  • You need container queries for responsive behavior

Keep using utilities when:

  • Each instance is slightly different
  • The styling is a one-off adjustment
  • You’re still exploring options

See the Code style guide for naming conventions.

To top

Development tools

Live Wires includes a floating toolbar at the bottom of every page with visual debugging tools. Press T to show or hide the toolbar.

Toggle buttons

Click buttons or use keyboard shortcuts to toggle overlays:

D Theme
Toggle between light and dark mode (overrides system preference).
B Baseline
Show baseline grid overlay to verify vertical rhythm alignment.
C Columns
Show column grid overlay. Configure column count in Settings.
M Margins
Show horizontal margin guides. Configure margin size in Settings.
G CSS Grids
Highlight all .grid layout primitives with column visualization.
O Outlines
Show outlines around layout primitives (.stack, .cluster, .grid, etc.).
X BG Colors
Toggle visibility of background colors on elements with bg-* classes.
R Redact
Replace text with redacted placeholder font for reviewing hierarchy without content.

Settings popover

Click Settings to configure grid overlay options:

Columns
Number of columns in the column grid overlay (1–24).
Baseline subdivisions
Subdivision lines within each baseline unit (1, 2, 3, or 4).
Gap
Gutter size between columns (0, 1px, ¼, ½, 1, or 2 baseline units).
Margin
Horizontal page margins matching .section variations: Section (responsive), Full-bleed (none), or Wide. Values follow the responsive breakpoints defined in section.css.

Persistence

All toggle states and settings are saved to localStorage and restored on page reload.

To top

Using the Guide

The /manual/ folder is your design review tool:

Token testing
Change a token, then browse the Guide to see effects across all elements and components.
Component library
Copy HTML snippets directly from examples.
Starting point
Duplicate Guide pages as templates for your prototype.

To top

Tips

Embrace defaults

Before adding a class, ask: “Does this actually need styling?” Semantic HTML with default styles is usually enough.

Use the cascade

Apply utilities to parent elements. A .scheme-warm on a section affects all children.

Commit often

Use Git to checkpoint working states. Prototyping fast means trying things that don’t work.

To top

Related