Usage rules, do / don’t examples, a live accessible-contrast checker, and a handoff kit — so anyone on the team can produce on-brand work without guessing.
Eight common misuse patterns — and the correct treatment — so brand work stays consistent whoever produces it.
Use the canonical steel-blue --brand token for primary actions and accents.
Substitute an off-brand indigo/purple — a stale value from an old mockup, not the token.
Keep the CT monogram at its fixed aspect ratio — scale uniformly only.
Never stretch, skew, or squash the monogram to fit a layout.
Use Plus Jakarta Sans for display and body text — the one typeface in the system.
Don’t swap in a serif or a system default — it breaks the type scale and voice.
Generated imagery should draw from the brand palette — blue, gold, ink.
Avoid generic rainbow gradients or unrelated stock-photo color casts.
Pair light text on --brand-dk or dark ink on white/surface — both pass WCAG AA.
Never place low-contrast text (light-on-light, gold-on-white body copy) — fails AA.
Preserve minimum clear space equal to the monogram’s own height on all sides.
CROWDEDTEXTDon’t crowd the mark with text, edges, or other elements.
Reference CSS custom properties (var(--brand), var(--gold)) so a token update flows everywhere.
Don’t hardcode a hex value in a component — it silently drifts when the token changes.
Every surface must define a matched data-theme="dark" value — light and dark stay in step.
Don’t leave a light-only ink color that goes illegible when the theme flips.
Enter any two colors and get a live WCAG 2.2 ratio and AA/AAA pass badge — computed entirely in this page, no external API call.
A single package with tokens, logo files, and this guideline set — for contractors, partner agencies, and AI build agents.
Tokens JSON, logo/monogram exports (light + dark), type scale, and this guideline page bundled as a downloadable package.
We’ll build the usage rules, do/don’t set, contrast checks, and handoff kit — wired into a token engine that keeps every surface on-brand.
Start a project →Honest note: we build this for you as a service — brand-agent, CloviBrand, and CloviImage generate and iterate the work with a human founder and architect approving the brief. Full automation at scale is still maturing. Everything shown here is our own dogfooded work: no borrowed logos, no invented clients or testimonials.