Resources
Everything, copy-pasteable.
Color tokens
CSS custom properties.
@theme inline {
--color-brand-ink: oklch(0.18 0.005 270); /* Ink */
--color-brand-terracotta: oklch(0.58 0.15 38); /* Terracotta */
--color-brand-amber: oklch(0.71 0.13 70); /* Amber */
--color-brand-cream: oklch(0.88 0.05 60); /* Cream */
--color-brand-warm-white: oklch(0.97 0.008 75); /* Warm White */
}Type tokens
Type scale as CSS variables.
:root {
--text-display: 64px; /* Fraunces italic 400 */
--text-h1: 48px; /* Fraunces italic 400 */
--text-h2: 32px; /* Geist 600 */
--text-h3: 24px; /* Geist 600 */
--text-body-lg: 18px; /* Geist 400 */
--text-body: 16px; /* Geist 400 */
--text-small: 14px; /* Geist 400 */
--text-micro: 12px; /* Geist 500 */
}Fonts
Self-hosted woff2.
All five files are shipped with the project and served from /fonts/. Click to download.
- Download
Fraunces italic 400
/fonts/fraunces-latin-400-italic.woff2 - Download
Fraunces italic 700
/fonts/fraunces-latin-700-italic.woff2 - Download
Geist Sans 400
/fonts/geist-sans-latin-400-normal.woff2 - Download
Geist Sans 500
/fonts/geist-sans-latin-500-normal.woff2 - Download
Geist Sans 600
/fonts/geist-sans-latin-600-normal.woff2
Logo
Mark and wordmark, downloadable.
The mark is a contained gradient square with a white italic c. The wordmark is lowercase italic Fraunces. Both ship as SVG.
- Download
Mark — gradient square (SVG)
/brand/cadenza-mark.svg - Download
Wordmark — lowercase italic (SVG)
/brand/cadenza-wordmark.svg - Download
Lockup — mark + wordmark (SVG)
/brand/cadenza-lockup.svg
The wordmark is also live text — if you have Fraunces installed, set it directly: Fraunces italic 400, lowercase. The SVG above is the canonical fallback for surfaces without web fonts.