arcan-glasslisted
Install: claude install-skill broomva/skills
# Arcan Glass
**Arcan Glass** is BroomVA's trademark web design language — ArcanBG's brand DNA (AI Blue `#0066FF` + Web3 Green `#00CC66` + dark surfaces) fused with liquid glass web effects (backdrop-filter blur, layered highlights, adaptive tinting, morphing transitions). Dark-first, glass-elevated.
Light mode is **Day Glass**: a luminous 275° violet surface system, not a white inversion. It keeps hue continuity, uses low chroma to avoid glare, and preserves clear OKLCh lightness distance between surfaces, text, borders, and shadows.
## Quick Start
1. **Copy** `assets/globals.css` into your Next.js project as `app/globals.css`
2. **Import** in your layout: `import "./globals.css"`
3. **Use** glass classes: `<div class="glass-card">`, `<button class="glass-button glass-button-primary">`
That's it. All shadcn/ui components will automatically pick up the Arcan Glass theme.
## 7 Design Principles
1. **Dark-first, Day Glass second** — The default is dark mode. Light mode keeps the same 275° hue DNA with higher lightness, low chroma, and grounded shadows.
2. **Glass is earned** — Only key surfaces (nav, sidebar, modal, featured cards) get backdrop-filter. Limit to 3-5 per viewport.
3. **Brand through surface** — Surface hue 275° (blue-purple) connects all surfaces to AI Blue without competing.
4. **OKLCh primary** — Perceptually uniform lightness enables clean depth scales and natural color mixing.
5. **Additive on shadcn** — Glass effects layer on top of shadcn/ui, never r