Sites

Documentation Abizvo Sites themes Liquid, the theme check and the premium standard — written from the code that enforces them

For developers Design reference

Design reference

design.abizvo.com is Abizvo Design: a visual-design reference library and a design-direction generator. It exists so a theme starts from a considered direction rather than a blank stylesheet. Nothing on it is specific to Abizvo Sites — it composes a complete design system any front end can build — and this page is about carrying one into a theme.

What is there

  • The library — design.abizvo.com/library: 134 styles across eight dimensions — visual language (26), layout (21), typography (16), surface (16), colour (16), imagery (16), motion (16) and density (7). Each style page describes the style, what it goes with and what it avoids, shows a generated illustration of it as an interface, and lists its prompt vocabulary. A colour style carries six ordered swatches — background, surface, border, text, secondary, accent — every one seeded to pass 4.5:1 on its own ground and its own surface. A motion style carries a duration, an easing and a timing note.
  • Presets — design.abizvo.com/styles: named combinations of one style per dimension, their direction composed live so a correction reaches every preset using it.
  • Discover — design.abizvo.com/discover: eight rounds of miniatures; nothing on screen names a style until the end, so what you pick is what you like rather than what you expect to like.
  • The mixer — design.abizvo.com/mixer: pick one style per dimension by hand; the compatibility graph says what fits.
  • Generate — design.abizvo.com/generate: the direction as one document. AI recommend chooses slugs from the library for a brief when a model is configured (it needs an Abizvo organization); Surprise me walks the compatibility graph and needs nothing.

The exports

A direction is one document, and its exports are seven views of it that agree by construction: JSON, CSS custom properties, a Tailwind v4 @theme block, Markdown, plain text, an image prompt, and a prompt for a coding agent. The composer is a pure function over the library's own data — the tokens, the type scale, the spacing scale, the component rules, the motion timings, the Avoid list and the Style DNA are derived, never written by a model — so the CSS export is safe to read as a specification. Every export is on screen as selectable text.

The CSS export writes --color-{role}, --font-display, --font-body, --font-ui, a --space-{n} scale, --radius-{name}, --shadow-{name}, --ease and --duration-{name}.

Carrying a direction into a theme

A theme does not read the export at runtime; you transcribe it into the theme's own settings, where the owner can change it later.

Colour → colour schemes

The six swatches are one colour scheme. Put them in the color_scheme_group's definition (background, surface/panel, border, text, muted/secondary, accent, plus button and button_text for controls) and make the direction's palette scheme-1 of the look in config/presets.json. A second scheme inverted (the text swatch as ground) gives a dark section; a third on the accent gives a band. Then sweep every text colour on every ground of every scheme — the exported swatches pass on their own ground, but a caption on the accent field or a muted note on a panel is a pair the export never checked. Quire's sweep found 4.03:1 and 4.19:1 that way. The premium standards hold text to 4.5:1 and a control's boundary to 3:1.

Typography → font_picker and scales

The direction names a display family, a body family and a UI family. A theme offers fonts only from the platform's library — seventeen families, served from the platform's own origin — so pick the nearest: a high-contrast display serif becomes Fraunces or Playfair Display, a geometric sans Outfit or Jost, a humanist sans Inter or Work Sans, a grotesk Space Grotesk, an editorial serif EB Garamond, Cormorant Garamond, Lora or Libre Baskerville, a display sans Syne. Say which stood in for what in documentation/README.md. The type scale becomes range settings (heading_scale, body_scale, heading_letter_spacing, body_line_height) whose defaults are the direction's values, written into custom properties by the layout's {% style %} block.

Spacing, shape and surface → range settings and custom properties

The spacing scale becomes page_width, page_gutter, section_spacing, grid_gap (or your own names) as range settings with the direction's values as defaults; radii become radius or range settings (button_radius, card_radius, media_radius); shadows a shadow setting; a rule weight a range setting. The rule-weight and corner-radius settings are what let one theme read as industrial or as soft.

Motion → animation defaults and a motion level

The direction's easing and durations become the defaults of each section's animation setting (entrance, duration, easing — the platform's smooth, gentle, snappy, linear, spring easings are fixed, so pick the nearest) and a global select of minimal / standard / expressive that the layout turns into a motion distance. Everything the runtime plays already honours reduced motion.

The Avoid list → what the theme refuses to offer

A direction's Avoid list is the useful half of a look. A theme that follows a direction does not offer the owner a setting that breaks it — no drop shadow on a flat direction, no rounded corner on an editorial one. Fewer settings, each with a good default, is what a premium theme looks like.

The image prompt → sample photography

The direction's image prompt is the brief for a theme's sample photographs: one art direction, one coherent set, generated or licensed, each under 250,000 bytes as WebP, with the prompt or the licence recorded per picture in documentation/IMAGES.md. No printed page in a generated picture may carry a legible word — generated lettering is always wrong — so every proof, sign and screen is out of focus or at an angle.

The two products side by side

Abizvo Design describes a look; Abizvo Sites renders one. A design direction is a document a person or an agent builds from; a theme is a package the platform runs, checks and sells. When the two disagree — a font the platform does not carry, a shadow the direction forbids — the theme's own settings and the platform's own rules win, and the README says why.