The Contact EraDesign kit

InterImm phase 2 · design language

137

137 is the last thing the beacon says: 1/α, the fine-structure constant, the one number any physicist in any world would recognise. It names the design language because it is what both sides already share. The look comes from the first thing they sent, 667 bits that fold into a 23 × 29 picture. Every site of the Contact Era is built from that picture: pixels on deep and signal blue, their voice in white-cyan, ours in Sol yellow, and nothing round.

Use it on a site → Source
waterfall · 1420–1662 MHz

Principles

Six rules the whole era follows

When a choice is not covered below, decide it with these.

01

A conversation, not a voyage

Nobody is coming and nobody is going; only messages cross. The pictures are dishes, spectrograms, clocks, logs and letters in transit, never ships or planets seen up close.

02

Built from their picture

Their message is the only image we share with them, so it is the whole visual language: a 4 px grid, a pixel face for page titles and big numbers (never for text you read), square or stepped corners, hard shadows, and the picture itself behind every hero.

03

Every number is a readout

Times, distances, coordinates and counts are set in mono with tabular figures, with units, so they line up and read as measured.

04

Two voices on deep blue

White-cyan is what reaches us: their signal, the detection, the current item. Sol yellow is what we send: replies, letters, the send button. Everything else is blue and white. No paper, no red.

05

Bits arrive, nothing glides

Motion steps instead of easing, like data coming in: a picture filling row by row, a blinking packet, a ticking clock. Everything stops for reduced motion.

06

Static, linked, free

No build step, no server, zero running cost. Sites link this kit instead of copying it, so a change here reaches every site.

The beacon from Ross 128 b, folded 23 wide. Colours mark its four parts.

The source

One picture, four glyphs

The picture has four parts. The kit draws each as an icon with data-glyph, so every site speaks with their alphabet.

count

One to nine in binary. Use for numbers, data, a catalogue.

system

Their star and its one planet, circled. Use for places, planets, the explorer.

dish

A dish and its beam. Use for listening, sending, letters.

hydrogen

The hydrogen line, the unit both sides share. Use for clocks, frequencies, the ledger.

Not phase 1

Two eras, two looks, one set of hooks

Phase 1 is the public paperwork of settling Mars. Phase 2 is a conversation across light years. They share markup and class names so a site can move between them, and nothing else.

Phase 1 · interimm.org/kit/Phase 2 · 137
GroundPaper and ink, follows the visitor's light or dark settingDeep blue for reading; signal blue, a pixel grid and their picture in heroes
ColourOne Mars rust, used sparinglyWhite and blue, with two voices: white-cyan for them, Sol yellow for us. No red
TypeSource Serif headings, IBM Plex text and dataPixelify Sans headings, Instrument Sans text, JetBrains Mono data
LinesThin solid printed rules, soft cornersDashed lines of bits, square and stepped corners, hard shadows
ControlsSquare ink buttonsNotched pixel blocks: white-cyan to receive and explore, yellow to send
SignatureThe signal line under the header: distance and delay to MarsTheir picture behind every hero, the four glyphs, the exchange and the waterfall
Brand markThe InterImm wordmarkOur star and theirs as pixel squares, one bit between

Conversation

An exchange across 11.01 light years

Their messages arrive on the left in white-cyan, ours leave on the right in yellow, and the dashed spine between is the distance. Use it wherever the era shows messages, letters or replies.

  1. Ross 128 b → Sol

    A prime-numbered preamble, then 667 bits that fold into a picture: counting, their star with its one planet circled, a dish, hydrogen.

  2. Sol → Ross 128 b

    We heard you. Here is how we count, where we are, and the same line of hydrogen you used.

  3. Ross 128 b → Sol

    Waiting. Nothing we send can be answered sooner than twice the distance.

.transit · a message on its way

Sol · 2219-10-05Ross 128 b · 2230-10-09
Ross 128 b · 2208-09-13Sol · 2219-09-18

Kickers take a voice too: .kicker listens (white-cyan), .kicker-out sends (yellow). Logs mark what reached us with .is-key and what we sent with .is-out.

Anatomy

Two kinds of page, one frame

Every site shares the header and footer. The header shows the era first and the site second, so a visitor always knows they are in the same family.

Story page

