Manual

Your living reference for brand identity and UI components. Edit your design tokens—this manual transforms in real time.

Step 2 of the process

You’ve built your prototype in HTML. Now it’s time to design the foundation. Open the CSS token files and start adjusting colors, typography, and spacing. Every change you make ripples through this entire manual—and your prototype.

This is where you shape the raw material into something expressive. Watch how a single token change affects buttons, headings, color schemes, and components. Design by exploring. Iterate by observing.

Brand

Visual identity and content guidelines. Logos, colors, typography, voice & tone.

Customize with your brand assets to see them in context.

Components

UI patterns built on semantic HTML. Layout primitives, forms, navigation, schemes.

See how your tokens affect every component.

Two purposes, one manual

During design

This manual is your design canvas. Adjust a color token in color.css, then browse these pages to see the ripple effects. Tweak typography in typography.css and watch headings, body text, and components respond.

You’re not just editing CSS—you’re designing a system.

After launch

Share this manual with your team as living documentation. Brand standards, component patterns, usage guidelines—all in one place, always current, always reflecting the actual code.

No more out-of-date style guides or missing documentation.

Start designing

  1. Open the token files: Start with src/css/1_tokens/color.css and typography.css.
  2. Make a change: Adjust a color, tweak a font size, modify the spacing scale.
  3. Browse this manual: See how your change affects the color swatches, color schemes, type specimens, and every component.
  4. Iterate: Refine until the system feels right. Then check your prototype.

The foundation you build here cascades through everything.

New to Live Wires? Start with the framework documentation.