Freelance AV • Style Guide

Tokens, components, patterns • Brendan Dower

Brendan Dower

Modern, readable UI foundations for the Freelance AV Workspace and public site. Use semantic tokens first; components should feel consistent across Admin / Business / Public.

Brand Success Warning Danger
Jump to tokens Light theme

Tokens

These are the core building blocks. Copy values when needed, but prefer using the semantic variables.

--bg / surfaces
bg + surface scale
--brand / --brand-2
var(--brand)
--success
var(--success)
--danger
var(--danger)

Usage rule: prefer semantic variables (--surface-1, --border, --text) instead of hard-coded hex.

Theme is controlled by data-theme on <html>. Use the toggle in the top-right.

Typography

Heading H0

Heading H1

Heading H2

Heading H3

Lead paragraph text for intros. Keep it readable and calm.

Muted text for helper copy. Inline kbd hints supported.

Standard paragraph for general content. Use links sparingly for primary actions, and reserve buttons for actual actions.

.h1 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); }
.lead { font-size: 1.125rem; color: var(--muted); }

Buttons

Tip: keep button labels verbs (Create, Save, Send, Export). Avoid “Okay”.

Forms

Use clear labels. Put format hints here.

Field rules

  • Labels above inputs (consistent scanning).
  • Use helper text only when needed.
  • Use inline validation text near the field (future).
  • Keep radii consistent: inputs use 14px.

Reminder

Server-side validation stays the source of truth even if we add JS helpers.

Tables

Job # Title Company Status Rate Hours Total
J-2026-001 Conference Day 1 Vast AV Booked $650 10 $650
J-2026-002 LED Wall Setup TLD Pending $50/hr 8 $400
J-2026-003 Broadcast Tech Webcastcloud Complete $70/hr 6 $420

Feedback

Neutral

This is a general notice.

Success

Invoice sent and logged successfully.

Warning

This job overlaps with another booking.

Danger

Payment failed. Please try again.

Toasts + Modals

Toasts are for low-stakes confirmations. Modals are for tasks or confirmations.

Close modal with Esc or by clicking backdrop.

Patterns

Tabs

Use tabs for switching between small, related content sections.

Keep tab labels short. Avoid deep nesting.

Tabs are not routing. Use real pages for big workflows.

Accordion

Use modals for confirmations, short forms, or contextual actions. If it’s a multi-step workflow, use a page.
Build with tokens, then reuse components. Avoid custom one-off margins, radii, and colors.
Minimal, modern, and slightly technical. Calm surfaces, clear contrast, and confident brand accents.

Quick implementation note

You can lift this CSS/JS into the Freelance AV project and then progressively split it into:

/public/assets/css/tokens.css
/public/assets/css/base.css
/public/assets/css/components.css
/public/assets/js/ui.js