Glass Surface
Every card automatically receives backdrop-filter: blur(16px), translucent background, pink-glow borders, and hover lift animation. Zero extra classes needed.
UI Component Library
🎨 TRANSLUX UI — Drop-In Glass Styling
Section titled “🎨 TRANSLUX UI — Drop-In Glass Styling”TRANSLUX isn’t a framework that forces its own markup. It’s a design sheet that transforms your existing semantic HTML into glassmorphic, accessible, premium UI — just like Bootstrap or NanoCSS, but with soul.
Drop it in. Watch everything glow.
Typography
Section titled “Typography”Heading 1 — The Glass is the Message
Section titled “Heading 1 — The Glass is the Message”Heading 2 — Solidarity Encoded
Section titled “Heading 2 — Solidarity Encoded”Heading 3 — Civic Intelligence
Section titled “Heading 3 — Civic Intelligence”Heading 4 — Design System
Section titled “Heading 4 — Design System”Heading 5 — Component Layer
Section titled “Heading 5 — Component Layer”Heading 6 — Token Level
Section titled “Heading 6 — Token Level”This is a paragraph of body text rendered in Cormorant Garamond, our signature thin serif. It’s designed for maximum legibility at all sizes while maintaining an elegant, editorial character. Links look like this example link with the TRANSLUX pink accent.
Blockquote — “Every site that drops TRANSLUX in becomes a tiny act of resistance.” — Community Voices
Buttons & Inputs
Section titled “Buttons & Inputs”Tables
Section titled “Tables”| Element | Effect | Category |
|---|---|---|
<h1> – <h6> | Playfair Display, weighted, traced | Typography |
<p>, <li> | Cormorant Garamond, thin, readable | Typography |
<button> | Glass background, pink glow on hover | Interactive |
<input>, <select> | Frosted glass, focus glow border | Form |
<table> | Alternating glass rows, sticky header | Data |
<blockquote> | Left-border accent, glass panel | Content |
<a> | Pink accent, subtle hover lift | Navigation |
Dark Mode Ready
All components respond to [data-theme='dark'] with deep pink-black glass panels and cyan accent glows. Toggle-ready out of the box.
Accessibility First
Focus-visible styles with pink glow rings. High contrast ratios maintained. Screen reader friendly. No cursor hijacking.
Mobile Responsive
Every element adapts. Cards stack. Tables scroll. Inputs scale. The glassmorphic effect degrades gracefully on low-power devices.
Badges & Pills
Section titled “Badges & Pills”CoreAdapterEffectCSSCivicUtil
Ordered
Section titled “Ordered”- Install TRANSLUX via
npm i translux - Import the stylesheet into your entry CSS
- Add
data-transluxto any element you want to glass-ify - Watch your UI transform ✨
Unordered
Section titled “Unordered”- 🧊 GlassSurface — The foundational bound surface
- 💡 GlowEngine — Inverse-square light falloff
- 🔮 RefractionEngine — SVG displacement maps
- 🌈 ChromaticEngine — RGB channel separation
- 🤖 FSMController — Four-state interaction machine
How It Works
Section titled “How It Works”TRANSLUX applies styling through CSS custom properties and nested selectors. When you add the TRANSLUX stylesheet to any webpage, it:
- Sets global typography tokens (
--sl-font, heading families) - Applies glassmorphic
backdrop-filterto recognized surfaces - Adds hover/focus micro-animations to interactive elements
- Injects solidarity metadata into your page’s
<head>
No JavaScript required for styling. No framework lock-in. Just CSS.
/* This is all you need */@import 'translux/glass.css';
/* That's it. Your page is now glassmorphic. */