The system is the site
Design system
Dark, warm, ornamental, monastic-meets-modern. Every token here is a runtime CSS variable, so a single theme flip re-skins the whole system. Nothing on this page is a mockup — it reads live values.
01
Color
A single accent against deep, warm black
Deep blacks, warm off-whites, one muted gold. The Source Library's brown-on-cream is theirs; this is the Embassy's house.
Dark (default)
bg#000000
bgElevated#000000
surface#000000
surfaceStrong#000000
fg#fafafa
fgMuted#c2bcb2
fgSubtle#8b857b
accent#c09a5d
accentStrong#d8b783
accentDeep#8a6f43
border#2a2724
borderStrong#3a3631
Light
bg#faf8f3
bgElevated#ffffff
surface#ffffff
surfaceStrong#efeeeb
fg#16130f
fgMuted#5a544b
fgSubtle#8a8276
accent#8a6a30
accentStrong#6f5424
accentDeep#5c4a26
border#e3ddd2
borderStrong#d3ccbe
02
Type
Cormorant Garamond for display, Open Sans for UI, JetBrains for code
The Embassy's own pairing: a high-contrast classical serif carries the headlines; a humanist sans carries the interface; a refined mono carries the API.
Displayad fontes
TitleTo the sources
HeadingRecently translated
BodyGenerous line-height, paragraphs that breathe.
MonoGET /api/books/library
03
Motion & form
Present but never frantic
Hover transitions sit at 180–240ms; nothing but ambient loops exceeds 800ms; all motion respects prefers-reduced-motion.
Fast
180ms
hover, taps
Base
320ms
reveals, page
Slow
640ms
set pieces
Easing
0.2, 0.8, 0.2, 1
default curve
Radius S
2px
Radius M
2px
Radius L
4px
Radius XL
6px
04
Accessibility
WCAG AA minimum, gold focus rings, full keyboard
- Visible gold focus rings on every interactive element — never removed.
- Command palette and all controls fully keyboard-navigable.
- Ornamental illustrations carry alt text describing their symbolic content.
- Dark and light modes both meet contrast requirements.
- Reduced motion collapses every animation to an instant state change.
Source LibraryEmbassy of the Free Mind
The rediscovery of ancient wisdom helped spark the Renaissance. It's time for another.