Design system
Every token and component on this page is rendered from the production stylesheet. Take it, fork it, ship it — one CSS file, self-hosted fonts, no framework.
Colour
Brand blue carries action and emphasis. Ink is the neutral ramp for text, borders and surfaces. Never hardcode a hex — every value here is a custom property.
Brand
--brand-50 --brand-100 --brand-200 --brand-300 --brand-400 --brand-500 --brand-600 --brand-700 --brand-800 --brand-900 Ink
--ink-50 --ink-100 --ink-200 --ink-300 --ink-400 --ink-500 --ink-600 --ink-700 --ink-800 --ink-900 --ink-950 Surfaces & semantic
--bg --bg-alt --bg-soft --success-500 Confirmations, checkmarks --warning-500 Advisory notices --danger-500 Errors, destructive actions Typography
Inter sets the interface and body copy. Tiempos Text sets display headings, with Hedvig Letters Serif as its fallback. Both are self-hosted.
The quick brown fox
h1 · clamp(2.2rem → 3.75rem) · serif · 400 The quick brown fox
h2 · clamp(1.6rem → 2.5rem) · serif · 400 The quick brown fox
h3 · clamp(1.2rem → 1.5rem) · serif · 400 Body copy runs at 17px / 1.6 in Inter, coloured --ink-700. Long-form pages step up to 1.08rem inside .prose-article.
body · 17px · Inter 400 Font stacks
--font-sans Inter — UI, body, buttons, navigation
--font-serif TiemposText → Hedvig Letters Serif → system serifs
--font-serif, Tiempos skipped Hedvig Letters Serif standing in on its own
--font-mono ui-monospace — code, versions, coupon codes
Radius, elevation, motion
Radius
--r-xs--r-sm--r-md--r-lg--r-xl--r-2xl--r-fullElevation
--shadow-xs--shadow-sm--shadow-md--shadow-lg--shadow-xl--ringMotion & measure
Two durations only: --t-fast (120ms) for hover and focus,
--t-med (200ms) for transforms and shadows. Containers are
--container (1180px) and --container-narrow (880px).
Every animation is suppressed under prefers-reduced-motion.
Feature grid
One, two or three columns depending on viewport. Cards with an href become linked cards.
Conditional logic
Show and hide fields based on what someone has already answered.
Headless REST
Post submissions from Next.js, Astro, or anything that speaks HTTP.
Learn more →File uploads
Validated, size-capped, stored outside the web root.
Steps
-
Install the plugin
Upload the ZIP under Plugins → Add New and activate.
-
Add your licence key
Settings → Core Forms → Licence. One key covers unlimited sites.
-
Build your first form
Start from a template or an empty canvas.
FAQ accordion
Can I use this in my own project?
Do I need Astro, Tailwind, or a build step?
Which fonts are included?
Is this the real stylesheet?
global.css the marketing site uses, so it cannot drift from production.Dark section
One class inverts the whole band — headings, body copy, kickers, inline links and every button variant. Drop any component inside and it adapts.
Body copy softens to 78% white. Inline links take
--brand-200, kickers take --brand-300, and
buttons swap their light fills for translucent white — automatically,
with no extra classes on the markup.
--brand-300 Kickers --brand-200 Inline links 78% white Body copy #fff Headings Closing CTA
Take it and build something.
One stylesheet, self-hosted fonts, copy-paste HTML. MIT licensed — no attribution required.
Prose
Used by blog posts, docs and long-form pages.
A second-level heading
Body copy inside .prose-article runs at 1.08rem / 1.7. Links are
underlined with a tinted rule that solidifies on hover.
A third-level heading
- List markers pick up brand blue.
- Bold text steps up to --ink-900.
Blockquotes take a brand-blue rule and italic type.
const form = await cf.submit('contact', data);| Token | Value |
|---|---|
--brand-500 | #2f63f5 |
--r-lg | 12px |