InterImm

InterImm kit

Style guide

The shared colours, type, header, footer and components of every InterImm site. Link the kit, don't copy it.

  • interimm.css
  • interimm.js
  • nav.en.json · nav.cn.json

Use

Add it to a page

The header and footer are filled in from interimm.org's live menu. Whatever is inside them is the fallback.

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

<header class="site-header" data-interimm-header data-lang="en" data-current="logistics">
  <div class="wrap header-inner"><a class="brand" href="https://interimm.org/en/">InterImm</a></div>
</header>
...
<footer class="site-footer" data-interimm-footer></footer>

Full notes: kit/README.md.

Tokens

Colour

Follows the visitor's light or dark setting.

  • --bg
  • --bg-alt
  • --surface
  • --text
  • --muted
  • --border-strong
  • --accent
  • --link

Type

Source Serif 4

IBM Plex Sans for text. Chinese uses the system Song (serif) and Hei (sans) faces. 正文使用系统中文字体。

IBM Plex Mono · 06:13:20 MTC · Sol 54,302

Components

Buttons, chips and links

Primary Ghost Default Text link
  • .chips
  • Developing Mars
  • Open source

.bento of .tile.card-link-wrap

Tile title

The whole tile is clickable through its title link.

Plain tile

Without the link wrapper it is static.

.card

A flat surface for forms, results and longer content.

.signal

The signal line

Every page carries the live Earth to Mars distance, the one-way signal delay, Isidis time and the sol under its header. The kit adds it to the shared header; any element with data-signal-au, -delay, -mtc or -sol is kept up to date.

Earth to Mars
– AU
One-way signal
–
Isidis
– MTC
Sol
–