| name | glass-dark-ui |
| description | Build dark frosted-glass landing pages and marketing UIs in the "Snippa" style — near-black background, Poppins, translucent glass panels with backdrop blur, giant masked display words behind cards, floating pill navigation, white pill CTAs, and staggered rise-in animations. Use when the user asks to build or style a landing page, marketing site, pricing page, or hero section that should match this exact design. |
Glass Dark UI
A complete design system for a monochrome, dark, frosted-glass landing page. Everything is
white-on-near-black; there are NO accent colors, no gradients between hues, no borders other
than faint white. Depth comes entirely from layered white opacity, backdrop blur, and soft
radial glows. Reproduce it exactly — do not "improve" it with color.
Stack
- Next.js (App Router) + Tailwind CSS v4 (
@import "tailwindcss" in globals.css)
- Google font Poppins, weights 300/400/500/600/700, loaded via
next/font/google
and exposed as --font-poppins
- Icons: lucide-react, mostly
size-4/size-5, strokeWidth 1.5–1.75 for large,
3 for tiny checkmarks
- No component libraries. Plain JSX + Tailwind utilities + a small
globals.css
(copy it verbatim from assets/globals.css in this skill).
If the project uses plain HTML/CSS or Vite instead of Next, keep the identical CSS and
class recipes; only the font-loading mechanism changes (use a <link> to Google Fonts).
Core tokens
| Token | Value |
|---|
| Page background | #050505 (color-scheme: dark) |
| Body text | #fafafa |
| Muted text tiers | text-white/85 → /75 → /60 → /55 → /50 → /40 → /35 → /30 |
| Hairline borders | border-white/10 (idle), /15 (buttons), hover /20–/30 |
| Ultra-faint dividers | border-white/[0.06]–[0.09] |
| Fill surfaces | bg-white/10 (chips/bubbles), bg-white/[0.05] (recessed) |
| Radii | pills rounded-full; cards rounded-[28px] (large), [22px] (FAQ rows), [32px] (final CTA); chat bubbles rounded-2xl with one rounded-b{l,r}-md corner |
| Selection | inverted: white bg, #050505 text |
Typography rhythm: headings are font-medium (never bold), body copy is font-light,
buttons font-medium/font-semibold. Secondary halves of headlines are de-emphasized
with text-white/50 on a <span>, not a smaller size.
The three signature effects (from globals.css)
.glass / .glass-bright — the core surface. A 180deg white gradient at 7%→2%→1.5%
opacity (bright: 12%→4%→2.5%), 1px rgba(255,255,255,0.08) border (bright: 0.14), and
backdrop-filter: blur(24px). glass-bright is reserved for the ONE featured element
(e.g. the popular pricing tier)..giant-word — a huge decorative word (text-[26vw] mobile / [19vw] desktop in the
hero; [24vw]/[17vw] elsewhere) absolutely positioned BEHIND the content, aria-hidden,
white, font-weight 600, letter-spacing -0.04em, faded out bottom-up with a
mask-image linear-gradient (solid to 45%, 30% at 80%, transparent at 100%). The word
stays sharp; the glass cards' backdrop-blur fogs it where they overlap — that overlap IS
the aesthetic. Content over it gets relative + top padding in vw (pt-[16vw] sm:pt-[12vw])
so the headline starts inside the word's lower half..glow — soft radial light wells (radial-gradient(closest-side, rgba(255,255,255,0.09), transparent 70%)),
absolutely positioned, sized ~h-[420px] w-[720px], centered with left-1/2 -translate-x-1/2,
placed behind hero/pricing/final-CTA.
Entrance animation: .rise (fade + 18px translate-up, 0.7s cubic-bezier(0.22,1,0.36,1))
with stagger classes .rise-1/-2/-3 (0.05s/0.15s/0.25s delays). Only used in the hero.
Always include the prefers-reduced-motion override.
Component recipes
Read assets/components-reference.tsx for the full working page. Key patterns:
Floating pill nav — fixed inset-x-0 top-4 z-50 flex justify-center px-4; inner
nav.glass is rounded-full p-1.5 pl-2 containing: a size-9 black circle logo button,
text links rounded-full px-4 py-2 text-sm text-white/60 hover:text-white (hidden on
mobile via hidden sm:flex), and a white CTA pill bg-white px-5 py-2.5 text-sm font-medium text-black.
Buttons — exactly three kinds:
- Primary: white pill, black text,
transition-transform hover:scale-[1.03] active:scale-[0.98]
- Secondary: transparent pill,
border border-white/15 text-white/80, hover brightens
border to /30 and text to white (transition-colors, no scale)
- Card CTA (dark):
border border-white/15 bg-black/40 full-width pill
Section header — centered column: a glass rounded-full px-4 py-1.5 text-xs text-white/60 label chip, then h2 mt-5 text-3xl font-medium sm:text-4xl, then optional
mt-3 max-w-md text-sm font-light text-white/50 subcopy.
Feature cards — grid gap-4 sm:grid-cols-2 lg:grid-cols-3; each card glass rounded-[28px] p-7 hover:border-white/20, containing a size-11 icon circle
(border-white/10 bg-white/10), h3 mt-5 text-base font-medium, body mt-2 text-sm font-light leading-relaxed text-white/55.
Pricing — 3-column grid gap-5 lg:grid-cols-3, cards p-8. Price line: text-5xl font-medium number with unit as inline text-2xl text-white/30 span. Featured middle card
uses glass-bright plus an absolutely-positioned -top-3 white badge pill. Check rows:
size-7 circle (border-white/10 bg-white/10) with a size-3.5 bold check, label
text-sm font-light text-white/75. CTAs pinned with lg:mt-auto.
Numbered steps — glass rounded-[28px] p-7 cards with "01" in text-xs font-light tracking-widest text-white/30.
FAQ — native <details class="glass group rounded-[22px] px-6 py-5 open:bg-white/[0.05]">,
summary with hidden marker and a trailing + that rotates 45° via group-open:rotate-45.
Final CTA — one big glass rounded-[32px] px-8 py-16 centered panel over a glow, with
a faint lucide icon on top.
Footer — border-t border-white/[0.06], everything text-xs font-light text-white/35,
links hover to /70.
Layout rhythm
- Sections:
px-4 py-24 (pricing py-28, hero pb-24 pt-40 sm:pt-48), scroll-mt-24
for anchor targets, content in mx-auto max-w-6xl (text-heavy sections max-w-3xl).
- Sections with a giant word need
relative overflow-hidden; decorative layers are
aria-hidden; real content sits in a relative wrapper above them.
scroll-behavior: smooth on html; all anchors are #hash links.
Rules
- Monochrome only. If asked for a brand color, keep surfaces monochrome and use the color
at most on the giant word or one glow — never on buttons or borders.
- Never use box-shadows, never use solid gray fills (
#333 etc.) — depth is always
white-at-low-opacity over #050505.
- Never bold body copy; contrast comes from opacity tiers, not weight.
- Every decorative layer (
giant-word, glow) must be aria-hidden and
pointer-events-none.
- Keep the
prefers-reduced-motion block whenever .rise is used.
Workflow
- Copy
assets/globals.css into the project's global stylesheet (adapt the first two
lines to the project's Tailwind setup; the classes below :root are framework-agnostic).
- Load Poppins with weights 300–700 and wire it to
--font-poppins.
- Build sections top-down using the recipes above, reusing
assets/components-reference.tsx
as the source of truth for exact class strings.
- Swap copy, icons, and section content for the user's product — the visual system stays
identical.
