Design System

Living reference for the tokens and components used across the Wade Law site. Powered by Tailwind CSS v4 and daisyUI.

Themes

Switch the active daisyUI theme to preview components in context.

Color tokens

primary

secondary

accent

neutral

info

success

warning

error

base-100

base-200

base-300

Mostly base surface & text,SecondaryAccentwith small hits of color.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text. The quick brown fox jumps over the lazy dog. Justice is the constant and perpetual will to render to every man his due.

Small / muted caption text.

Spacing scale (φ)

Spacing grows exponentially by the golden ratio (φ = 1.618) rather than a linear base-4/8 grid. Each step up is ~1.618× the previous; each step down divides by φ. Use these tokens — never invent ad-hoc pixel values.

space-2xs~3.8pxWithin a single informational unit
space-xs~6.1pxTight intra-element spacing
space-sm~9.9pxRelated items in a group
space-md16pxBase rhythm / default gap
space-lg~25.9pxBetween distinct groups / weak relations
space-xl~41.9pxSection separation
space-2xl~67.8pxMajor layout boundaries

Apply via style="gap: var(--space-md);" or the helper classes .lk-space-2xs … .lk-space-2xl (which setgap).

The 3 Laws of Spacing

Spacing is not decoration — it encodes how strongly elements relate to one another.

Law 1 — Relatedness

Every element is related to every other element, simply by being part of the same viewport.

Law 2 — Hierarchy

Some relationships are stronger than others. This is called hierarchy.

Law 3 — Proximity

The stronger the relationship, the closer the elements should be placed.

Proximity in practice

A worked example: an email inbox. Sender + Subject + Preview form one informational unit (space-2xs). Rows sit space-sm apart. The sidebar has a weak relationship to any single email, so it lives across a space-lg boundary.

Hon. Court ClerkHearing rescheduled — Case 24-1180The status conference has been moved to the 14th at 9:00 AM.
Danielle OrtizSigned retainer attachedThanks for the call today — the signed agreement is attached.
BillingInvoice #4821 is readyYour monthly statement is available for review in the portal.

Content shifts relationships. Proximity should followmeaning, not just layout convenience. A semantically-linked icon + word pair reinforce each other and belong close together:SunnySwap the icon for something unrelated and the word instead gravitates toward nearby related text.

Buttons

Loading buttons

A button that owns its full loading lifecycle. Pass an async action to withLoading and the button enters loading for its duration and auto-resets on settle — no hand-written try/catch/finally.

Promise path & size-aware spinner

withLoading(btn, action) runs the action, showing a spinner for its duration then auto-resetting. Spinner size is derived from the button size class.

Auto-reset on error

When the action rejects, the button resets itself so the user can retry. The error surfaces to the caller's .catch().

Stay loading on success

For navigate-away flows, pass stayLoadingOnSuccess so the button keeps spinning after success instead of flashing back.

Zero-config form submit

Inside a <form>, the button enters loading on submit automatically — width-locked and disabled to prevent double-submit.

Badges & alerts

PrimarySecondaryAccentOutlineGhost

Informational message for the user.

Your request was submitted successfully.

Please review before continuing.

Something went wrong.

Cards

Consultation

A card component used for practice areas and feature callouts.

Featured

An inverted card using the primary color for emphasis.

Form controls

Full nameMessage