Catalystic

Brand

Carbon and reagent.

The mark, colour, type and motion behind Catalystic. Tokens live in tokens.css; the reasoning is in DESIGN.md.

The mark

An open ring with one dot in its gap. The ring is the reaction; the dot is the catalyst that closes it. It also reads as “C.”, which is how the studio signs off.

On carbon
On paper
Reversed on reagent

Construction

Drawn on a 64-unit grid. Keep the numbers; they're what make it sit right at 16 px.

  • Ring centre 30, 32; radius 20; stroke 9
  • Gap of 80°, centred on the horizontal
  • Catalyst dot radius 5.5, sitting just proud of the ring at 51, 32
  • Minimum size 16 px; clear space of one dot diameter on every side
  • The ring takes the ink colour, the dot always takes the accent

Colour

Carbon is the ground and reagent is the only accent. Use the accent for one thing per view: the action, the live state, the word that matters.

  • Carbon 950Deepest ground--carbon-950
  • Carbon 900Dark background--carbon-900
  • Carbon 850Raised surface--carbon-850
  • Carbon 600Faint text--carbon-600
  • Carbon 50Ink on dark--carbon-50
  • Paper 100Light background--paper-100
  • Reagent 300Accent, strong--reagent-300
  • Reagent 400Accent on dark--reagent-400
  • Reagent 600Accent on light--reagent-600
  • Verdigris 400In order--verdigris-400
  • Ochre 400Due soon--ochre-400

Type

Geist does the work. Instrument Serif italic appears once or twice a page, for the phrase that carries the argument.

Display
Geist 500, -0.05em

Focused software.

Accent
Instrument Serif italic

for complex work.

Body
Geist 400, 17px / 1.55

Every product is designed, built and operated in-house.

Label
Geist Mono 500, caps, +0.08em

Coming soon

Motion

Things arrive quickly and settle slowly. Nothing loops in the reader’s eyeline except a status dot, and all of it stops for reduced motion.

Out
--ease-outEntrances, reveals, hovers
In and out
--ease-in-outThings that travel
Spring
--ease-springArrows and the catalyst dot only