Made with care
A colophon is a printer's note at the end of a book describing how it was made. This is ours: the typefaces, tools, and decisions that shaped OpenPostern.
Framework
Next.js 16
App Router with React Server Components. Static pages at the edge, streamed dashboards behind auth.
TypeScript
Strict mode throughout. No implicit any. Types live next to the code they describe.
Styling
Tailwind CSS v3
Utility-first with a tight design token set. CSS custom properties handle semantic color, Tailwind handles spacing and layout.
CSS custom properties
All semantic colors (--ink, --rule, --safe, --warn, --crit) and animation delays defined in globals.css so they are accessible in both Tailwind classes and inline styles.
Typography
Cormorant
Display and editorial headlines. A classical Old-Style serif with deep ink traps, optimized for large sizes. Used italic for emphasis and warmth. Sourced from Google Fonts.
IBM Plex Mono
Data labels, scores, status badges, monospaced UI elements. Its slightly humanist proportions keep dense data readable without feeling cold.
DM Sans
Body copy and navigation. A low-contrast geometric sans-serif that pairs cleanly with Cormorant without competing. Variable optical sizing (9..40 axis) for fine-grained control.
Icons
Iconoir
Open source icon library with a clean, consistent 1.5px stroke weight. Used throughout the dashboard for navigation and UI affordances.
Animation
CSS keyframes
All animations are pure CSS: char-in (per-character blur + translateY for hero text), fade-up (scroll-triggered reveals via IntersectionObserver), count-up (requestAnimationFrame stat counters). No JavaScript animation library loaded on the critical path.
IntersectionObserver
FadeUp and CountUp components use IntersectionObserver with threshold 0.08 and a negative rootMargin so elements animate just as they enter the viewport, not before.
Infrastructure
Vercel
Zero-configuration deployment via git push. Edge network for static assets, serverless functions for API routes. Automatic preview deployments on every branch.
Design principles
Restraint
A strict token vocabulary of four ink weights, one border color, and two backgrounds. Complexity is earned, not assumed.
Information density
Security data needs to be legible at a glance. Risk scores, status badges, and alert feeds are designed for scanning, not reading.
Accessibility
All text meets WCAG 2.1 AA contrast ratios. No color is used as the sole indicator of meaning: risk levels are always paired with a label. Focus states are visually distinct.
Built to last.
Not to impress.
Every decision here optimizes for the person reading a breach alert at 11pm, trying to figure out if their payroll provider was compromised. That person deserves clarity, not decoration.