Site system
Colophon
The typography, color, rendering, and design decisions behind this site. Credits and acknowledgments live in humans.txt .
01
Typography
Three self-hosted families divide prose, interface, and technical notation without competing for attention.
Type scale
4xl
2.25rem / 36px
Heading
3xl
1.875rem / 30px
Heading
2xl
1.5rem / 24px
Heading
xl
1.25rem / 20px
Heading
lg
1.125rem / 18px
Body large
base
1rem / 16px
Body text
sm
0.875rem / 14px
Small text
xs
0.75rem / 12px
Caption
02
Color system
A monochromatic palette built by changing lightness rather than hue.
Background
Primary background
0 0% 98%
Foreground
Primary text
0 0% 20%
Card
Card surfaces
0 0% 99%
Card Foreground
Card text
0 0% 15%
Popover
Dropdown surfaces
0 0% 97%
Popover Foreground
Dropdown text
0 0% 25%
Primary
Primary actions
0 0% 10%
Primary Foreground
Text on primary
0 0% 95%
Secondary
Secondary surfaces
0 0% 90%
Secondary Foreground
Secondary text
0 0% 30%
Muted
Muted surfaces
0 0% 92%
Muted Foreground
Subdued text
0 0% 50%
Accent
Accent surfaces
0 0% 96%
Accent Foreground
Accent text
0 0% 20%
Destructive
Destructive actions
0 70% 55%
Border
Borders and dividers
0 0% 88%
Input
Input fields
0 0% 90%
Ring
Focus ring
0 0% 40%
03
Technical rendering
Mathematics and diagrams are rendered as first-class typographic material.
KaTeX
Mathematics is rendered at build time for a stable, low-cost reading experience.
Cauchy's integral formula
Gaussian integral
Euler's identity
Fourier transform
TikZ
Vector diagrams are rendered for graphs, geometry, and formal relationships.
Directed graph
Five-node graph
04
Icon library
A vendored icon library keeps link treatments and interface symbols consistent.
05
Design philosophy
The visual system is built around restraint, negative space, and legible structure.
This site sits at the intersection of Kenya Hara’s philosophy of “100 Whites,” traditional Japanese aesthetics, and Apple’s obsession with invisible refinement.
Hara teaches that white is not the absence of color but the presence of possibility. Light mode draws from rice paper, snow, silk, mist, ivory, stone, and ash. Dark mode extends the same idea to charcoal, ink, obsidian, soot, iron, and shadow.
The site inherits from traditional Japanese craft. Wabi-sabi teaches beauty in imperfection. Ma gives structure to negative space. The discipline of kata asks form to follow repetition until it becomes instinct.
From Apple, the site takes one conviction: design is how something works. Border alignment, font weight, hover state, label tracking, cell padding, and muted foreground are all part of the work.
The result is a monochromatic system where little is arbitrary. A humanist serif handles reading, an industrial sans handles interface, and a monospace handles code. The site is self-hosted, self-typeset, and self-contained.
06
Stack
A small, self-owned stack keeps the publishing system understandable.
About the Colophon
A living reference for the typography, palette, renderers, iconography, philosophy, and technical stack used across krisyotam.com.