Theme builder
Every colour, radius and font in iVOLT is a token, and every token is a custom property you can override. Change the controls below: the preview updates live and the CSS to copy appears underneath. Nothing is stored or sent anywhere; the values only live in this page until you copy them.
Editorial catalogue
Cards, filters and a detail page built from the same primitives.
<article class="iv-card" style="max-width: 24rem">
<div class="iv-card__body">
<h3 class="iv-card__title">Editorial catalogue</h3>
<p class="iv-u-text-muted iv-u-m-0">Cards, filters and a detail page built from the same primitives.</p>
</div>
<div class="iv-card__footer">
<a class="iv-button iv-button--ghost iv-button--sm" href="#recipes">Preview</a>
<a class="iv-button iv-button--primary iv-button--sm" href="#recipes">Open recipe</a>
</div>
</article><form class="iv-stack" style="max-width: 28rem" action="#" method="get" onsubmit="return false" aria-describedby="demo-form-note">
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0" id="demo-form-note">Demo form: nothing is submitted.</p>
<div class="iv-field">
<label class="iv-label" for="f-name">Full name <span class="iv-label__required" aria-hidden="true">*</span></label>
<input class="iv-input" id="f-name" name="name" type="text" required autocomplete="name" aria-describedby="f-name-help">
<p class="iv-field__help iv-u-m-0" id="f-name-help">As it should appear on the invoice.</p>
</div>
<div class="iv-field">
<label class="iv-label" for="f-plan">Plan</label>
<select class="iv-select" id="f-plan" name="plan">
<option>Starter</option><option>Team</option><option>Enterprise</option>
</select>
</div>
<div class="iv-field">
<label class="iv-label" for="f-notes">Notes</label>
<textarea class="iv-input" id="f-notes" name="notes" rows="3"></textarea>
</div>
<fieldset class="iv-fieldset">
<legend class="iv-fieldset__legend">Notifications</legend>
<div class="iv-checks">
<label class="iv-check"><input type="checkbox" name="n" value="product" checked> Product updates</label>
<label class="iv-check"><input type="checkbox" name="n" value="security"> Security alerts</label>
</div>
</fieldset>
<fieldset class="iv-fieldset">
<legend class="iv-fieldset__legend">Billing</legend>
<div class="iv-checks iv-checks--inline">
<label class="iv-check"><input type="radio" name="billing" value="monthly" checked> Monthly</label>
<label class="iv-check"><input type="radio" name="billing" value="yearly"> Yearly</label>
</div>
</fieldset>
<div class="iv-cluster">
<button class="iv-button iv-button--primary" type="submit">Save (demo)</button>
<button class="iv-button iv-button--ghost" type="reset">Reset</button>
</div>
</form><div class="iv-cluster">
<button class="iv-button iv-button--primary" type="button">Primary</button>
<button class="iv-button iv-button--secondary" type="button">Secondary</button>
<button class="iv-button iv-button--ghost" type="button">Ghost</button>
<button class="iv-button iv-button--danger" type="button">Danger</button>
<button class="iv-button" type="button">Neutral</button>
<a class="iv-button iv-button--secondary" href="#docs">Link as button</a>
</div>Your overrides
Paste this after ivolt.css, or inside @layer iv.overrides when you use the layered stylesheet. Nested scopes keep working: put the block on any element instead of :root to theme only that part of the page.
/* tokens.overrides.css — change a control to see the overrides here. */What this does not do
- It edits a handful of tokens. The full set lives in
tokens.jsonandtokens.css; anything can be overridden the same way. - It does not check contrast for you. Test the result with the accessibility tooling of your choice; the shipped themes are tested with axe.
- It does not rebuild the package. Overrides are enough for most brands; a fork of
tokens.jsonis the path for a full palette.