cat style-guide.md

Brand & Design

A living reference for reganmcgregor.com.au. Every value here is read fromtokens.css at runtime, so it tracks the real system and reflects the current theme. The written rules live in DESIGN.md.

grep palette

Palette

Brand

--color-brand…
--color-brand-deep…
--color-brand-tint…
--color-on-brand…
--color-on-brand-bg…

Surfaces

--color-bg…
--color-surface…
--color-card…

Text & links

--color-text…
--color-text-muted…
--color-link…

Lines & code

--color-border…
--color-code-bg…
--color-code-text…

Gradients

--gradient-ember
--frame-bg

grep type

Type

display / body

Gabarito Variable

AaBbCc 0123 — The quick brown fox

labels / meta / code

IBM Plex Mono

AaBbCc 0123 — >_ machine layer

Scale

Display…
Heading 3xl…
Heading 2xl…
Heading xl…
Large…
Body base…
Small…
Extra small…

Label grammar

terminal prompt label

hero kicker with cursor

Prompts are lowercase mono with a >_ prefix; headings and titles are Title Case. One blinking cursor per page.

grep primitives

Primitives

Buttons

Primary →Ghost

Card

Card surface

Elevation on light, border-led on dark. Uses --color-card, --radius-lg, --shadow-card.

Links

Inline text links use --color-linkand shift to --color-text on hover.

grep radius

Radius & elevation

--radius-sm…
--radius-md…
--radius-lg…
--radius-xl…
--radius-pill…
--shadow-card
--shadow-lift

grep scale

Scale

--space-1…
--space-2…
--space-3…
--space-4…
--space-5…
--space-6…
--space-7…
--space-8…
--space-9…

grep voice

Chrome copy

  • 404 This page ranks for absolutely nothing.
  • CTA Yes, obviously →
  • footer >_ 100% organic traffic, locally sourced.

Dry, tongue-in-cheek, pop-culture unashamed — in labels and UI chrome only, never in SERP-facing copy.