Gothic

When to use it

Reach for it when distance and fog are the subject. Narrow use; it is a mood, not a chassis.

Contract: surface

A family is a set of token names plus structural rules. A variant is one set of values poured into them. Every variant below satisfies this contract, so swapping between them is a palette change, not a rewrite.

Required

Optional

Structural tokens

--cyan and --amber are role names, not color claims. --cyan is the primary accent (links, titles, active state); --amber is the secondary accent (outbound markers, art bands). In the chalk variant --cyan is a pale sage and --amber is a soft straw; the names survive from the numerals variant where they are literally cyan and amber.

Variants

Same contract, different values. Click a swatch to copy it.

/* Spectral */
:root {
  /* colors */
  --bg: #030508;
  --mist-lavender: rgba(180, 160, 255, 0.02);
  --mist-ice: rgba(140, 200, 255, 0.015);
  --fg: #a8b0c8;
  --text-title: #3a4550;
  --text-location: #d0d8ff;
  --text-city: #6a7590;
  --text-loading: rgba(180, 160, 255, 0.3);
  --btn-bg: rgba(59, 130, 246, 0.1);
  --btn-border: rgba(59, 130, 246, 0.3);
  --btn-text: #3b82f6;
  --tooltip-bg: rgba(8, 10, 18, 0.95);
  --tooltip-border: rgba(180, 160, 255, 0.2);
  --disturbed: rgba(255, 100, 100, 0.5);
  --scrollbar: rgba(180, 160, 255, 0.3);
  /* structure */
  --radius: 4px;
  /* effects */
  --distort: translate(-1px, 0.5px) skew(-0.3deg);
}

Typography

Stacks

Do / Don't