Theme preview
Default element color system
Heading one sample
Heading two sample
Build safer color pairings
Element-level colors only
Light mode highlight uses UVU
Native elements inherit the system
Test default text shifts against the selected background.
This builder helps decide which headings, body copy, borders, buttons, forms, lists, tables, links, and nested surfaces should be paired when a background color class is used.
Here is an inline link inside regular paragraph text.
Blockquotes use the default element color system without a color utility class.
Default citation text
Strong text and emphasized text should both remain readable.
Inline code should work like data-theme="dark", and highlighted text should work with mark text.
- Default circle icon
- Save orientation date
- Find the advising office
- Submit final forms
- Download your checklist
- Choose a theme.
- Check the default elements.
- Confirm the dark mode version.
- Page
- Base page background and body color.
- Card
- Default raised or outlined content surface.
Nested surface
Backgrounds can overlap
Use this nested card to test how a panel color behaves with an inline link when it sits inside another color surface.
Details summary element
This checks the native disclosure element color system.
Form elements
Table elements
| Element | Role |
|---|---|
| Heading | Highlight color |
| Body copy | Readable text color |
| Border | Default divider color |
Media and status elements
Status: This status region uses the default element system.