Shadows
Shadows define the elevation and depth of your brand's surfaces. UI Rules stores the shadow token scale for each brand and serves it to your AI coding tools over MCP, so generated UI uses your elevation, not the defaults.
New brands start on the default theme. Until you configure your own values, a dashboard alert prompts you to import your brand styles.
The shadow token scale
The shadows page shows your brand's actual shadow token values in the same token shape your AI tools consume. These tokens drive the elevation of cards, popovers, dropdowns, and other raised surfaces.
When AI tools generate UI for your brand, they read these tokens and apply your shadow scale instead of guessing.
General rules
Below the token scale, you can author General rules groups for shadows. A rule captures a single guideline, with:
- Text, the guideline itself.
- Guidance: Do, Don't, Caution, or Info.
- Importance: Required, Recommended, or Optional.
Rules live in named groups so related guidance stays together. Use shadow rules to express intent the raw tokens cannot, for example which surfaces should sit flat and where heavy elevation is off-brand.
Author rules in the composer. Deleted rules go to Trash, where you can restore them. AI Enhance tightens the wording for you.
Import your shadows
You can set shadows as part of importing your brand styles.
