Design Brief

nviaOTP should feel like a well-kept engineering lab: instruments on a bench, readings you can trust, labels in monospace, and long-form explanation in a calm serif. It should not look like a template academy with stock illustrations and pastel gradients. Every visual choice serves legibility of technical material or makes an interactive reading easier to interpret.

Brand

The wordmark is “nvia” in weight 500 ink followed by “OTP” in weight 800 with a 90° linear gradient from #0010B8 to #4DDBE6 clipped to the text, letter-spacing −0.02em. The tagline is “OTP engineering, from RFC to attack surface.” The favicon is a blue rounded square with three white dots over three cyan dots — a six-digit code reduced to its rhythm.

Tokens

• Primary #0010B8 — links, primary buttons, the current step in a window, selected tabs.
• Cyan #4DDBE6 — secondary accent: countdown rings, expected bands on charts, “allow” decisions.
• Gold #C9A227 — celebration only: completion checks, confetti, and the “step-up” decision chip where it signals a positive extra assurance.
• Ink oklch(19% 0.03 265) on a #FFFFFF background in light mode; borders oklch(90% 0.01 262); soft shadow 0 1px 2px rgba(16,24,64,.06).
• Dim mode background oklch(9.5% 0.02 262), surfaces oklch(14% 0.025 263), ink oklch(94% 0.008 260).
• Radius 10px for cards and inputs, 12–14px for lab frames; maximum content width 6xl.

Semantic red and green

Red and green are reserved for meaning, never decoration. Red (the destructive token) marks the attacker side: the attacker timeline, attacker panels in attacker/defender splits, removed lines in diffs, FAIL lines, invalid inputs and the “deny” decision. Green (the success token) marks the defender side: defender panels, defense events inside the timeline, PASS lines, matched test vectors and valid signatures. Because colour alone is insufficient, every red or green state also carries an icon or a word — a skull or shield icon, “PASS”/“FAIL”, “accepted”/“rejected”, a check or a cross.

Severity uses four fixed badges — low, medium, high, critical — with the same colours and labels everywhere: risk tables, the attack simulator’s residual severity and alert examples. A severity is never shown as a colour without its word.

Typography

• Prose: Source Serif 4 at 19–20px with 1.7 line height, about 68 characters per line.
• Interface: Inter for navigation, buttons, labels, cards and lab controls.
• Code and readings: JetBrains Mono at 13.5px for code; 10.5–12px uppercase tracked monospace for instrument labels such as “T = floor(…/30)” and “FAST-FORWARD · DETERMINISTIC”.

Screens

Home. Two-column hero: copy left, TOTP card right; the card has a monospace header strip, a large tracked code, a countdown ring that turns red in the last five seconds, and the base32 secret grouped in fours. Below, a horizontal rail of new chapters with NEW badges and dates, an optional continue strip, three role cards, a library grid and the oscilloscope illustration drawn in brand colours on a faint grid.

Library. A topic chip row and a search field above a responsive grid of series cards. Each card has a gradient cover in brand blues, a level chip, a chapter count and a progress ring.

Series. Header with number, title, level and blurb; ordered chapter list with gold checks; the prerequisite graph as nodes on a quiet grid with connecting arrows, highlighting ancestors on hover.

Chapter. Three columns at large widths; single column on small screens. Lab frames break out with a beaker icon, a title and a monospace kicker. Playgrounds pair the editor with a console-style output panel. Diff widgets show removed lines tinted red and added lines tinted cyan-green with a toggle.

Lab modules. Inputs on the left, readings on the right. The workbench renders HMAC bytes as a grid where the offset byte is cyan and the four selected bytes are primary blue; the test-vector panel sits full-width below. The simulator places the red attacker timeline beside the green defender controls and a four-cell result bar underneath.

Docs. A narrow document list on the left and editorial prose on the right, using the same prose styles as chapters.

Charts and diagrams

Diagrams are drawn as inline vector graphics in the site’s own tokens, never as raster screenshots. Sequence diagrams use dashed lifelines and primary-blue arrows; flow diagrams use 10px-radius boxes numbered in monospace; cyan marks expected or accepted ranges, red marks attacks or anomalies, and gold marks the step where assurance is added. Axis labels and legends are monospace and small. Every chart that shows non-standard numbers says “illustrative example” inside the graphic itself, so a cropped screenshot still carries the label.

Tone

Direct, technical and specific. Prefer a concrete example with fictional personas and labelled illustrative numbers over abstraction. Avoid hype, fear-selling and exclamation marks. Explain trade-offs, including where a control does nothing.

Accessibility

Visible focus rings on every interactive element; figures labelled with full sentences that describe the diagram’s content; live regions for playground output, simulator outcomes and assertion results; contrast at WCAG AA in both themes; motion that can be reduced without losing information.