Phase 2 · design system check

Nodrius design system

Design system check page. It shows typography, colours, badges, metadata, surfaces and interactive states of the visual system. It is not the homepage: it is here to evaluate the system before building real pages.

Typography

System sans and monospace families: no external font and no network request. The samples read the same variables as real headings (--text-h1, --text-h2, --text-h3, --text-h4).

Level-1 heading · --text-h1 · clamp(1.95rem → 2.75rem)

Structured knowledge for a safer domain

Level-2 heading · --text-h2

Hardening a Linux server

Level-3 heading · --text-h3

Network segmentation with VLANs

Level-4 heading · --text-h4

Configuration check

Lead text · --text-lead

Opening line of an entry: it summarises the problem and the result in one or two sentences.

Body text · --text-base · line-height 1.6

Body text with a controlled reading width (--measure, 72 characters) and a line height that also suits long technical content and reading on a phone.

Secondary text and metadata

Secondary text: context, notes and supporting explanations (--color-text-secondary).

Metadata and annotations (--color-text-meta, --text-xs).

Colours

Violet is the main brand accent. The other accents identify one area and are not to be used indiscriminately in every component. Each area has its own soft surface, used in the hover state of its elements; generic cards stay on the neutral surface. For every area the bar, the dot and the badge text share the same value.

Surfaces

--color-bg#F5F5F5page background
--color-surface#FAFAFCgeneric cards (neutral)
--color-surface-hover#EEE7FFhover outside the areas
--color-code-bg#EEF1F6code and technical blocks

Area surfaces — hover state of each area

--color-surface-security#EDE8F7Cybersecurity Governance — soft violet
--color-surface-networking#E8EAF7Networking — soft blue
--color-surface-systems#D7EFF2Server & Virtualization — soft cyan
--color-surface-automation#F7E6F4Automation & AI — soft magenta

Text and borders

--color-text#0B102Bprimary text
--color-text-secondary#596580secondary text
--color-text-meta#5F6879metadata
--color-text-muted#8994ADdecorative only
--color-border#E1E5EDborders and dividers
--color-border-strong#CCD2DEinteractive borders

Area accents — readable on a light background

--color-accent#651FFFCybersecurity Governance · brand
--color-accent-networking#3D4FFFNetworking
--color-accent-systems#086F9FServer & Virtualization — hover border and focus ring
--color-accent-ai#AE0096Automation & AI — hover border and focus ring

Neon

--color-neon-systems#00D9F5bar, dot and text — Server & Virtualization
--color-neon-ai#F000E8bar, dot and text — Automation & AI

Measured contrast (WCAG 2.2 AA = 4.5:1)

Contrast ratios computed from the actual token values.
Combination	Ratio
Primary text on background	17.15:1
Secondary text on background	5.35:1
Metadata on background	5.15:1
Brand violet on background (links)	6.03:1
Networking on background	5.12:1
Server & Virtualization on background	5.09:1
Automation & AI on background	5.94:1
Area accents on their own surfaces	4.63:1 – 5.48:1
Badge text (violet / blue / cyan / magenta)	6.03 · 5.12 · 1.57 · 3.28 : 1
White text on the primary button	6.6:1

Badge text on the neutral background: violet 6.03:1 · blue 5.12:1 · neon cyan 1.57:1 · neon magenta 3.28:1. The last two sit below the AA threshold of 4.5:1. In the current system this is intentional: the neon values carry the decorative colour identity of the areas, while hover borders and focus rings use the dedicated readable variants. If a badge text has to meet AA, the readable accent of the area must be used.

Badges and metadata

Colour always comes with a text label: the area stays readable even without perceiving the colour difference.

Areas

Cybersecurity Governance
Networking
Server & Virtualization
Automation & AI

Entry types

Articles
Labs
Tests
Utilities
Resources

Metadata

September 28, 2026Reading: 12 minVersion 2.1

A line of essential metadata: date, reading time and, where useful, version or status.

Links, buttons and states

Links are underlined: the underline stays the main signal and colour is a reinforcement. Go to the Colours section, or back to Typography.

Hover and focus states: point at the links and press Tab to see the real focus ring (violet, 2px, with offset). No superfluous transition: only background colour and underline thickness, switched off under prefers-reduced-motion.

Link styled as a button

Surfaces, borders and spacing

Surfaces are told apart by a thin border and a slightly lighter background, with no shadows. The accent bar is a decorative detail: the area is named by the label. In interactive states every card keeps its own colour identity.

Cybersecurity

Hardening a Linux server

Reading: 12 min

Networking

Network segmentation with VLANs

Reading: 9 min

Server e Virtualizzazione

Backup strategies for virtual machines

Reading: 15 min

Automazione e AI

Local inference: observed limits

Reading: 10 min

All four cards are links (<a>): on hover each one takes the soft surface of its area and the border in the area colour; from the keyboard the focus ring uses the same colour. Cards without an area stay neutral.

Divider

Spacing scale

--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41rem
--space-51.5rem
--space-62rem
--space-73rem
--space-84rem

Borders

--color-border · borders and dividers

--color-border-strong · interactive elements

Technical content

Blocks for code, configurations, quotes and results. Inline code uses --color-code-bg; blocks have overflow-x: auto and never widen the page.

interface GigabitEthernet1/0/10
 description uplink-lab
 switchport mode trunk
 switchport trunk allowed vlan 10,20,30
 spanning-tree portfast trunk

The measured values hold for the test environment described. Outside those conditions the result cannot be generalised.
Method note

Sample results table.
Hypothesis	Conditions	Observed result
The service VLAN reduces broadcast	4 hosts, managed switch, 24 hours	Broadcast reduced, latency unchanged
Differential backup shortens the window	120 GB VM, local storage	Window reduced by 62%

Bullet list for prerequisites and limits.
Short items, one piece of information each.
No list used as filler.

First step of the procedure.
Second step, with the result checked.
Third step, with a note on the drawbacks.

Phase 2 check page. It will be replaced by the final homepage in a later phase.