Colophon
Notes on how this site is built and designed.
Built with
This site is built with Quarto and hosted on GitHub Pages.
Design system
The design is inspired by Hugo Apéro and by Silvia Canelón’s site (source) — particularly the warm accent palette, uppercase navigation, and custom hero illustration. Colors, typefaces, and the hero graphic here are original to this site.
Typography
- Headings: Fraunces, an optical serif, with Georgia and system serif fallbacks.
- Body & UI: Commissioner and Atkinson Hyperlegible, paired with Segoe UI and system sans-serif fallbacks.
Color palette
The color system uses an Apéro-inspired warm palette across both themes:
- Light theme: Cream background (
#fbf7f1), ink body text (#241f1a), terracotta primary links (#a8471f), deep teal accent (#16636b), and mustard pills (#e8bc5c). - Dark theme: Charcoal background (
#1b1712), warm paper text (#f3ede2), coral primary links (#f0916a), light teal accent (#6dccd6), and gold pills (#e8bc5c).
Layout
The layout layers custom SCSS on top of Quarto’s Bootstrap 5 base (cosmo for light mode, darkly for dark mode).
Accessibility
This site is designed to meet WCAG 2.2 AA standards. Color combinations exceed 4.5:1 contrast ratios for normal text, fonts are chosen for hyperlegibility, and the site supports keyboard navigation (including a “skip to main content” link). OS-level reduced motion preferences are respected.
Development & AI assistance
AI coding assistants are used to support the technical development, optimization, and maintenance of this site, including Quarto configuration and optimization, styling, automation scripts, and accessibility auditing.