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

git branch -a

Branches

A runtime layer over tokens.css: each branch re-maps the same token contract, so components need no changes. Branches compose with the build-time pnpm theme sheets rather than replacing them —main is simply the absence of data-branch, i.e. whatever theme is currently shipped. Every non-main branch is fixed-scheme (there is no light Dracula), so each hides the sun/moon toggle. Where a published brand colour fails WCAG AA as text it was demoted to fills and borders, with an in-family substitute carrying the text: accessibility overrides fidelity.

>_ git checkout mainlight + dark

my orange. Predates every AI company that later had the same idea.

Regan’s own brand orange, in use long before the current crop of coding tools.

--color-bg#faf6f0
--color-text#1f1a16
--color-brand#ff5722
--color-link#c23b00
>_ git checkout claude-codelight + dark

coral on cream. Tasteful. Quietly expensive.

Anthropic’s published brand palette. Its accents fail AA on the cream ground and pass on the ink, so the dark scheme is the more faithful of the two.

--color-bg#faf9f5
--color-text#141413
--color-brand#b8512f
--color-link#ac4426
>_ git checkout codexlight + dark

clean surfaces, blue accents, a pet for company.

OpenAI Codex app tokens. #339cff accent on white/dark surfaces, system typography, 12.5px radii — plus all 8 spritesheet pets.

--color-bg#ffffff
--color-text#1a1c1f
--color-brand#339cff
--color-link#1366d6
>_ git checkout antigravitydark + light

Gemini CLI in witness protection. Deep navy, Antigravity blue, SVG aura gradients.

Google Antigravity & Gemini AI palette: sampled directly from the official Antigravity SVG logo filters (#3186FF, #749BFF, #FC413D, #FBBC04, #00B95C).

--color-bg#090d16
--color-text#f8fafc
--color-brand#3186FF
--color-link#749BFF
>_ git checkout draculadark + light

the theme every dev has tried once. Immortal, faintly goth.

Dracula Classic and Alucard Classic (MIT). Both flavours are official.

--color-bg#282a36
--color-text#f8f8f2
--color-brand#bd93f9
--color-link#8be9fd
>_ git checkout catppuccindark + light

mocha, for people who alphabetise their dotfiles.

Catppuccin Mocha and Latte (MIT), using the project’s own Base/Mantle/Crust/Mauve vocabulary. Both flavours are official.

--color-bg#1e1e2e
--color-text#cdd6f4
--color-brand#cba6f7
--color-link#89b4fa
>_ git checkout vibe-codedark + light

indigo gradients, glassmorphism, and the word “delve”. Ships slop by default. On purpose.

Original parody of AI-generated design. Tailwind’s indigo-500 is the documented origin of the aesthetic, so the hue is the joke.

--color-bg#0f172a
--color-text#e2e8f0
--color-brand#4f46e5
--color-link#818cf8

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

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

grep primitives

Primitives

Buttons

Card

Card surface

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

Links

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.

reganmcgregor.com.au/style-guide/