Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Expressive Fonts Pack
Color and morphology fonts for hero sections, marketing, and creative contexts. Not appropriate for body text.
| Type | Font pack (theme tokens + effect helpers) |
|---|---|
| Theme CSS | packs/fonts-expressive.theme.css |
| Total weight | ~610KB (3 woff2 files) |
Fonts Included
Nabla — COLR v1 Color Font
A color font using the COLR v1 format — the browser composites multiple color layers natively. Axes: EDPT (0–200, extrusion depth) and FLAT (0–100, flattens perspective). The EDPT axis is animatable with @property, creating a depth-breathing effect. Assigns to --vb-font-nabla.
Honk — Inflatable Neon
Rounded, inflatable morphology font. Axes: MORF (−40–40) and SHLN (0–50, shine). Assigns to --vb-font-honk.
Kablammo — Comic Impact
High-energy comic-style display font. Axis: MORF (−40–40). Assigns to --vb-font-kablammo.
Loading
Via link tag
<link rel="stylesheet" href="/cdn/packs/fonts-expressive.theme.css">Via JS
import { activateBundle } from 'vanilla-breeze';await activateBundle('fonts-expressive');Usage
Nabla with depth pulse
<p class="vb-nabla" data-effect="depth-pulse">HELLO</p>Direct usage via tokens
.hero-title { font-family: var(--vb-font-nabla); font-variation-settings: 'EDPT' var(--vb-nabla-depth), 'FLAT' 0;}.accent-text { font-family: var(--vb-font-honk); font-variation-settings: 'MORF' var(--vb-honk-morf);}Axis Properties
| Property | Default | Range | Effect |
|---|---|---|---|
--vb-nabla-depth | 100 | 0–200 | 3D extrusion depth |
--vb-nabla-flat | 0 | 0–100 | Flattens 3D perspective |
--vb-honk-morf | 0 | −40–40 | Morphology |
--vb-honk-shln | 0 | 0–50 | Shine |
--vb-kablammo-morf | 0 | −40–40 | Morphology |