Effect Guidelines
How elevation, overlays, and interaction states work in the Cynosure Lutronic theme.
Effect Guidelines
Layouts rely on flat surfaces, semantic hovers, and media overlays. Soft elevation is secondary — prefer surface and alpha tokens over decorative shadows.
Preferred approaches
| Need | Approach |
|---|---|
| Card / row hover | hover:bg-bg-hover (and related group-hover utilities) |
| Photo / video bands | Absolute media + black-alpha-* / white-alpha-* linear overlays (bg-linear-to-*) |
| Separation | Borders (border-neutral-*) or background shifts (bg-bg-secondary) |
| Focus | Visible focus rings from interactive primitives — never shadow-only affordances |
Canonical full-bleed media layering (CTA bands, etc.): media → optional fallback → single-stop alpha gradient → relative z-10 content. Keep overlay/media layers aria-hidden="true".
Shadow samples on the Effects overview are optional. Prefer not to introduce new shadow-[…] utilities unless a specific component already ships with one.
Rules
- Don’t stack multiple decorative shadows on marketing cards.
- Don’t use colored or high-opacity shadows that fight the orange / charcoal brand palette.
- Don’t rely on shadow alone to show state (hover, selected, error).
- Prefer performance-friendly overlays (CSS alpha tokens) over heavy backdrop blurs unless a component already specifies blur.
Don’ts
- Don’t add text shadows for hierarchy.
- Don’t use multi-stop arbitrary black overlays when a
black-alpha-*token exists.
See also: Effects overview · Color guidelines (alpha overlays)
On This Page