AI Styling Rules
This page is the styling contract for AI agents. It compresses the visual rules that keep generated examples aligned with Monster themes, dark mode and component ergonomics.
Default Visual Strategy
Start with Monster tokens and built-in surfaces. Only add custom CSS when the component API and foundation classes are not sufficient. The burden of proof is on the override.
The goal is not generic pretty output. The goal is examples that survive theme changes, dark mode, split-panel embedding and design review.
Core Rules
Use token pairs
Foreground and background values are paired by design. If you set a text color, define the matching background context too.
Stay inside the system
Prefer --monster-color-*, --monster-bg-color-*, spacing utilities and foundation classes over ad-hoc CSS.
Use token radius
Do not invent your own rounding scale. Reuse --monster-border-radius when a rounded surface is required.
Design for embedded width
Examples live in splits, tabs and cards. If a layout only works full-width, it is not documentation-grade.
Do And Do Not
Use semantic families
Choose from primary, secondary and state tokens before introducing any isolated visual idea.
Do not hardcode colors
Hex values are almost always wrong in docs examples because they bypass dark mode and theme switching.
Prefer container queries
Responsive examples should react to available container width, not only viewport width.
Do not fake polish
A flashy gradient, oversized shadow or arbitrary card chrome is not a substitute for showing the actual component behavior.
Checklist
Use Monster foreground/background tokens as pairs so both light and dark themes stay readable.
Prefer Monster spacing tokens and utility classes over custom pixel values.
Use --monster-border-radius instead of a custom rounding scale.
Keep motion functional and calm. Loader and reveal states should be subtle, not decorative.
Test examples in narrow containers or split panels. Broken embedded layouts are a documentation bug.
If an example needs extra styling, keep it local and minimal so the component remains the focus.
Related Pages
Foundations: Color
Use this when you need the full human explanation behind token families and color pairing.
Foundations: Layout
Use this when example wrappers, splits or panel behavior are part of the task.
AI Getting Started
Return there for example file semantics and playground-safe imports.
Playground
Use it as the last check after styling changes.