Color tokens

The tokens every component reads, in src/styles/colors.css and gradients.css. Change these first.

Ground and ink

The near black page, white for what is read first, grey for everything around it and one fill for panels and hairlines.

  • Background

    --color-background

    oklch(16.89% 0.002 286.18)

  • Foreground

    --color-foreground

    oklch(1 0 0)

  • Muted foreground

    --color-muted-foreground

    oklch(74.22% 0.009 278.59)

  • Muted

    --color-muted

    oklch(23.48% 0.004 264.49)

Secondary

The default button gradient, from secondary up to secondary highlight.

  • Secondary

    --color-secondary

    oklch(35.42% 0.009 285.95)

  • Secondary highlight

    --color-secondary-highlight

    oklch(56.83% 0.015 281.34)

Accent

Light grey for the accent button, with dark ink on top. Use it once per view at most.

  • Accent

    --color-accent

    oklch(1 0 0)

  • Accent deep

    --color-accent-deep

    oklch(84% 0 0)

  • Accent foreground

    --color-accent-foreground

    oklch(16.89% 0.002 286.18)

Status

The dots on the status page and the asterisk on required fields.

  • Success

    --color-success

    oklch(72.3% 0.219 149.579)

  • Danger

    --color-danger

    oklch(63.7% 0.237 25.331)

Syntax

The two colours of the code windows, read by shiki.css.

  • Syntax keyword

    --color-syntax-keyword

    hotpink

  • Syntax value

    --color-syntax-value

    oklch(0.685 0.169 237.323)

Gradients

Grey radial glows from gradients.css. One per section is plenty.

  • Gradient up

    bg-gradient-up

    Rises from the bottom edge

  • Gradient down

    bg-gradient-down

    Falls from the top edge

  • Left to right

    bg-gradient-left-to-right

    Glows from the left side

  • Right to left

    bg-gradient-right-to-left

    Glows from the right side