Skip to content
Artmode

Glass

glass

Frosted panels floating over living gradients.

Glassmorphism done with restraint: translucent surfaces with backdrop blur and a specular top edge, luminous 1px borders, wide violet-tinted shadows and generous radii, all floating over a soft multi-color mesh. Motion floats and lifts with a slight overshoot.

Fonts
Sora · displayPlus Jakarta Sans · bodyGeist Mono · mono
Demo product
Halo — AI meeting notes and async video updates for distributed teams.
Palette

Use Glass in your project

Installing any Glass module brings its tokens. Then follow the one-time setup.

Setup guide

Sections 32

UI components 24

App layouts 12

Effects 12

Set up Glass in your project

Once per project. Installing any Glass module copies its tokens for you — or install them alone first. New to Artmode? Start with the getting started guide.

npx shadcn@latest add https://artmode.alpvisionweb.online/r/glass-theme.json

1. Import the tokens

app/globals.css
@import "tailwindcss";
@import "../components/modules/_core/da-theme.css";
@import "../components/modules/glass/tokens.css";

3. Scope the area

any page or layout
<div data-da="glass">
  {/* Glass modules */}
</div>

2. Load the fonts

app/layout.tsx
import { Sora, Plus_Jakarta_Sans, Geist_Mono } from "next/font/google";

const glassDisplay = Sora({ subsets: ["latin"], variable: "--font-glass-display" });
const glassBody = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-glass-body" });
const glassMono = Geist_Mono({ subsets: ["latin"], variable: "--font-glass-mono" });

// <html className={`${glassDisplay.variable} ${glassBody.variable} ${glassMono.variable}`}>