The entrance, an archive, an essay. Centred, generous, bilingual.

  1. .site-header■·■ The Contact Era / Site · menu
  2. .hero.spacetheir picture · kicker · h1 · lede · scope
  3. .sectionkicker · .section-title · content
  4. .section.section-altalternate ground
  5. .site-footermenu columns · legal

Tool

A ledger, an explorer, a decoder. Full width, dense, the data is the hero.

  1. .site-header[data-width=full]■·■ The Contact Era / Tool
  2. .app-shell.app-side · .app-main · .app-detail
  3. .sectionabout · method · sources
  4. .site-footermenu columns · legal

A tool with one view (the pulsar ledger) may use a story hero with readouts instead of a side panel.

Colour

Roles, not paint

Use the token for the role, never a hex value. Pages read on deep blue (--bg). Heroes are .space: signal blue (--sky), the pixel grid and their picture.

Ground and ink

  • --skyhero ground (.space)
  • --bgpage ground
  • --bg-altalternate sections
  • --surfacecards, inputs
  • --surface-2hover
  • --textink, borders that matter
  • --mutedsecondary text
  • --borderhairlines
  • --border-strongcontrols

The two voices

  • --them · --accent · --signalincoming: their signal, the detection, the current item, primary buttons
  • --them-softselected rows, shadows of their messages
  • --us · --beamoutgoing: our replies, letters, the send button
  • --us-softour highlights
  • --deepheader, footer, inputs, scopes
  • --noisethe noise floor in a waterfall

Do

Pick the voice by direction

Anything that came from them, or that we are looking at, is white-cyan. Anything we write or send is yellow. One subject per chart in their voice.

Don't

Round it off

No radii, no blur, no soft shadows, no gradients that ease. No paper, rust or serif: those belong to phase 1. Chart series never use the two voices.

Type

Three voices

Pixelify Sans announces (page titles and display numbers only, never below 2.4 rem), Instrument Sans tells (section titles, headings, text), JetBrains Mono measures. All SIL OFL, self-hosted with the kit (Latin). Chinese uses the system's CJK fonts at their heaviest weight so it holds its own beside the pixels.

--step-5

通联 Contact

--step-4 · hero

11.01 light years

--step-3 · page

The clocks that heard it

--step-2 · section

Fold the beacon

--step-1 · lede

A question sent today reaches them in 2230.

--step-0 · body

Every pulsar ledger in the solar system logged the same faint pattern.

--step--1 · note

Periods from the ATNF Pulsar Catalogue, rounded.

--step--2 · label

Ledger time · 2219

.readout

RA 11h47m44.4s · Dec +00°48′16″ ·

Space and shape

A short scale

Spacing in eight steps on a 4 px grid, and no radii. Content sits in .wrap (76 rem); tools use .wrap-full. Layouts stack below 56 rem.

  • --space-1 · 0.25
  • --space-2 · 0.5
  • --space-3 · 0.75
  • --space-4 · 1
  • --space-5 · 1.5
  • --space-6 · 2
  • --space-7 · 3
  • --space-8 · 4.5
--px
4px · one bit
--notch
one bit cut
--radius*
0 · always
--dur
0.12s · stepped

Components

Controls and containers

All plain HTML with a class. Names are shared with the phase 1 kit where phase 1 has the same thing.

Primary Default Ghost → Send → Large Text link →
  • chip
  • 1420.405 MHz
  • M4V
soonreceivedsent

.panel with .card-link-wrap

Signal

Decode the beacon

Fold the raw data, find the prime spacing, see the picture.

Open →

.card-grid with .card and .tile

Card

Plain card on the surface colour.

Tile

With a glyph icon.

Forms: .field, .field-pair, .field-checks, .inline-field

Distance (ly)
Ledgers

.split · two columns that stack; set --split for the ratio

<div class="wrap split" style="--split: minmax(0, 1.6fr) minmax(0, 1fr)">…</div>

Data

Charts read like instruments

Draw on --scope inside a figure.scope, read colours from CSS so charts follow the theme, and keep one subject in focus.

  • --c1first series
  • --c2second
  • --c3third
  • --c4fourth
  • --plot-dimunknown, unmatched
  • --signalthe subject only

Sequential --seq-1 … 7

  • lowhigh

