Overview
Shared design tokens and brandable primitives that compile into ViraUI's look.
Foundation is the shared visual substrate of ViraUI: design tokens and brandable primitives for color, type, space, elevation, motion, and related facets. Change the substrate to shape a brand; the same @viraui/react components stay on top and read the new values.
How it works
A theme compiles those primitives into CSS custom properties on one stylesheet your app loads once. Each topic below is a facet of that substrate, not a separate mini system. Components and your own CSS consume the same --* names, so you retune the theme instead of inventing local visual rules.
Edit a semantic value on the sheet and the UI follows without a per-component chase. Layers places this substrate in the Core stack; theming docs cover how the sheet loads.
Tune
App Studio in ViraUI Pro is the easiest path when you want to reshape the brand: tweak foundation values on a live canvas, share the theme with the team, and export CSS that already matches the contract. Drop the export into the app as a custom theme. Colors, type, space, motion, and the rest stay on one sheet.
Without Studio, paste a brand prompt into your agent or edit the theme CSS by hand (or switch a built-in preset). Keep every semantic name stable; components read those names, not ad-hoc local inventiveness. Open a topic when you need to retune that facet.
Last updated on