MRDOTS.us
Brand system & component reference — the tokens, type, and UI patterns shared across the public site, the Owners console, and the deployed applications.
Systems. Technology. Leadership.
Theme v2 · 2026
self-hosted fonts
01 — Brand palette
Aurora, on ink
A dark-native identity: near-black ink ground, off-white text, and a single warm ember accent that carries every call to action. Surfaces are built from translucent white, never solid fills, so cards feel like frosted glass over the aurora glow. Click any swatch to copy its value.
02 — Portfolio palette
The editorial sibling
Cory's personal portfolio (/portfolio) runs a warmer, print-inspired set — the same dark discipline, but cream text and a rust/gold accent pair instead of ember. Use this only within the portfolio world.
03 — Status & semantics
State you can read at a glance
Reserved for live state in the Owners console and dashboards — running, working, stopped. Semantic color is kept separate from the ember accent so "attention needed" never competes with "this is a button."
04 — Typography
Four voices, one system
Inter carries all product UI and body copy; the portfolio world adds a serif display, an italic serif for subheads, and a monospace for labels and code. These render in the real self-hosted faces.
InterUI · body · headings (all brand surfaces)400 · 600 · 750
Intelligent platforms, built to launch.
The workhorse of the system. Set headings tight (−.01em, weight 750) and body at 15px/1.6 for comfortable reading. Uppercase labels get .18em tracking to earn their space.
Playfair Displayportfolio display headline400–900 · italic
Cory Lintz
Cormorant Garamondportfolio subheads & pull quotes300–700 · italic
"Systems. Technology. Leadership. Real-World Execution."
Space Monolabels · code · data400 · 700
RETIRED VETERAN ✦ PROJECT MANAGER ✦ IT ✦ AGILE ✦ USAF
05 — Components
The building blocks
Every surface is assembled from this small kit — translucent cards, pill chips, gradient primary buttons, and glowing status dots.
Kicker & chips
MRDOTS.US LLC
Next.js 16port 3300docker
Status badges
Flagship
In development
Research preview
Live-state dots
Running
Working
Stopped
Project cardFlagship
Translucent panel, hairline border, lifts and warms its edge on hover.
06 — Formatting rules
Spacing, shape, and scale
Radius
- Cards / panels
- 14px
- Buttons / inputs
- 10px
- Chips / pills
- 999px
Layout
- Content max-width
- 1180px
- Grid min column
- 310px
- Gutter / gap
- 14–16px
Type scale
- h1
- clamp 30–52
- h2
- clamp 21–28
- body
- 15 / 1.6
- label tracking
- .18em
Motion
- Hover transition
- .15s
- Card lift
- −2px Y
- Reduced-motion
- honored