DMT / System / 01

Style guide.

The same components and tokens used throughout this site. These specimens use the existing DMT colours, fonts, animated background, and controls.

01 / Themes

Track palette + colour mode

Track theme Colour mode

Track theme: GL+HF. Colour mode: dark.

Track themes keep the same animated grid while changing the palette and dock treatment. Light mode swaps the black ground for a warm paper ground and is saved in this browser.

02 / Tokens

Values from the stylesheet

Colour & surfaces

backgrounds, ink, accents, rails, and dock

--bg-void
#0a0705

--theme-page-bg
#1c130c

--theme-pixel-bg
#1c130c

--theme-color-1
#ffa908

--theme-color-2
#fb5c07

--theme-color-3
#ff5807

--theme-color-4
#f57587

--theme-color-5
#b17b94

--theme-color-6
#077b97

--theme-color-7
#058232

--surface-glass
rgba(10,7,5,0.72)

--surface-glass-dim
rgba(10,7,5,0.52)

--surface-solid
rgba(10,7,5,0.96)

--border-subtle
rgba(245,240,232,0.10)

--border-active
rgba(245,240,232,0.28)

--border-accent
rgba(255,170,0,0.45)

--text-primary
#f5f0e8

--text-muted
rgba(245,240,232,0.65)

--text-accent
#ffaa00

--text-destructive
#ff4500

--page-bg
var(--theme-page-bg)

--pixel-bg
var(--theme-pixel-bg)

--theme-dock-bg
var(--surface-glass)

--theme-dock-border
var(--border-accent)

--theme-dock-fg
var(--text-primary)

--theme-dock-muted
var(--text-muted)

--theme-dock-btn-bg
#251a10

--theme-dock-btn-hover
#352718

--theme-dock-primary-bg
#4a3a0e

--theme-dock-primary-hover
#5c4a12

--theme-dock-primary-fg
#f5e6c8

--dock-bg
var(--theme-dock-bg)

--dock-border
var(--theme-dock-border)

--dock-fg
var(--theme-dock-fg)

--dock-muted
var(--theme-dock-muted)

--dock-btn-bg
var(--theme-dock-btn-bg)

--dock-btn-hover
var(--theme-dock-btn-hover)

--dock-primary-bg
var(--theme-dock-primary-bg)

--dock-primary-hover
var(--theme-dock-primary-hover)

--dock-primary-fg
var(--theme-dock-primary-fg)

--nav-border
#fff

--footer-line
#fff

--footer-link
#fff

--control-fg
#fff

--control-hover-bg
#fff

--control-hover-fg
#000

--rail-bg
#000

--rail-fg
#f5f0e8

--rail-border
transparent

--placeholder-label-bg
#000

--placeholder-label-fg
#f5f0e8

--paper
var(--bg-void)

--ink
var(--text-primary)

--muted
var(--text-muted)

--accent
var(--text-accent)

--on-accent
var(--bg-void)

--line
var(--border-subtle)

--surface
var(--surface-glass)

Grid & layout

units, reading measure, and shared geometry

--cell
16px

--cell-2
32px

--cell-3
48px

--cell-4
64px

--cell-6
96px

--cell-8
128px

--pixel-round
calc(var(--cell) * 0.4)

--nav-height
64px

--pad-size
var(--cell-4)

--pad-gap
4px

--backdrop-blur
blur(12px) saturate(140%)

--ui-outglow
drop-shadow(0 0 6px rgba(0,0,0,0.25)) drop-shadow(0 0 2px rgba(0,0,0,0.25))

--reading-rail
clamp(160px,20vw,290px)

--reading-gap
clamp(24px,4vw,64px)

--gutter
clamp(1rem,4vw,4rem)

--measure
68ch

--page-width
1100px

--grid-unit
32px

Type & spacing

font stacks, type scale, and rhythm

--font-mono
'Geist Mono',ui-monospace,SFMono-Regular,Consolas,monospace

