nothing but datacenters facility nbd-01

identity · design system

Design system

How the facility is drawn: its tokens, its behaviours, its marks and its motion. Every specimen below is the live component, and every value is read from the stylesheet as this page loads.

marks

The cube and the sun.

Two marks and nothing else decorative. Both come from the emblem on the tee, the mugs and the manual's cover.

The emblem: a black cube in front of a setting sun.
The emblem. Full colour; the page's black is the cube.
The cube alone: favicon, header, section markers, the ID card's back.
The sun's stripes: thin above, thick below. A divider, and the foot of every page.

colour

Black and bone.

Two accents, both from the mark: the sun's ramp for emphasis, the cube's cyan for anything that can be followed or focused. Buttons are not coloured.

--groundthe page
--ground-2a surface
--ground-3a surface, hovered
--rulea rule
--dimlabels
--textbody
--lum-maxheadlines
--cyanthe cube: links, focus
--sun-1the sun, high
--sun-2the sun, middle
--sun-3the sun, low
--newa line above a headline
--lampthe status lamp

type

The sans speaks. The mono labels.

display

nothing but datacenters

launch headline · the sunset

Powering everything.

lede

A facility that runs, repairs, supplies and pays for itself.

body

Each rack is the same as the rack beside it, and lit for no one.

label · mono, uppercase, tracked

8.7 · devices

behaviours

Declared once.

Label, surface, frame, group, glow, controls: each is one rule over one list. A new component joins a list; it never restates the rule.

surface · a rounded panel
a caveat

The radius is on the box, never a clip, so a panel can never cut its text.

frame · a rounded picture
a single black server rack cabinet with a perforated door
glow · hover any panel
A row that lightsfrom under the pointerAnotherthe sun, low
card · lift, glow, breathe
Facility Lanyard & IDaccessoriesFacility Lanyard & IDA credential for personnel who are not required on site. Staff grade.$18.00generating…

controls

Four kinds, one set of states.

Hover the boxes below to see each cursor.

Primary SecondaryDisabledA link in running text

Press scales to 0.97. Keyboard focus is a cyan ring three pixels out, following the shape. Disabled is 35% and inert. Everything tappable is at least 44px tall.

defaultat rest
linkanything pressable
textover running text
crossmeasuring, on a ruler
inspecta still that opens
prevthe previous still
nextthe next still
closeclosing a still

motion

Calm inevitability.

Small distances, a long ease-out, generous stagger, nothing springy, everything once. Halcyon's language; every value a token.

--ease-calm
· the one curve, a long ease-out
--rise
· how far a block travels as it arrives
--reveal-dur
· how long it takes
--stagger
· between siblings, five at most
--img-dur
· an image fading in as it loads
--breathe
· a picture under the pointer
a single large industrial cooling fan in a square steel housing
8.7 · devicesArrives, then breathes.Scroll it in again from a fresh load: it rises 24px and fades over 600ms.
status

NBD-01OperatingOccupancy none

atmosphere

The haze.

Look up and down this page: the sun falls from the top edge, rises striped from the foot, and glows faintly down the black between. Tokens: --haze, --haze-top, --haze-bottom, --ambient.