← ClaudeAtlas

arcan-glasslisted

BroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + shadcn/ui projects. Use when creating or styling BroomVA web interfaces, implementing glass/frosted UI effects, setting up brand-consistent dark-first themes, or integrating ArcanBG brand tokens (AI Blue
broomva/skills · ★ 3 · Web & Frontend · score 72
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