Your prototype starts here

This is Live Wires—a prototyping-first design system. Replace this page with your project. Everything you build evolves into production.

Why Live Wires Get started See example

Edit this file

/public/index.html

Your prototype lives here. Replace this content with your project.

Shared includes

/_includes/

Header, footer, nav—reuse across pages.

Design tokens

/src/css/1_tokens/

Colors, typography, spacing. Make it yours.

The workflow

  1. Write semantic HTML—it looks good by default
  2. Add layout primitives—.stack, .grid, .cluster, .sidebar
  3. Customize tokens—adjust colors, typography, spacing to match your brand
  4. Layer utilities—add art direction with utility classes

Press T for design tools. See the Manual for components.

Resources

Documentation

Architecture, layout primitives, utilities, and the design toolbar.

Manual

Brand guide and component library. Use it to review token changes.

Example site

A complete editorial site showing Live Wires in action.

Philosophy

The ideas behind Live Wires and why it exists.