Grounded x Technical

A dual-accent design language for The Multi-Threaded Mind: blueprint precision as the structural register, elastic warmth as the counterpoint.

01 COLOR

Signature Teal Structure

Signature Teal --signature-teal-500
50
100
200
300
400
500
600
700
800
900

Oxidized Amber Interaction

Oxidized Amber --oxidized-amber-500
50
100
200
300
400
500
600
700
800
900

Sandstone Neutral

Sandstone --sandstone-500
50
100
200
300
400
500
600
700
800
900

Architect Paper Surface

Architect Paper --architect-paper-100
50
100
200
300
400
500
600
700
800
900
--bg-neutral

Neutral

De-emphasised surface for inactive or disabled contexts.

--bg-primary

Primary

Teal-tinted surface for structural emphasis.

--bg-secondary

Secondary

Amber-tinted surface for interaction emphasis.

--bg-intermediate

Intermediate

Balanced teal/amber blend for neutral brand tone.

--bg-gradient-primary

Gradient Primary

Teal wash fading into canvas — for hero or feature surfaces.

--bg-gradient-secondary

Gradient Secondary

Amber wash fading into canvas — for warm callout surfaces.

--bg-gradient-fancy

Gradient Fancy

Vibrant teal → sandstone → amber sweep — for dual-accent hero panels.

02 TYPOGRAPHY

--font-heading

Precision in Draft

--font-heading (italic)

The Soul of the Interface

--font-heading

Section Heading

--font-editorial

The craft of system thinking lies not in architectural complexity, but in clarity of intent and discipline in execution.

--font-editorial (italic)

"Blueprint precision as the structural register, elastic warmth as the counterpoint."

--font-editorial
Published 18 April 2026 · 4 min read
--font-body

Builder. Data engineer specialising in telemetry and data products. Obsessed with systems that scale gracefully.

--font-body

Infrastructure · Golang · Telemetry · Data Products

--font-body

Last updated April 2026

--font-chrome
const soul = (intent) => true;
--font-chrome
METADATA_VERSION_01.2.4
--font-chrome
01 // SECTION LABEL

03 LINES & SPACING

--radius-sm
--radius-md
--radius-lg
--radius-full
--line-soft
--line-strong
--space-2xs
4px
--space-xs
8px
--space-sm
12px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
40px
--space-3xl
48px
--space-4xl
64px

04 SURFACES & ELEVATION

Raised
--bg-elev--depth-raised
Sunken
--bg-elev--depth-sunken
Floating
--bg-elev--depth-floating
Overlay
--bg-elev--depth-overlay

Floating Surface

--bg-glass + --border-glass + --shadow-glass with backdrop-filter: blur(12px) .

05 SENTIMENT

Critical

SentimentCard

A destructive action cannot be undone. Confirm before proceeding to avoid data loss.

Default
Hover
Pressed
Focus
Disabled

Caution

SentimentCard

This action may affect downstream dependencies. Review impact before applying.

Default
Hover
Pressed
Focus
Disabled

Positive

SentimentCard

Deployment completed successfully across all nodes and health checks passed.

Default
Hover
Pressed
Focus
Disabled

Info

SentimentCard

Pipeline run scheduled for 03:00 UTC with an estimated completion of 3 minutes.

Default
Hover
Pressed
Focus
Disabled