@vibe-labs/design-gradients

Gradient tokens and utility classes for the Vibe Design System — directional, card, accent, shimmer, fade, and depth gradients.

Installation

@import "@vibe-labs/design-gradients";

Tokens

CSS custom properties defined in @layer vibe.tokens:

Direction

Token	Default
--gradient-direction	to bottom

Card / Surface

Token	Description
--gradient-card	Standard card gradient (neutral 800 → 900)
--gradient-card-subtle	Subtle card gradient (neutral 850 → 900)
--gradient-card-elevated	Elevated card gradient (neutral 750 → 850)

Accent

Token	Description
--gradient-accent	Brand accent gradient (135deg)
--gradient-accent-subtle	Subtle accent wash (low opacity)

Functional

Token	Description
--gradient-shimmer	Horizontal shimmer effect
--gradient-fade-t/b/l/r	Directional fades to --surface-base
--gradient-depth	Radial vignette overlay

Utilities / Generated Classes

Utility classes generated into @layer vibe.utilities via the build script.

Direction

.bg-gradient-to-t · .bg-gradient-to-tr · .bg-gradient-to-r · .bg-gradient-to-br · .bg-gradient-to-b · .bg-gradient-to-bl · .bg-gradient-to-l · .bg-gradient-to-tl · .bg-gradient-radial

Sets --gradient-direction for use in custom gradients.

Semantic Gradients

• Card: .bg-gradient-card · .bg-gradient-card-subtle · .bg-gradient-card-elevated
• Accent: .bg-gradient-accent · .bg-gradient-accent-subtle
• Shimmer: .bg-gradient-shimmer
• Fades: .bg-gradient-fade-t · .bg-gradient-fade-b · .bg-gradient-fade-l · .bg-gradient-fade-r
• Depth: .bg-gradient-depth
• Reset: .bg-gradient-none

Dist Structure

File	Description
index.css	Barrel — imports both files below
gradients.css	Token definitions
gradients.g.css	Generated utility classes

Dependencies

Requires --color-neutral-*, --color-accent, --color-accent-dark, and --surface-base tokens from upstream packages.

Build

npm run build

---

Usage Guide

Provides semantic gradient tokens and utility classes for surfaces, accents, fades, shimmer, and depth effects in the Vibe Design System.

Import

@import "@vibe-labs/design-gradients";

Common Patterns

1. Standard card with gradient background

<div class="bg-gradient-card rounded-xl p-6">
  Card with subtle gradient depth
</div>

2. Elevated card (slightly brighter)

<div class="bg-gradient-card-elevated rounded-xl p-6 shadow-md">
  Featured or highlighted card
</div>

3. Accent gradient for hero or CTA sections

<section class="bg-gradient-accent p-16 text-center">
  <h1 class="text-display-lg font-bold">Call to Action</h1>
  <button class="btn-lg mt-8">Get Started</button>
</section>

4. Fade overlay at the bottom of a scrollable list

<div class="relative overflow-hidden h-48">
  <ul><!-- long list --></ul>
  <div class="bg-gradient-fade-b absolute bottom-0 left-0 right-0 h-16 pointer-events-none"></div>
</div>

5. Shimmer loading skeleton

<div class="bg-gradient-shimmer animate-pulse rounded-md h-4 w-48"></div>
<div class="bg-gradient-shimmer animate-pulse rounded-md h-4 w-32 mt-2"></div>

6. Radial vignette depth overlay on imagery

<div class="relative">
  <img src="background.jpg" class="w-full object-cover" alt="" />
  <div class="bg-gradient-depth absolute inset-0"></div>
  <h2 class="absolute bottom-8 left-8 text-display-sm font-bold">Caption</h2>
</div>

Token Reference

Token	Description
--gradient-card	neutral 800 → 900 (standard)
--gradient-card-subtle	neutral 850 → 900 (de-emphasized)
--gradient-card-elevated	neutral 750 → 850 (prominent)
--gradient-accent	Brand accent at 135deg
--gradient-shimmer	Horizontal shimmer sweep
--gradient-fade-b	Fade to surface-base (bottom)
--gradient-depth	Radial vignette