WadeLaw

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.

Logos

Text marks using the same Wade / Law split as the site header. Download a PNG or WebP at 4× — colors follow the theme you have selected.

Wordmarks

WadeLaw
Header style
Wade Law
On primary
WadeLaw
On neutral

Favicon tiles

Letters fill most of the 160×160 tile so they stay readable at 16×16. Downloads are 640×640.

WL
WL · primary
W
W · primary
WL
WL · circle
WL
WL · outline
WL
WL · inverse
WL
W · accent L

Color tokens

Aa
primary
Aa
secondary
Aa
accent
Aa
neutral
Aa
info
Aa
success
Aa
warning
Aa
error
Aa
base-100
Aa
base-200
Aa
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.8px
  • space-xs~6.1px
  • space-sm~9.9px
  • space-md16px
  • space-lg~25.9px
  • space-xl~41.9px
  • space-2xl~67.8px

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.

strongmediumweak

Law 3 — Proximity

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

more spacetightdistant

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

Cards

Consultation

A card component used for practice areas and feature callouts.

Featured

An inverted card using the primary color for emphasis.

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.

Copy buttons

Writes a string to the clipboard. Hover shows the tip; after a successful copy the tip force-opens as “Copied!”, the icon swaps to a check, and both reset after 1.2s so the same feedback works on touch.

Value + icon

Slot the visible label; the Remix copy icon is appended by default. This is the pattern used on contact surfaces.

Icon only

Omit the slot when the value is already shown nearby. Thearia-label still announces “Copy …”.

Joshua.c.wade@gmail.com

Tooltip position

tooltipPosition maps to static daisyUI classes so they are not purged.

Empty value & no icon

Without a value the button is disabled.showIcon=false leaves the slot as the only visual.

Confirm dialogs

A two-stage action for anything that needs a look at the consequence before it runs. The trigger only opens the dialog. Cancel, the close control, and the backdrop dismiss it. Confirm is a separate button, so a failure can stay on screen and be retried.

Review, then confirm

Point data-confirm-open at the dialog id. The confirm style belongs to the consequence: a destructive action passesbtn btn-error btn-sm.

Revoke subscription

Revoking stops every calendar already subscribed. Each one has to subscribe again with a new link.

Failure stays in the dialog

Confirm does not use method="dialog", so the dialog stays open. showConfirmError fills the line under the warning, and opening the dialog again clears it.

Publish docket

Publishing sends this month's hearings to the court calendar.

Image viewer

For checking a citation photo when extraction fails or the result needs a second look. Scroll or pinch to zoom toward the pointer, drag to pan, and rotate by quarter turns. The percentage is relative to the fitted photo. Reset returns it upright and fitted.

Sideways citation

The sample is rotated in the file. Use rotate right until the heading is upright, then zoom in on the citation number.

Sample citation photographed sideways
100%

Badges & alerts

PrimarySecondaryAccentOutlineGhost
Informational message for the user.
Your request was submitted successfully.
Please review before continuing.
Something went wrong.

Form controls