Every colour, size and effect on this page comes from nlos-styles.css, the built stylesheet of @nlos-hub/style 0.13.0. Switch the theme and the real token values change.
Brand
Navy and gold lead the brand; the slate ramp carries the product.
--nl-brand-navy
#004874
--nl-brand-gold
#F5BB61
--nl-brand-cyan
#22D3EE
--nl-brand-ink
#141D23
--nl-brand-slate
#1E2C35
--nl-brand-slate-raised
#2A3A41
--nl-brand-slate-muted
#A6B6BF
Colour
Grouped by role, as the tokens are named. Each value is read from the stylesheet in the browser, so it follows the theme.
Neutrals and surfaces
The page, cards, quiet fills and the inverse ground.
-
canvas
--nl-color-bg-canvas#F7FAFB -
surface
--nl-color-bg-surface#FFFFFF -
subtle
--nl-color-bg-subtle#EFF4F6 -
inset
--nl-color-bg-inset#E1E9ED -
inverse
--nl-color-bg-inverse#141D23 -
scrim
--nl-color-bg-scrim#141D23
Borders
One hairline for structure, one stronger, one for controls.
-
default
--nl-color-border-default#C9D5DB -
strong
--nl-color-border-strong#A6B6BF -
control
--nl-color-border-control#7B8F9A
Text
Five roles; link is the only one that is also an action.
-
primary
--nl-color-text-primary#141D23 -
secondary
--nl-color-text-secondary#475963 -
muted
--nl-color-text-muted#5E717C -
inverse
--nl-color-text-inverse#FFFFFF -
link
--nl-color-text-link#0E7490
Accent
Cyan is the only action colour. In light mode it deepens.
-
default
--nl-color-accent-default#0E7490 -
hover
--nl-color-accent-hover#155E75 -
subtle
--nl-color-accent-subtle#ECFEFF -
text
--nl-color-accent-text#0E7490 -
on
--nl-color-accent-on#FFFFFF -
edge
--nl-color-accent-edge#0E7490 -
selected
--nl-color-accent-selected#ECFEFF -
selected text
--nl-color-accent-selected-text#0E7490
Status
Only when the thing is a status, always with a word. A solid fill ships for danger alone.
-
success bg
--nl-color-status-success-bg#EAFBF2 -
success text
--nl-color-status-success-text#0E7A53 -
warning bg
--nl-color-status-warning-bg#FFF7E0 -
warning text
--nl-color-status-warning-text#8A5A00 -
danger bg
--nl-color-status-danger-bg#FEF0F0 -
danger text
--nl-color-status-danger-text#C62B2B -
danger solid
--nl-color-status-danger-solid#C62B2B -
danger solid hover
--nl-color-status-danger-solid-hover#A52020 -
danger on
--nl-color-status-danger-on#FFFFFF -
info bg
--nl-color-status-info-bg#ECFEFF -
info text
--nl-color-status-info-text#155E75
Modules
One colour per module, on its chrome only, always with the number and name.
-
Recruiting · R
--nl-color-module-recruiting#0A6EBD -
Operations · O
--nl-color-module-operations#66700A -
Marketing · M
--nl-color-module-marketing#7C3AED -
Education · E
--nl-color-module-education#8B1A8A -
on
--nl-color-module-on#FFFFFF
Type
Geist for everything, Geist Mono for labels, numbers and code. Each line is the role's own class, at its real size, leading, weight and tracking.
Proven method, built in.
One page title per screen
Section headings in long reading
Card and panel titles
Long reading — AI answers, briefs and articles — is the one step above the interface scale.
Default interface text: page descriptions, messages, and what people type.
Dense tables and metadata.
Form labels, buttons, nav items
Help text, timestamps, footnotes
Module label
1,132 companies · Sep 24
Space, radius, shadow
A 4px grid, five radii, two strokes and five shadows.
Space
0
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
Radius
Stroke
Shadow
--nl-shadow-sm
--nl-shadow-md
--nl-shadow-lg
--nl-shadow-glass
--nl-shadow-glow
Effects, live
The real classes and attributes, running on this page.
--nl-page-glow — Exchange Navy radial washes, top centre and lower right. Stronger in dark mode. Background only.
card-pixels — the default drift: each pixel fades on its own clock, 5 to 11 seconds. Texture only, so keep the bottom-right 168 × 96 clear.
card-pixels-scan — only while a step is current, never as decoration.
card-pixels-live — only for live figures, the same as StatCard live.
card-pixels-hover — one glimmer on hover or keyboard focus. AssetCard carries it.
data-nl-thinking-mark — four squares, three accent and one gold, turning in a 2 by 2.
data-nl-waveform="auto" rises and falls on its own — the bars here carry phase offsets on the stylesheet's own nl-waveform keyframes, nothing more. data-nl-waveform takes the levels you pass, newest last. Both sit in a 36px row.
card-writing — set aria-busy yourself when you use the class alone.
With reduced motion on, all of it stills: the corners hold, the thinking mark stops, the waveform holds its bars, and the writing edge becomes a still accent edge.
What changed
- 0.13.0 A live waveform while dictating:
VoiceWaveformfollows the microphone level, and rises and falls on its own without one. - 0.13.0 An edge light while NLOS writes a draft:
card-writingruns a light around the card's border.
0.12.0 introduced visual themes. NLOS Classic is the default; NLOS Neo ships as a pick, with tighter corners, glass panels and a pixel field that moves only while NLOS works.