Version 1.7.0 NEW STUDIO TOOL
Fine-tune values with Studio.
With the Studio online tool, you can customize the default tokens to match your brand. Set an accent color, material, and density, then preview real components before downloading the optional brand.css file. Your choices follow you into the showcase.
Default presets
Contrast validator
Full tutorial
Screen examples
Fine-tune
Material
10px
Individual radius, spacing, and control tokens live in the Layout tab and override the dial here.
Success
Warning
Danger
Info
Canvas
Raised surface
Solid surface
Text
Text · secondary
Text · tertiary
Border
Divider
Easing
Live preview
What you see here matches the showcase — your choices carry over when you open Showcase.
Workspace
My project
Billing overview for the last 30 days.
| Customer | Status | Amount |
|---|---|---|
| Northstar Labs INV-2041 | Paid | $2,400 |
| Fieldwork Co. INV-2042 | Due | $480 |
| Signal Studio INV-2043 | Overdue | $860 |
Your first page in about 10 minutes
Work through this checklist after you download smartwebUI.zip and your brand file.
-
Unzip the library
Place the
smartwebUIfolder in your project, for examplepublic/assets/smartwebui/. -
Add your brand
Copy
brand.cssfrom the brand kit next tosmartwebui.css, and link it after the library stylesheet. -
Open the starter page
Put
starter.htmlbeside those files and open it in a browser to check color and density. -
Read the offline checklist
Open
GETTING-STARTED.htmlfrom the zip. It repeats these steps and includes a live preview. -
Explore components
Check available patterns of the design system from the showcase.
-
Purchase optional libraries
A Block library is available for developers with more examples and a Figma library for designers