Triassic Water

Style guide

The design system as it actually is, rendered from the same token file the site uses. Every contrast number below is computed at build time, not typed — so this page cannot quietly disagree with the code.

Identity

Triassic Water
16px
24px
40px
96px

The wordmark is text, not an image: selectable, scalable, zero image bytes. The mark is a droplet whose interior is three rock layers, youngest at the top.

Palette

abyss

#071A2B

deep-ocean

#0A2238

ocean-teal

#126782

glacial

#54C6EB

aqua-mist

#8BE8D8

fossil-sand

#D9C6A5

bone

#F2EEE5

lava

#FF7A59

ink

#0E1C26

slate

#41586A

edge

#E3DCD0

white

#FFFFFF

Approved combinations

The closed list. A component may only use a pair from here, and a test recomputes every ratio from the hexes and fails the build if one slips below its level.

Banned combinations

The more useful half. These look plausible on a swatch page and are unreadable in fact — shown here at full size so the failure is obvious rather than described.

  • The quick brown fox jumps over the lazy dog

    lava on white — 2.57:1

    Lava Coral on white misses even the 3:1 large-text floor. Use it on dark, or as a fill with dark text.

  • The quick brown fox jumps over the lazy dog

    lava on bone — 2.22:1

    Worse than on white. Lava Coral belongs on dark grounds.

  • The quick brown fox jumps over the lazy dog

    glacial on white — 1.97:1

    Glacial Cyan is a highlight FOR DARK GROUNDS. On white it is decoration, not text. Links on light use Ocean Teal.

  • The quick brown fox jumps over the lazy dog

    aqua-mist on white — 1.44:1

    As Glacial Cyan, more so.

  • The quick brown fox jumps over the lazy dog

    glacial on ocean-teal — 3.24:1

    Clears 3:1 for large text only — never body copy, and never a link inside a teal panel.

  • The quick brown fox jumps over the lazy dog

    aqua-mist on ocean-teal — 4.45:1

    Just misses AA normal. Large text or UI only.

  • The quick brown fox jumps over the lazy dog

    slate on fossil-sand — 4.44:1

    Just misses AA normal on the geology panel. Use ink for body copy there.

  • The quick brown fox jumps over the lazy dog

    ocean-teal on abyss — 2.76:1

    THE BUTTON TRAP. Ocean Teal is the primary interactive accent, so a teal CTA on the Abyss hero is the obvious move — and it sinks into the ground behind it. On dark, a CTA uses a Bone ground with Abyss text (15.22:1). See components/ui/Button.tsx.

  • The quick brown fox jumps over the lazy dog

    ocean-teal on deep-ocean — 2.53:1

    As above, on the secondary dark panel.

Type

.deep-time

1,180

.h-display

Explore the history of Earth through water

.h-section

Was this place ever under a sea?

.h-sub

What the rock nearby is made of

.prose-body — 18px

Sustained reading is set at 18 pixels because this site is read by children and projected in classrooms. Body copy lives on light surfaces; dark grounds are for heroes, navigation and maps.

Components

Button

On a light surface

Ocean Teal ground, white label.

On a dark surface

Bone ground, Abyss label. A teal button here would sink into the ground.

Card

white

On a bone or sand section.

bone

On a white section.

sand

Geology and deep-past framing.

deep

A dark panel inside a dark section.

Projector scope

The same content under data-theme="projector": light ground, dark heavy type, larger scale. Read this box from across a room — that is the test it exists to pass. It will be applied by a route, never by a toggle, so a teacher can bookmark it and a smartboard can hold it open.

Was this place ever under a sea?

The rock in this region and the fossils found near this town are two different kinds of evidence. When they agree, that is a strong answer. When they disagree, that disagreement is the interesting part — and we show you both.

Motion

Two durations and one curve, and nothing on this site animates beyond a hover transition. Quick is 120ms, considered is 280ms, easing is cubic-bezier(0.2, 0, 0, 1). All of it is switched off for a reader who has asked their system for reduced motion.

Answer states

Six states, measured from the four location records rather than chosen. The design audit asked for three; the committed data needs six, because absence and self-contradiction are answers rather than failures to produce one. No label names a place — each one names the witness that spoke, which is what keeps the two kinds of evidence apart. There were seven until 2026-08-30, when a geologist retired the state that rested on counting fossils as votes.

  • rockOne formation, both worldsone-rock-both-answers
  • rockThe rock of the region says searock-says-sea
  • rockThe rock of the region says landrock-says-land
  • fossilOnly the fossils speakonly-fossils-speak
  • no witnessOur evidence has no witness hereno-witness
  • no witnessThe model cannot place this groundno-place

The era strip

The site’s signature control, and the identity the eventual draggable time machine inherits rather than replaces. Period names only — a date on the homepage would make it a claim page owing a full evidence block, and the dated timeline already exists one click away on the article.

  1. Triassic
  2. Jurassic
  3. Cretaceous
  4. Today
  1. Triassic
  2. Jurassic
  3. Cretaceous
  4. Today

Witness cards

The tone names the witness, not the paint. A reader who learns that sand-coloured cards are rock evidence should never find that reversed on another page.

The rock of the region

A regional rock column — tens of thousands of square kilometres, over millions of years. Never a statement about the ground under one street.

The fossils dug up nearby

Individual digs, each one an animal in one spot on one day, with the distance from the place always printed.

An open question

Our sources have nothing for this age. That may be because no rock of that age was left here, or because nobody has filled that part of the record in.
The site speaking about its own two witnesses, rather than a witness speaking.