Skip to content
ub3r.io

Project document

Design Brief

Tokens, typography, layout per screen and the editorial voice.

Direction

Editorial, confident and light-first. The interface steps back so prose and code carry the page. Colour is reserved for the brand gradient, primary actions and progress.

Tokens

  • Light background #FFFFFF, ink oklch(19% 0.03 265), borders oklch(90% 0.01 262), shadow 0 1px 2px rgba(16,24,64,.06).
  • Dim background oklch(9.5% 0.02 262), surface oklch(14% 0.025 263), ink oklch(94% 0.008 260).
  • Primary #0010B8, cyan #4DDBE6, celebration gold #C9A227.
  • Radius 10px; content width max-w-6xl.

Wordmark

"ub3r" in weight 800 with a 90° gradient from primary to cyan clipped to text and −0.02em tracking; ".io" in weight 500 in ink.

Typography

  • Prose: Source Serif 4, about 19.5px with 1.7 line height, at most 68 characters per line.
  • Interface: Inter; headings 700–800 with tight tracking.
  • Code: JetBrains Mono at 13.5px.

Screens

  • Home: two-column hero (pitch left, featured series right), new-chapter rail, continue strip, value props, series grid.
  • Library: title, search plus topic chips on one row, three-column grid.
  • Series: header with large ring; chapter list and prerequisite map side by side on desktop.
  • Chapter: three columns — checklist, article, table of contents; a thin gradient reading-progress bar under the header.

Voice

Direct and specific. Explain why before how. Name the failure mode a pattern prevents. No filler, no hype.