Low-Light Glow UI

---
name: low-light-glow
description: Apply the Low-Light Glow UI visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Low-Light Glow UI, mentions ambient glow UI, AI product dark, soft glow dark, or describes large radial glows behind key elements, floating cards on near-black, violet/cyan low-opacity light — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Low-Light Glow UI Design System

Dark product UI where light behaves like atmosphere: huge soft radial glows in violet and cyan breathe behind floating cards on a near-black field. The house style of AI startups and modern dev tools — Linear and Vercel's landing pages taken to their ambient conclusion.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Low-Light Glow UI.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (ambient glow UI, AI product dark, soft glow dark, aurora dark), or describes its traits: large radial glows behind key elements; floating cards on near-black; violet/cyan low-opacity light; 12px soft radii; quiet typography, 400–500 weights; gradient hairline borders.

## Design tokens

### Color palette

- Near-black base with a violet undertone: `#0a0a0f` (--color-bg)
- Card and panel fill: `#141419` (--color-surface)
- Primary text, soft white: `#ececf1` (--color-text)
- Secondary text and captions: `#9b9ba7` (--color-text-muted)
- Violet accent for interactive elements and glow cores: `#8b5cf6` (--color-accent)
- Cyan secondary glow and gradient partner: `#22d3ee` (--color-accent-2)
- Violet ambient glow at 15% alpha (radial gradient core): `#7c3aed26` (--color-glow-violet)
- Cyan ambient glow at 12% alpha: `#22d3ee1f` (--color-glow-cyan)
- Hairline card borders: `#26262e` (--color-border)

### Typography

- Display / headings: Geist (fallback: Inter, -apple-system, sans-serif)
- Body: Geist (fallback: Inter, -apple-system, sans-serif)
- Mono / data: Geist Mono (fallback: Menlo, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.15, letter-spacing -0.02em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 80, 120 — Spacious: glows need dark emptiness around them to register as light. Sections separate with 80–120px; cards float with wide gaps.
- Border radius: md 12px, lg 16px, pill 999px — Soft 12px default; pills for badges and small CTAs. Nothing sharp — hard corners fight the ambient softness.
- Border treatment: 1px solid #26262e — Hairlines at low contrast; featured cards upgrade to a gradient border (violet → cyan) via border-image or a masked pseudo-element.

### Shadows

- ambient-violet: `0 0 60px rgba(124, 58, 237, 0.15)` — The signature glow behind featured cards and CTAs
- ambient-wide: `0 0 120px 40px rgba(124, 58, 237, 0.1)` — Hero-scale atmosphere behind headline or product shot
- card: `0 4px 16px rgba(0, 0, 0, 0.4)` — Grounding shadow beneath floating cards

### Layout

- Max content width: 1200px
- Centered hero with the primary glow anchored behind the headline or product image
- Feature grids of floating cards, each catching a faint edge of light
- Glows positioned asymmetrically (upper-left violet, lower-right cyan) so the page never feels mirrored
- Content fades toward pure dark at the page edges — a vignette in layout form

### Effects

- Radial-gradient glow layers (violet/cyan at 10–15% opacity) fixed behind content
- Gradient hairline borders (violet → cyan) on featured cards
- Very slow glow drift/breathing (opacity 12% ↔ 18% over 8s)
- Faint noise texture at 2% to prevent gradient banding on large glows

### Motion

- Easing: cubic-bezier(0.22, 1, 0.36, 1); durations 150ms / 300ms / 600ms
- Glows breathe on an 8s cycle — slow enough to feel ambient, never pulsing
- Cards lift 2px and brighten their border on hover; the glow behind them intensifies slightly
- Scroll-entry: content fades up while its glow fades in a beat later, like a light warming
- Reduced-motion: freeze glow breathing and drift; keep static glows only

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0a0f;
  --color-surface: #141419;
  --color-text: #ececf1;
  --color-text-muted: #9b9ba7;
  --color-accent: #8b5cf6;
  --color-accent-2: #22d3ee;
  --color-glow-violet: #7c3aed26;
  --color-glow-cyan: #22d3ee1f;
  --color-border: #26262e;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-ambient-violet: 0 0 60px rgba(124, 58, 237, 0.15);
  --shadow-ambient-wide: 0 0 120px 40px rgba(124, 58, 237, 0.1);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --border-default: 1px solid #26262e;
  --font-display: Geist, Inter, -apple-system, sans-serif;
  --font-body: Geist, Inter, -apple-system, sans-serif;
  --font-mono: "Geist Mono", Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.5;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Translucent bg blur bar with hairline bottom border; quiet 400-weight links that brighten to text color on hover; primary CTA as a small violet pill with a faint ambient-violet halo
- **Hero:** Centered 500-weight Geist headline over the ambient-wide glow, muted subline, a violet primary CTA and ghost secondary side by side; a product screenshot below catching the glow on its top edge
- **Card:** Surface fill, hairline border, 12px radius, card shadow; featured cards add the gradient border and ambient-violet glow
- **Button (primary):** Accent violet fill, white text, 8px radius or pill, subtle inner top-edge highlight; hover deepens the fill and widens its halo
- **Button (secondary):** Transparent fill, hairline border, text color; border picks up a faint violet tint on hover
- **Form fields:** Surface fill, hairline border, 12px radius; focus ring is a 3px violet glow at 30% opacity rather than a hard outline

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The ambient halo: a 400–800px radial gradient of violet at ~15% opacity positioned behind the hero or a featured card, so the UI appears lit by an off-screen light source rather than decorated. Spend boldness here; keep everything else quiet.

## Do

- Treat glows as light sources with consistent direction, not decorative blobs
- Keep glow opacity in the 10–18% range — ambience, not neon
- Add faint noise to large glows to prevent banding on wide gamuts
- Let one glow dominate per viewport; a second color plays counterpoint at lower opacity

## Don't

- Don't push glows to neon intensity — that's cyberpunk, a different style
- Don't center every glow behind every element; symmetric halos look templated
- Avoid hard borders and sharp corners that contradict the soft-light physics
- Don't let glow layers sit above content or tint body text into low contrast

## Accessibility notes

- Contrast honesty: accent violet #8b5cf6 on bg is ~4.6:1 — acceptable, but violet text on surface panels or atop glow layers can dip below 4.5:1; keep body copy in the text role and audit any text overlapping a glow
- Photosensitivity: glow breathing is low-amplitude and slow (8s), but it still must freeze under prefers-reduced-motion, and never add faster pulses to CTAs
- The muted #9b9ba7 secondary text is ~7:1 on bg but drops on glow-lit surfaces — avoid muted text inside glow hotspots

## Reference sites

- Linear: https://linear.app
- Vercel: https://vercel.com
- Raycast: https://www.raycast.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip low-light-glow.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/low-light-glow.json

Settings → Capabilities → Skills → Upload skill → low-light-glow.zip