Volnyn – Website Builder, Domains, Property, Freelancers & Free Games
Open App

Design systems

Keep brand colors and corner radius consistent on your AI site. Volnyn generates a token-based theme; you can override the live palette without rebuilding, or ask the assistant to restyle the site in chat.

AI sites in Volnyn are scaffolded with a token-based design system (CSS custom properties used by the UI, typically in a shadcn / Tailwind style). Buttons, surfaces, and text pull from those tokens — not from one-off hard-coded colors everywhere.

You do not create a separate “design system project” that other sites subscribe to (that Enterprise-style library flow is not how Volnyn works today). Instead, each AI site owns its generated theme, and you control it in two ways:

  1. Palette override on Access & Design — live CSS variable overrides at serve time
  2. Chat / builder — ask the assistant to change style, colors, typography, and components in the source

What you get

  • A generated theme with shared tokens (primary, secondary, accent, background, foreground, and corner radius)
  • Owner palette overrides that apply on the published site immediately — no rebuild required
  • Freedom for the AI to keep editing the site without wiping your saved overrides
  • Optional password access on the same settings page (see Publish)

How the generated design system works

When Volnyn builds an AI site, the scaffold defines CSS variables the components use. The assistant is steered to work with that system rather than inventing a conflicting palette on every page.

At a high level:

Piece Role
Tokens Brand colors and radius as CSS variables
Components UI built to consume those variables
Your overrides Optional owner values injected when the live HTML is served

That keeps the look coherent when you regenerate sections or ask for new pages.

Palette override (Access & Design)

Open Access & Design in the site sidebar (/user/site/access) under Site settings.

Colors you can set

Leave a field empty to keep what the AI chose. Set only the slots you want to own:

Token Typical use
Primary Main brand / buttons / links
Secondary Supporting brand color
Accent Highlights and emphasis
Background Page / surface background
Foreground Default text color
Corner radius Shared rounding (for example 0.5rem or 8px)

Accepted formats

  • Hex: #16a34a or #7c3aed
  • HSL components (shadcn style): 142 76% 36% (without the hsl() wrapper)
  • Radius: 0.5rem or 8px

Invalid values are rejected so raw strings are never injected into CSS.

How overrides are applied

On the published site, Volnyn injects a small <style id="vai-theme-tokens"> block that sets :root CSS variables (--primary, --secondary, --accent, --background, --foreground, --radius).

Because this happens when the page is served:

  • Changes take effect on the next page load — no rebuild
  • The AI can keep editing generated CSS without undoing your owner palette
  • Empty tokens fall through to the generated defaults

Click Save palette, then View site (when a live URL exists) to confirm.

Asking the AI to change design

For deeper restyles (fonts, layout, new components, full brand refresh), use chat:

Use our brand green #16a34a as the primary color, keep backgrounds light,
and use a soft 8px corner radius across buttons and cards.

Or:

Restyle the homepage to feel more minimal — more whitespace, less decoration,
same content.

Chat edits update the project source and usually need a new build/publish for visitors to see them. Palette override is the fast path when you only need color/radius control on the live site.

Design vs access

The same Access & Design page also controls who can visit the published URL (public vs password). Palette and access are independent:

  • Changing colors does not change who can open the site
  • Locking the site with a password does not clear your tokens

See Publish your Volnyn site.

Limitations

Be clear about scope so expectations match the product:

  • Per site, not workspace-wide. Overrides and generated themes are not shared as a versioned library across many projects.
  • No attach / release / update prompt for an external component package as a managed design system.
  • Token surface is small. The dashboard override covers the five color slots plus radius — not every Tailwind scale step or typography token.
  • Overrides are for the live serve path. Confirm on the published URL; preview/edit modes may still show the generated theme until you check the live site.
  • Deep design work still goes through chat. Component API changes, custom illustration systems, and complex motion belong in the builder conversation.

FAQ

Is a design system a separate Volnyn project?
No. Each AI site has its own generated theme. You override tokens on that site or ask the assistant to restyle it.

Do palette overrides survive AI edits?
Yes. Overrides are stored on the project and injected at serve time, so the AI can keep editing without clearing them.

Do I need to rebuild after saving the palette?
No. Reload the live site after Save palette.

Can I clear an override?
Clear the field and save. Empty fields keep the AI-chosen values.

What if my brand uses more than five colors?
Set the main tokens in Access & Design, then ask chat to apply secondary brand colors to specific sections or components.

Does this replace templates?
No. Templates scaffold starting layouts; the design system (tokens + components) governs how the UI is colored and rounded as you iterate.