refrakt.md

Docs

Runes

Themes

Extend

Project

Lumina›Neutral default

Neutral default

Lumina ships with a quiet warm-neutral palette designed to disappear behind your content. The brand identity lives in the prism mark and the typographic chrome; the colour palette stays out of the way. This is what every new npm create refrakt project sees out of the box, and what the docs site you're reading uses as its chrome (with the niwaki preset layered on for syntax).

The palette walks a deliberately narrow chroma band — warm neutrals from #f6f4ef (light bg) to #1c1a17 (text), with status colours muted enough to read as functional rather than decorative.

Body palette

The surface, text, and primary tokens for light mode.

Light mode

Background#f6f4efW: 1.1 · B: 19.1AA ✗AAA ✗
Text#1c1a17W: 17.4 · B: 1.2AA ✓AAA ✓
Muted#6b6661W: 5.7 · B: 3.7AA ✓AAA ✗
Border#e8e5dfW: 1.3 · B: 16.7AA ✗AAA ✗
Primary#1c1a17W: 17.4 · B: 1.2AA ✓AAA ✓
Surface#fcfaf6W: 1.0 · B: 20.1AA ✗AAA ✗
Surface raised#ffffffW: 1.0 · B: 21.0AA ✗AAA ✗

Dark mode inverts to warm-near-black, with text lifted to the same warm off-white the page surface uses in light.

Dark mode

Background#1c1a17W: 17.4 · B: 1.2AA ✓AAA ✓
Text#f6f4efW: 1.1 · B: 19.1AA ✗AAA ✗
Muted#94908aW: 3.2 · B: 6.6AA ✗AAA ✗
Border#2d2926W: 14.4 · B: 1.5AA ✓AAA ✓
Primary#f6f4efW: 1.1 · B: 19.1AA ✗AAA ✗
Surface#232017W: 16.3 · B: 1.3AA ✓AAA ✓
Surface raised#2a2622W: 15.0 · B: 1.4AA ✓AAA ✓

primary is intentionally monochromatic — it shadows text. Buttons, links, and accents render in body-text colour, slightly shifted on hover. The brand identity lives in chrome and the prism mark, not in a coloured accent.

Status palette

Four sentiments at a single saturation/lightness band so no sentiment is more aggressive than another. Light values; dark mode lifts each toward the surface.

Status — light

Info

Base#34547aW: 7.8 · B: 2.7
Background#e8edf4W: 1.2 · B: 17.9
Border#c5d2e0W: 1.5 · B: 13.7

Warning

Base#9c5a18W: 5.4 · B: 3.9
Background#f5ebd9W: 1.2 · B: 17.8
Border#e0c9a3W: 1.6 · B: 13.1

Danger

Base#a83232W: 6.6 · B: 3.2
Background#f5e0e0W: 1.3 · B: 16.6
Border#e0b8b8W: 1.8 · B: 11.7

Success

Base#2d6a3eW: 6.5 · B: 3.2
Background#e0eee4W: 1.2 · B: 17.5
Border#b8d4beW: 1.6 · B: 13.2

A live look at how the sentiments read against the page surface:

note

Refrakt sites are statically generated; content updates require a rebuild.

warning

The legacy @refrakt-md/legacy package was retired in v0.14.0.

caution

This command will overwrite existing token values in your config file.

check

Your refrakt site built successfully — 47 pages emitted in 2.1 seconds.

Syntax palette — the quiet spectrum walk

Four hues that walk teal → violet → rust → ochre — cool, cool, warm, warm. Spectrum-adjacent without shouting. constant covers numeric literals plus boolean/null/Symbol (Shiki paints them all from one slot). Used on every code surface unless a preset (like niwaki) overrides.

Syntax roles — light

Keyword (teal)#2a5c63W: 7.5 · B: 2.8
Function (slate violet)#4a3b6eW: 9.8 · B: 2.1
String (rust)#8a3a3aW: 7.6 · B: 2.7
Constant (ochre)#876327W: 5.5 · B: 3.8
Comment (warm muted)#8a857dW: 3.7 · B: 5.7
Punctuation#6b6661W: 5.7 · B: 3.7

Syntax roles — dark

Keyword#7eb6bcW: 2.3 · B: 9.3
Function#a89bc7W: 2.6 · B: 8.2
String#c79a9aW: 2.5 · B: 8.5
Constant#d4b07eW: 2.0 · B: 10.3
Comment#6b6661W: 5.7 · B: 3.7
Punctuation#94908aW: 3.2 · B: 6.6

Typography

Inter for body and UI; JetBrains Mono for code. Both loaded from Google Fonts with font-display: swap and preconnect hints.

Lumina default

bodyInter
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
700 — BoldAa Bb Cc
monoJetBrains Mono
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc

Opting out

The neutral default is the unconditional starting point — there's no config snippet to "opt in" to it. To override individual tokens, add theme.tokens:

{
  "site": {
    "theme": {
      "package": "@refrakt-md/lumina",
      "tokens": {
        "color": {
          "primary": "#7c3aed"
        }
      }
    }
  }
}

To swap to a different colour identity entirely, layer in a preset. See Tideline for the cream-and-navy preset that restores Lumina's pre-v0.14.0 appearance, or Niwaki for Japanese-garden syntax colours.