Diverging --div-cool-3 … --div-mid … --div-hot-3

  • coolhot
Beacon pass2219-10-05 03:12 UTC+112 ns
residual (ns)story time
  • beacon pass
  • Farside
  • Earth
  • Isidis
  • reference
  1. Categorical series take --c1 to --c4 in order; more than four means group the rest as --plot-dim.
  2. The subject of the chart (a detection, a candidate, the selected point) is --signal. Context is --plot-context or --plot-dim.
  3. Axes, ticks and labels in mono at --step--2, gridlines in --plot-grid. Units always on the axis.
  4. Every chart has a .legend, a text alternative (aria-label or a table), and a note naming its source.
  5. Hover details go in a .tooltip; estimated values are marked (~) and never look measured.

Instruments

The signature

Add the markup and interimm.js does the rest. Also on window.InterImm for pages that build them later.

<canvas data-waterfall data-line="0.62">
<canvas data-waterfall data-line=""> · noise only

.space · their picture, drawn by the kit

<section class="space"> · data-message="off" to leave it out

.readouts

Story time
Days since signal
–
Distance
11.01 ly

.log

  1. An entry

    Timestamped entries down a line of bits.

  2. A key entry

    Something reached us: .is-key.

  3. Our entry

    Something we sent: .is-out.

.data-table

NodeDelay (s)
Farside0.000
Isidis+60.193

Words

How the era speaks

  1. Plain and exact. Short sentences, real numbers with units. "11.01 light years", not "very far away".
  2. Story time is the present. Dates are in the story calendar (real time + 70,491 days); say so once on any page that shows them.
  3. Calm, not cinematic. Nobody is coming. Wonder comes from the facts, not from adjectives.
  4. Every message has two dates. When it was sent and when it arrives; the gap is the story.
  5. Real science, labelled fiction. Real catalogues are cited; invented details are called proposals or story.
  1. Chinese first, English second. Chinese at the site root, English under /en/, the same layout and the same sections. A tool in one language marks the header with data-lang-cn="".
  2. Names. The era: 通联纪 · The Contact Era. The book: 星际移民之书 · 恒星篇 / The Book of InterImm · Interstellar.
  3. Kickers are one to three words, mono, uppercase in Latin script.
  4. Buttons say what happens: "Fold it yourself", "Write back", "Download CSV".

Use

Add it to a site

Link, don't copy. Same hooks as the phase 1 kit: to move a site between eras, change the two links between interimm.org/kit/ and interstellar.interimm.org/kit/.

Story page

<link rel="stylesheet" href="https://interstellar.interimm.org/kit/interimm.css">
<script src="https://interstellar.interimm.org/kit/interimm.js" defer></script>

<header class="site-header" data-interimm-header
        data-lang="en" data-current="signal">
  <div class="wrap header-inner">…fallback brand…</div>
</header>
<main id="main">
  <header class="hero space">…</header>
  <section class="section">…</section>
</main>
<footer class="site-footer" data-interimm-footer></footer>

Tool

<header class="site-header" data-interimm-header
        data-lang="en" data-current="explorer"
        data-site="Exoplanet Explorer" data-site-url="./"
        data-width="full" data-lang-cn="">…</header>
<main id="main" class="app-shell">
  <aside class="app-side">filters</aside>
  <section class="app-main">views</section>
  <aside class="app-detail" hidden>details</aside>
</main>
<footer class="site-footer" data-interimm-footer></footer>

Full notes: kit/README.md. Menu and footer for every site live in nav.cn.json and nav.en.json.

Checklist

Before a phase 2 site goes live

  1. Links the kit's stylesheet and script from interstellar.interimm.org; no copied kit files.
  2. Header and footer use the hooks; the site has an entry in nav.cn.json and nav.en.json and sets data-current.
  3. Its own stylesheet holds only what is its own, using kit tokens; no new hex values except data colours the kit lacks.
  4. Checked at desktop and phone width; nothing moves under reduced motion.
  5. Uses the two voices by direction: white-cyan for what we receive, yellow for what we send. No red, no paper, no curves.
  6. Numbers are readouts; dates say they are story time; sources are cited.
  7. Chinese and English, or the language switch is turned off.
  8. Static, zero running cost.