The Riot Kit
// living style guide — every token and component in one place. two OKLCH hues run this whole place: --hue-primary (27, riot red) and --hue-secondary (80, hazard amber). change them in 00-variables.css and the revolution re-paints itself.
Colours
--color-primary
--color-primary-light
--color-primary-dark
--color-secondary
--color-complement-primary
--color-bg
--color-surface
--color-border
--color-text
--color-text-muted
Typography
H1 — Smash the algorithm
H2 — Refuse the autocomplete
H3 — Read the docs yourself
Body text: We hold these truths to be self-evident, not self-attention. A paragraph should be written by someone who has actually been angry about a merge conflict at 2 a.m. Links look like this.
Blockquote: “The model is confident. The model is wrong. The model is confident it is not wrong.”
Inline code() and a block:
while (true) { rage++; } // no machine wrote this loop- Unordered grievance one
- Unordered grievance two
- Ordered demand one
- Ordered demand two
Buttons
Spacing
Components
// live instances rendered from sample content — log in and click one to edit it.
Text Block Demo
A live text-block component with a headline, a drop cap, emphasis, a link and inline code. Log in and click to edit it inline with the rich-text editor.
This is a pull-quote component. It shouts.