Clean. Light. Quietly premium.
This guide showcases the current F12 design tokens and components in a modern, open layout. It’s built to be easy to scan, easy to demo, and practical for shipping features.
In WordPress, enqueue the design system and wrap your markup in .f12.
<section class="f12">\n <a class="f12-btn f12-btn--ghost" href="#">Action</a>\n <input class="f12-input" placeholder="Search…" />\n</section>Tokens
Token-driven design keeps the system consistent. Use the explorer to find variables and copy names/values.
Typography
Hierarchy without heaviness. Keep it readable, calm, and modern.
Clear messaging, gently confident.
Prefer whitespace and contrast over bold color.
Components
Primitives that should feel consistent across features. Keep the overall UI light; let accent red appear only at key moments.
Use one primary action per surface when possible. Ghost keeps pages airy and unboxed.
Focus styles should be visible but quiet—tokenized with --f12-color-focus.
Prefer neutral chips to avoid accidental “light red” fills.
Patterns
How it comes together: calm editorial rhythm, subtle surfaces, and a single clear CTA.
A light feed with breathing room.
Use whitespace and subtle borders to guide the eye. Avoid boxed grids and heavy dividers.
New layouts should feel open and unforced.
Use accent sparingly; rely on tone and spacing.
Accessibility
Keep interactions clear: visible focus rings, readable contrast, and no reliance on color alone.
Use :focus-visible behavior already defined in base styles.
On light surfaces, rely on strong typography and subtle borders. If you need emphasis, prefer weight and spacing first, then accent as a final touch.