UI Things

Design measurements and proportions used across the DECNET web dashboard. Follow these when building new components so the UI stays visually consistent.

Accent colors

The app has two accents, toggleable via html[data-accent]:

Token	Value	Purpose
`--matrix`	`#00ff41`	Default "safe" / neutral action
`--violet`	`#ee82ee`	Primary / destructive-intent action
`--alert`	red (`#ff4d4d`-ish)	Danger / destructive confirm
`--warn`	amber (`#e0a040`)	Caution / armed-confirm intermediate
`--accent`	→ `--matrix` or `--violet`	User-selected accent
`--accent-tint-10`	accent @ 10% alpha	Soft backgrounds (chips, hovers)
`--accent-tint-30`	accent @ 30% alpha	Borders on tinted surfaces
`--accent-glow`	`0 0 10px <accent @ 0.5>`	Hover/focus glow

Rule: inline helpers that should follow the user-selected accent (chips, soft highlights) use var(--accent) + var(--accent-tint-*). Use hard-coded --matrix / --violet only when the role is fixed (green = default action, violet = primary CTA).

Buttons

Primary action button (canonical)

This is the shape used for DEPLOY DECKIES, NEW TOPOLOGY, and every page-header CTA:

cursor: pointer;
background: transparent;
border: 1px solid var(--matrix);   /* or --violet for primary */
color: var(--matrix);              /* or --violet */
padding: 7px 14px;
font-family: inherit;
font-size: 0.78rem;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;

On hover: fill with the border color, text → #000, box-shadow → matching glow.

Variants

All share the same padding / font / letter-spacing — only the color changes.

Class	Border / text	Hover fill	When to use
(base)	`--matrix`	`--matrix`	Default neutral action
`.violet`	`--violet`	`--violet`	Primary / emphasized CTA
`.alert`	`--alert`	`--alert`	Destructive action
`.warn`	`--warn`	`--warn`	Armed-confirm intermediate state
`.ghost`	`--border` (dim)	`--matrix`	Secondary / refresh-style
`.small`	`4px 10px` padding, `0.68rem`	—	Inline / dense rows
`:disabled`	`opacity: 0.3; cursor: not-allowed`	—	Universal disabled state

Segmented / filter buttons

Filter bars (.fleet-filter-btn, .seg-group button) and icon-only chrome (.toggle-btn, .close-btn, .pager button, .logout-btn) are not page-action buttons and intentionally use their own smaller, borderless styling. Don't align them with the canonical button — they serve a different role.

Chips

Small pill-shaped badges, e.g. the TCP/22 port chip in the MazeNET service palette.

font-size: 0.68rem;
padding: 2px 6px;
border: 1px solid var(--accent-tint-30);
background: var(--accent-tint-10);
color: var(--accent);
letter-spacing: 0.5px;
font-family: var(--font-mono);

Why the accent token instead of gray: gray chips on a dark panel lose contrast and become unreadable at font-size: 0.68rem. Tinting with the user-selected accent keeps them readable while still looking subordinate to the surrounding text.

Layout

Topbar / sidebar

Topbar height: 64px (--topbar-h).
Content viewport padding: 32px (top/bottom and left/right).
Pages that should fill the viewport use min-height: calc(100vh - 128px) (64 topbar + 32 + 32 padding).

MazeNET fullscreen

Add body.maze-fullscreen to hide .sidebar and .topbar, and reduce content padding to 16px 32px. Toggled together with the browser Fullscreen API from the MazeNET header button.

Side panels (SERVICE FLEET, INSPECTOR)

Collapsed/expanded via animated grid-template-columns on .maze-shell.
Expanded widths: 240px (palette) / 320px (inspector). Collapsed: 0px.
Panel fade/slide: opacity 200ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1).
Shell transition: grid-template-columns 260ms cubic-bezier(0.4, 0, 0.2, 1).

Typography

Monospace everywhere (var(--font-mono)). Page action text is uppercase, mildly spaced (letter-spacing: 1.5px). Subgroup / section labels use letter-spacing: 1.5px at 0.55rem with opacity: 0.4 in the accent color.

Transitions

Standard: all 0.3s ease (buttons, hovers).
Panel glide: 260ms cubic-bezier(0.4, 0, 0.2, 1) (material-standard easing).
Panel fade: 200ms ease on opacity.

DECNET

Home

User docs

Developer docs

Project meta

DECNET — honeypot deception-network framework. Pre-1.0, active development — use with caution. See Sponsors to support the project. Contact: samuel@securejump.cl