--font-display
'Geist Pixel', ui-monospace, monospace

--text-xs
0.75rem

--text-sm
0.875rem

--text-base
1rem

--text-lg
1.25rem

--text-xl
clamp(1.5rem,3vw,2.5rem)

--text-display
clamp(2rem,5vw,3.5rem)

--space-1
0.25rem

--space-2
0.5rem

--space-3
0.75rem

--space-4
1rem

--space-6
1.5rem

--space-8
2rem

--space-12
3rem

--space-16
4rem

--space-24
6rem

Motion & layering

stacking order, texture strength, and timings

--z-bg
0

--z-noise
5

--z-squares
10

--z-content
50

--z-overlay
70

--z-words-track
15

--z-words-sample
110

--z-ui
100

--z-modal
120

--z-debug
9999

--grain-opacity
0.16

--noise-opacity
1

--stroke
1px

--motion
180ms

The existing track palettes remain the source of colour. These values come from global.css and the scoped reading components; they follow the active runtime theme.

03 / Typography

Geist Mono + Geist Pixel / locally hosted

--text-xs / 0.75rem

High tech, low life.

--text-sm / 0.875rem

High tech, low life.

--text-base / 1rem

High tech, low life.

--text-lg / 1.25rem

High tech, low life.

--text-xl / clamp(1.5rem,3vw,2.5rem)

High tech, low life.

--text-display / clamp(2rem,5vw,3.5rem)

High tech, low life.

Reading measure: 68ch. Body line height: 1.85. Geist Mono for reading and controls; Geist Pixel for display headings. Use sentence case for prose and short uppercase labels for metadata.

04 / Links & controls

Keyboard accessible

Inline link

Read the working notes for context.

Square arrow

How does a disclosure behave?

A native details element works without JavaScript. Enter or Space opens it, and the square arrow points up. The About navigation also uses a native disclosure. The homepage sampler opens from the dock in a modal, closes with Escape, and restores keyboard focus.

What about motion and focus?

Focus outlines stay visible. Reduced-motion preferences disable transitions and scroll animation. Decorative elements never block reading.

Project status tags

Four shared states with solid fills and noise texture. Spike cycles every 1.6 seconds between red/black and black/white; reduced motion keeps it red.

05 / Media

Post covers 16:9 · compact project thumbs

Solid placeholder cover: the active theme colour, black diagonal rules, and the reusable noise texture.

A real property photo, converted locally to a transparent one-bit mask. Both colours follow the theme.

Compact project thumbnail using the same solid, diagonal, noisy placeholder treatment.

[ replacement image ]

Project media placeholder. Replace it with an image when the real asset is ready.

noise-color-1

noise-color-2

noise-color-3

noise-color-4

noise-color-5

noise-color-6

noise-color-7

Image covers use Astro's image pipeline and explicit dimensions. Add an image and alt text in MDX frontmatter; when no image is supplied, the static solid placeholder keeps the page quiet until the real asset is ready. Use effects on editorial images, not screenshots where detail matters. Noisy surfaces can use noise-color-1 through noise-color-7; thumbnails derive a stable slot from their seed, while a component's color prop can choose one explicitly.

Noise texture

.noise

High tech, low life.

A working link under the texture

Add class="noise" to a container. The isolated SVG texture uses soft-light blending and never intercepts pointer events. Set --noise-opacity to tune its strength.

06 / Grid & motion

Structure, with interruptions

The original animated background grid remains in place. The left rail follows pointer height across the page, and becomes a Back link on inner pages. The following label is hidden on mobile and touch screens. With a mouse and reduced motion it stays still. Homepage content sections have a minimum height of 150vh; the footer stays compact. Pixel cells are progressively omitted outside the left rail as home scrolls, without translating or clipping the grid. Navigation uses a flat background; section panels are transparent without blur. This optional content specimen reveals small marks once on entry; it does not replace the background engine.