UI GUIDELINES

Spec v1.2.0
Tactile · Heavy · Pressable
Chunky hardware panels for failing systems. The Digital Rust UI Specification, demonstrated live.

Design Principles

Digital Rust interfaces are tactile panels in a failing server rack. Every interactive element is a physical piece of chunky old hardware: a switch you can press, a bezel that catches light, a surface with weight. Five rules carry the system.

1 · Everything physical has an edge

Interactive elements carry 2px Dark Packet borders. Borders are walls, not decoration.

2 · Everything raised casts a hard shadow

Offset solid shadows, zero blur, drawn in Bad Sector. Light in this system is directional and warm.

3 · Everything raised catches light

The inner highlight (inset 0 1px 0 rgba(255,255,255,0.1)) rides under every offset shadow. It is the bevel of the panel.

4 · Everything pressable presses

Rest has offset; hover lifts and grows it; active collapses it and drives the element into the rack. No static hovers.

5 · Nothing is flat

Surfaces carry structural noise and scanlines. Interactive text surfaces (inputs, editors) are exempt: legibility outranks atmosphere inside a text field.

Interaction Physics

The press cycle is the system's signature motion. The element translates with the shadow: hover lifts toward the light (up-left), active presses away from it (down-right), always at 150ms.

The Press Cycle CSS 
/* Rest: offset shadow + inner-highlight bevel */
.dr-btn {
	box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight);
}
/* Hover: lift toward the light, offset grows 2px per axis */
.dr-btn:hover {
	transform: var(--dr-press-hover);  /* translate(-2px, -2px) */
	box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-highlight);
}
/* Active: drive into the rack, offset collapses */
.dr-btn:active {
	transform: var(--dr-press-active); /* translate(2px, 2px) */
	box-shadow: var(--dr-shadow-active);
}

Try it on every button, checkbox, and chip on this page. Focus is a 2px Stack Overglow outline at 2px offset, in addition to the resting shadow; keyboard focus never removes the shadow. Under prefers-reduced-motion, transforms and transitions are removed but all state colours remain.

Buttons

The signature component. A hardware panel switch: thick edge, hard shadow, light-catching bevel, physical travel. One primary per view; labels are verbs ("Save changes", not "OK").

Variants

primary: Digital Rust → Amber Alert + glow on hover · ghost: transparent → Core Meltdown fill + Digital Rust border · disabled: dead switch, no click

Inputs & Wells

Inputs sit below the panel, not above it: the Recessed Well Rule. The darkest surface on the page, a 2px Bad Sector border, no offset shadow. Depth through darkness, not elevation.

Text Input

✗ Connection refused on port 22

Text Area & Slider

hover: Dark Packet border · focus: Digital Rust border + Stack Overglow ring · invalid: Amber Alert

Switches

Checkboxes run the full press cycle; toggles slide a machined thumb on a railed track. Both are square-edged: machined parts, not pills.

Checkboxes

Toggles

Containers

Tabs, menus, modals, toasts, tooltips, callouts, and status bars: solid panels bolted over the page, never blurred glass.

Tabs

$ gcc -o entropy kernel.c && ./entropy
segmentation fault (core dumped)
ln 42, col 7 ✗ 3 ⚠ 1 Git✓

Menu

  • Recompile kernel
  • Inspect core dump
  • Flash firmware
  • RMA the board

hover: Bad Sector fill · separators full-bleed · no backdrop blur

Modal

Format /dev/rust?

This will irrecoverably corrode all sectors on the device. Backups will not save you.

offset-lg, highest layer · one primary per view · backdrop: rgba(17,4,2,0.7), never black, never blurred

Toasts

✓ Firmware flashed. 4,096 blocks verified.
⚠ Bus temperature 85.5°C and rising.
✗ Kernel panic in module entropy.ko
ℹ 3 updates staged for next reboot

Bricked Board panel — notices radiate residual heat

Callouts

Note

The 3px left accent is a deliberate exception to the no-accent-stripe rule, so semantic blocks are identifiable at scroll speed.

Warning

Offset shadows communicate elevation. Colour communicates semantics. Never both at full strength.

Badges & Tooltip

Git Added Git Modified Git Deleted Deprecated Hint
Tooltip: Core Meltdown panel, offset-md + bevel, Phosphor Smoke text. No arrow stem; the shadow says what it floats above.

badges are static rivets: no press cycle, no shadow

Named Rules

The No Blur Rule

Blur radius is zero everywhere except glow shadows, which simulate radiated heat, not material depth.

The Bevel Rule

An element with an offset shadow and no inner highlight is unfinished. The two are stacked and travel together.

The Recessed Well Rule

Wells stay in the rack: no offset shadow, no hover lift, no texture. Depth through darkness, not elevation.

The Black Is Forbidden Rule

No #000 anywhere, including scrims and backdrops. Warm near-blacks only.

The Radius Ceiling Rule

Nothing rounds past 6px. 4px for panels, 2px for machined parts (checkboxes, thumbs, menu items). Pills for badges only.

The Dead Switch Rule

Disabled elements have no shadow and no transform. A dead switch does not click.