+ > lvl0/ui +
++ The shared visual style for lvl0 projects. This page is built with the package it + documents, so it breaks visibly if the package does. Read the values here rather + than from another project. +
+
+ [SOURCE]
+ |
+ npm i git+ssh://git@forge.lvl0.xyz:2222/lvl0/ui.git#v0.1.0
+
+ + +
> Palette
+Click a value to copy. Use token names, never raw red-* steps.
House red. Text, active borders, focus, glow source.
+Secondary. Dividers, resting borders, recessed chrome.
+Near-black page ground.
+Raised surface.
+Muted surface.
+Muted text.
+Destructive actions.
+Chart colours
+
+ --radius: 0 — square corners throughout.
+
+ + +
> Glows
++ The part a values table cannot convey. All four against the real background. +
+ +
+ Box-shadow bloom in primary, brightening on :hover and
+ :focus. For bordered elements that are active or focusable.
+
+ Two-layer text-shadow. Use this on text —
+ .glow-red haloes the element's box, which smudges around a
+ borderless heading instead of tracing the letters.
+
+ Softer bloom for bordeaux-bordered elements. Emits
+ primary-tinted light, not bordeaux — bordeaux at
+ oklch(25.8%) is too dark to bloom against a near-black ground,
+ so a bordeaux halo is invisible. Dim element, brighter glow, as CRT
+ phosphor behaves.
+
+
+ .glow-bordeaux-line — a single wide shadow on a hairline has no
+ box to hug and just fades out. This uses a tight core plus a wider spill so a
+ 2px rule reads as lit.
+
+ + +
> Font
+
+ .font-digital — 7-Segment by
+ Jan Bobrowski,
+ SIL OFL 1.1. fonts/OFL.txt must ship wherever the font does.
+
+ Numerals only. Letters render badly — + the face has no strokes for most of them: +
++ + +
> Primary or bordeaux?
+ +Primary
+-
+
- > All text +
- > Focused input borders +
- > Borders of clickable things +
- > Filled button backgrounds on hover +
- > The source colour of every glow +
Bordeaux
+-
+
- > Dividers and rules +
- > Resting input borders +
- > Panel outlines +
- > Row separators +
- > Scrollbar thumbs +
+ The contrast is full red against bordeaux — never two brightnesses of red. An + element commonly moves from bordeaux to primary on focus, with its glow rising at + the same time, so the state change is signalled twice. +
++ + +
> Worked example
++ The anagram-finder form and results panel — the whole system in one screen. +
+ + +