@kung-fu/vigil
v0.0.1
Published
Vigil — the halloween.cafe colour palette and CSS theme (open & closed seasonal registers)
Readme
Vigil
The halloween.cafe colour palette and CSS theme — oxblood leather on char, lit by a hearth from below. A seasonal property: open in season, banked the rest of the year.
Vigil is the sibling of @kung-fu/sulfur
(the yellow.vision palette) and inherits four of its pigments — oxblood, foxing-sepia,
vellum, bone — duplicated locally, never imported. But where sulfur's registers are
tonal (Illuminated / Carcosa), vigil's are temporal, switched by a single
attribute on the root element:
- Open (default) — the season, September 1 – November 2.
- Closed — the banked off-season: hearth nearly out, one link left burning.
Installation
Via NPM
npm install @kung-fu/vigil<link rel="stylesheet" href="path/to/vigil.css">Via CDN
<link rel="stylesheet" href="https://unpkg.com/@kung-fu/vigil/dist/vigil.min.css">Usage
vigil.css defines the raw palette plus a set of semantic tokens that you build
with. Style against the semantic tokens and your UI re-skins itself when the register
changes.
.placard {
background: var(--bg-raised);
color: var(--text);
border: 1px solid var(--rule);
box-shadow: var(--hearth-glow); /* lit from beneath */
}
.placard a { color: var(--accent); } /* ember */
.band { background: var(--accent-2); /* oxblood as leather… */
color: var(--vellum); } /* …vellum on top */Switching registers
Open is the default. Bank the palette with data-palette on the root element:
<html> <!-- open (default) · Sept 1 – Nov 2 -->
<html data-palette="closed"> <!-- banked off-season -->The seasonal flip is one attribute: add data-palette="closed" on November 3, remove it
on September 1.
Palette
Native
| Token | Hex | Role |
|---|---|---|
| Char | #1A0F0C | Ground — roasted, not tarry |
| Ember | #CB6045 | Links & small accents (open) |
| Banked Ember | #BA624A | The one live link (closed) |
| Tallow | #DECFAF | Body text |
| Scorched Ash | #3B2C26 | Rules & hairlines |
Inherited from @kung-fu/sulfur
| Token | Hex | Role |
|---|---|---|
| Oxblood | #6E1F1A | Surfaces — never fine lines |
| Foxing Sepia | #8A6A38 | Wordmark, colophon, quiet labels |
| Vellum | #E7DCC2 | Headings; text on oxblood |
| Bone | #D8CFB8 | Hover states, secondary light |
Semantic tokens
--bg, --bg-raised, --bg-sunken, --text, --text-dim, --heading, --accent,
--accent-2, --rule, --hearth-mix, --hearth-glow, plus --font-display
(IM Fell English), --font-display-sc (IM Fell English SC), --font-body (Alegreya),
--font-body-sc (Alegreya SC), and --font-mono (JetBrains Mono). Load the fonts
yourself if you want the matching type.
Usage rules
- The light comes from below. The hearth glow anchors at the page foot and breathes
(cycle ≥9s; static under
prefers-reduced-motion; banked and static when closed). - Oxblood is a surface, not a line — 1.68:1 on char. Buttons, bands, spines ≥2px, with vellum or bone on top. Ember carries anything small.
- Ember carries the interactive layer — 4.74:1 on char (AA); banked-ember 4.58:1 when closed.
- No gold. No bold. Gold belongs to the sibling palette; Fell ships one weight, so hierarchy comes from size, italic, and small caps.
Typography
- Display: IM Fell English (+ IM Fell English SC — a separate family)
- Body: Alegreya (+ Alegreya SC for true small caps)
- Mono (colophon/hex labels only): JetBrains Mono
All SIL OFL 1.1. The package ships CSS only, no font binaries — consumers use the
Fontsource packages (@fontsource/im-fell-english, @fontsource/im-fell-english-sc,
@fontsource/alegreya, @fontsource/alegreya-sc) or self-host.
License
GPL-3.0-only — see LICENSE file for details.