CSS: THEME 2001

A plain HTML CSS theme inspired by the HAL 9000 interfaces in 2001: A Space Odyssey, with stark white type, solid screen colors, glowing program labels, and simple telemetry graphics.

To use it, link 2001.css in your page head and write normal document markup: headings, paragraphs, forms, tables, lists, quotes, and code blocks.

TYP. PROG. 601

Each heading can take a small command label directly above the main word. Put a plain <small> as the first child of <h1>, <h2>, or <h3>. The label stays close while the heading becomes a big color field.

GDE: 13-AQ GDE

Lower headings keep the same vocabulary at a smaller scale. The theme works best when the markup stays direct and the document structure does the heavy lifting.

NAV: 08-BF NAV

The fourth level is compact enough for notes, changelogs, and dense interfaces without becoming decorative noise.

TXT. PROG. 602

Body copy keeps a steady reading width: centered, calm, and direct. Inside a paragraph, bold text reads like a status signal, while italic text reads like telemetry. Links stay white and simple. Normal text uses IBM Plex Sans from Google Fonts, and table figures use IBM Plex Mono.

The theme does not require wrapper classes for everyday text. Write the page like a document first, then use classes only when the shape is truly special.

SYS 04-AC RELAY 1138.040 / BFR 00039 / AMB 14.85 / NODE 7 REPORTS NOMINAL SIGNAL DRIFT WITHIN ACCEPTED RANGE.

Open the pod bay doors, read the cascade, and keep the content legible in the dark. 

<link rel="stylesheet" href="2001.css">

<h1>
  <small>STA: 36-05</small>
  ODY
</h1>
<p>Write plain HTML. Let the stylesheet handle the console.</p>

FRM. PROG. 603

Forms keep the controls visible and readable, with fields pushed into the dark console palette.

Mission Request
Control Flags

SLOL

Tables can be stripped down to a telemetry matrix: no chrome, no heavy borders, only white figures on a solid screen color.

RE; RM/3242 4.4(36;)+.368
RE: 1 ----- .36840645 9/52
RE: 2 ----- .68706533 9/52
RE: 3 ----- .98700560 9/52
RE: 4 ----- .50545876 9/52
Crew Medical Index
Name Age Blood Status Bay
David Bowman 34 O+ Awake A-1
Frank Poole 33 A- EVA A-2
Victor Kaminsky 42 B+ Hibernation B-1
Jack Kimball 39 AB+ Hibernation B-2
Charles Hunter 41 O- Hibernation B-3

RAD. PROG. 605

Inline SVG can carry the same console language: thin white arcs, radial paths, quiet points, and a small numeric telemetry readout.

Radial telemetry chart 00000 49902 00000 77316 00000 14886 56992 84938 78331 84739 31490 68310

SPK. PROG. 606

Dense sparkline charts work best as simple signal fields: repeated white strokes, hard baselines, and a numeric register to the side.

Sparkline telemetry chart 85 607 53 702 42 975 32 780 12 973 47 635 02 789 36 921 37 603 90 368 8321 0448 2654 6550 3546 3543 6979 6487 9836 0697 5165 9873

PNL. PROG. 607

A menu becomes a grid of HAL-style screen tiles. This is one of the few places where the theme turns a plain tag into a more graphic component.

  • STA: 36-05HIB
  • PMT: 26-07COM
  • LIF: 13-AQGDE
  • CTE: 08-BFNAV
  • LIN: 06-DWVEH
  • AOS: 84-VNNUC
  • RTF: 39-B7DMG
  • VBR: 80-KJCNT
    •

    Computer malfunction

    NAV. PROG. 608

    A plain <nav> can echo the station arrival language buttons from the film while staying readable and simple.