Noctis
Documentation
Token viewer
Token graph
Token viewer
Searchable — live values, exact where-used
Guide
Colours
Foundations
Components
OKLCH
RGB
Hex
Show scopes
Show engine
Seeds
Density
—
Font scale
—
Radius
—
Token
Value
Resolves to
Impact
Surfaces
--noctis-color-background
—
--noctis-engine-bg-1
11 consumers
--noctis-color-code
—
--noctis-engine-bg-sunken
0 consumers
--noctis-color-data-grid-header
—
--noctis-engine-bg-3
0 consumers
--noctis-color-data-grid-row-hover
—
--noctis-engine-bg-2
0 consumers
--noctis-color-data-grid-row-hover-strong
—
--noctis-engine-bg-4
0 consumers
--noctis-color-focus
—
--noctis-engine-bg-focus
0 consumers
--noctis-color-header
—
--noctis-engine-header-bg
0 consumers
--noctis-color-hover
—
--noctis-engine-bg-2
0 consumers
--noctis-color-inverse
—
--noctis-engine-fg-1
3 consumers
--noctis-color-overlay
—
--noctis-engine-overlay
9 consumers
--noctis-color-selected
—
--noctis-engine-bg-selected
2 consumers
--noctis-color-selected-hover
—
--noctis-engine-bg-selected-hover
0 consumers
--noctis-color-sidebar-item
—
--noctis-engine-sidebar-item-bg
0 consumers
--noctis-color-sidebar-item-active
—
--noctis-engine-sidebar-item-active
0 consumers
--noctis-color-sunken
—
--noctis-engine-bg-sunken
2 consumers
--noctis-color-surface
—
--noctis-engine-bg-3
11 consumers
--noctis-color-surface-hover
—
--noctis-engine-bg-4
5 consumers
--noctis-color-surface-raised
—
--noctis-engine-bg-5
6 consumers
--noctis-color-well
—
--noctis-engine-fg-1
15 consumers
Text
--noctis-color-code-foreground
—
--noctis-engine-fg-2
2 consumers
--noctis-color-foreground
—
--noctis-engine-fg-1
63 consumers
--noctis-color-inverse-foreground
—
--noctis-engine-bg-1
3 consumers
--noctis-color-kbd-foreground
—
--noctis-engine-fg-2
2 consumers
--noctis-color-link
—
--noctis-engine-link
2 consumers
--noctis-color-menu-shortcut
—
--noctis-engine-fg-4
0 consumers
--noctis-color-muted
—
--noctis-engine-fg-3
54 consumers
--noctis-color-placeholder
—
--noctis-engine-fg-4
10 consumers
--noctis-color-secondary
—
--noctis-engine-fg-2
15 consumers
--noctis-color-subtle
—
--noctis-engine-fg-4
11 consumers
--noctis-color-text-disabled
—
--noctis-engine-fg-4
0 consumers
Borders
--noctis-color-border
—
--noctis-engine-border-default
43 consumers
--noctis-color-border-faint
—
--noctis-engine-border-faint
0 consumers
--noctis-color-border-selected
—
--noctis-engine-border-selected
0 consumers
--noctis-color-border-strong
—
--noctis-engine-border-strong
9 consumers
--noctis-color-checkbox-border
—
--noctis-engine-border-default
0 consumers
--noctis-color-checkbox-border-hover
—
--noctis-engine-border-strong
1 consumer
--noctis-color-data-grid-border
—
--noctis-engine-border-faint
0 consumers
--noctis-color-data-grid-column-selected-border
—
--noctis-engine-accent
0 consumers
--noctis-color-divider
—
--noctis-engine-divider
7 consumers
--noctis-color-field-border
—
--noctis-engine-border-strong
12 consumers
--noctis-color-field-border-focus
—
--noctis-engine-focus-ring
8 consumers
--noctis-color-field-border-hover
—
--noctis-engine-border-strong
12 consumers
--noctis-color-field-border-invalid
—
--noctis-engine-danger
8 consumers
--noctis-color-kbd-border
—
--noctis-engine-border-strong
2 consumers
--noctis-color-radio-border
—
--noctis-engine-border-strong
1 consumer
Utility
--noctis-color-ring
—
--noctis-engine-focus-ring
29 consumers
--noctis-color-scrollbar-thumb
—
--noctis-engine-scrollbar
5 consumers
--noctis-color-scrollbar-track
—
--noctis-engine-bg-sunken
0 consumers
--noctis-color-selection
—
--noctis-engine-selection-bg
0 consumers
Accent
--noctis-color-accent
—
--noctis-engine-accent
22 consumers
--noctis-color-accent-active
—
--noctis-engine-accent-active
3 consumers
--noctis-color-accent-foreground
—
--noctis-engine-accent-fg
8 consumers
--noctis-color-accent-hover
—
--noctis-engine-accent-hover
6 consumers
--noctis-color-accent-muted
—
--noctis-engine-accent-muted
5 consumers
--noctis-color-primary
—
--noctis-engine-fg-1
8 consumers
--noctis-color-primary-active
—
--noctis-engine-primary-active
2 consumers
--noctis-color-primary-foreground
—
--noctis-engine-bg-1
8 consumers
--noctis-color-primary-hover
—
--noctis-engine-primary-hover
2 consumers
Controls
--noctis-color-checkbox
—
--noctis-engine-input-bg
1 consumer
--noctis-color-checkbox-check
—
--noctis-engine-accent-fg
1 consumer
--noctis-color-checkbox-checked
—
--noctis-engine-accent
1 consumer
--noctis-color-control
—
--noctis-engine-control-2
2 consumers
--noctis-color-control-foreground
—
--noctis-engine-control-fg
0 consumers
--noctis-color-control-ghost
—
--noctis-engine-control-3
2 consumers
--noctis-color-control-ghost-hover
—
--noctis-engine-control-3-hover
25 consumers
--noctis-color-control-ghost-selected
—
--noctis-engine-control-3-selected
12 consumers
--noctis-color-control-ghost-selected-hover
—
--noctis-engine-control-3-selected-hover
0 consumers
--noctis-color-control-hover
—
--noctis-engine-control-2-hover
1 consumer
--noctis-color-control-selected
—
--noctis-engine-control-2-selected
2 consumers
--noctis-color-control-selected-hover
—
--noctis-engine-control-2-selected-hover
0 consumers
--noctis-color-field
—
--noctis-engine-bg-3
10 consumers
--noctis-color-field-focus
—
--noctis-engine-field-focus
0 consumers
--noctis-color-field-hover
—
--noctis-engine-bg-4
7 consumers
--noctis-color-kbd
—
--noctis-engine-control-2
4 consumers
--noctis-color-radio
—
--noctis-engine-input-bg
1 consumer
--noctis-color-radio-checked
—
--noctis-engine-accent
1 consumer
--noctis-color-toggle-thumb
—
--noctis-engine-fg-1
0 consumers
--noctis-color-toggle-track-off
—
--noctis-engine-control-2
0 consumers
--noctis-color-toggle-track-off-hover
—
--noctis-engine-control-2-hover
0 consumers
--noctis-color-toggle-track-on
—
--noctis-engine-accent
0 consumers
--noctis-color-toggle-track-on-disabled
—
--noctis-engine-accent
0 consumers
--noctis-color-toggle-track-on-hover
—
--noctis-engine-accent-hover
0 consumers
Charts
--noctis-color-chart-1
—
—
0 consumers
--noctis-color-chart-2
—
—
0 consumers
--noctis-color-chart-3
—
—
0 consumers
--noctis-color-chart-4
—
—
0 consumers
--noctis-color-chart-5
—
—
0 consumers
--noctis-color-chart-6
—
—
0 consumers
--noctis-color-chart-7
—
—
0 consumers
--noctis-color-chart-8
—
—
0 consumers
--noctis-color-chart-axis
—
--noctis-engine-fg-4
0 consumers
--noctis-color-chart-grid
—
--noctis-engine-border-faint
0 consumers
--noctis-color-chart-negative
—
--noctis-engine-danger
0 consumers
--noctis-color-chart-neutral
—
--noctis-engine-fg-3
0 consumers
--noctis-color-chart-positive
—
--noctis-engine-success
0 consumers
--noctis-color-chart-tooltip
—
--noctis-engine-bg-5
0 consumers
--noctis-color-chart-track
—
--noctis-engine-bg-sunken
0 consumers
Status
--noctis-color-danger
—
--noctis-engine-danger
26 consumers
--noctis-color-danger-border
—
--noctis-engine-danger-border
10 consumers
--noctis-color-danger-faint
—
--noctis-engine-danger-tint
3 consumers
--noctis-color-danger-foreground
—
--noctis-engine-danger-fg
7 consumers
--noctis-color-danger-hover
—
--noctis-engine-danger-hover
1 consumer
--noctis-color-danger-muted
—
--noctis-engine-danger-muted
7 consumers
--noctis-color-danger-muted-foreground
—
--noctis-engine-danger-muted-fg
1 consumer
--noctis-color-info
—
--noctis-engine-info
4 consumers
--noctis-color-info-border
—
--noctis-engine-info-border
4 consumers
--noctis-color-info-faint
—
--noctis-engine-info-tint
2 consumers
--noctis-color-info-foreground
—
--noctis-engine-info-fg
5 consumers
--noctis-color-info-hover
—
--noctis-engine-info-hover
0 consumers
--noctis-color-info-muted
—
--noctis-engine-info-muted
3 consumers
--noctis-color-info-muted-foreground
—
--noctis-engine-info-muted-fg
1 consumer
--noctis-color-presence-away
—
--noctis-engine-warning
1 consumer
--noctis-color-presence-busy
—
--noctis-engine-danger
1 consumer
--noctis-color-presence-focus
—
--noctis-engine-accent
1 consumer
--noctis-color-presence-offline
—
--noctis-engine-fg-3
1 consumer
--noctis-color-presence-online
—
--noctis-engine-success
1 consumer
--noctis-color-success
—
--noctis-engine-success
11 consumers
--noctis-color-success-border
—
--noctis-engine-success-border
4 consumers
--noctis-color-success-faint
—
--noctis-engine-success-tint
2 consumers
--noctis-color-success-foreground
—
--noctis-engine-success-fg
5 consumers
--noctis-color-success-hover
—
--noctis-engine-success-hover
0 consumers
--noctis-color-success-muted
—
--noctis-engine-success-muted
3 consumers
--noctis-color-success-muted-foreground
—
--noctis-engine-success-muted-fg
1 consumer
--noctis-color-warning
—
--noctis-engine-warning
13 consumers
--noctis-color-warning-border
—
--noctis-engine-warning-border
5 consumers
--noctis-color-warning-faint
—
--noctis-engine-warning-tint
2 consumers
--noctis-color-warning-foreground
—
--noctis-engine-warning-fg
5 consumers
--noctis-color-warning-hover
—
--noctis-engine-warning-hover
0 consumers
--noctis-color-warning-muted
—
--noctis-engine-warning-muted
4 consumers
--noctis-color-warning-muted-foreground
—
--noctis-engine-warning-muted-fg
1 consumer
Palette
--noctis-color-palette-1
—
—
2 consumers
--noctis-color-palette-10
—
—
1 consumer
--noctis-color-palette-2
—
—
1 consumer
--noctis-color-palette-3
—
—
2 consumers
--noctis-color-palette-4
—
—
2 consumers
--noctis-color-palette-5
—
—
2 consumers
--noctis-color-palette-6
—
—
2 consumers
--noctis-color-palette-7
—
—
2 consumers
--noctis-color-palette-8
—
—
2 consumers
--noctis-color-palette-9
—
—
2 consumers
--noctis-color-palette-foreground
—
—
2 consumers