Specimen

Colour

Five tonal ramps, 12 steps each, generated from one hue and one chroma per ramp by Minttu core's own formula. Toggle your system's colour scheme to see the dark inversion—nothing below is theme-specific markup.

Primary—warm bronze-amber, hue 70°

Secondary—terracotta-clay, hue 40°

Tertiary—dusty slate blue, hue 220°

Neutral variant—the warm "grey" every surface is built from

Semantic roles

• On primary
  primary / on-primary (step 80)
• On primary container
  primary-container (step 10)
• On secondary
  secondary / on-secondary (step 80)
• On tertiary
  tertiary / on-tertiary (step 80)
• On surface
  surface
• Container high
  surface-container-high

Type

Fraunces for headings, Atkinson Hyperlegible Next for everything a person has to read—both variable, both shown here on their fallback stacks, since no font files are vendored in this design pass. See the README for the coverage this was verified against.

Full Latin Extended coverage, proven in place

• PolskiŁódź, żaba, świeży ćma, niań, źrebię, ą ę ń ć ś ź ż ł
• SuomiÄiti ja isä asuvat Töölössä, öinen sää on kylmä
• SvenskaÅsa och Åke bor vid Ängelholm, öar och ängar

Space

The fluid space scale—the same clamp() pattern as type, so vertical rhythm holds proportion at every viewport rather than jumping at breakpoints.

• space-3xs
• space-2xs
• space-xs
• space-s
• space-m
• space-l
• space-xl
• space-2xl
• space-3xl

Motion

Three of the easing curves, shown at a duration that makes the difference visible. All motion below stops if your system prefers reduced motion.

States

Derived once from each role by Minttu core's colour calculations—shown here as static swatches since the states themselves only exist on interaction.

Doorway chrome

The shell every concept shares, from doorway.css, shown here as live instances rather than described: the same markup, the same rules, the same behaviour, only the surrounding box is specific to this page.

Empty, on purpose

Every future surface—a gallery nobody has added photos to yet, a group with no members assigned—uses this same treatment rather than inventing a new "nothing here" each time. See the README for where else this applies.