Skip to content

Internal reference

Component library.

Every component in assets/css/netvyn.css, on one page, in whichever appearance mode you have selected. Check a change here before it reaches a real page.

This page exists to catch layout bugs. A broken helper is obvious here and invisible on a content page until someone looks at a screenshot. If you change section 11 or 12 of the stylesheet, load this page in light, dark and at a narrow width before shipping.

01 Tokens

Surfaces, text and state

Every colour in the system is a token. Nothing below is a literal hex value, which is why the same markup renders correctly in light, dark and inside a plate band.

bg
--nv-bg
bg-2
--nv-bg-2
surface
--nv-surface
surface-2
--nv-surface-2
accent
--nv-accent
accent muted
--nv-accent-muted
ok
--nv-ok
warn
--nv-warn
err
--nv-err
border
--nv-border
border strong
--nv-border-strong
code bg
--nv-code-bg

02 Type scale

Display — .h-xl

Section heading — .h-lg

Sub heading — .h-md

Lede paragraph — .lede. Sits under a heading and carries the argument. Capped around 58 characters for readability.

Small lede — .lede-sm, used inside panels and detail views.

Body small — .small-2, for supporting notes.

Label — .label

Accent label — .label .label-a

20,000sessions

.num-xl with nested small

Rules

Body
Manrope
Technical values
IBM Plex Mono
Headings
tight tracking
Measure
54–62ch
Hierarchy from
scale, not colour

Monospace is reserved for things a user could type or read off a terminal: labels, values, counters, identifiers. Never for prose.

03 Layout helpers

Splits and grids

Each block below must show two side-by-side columns above 992px. If any of them stacks, a display:grid declaration has gone missing.

.split — equal

column A
column B

.split-7 — wide left

1.35fr
1fr

.split-5 — wide right

1fr
1.35fr

.nv-grid — hairline grid, .g-3

01

Panel

Separated by a single border, no shadow.

02

Panel

Children fade only, never translate.

03

Panel

Background shifts on hover.

.nv-strip

LabelItemItemItemItem

04 Band system

Section rhythm

Three treatments, alternated so no two adjacent sections read the same. This is what carries hierarchy with motion disabled.

Base
.sec
Recessed
.sec.band-inset
Dark technical
.sec.band-plate

.band-plate re-scopes the full token set locally rather than overriding individual colours, so any component dropped inside it renders correctly with no extra classes. The plate is dark in both light and dark appearance.

Inside a plate

Components inherit the plate tokens

No component below carries a plate-specific class. Panels, tables, badges and buttons all read the re-scoped variables.

Primary Secondary ok accent
KeyValue
KeyYes

05 Controls

Buttons

Primary large Primary Outline Ghost Small

Badges & chips

default accent ok warn chip chip active Ctrl

Links

Arrow link

Form controls

Helper text sits under the field.

06 Cards

.card-nv — link card

01

Link card

Lifts on hover because it is a link. Accent rail appears on the left edge.

Go
02

Link card

Hover lift is restricted to pointer devices only.

Go
03

Static card

Not a link, so it never lifts — only interactive things move.

.stat-card and .stat-xl

Noneby designSession limitBounded by memory, not by licence.
2.5MppsReference runValidation figure, not a ceiling.
One binary16–64cores

.stat-xl gives the number the display weight.

Platforms3supported

Use only where a verified number exists.

.bento — asymmetric tiles

b4 — widecore

Wide tile carries the argument

Weight follows importance, not the grid. A row takes the height of its tallest tile, so give narrow tiles enough content to sit near their neighbours or the row opens a void.

Key
value
Key
value
Link
b2 — narrow

Narrow tile

Uses .lit for a recessed background.

Key
value
Key
value
Link
b3

Half tile

Three of six columns.

Link
b3

Half tile

Pairs cleanly with another b3.

Link

07 Diagrams

.topo — network position

Network positionoperational
UPSTREAMlabel
GATEWAYservice plane
ONEcaption
TWOcaption
THREEcaption
DOWNSTREAMlabel
data pathcontrol

.stepper

01

Step

Short description.

02

Step

Short description.

03

Step

Short description.

.timeline

  • Planned

    Entry title

    Supporting line.

  • Planned

    Entry title

    Supporting line.

.rail-list

  1. 01

    Numbered item

    Used beside a diagram in a split.

  2. 02

    Numbered item

    Separated by a hairline, not a bullet.

08 Interactive

.exp — capability explorer (horizontal tabs)

Kicker

First panel

Arrow keys move between tabs. The first pane carries data-on in the source, so with JavaScript off one panel still renders.

Link

At a glance

Key
value
Key
value

Second panel

Panel content.

Third panel

Panel content.

.flow — stage rail (vertical tabs)

Stage 01

First stage

Detail for the selected stage.

Stage 02

Second stage

Detail for the selected stage.

Stage 03

Third stage

Detail for the selected stage.

.nv-tabs and .nv-pills

  • Active
  • Inactive
  • Inactive
  • Active
  • Inactive

.accordion-nv

Body copy.

Body copy.

09 Data display

.table-nv

Row headingValue
SupportedYes
Not applicable—

.kv

Key
value
Longer key name
mono value

.gauge and .meter

Utilisation82%
Utilisation34%

.spark

.matrix

ItemPlane APlane B
Firstcaption
Secondcaption
primary participates n/a

.vs — comparison

DimensionOption AOption B
Row Description of the first option. Description of the highlighted option.

.mock — console mockup

view namerepresentative view
OneTwoThree
Valuelabel
Valuelabel
Valuelabel
idtypestate
example-0001typeup
example-0002typecleared

Mockups always carry a visible illustrative note.

.nv-code and .logs

configuration
# comment
[Netvyn-BNG] command argument "value"
[Netvyn-BNG] commit ; save
Alert. Default variant, accent rail on the left.
Success. Confirmation state.
Warning. Needs attention.

10 Motion

Motion supports the UI, it does not carry it

The test: disable every animation and the page should still read as a finished product. If it does not, the fix is the layout, never more motion.

  • Pointer feedback 130–180ms, entrance around 420ms, nothing longer
  • Displacement never exceeds 8px; no scale bounce, no glow, no gradient
  • Lift is reserved for elements that are actually clickable
  • Entrance classes are applied by script, so JavaScript off means fully visible
  • Everything collapses to static under prefers-reduced-motion and in print

Tokens

Fast
--nv-t-fast · .13s
Base
--nv-t · .18s
Entrance
--nv-t-slow · .42s
Easing
--nv-ease
Stagger step
55ms, capped at 5

Opt an element out of the entrance layer with data-no-anim.