Linear-Gradient Border

---
name: gradient-border-dark
description: Apply the Linear-Gradient Border visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Linear-Gradient Border, mentions gradient border cards, gradient stroke dark UI, glowing border cards, or describes 1–2px blue→violet gradient strokes, flat shadowless dark surfaces, animated border sweep on hover — 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
---

# Linear-Gradient Border Design System

Dark-mode card grids where the only chromatic event is a bright blue-to-violet gradient stroke, 1–2px wide, tracing each card's rounded edge — often animating a sweep of light around the perimeter on hover. Surfaces stay flat and shadowless; the border is the entire design.

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 Linear-Gradient Border.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (gradient border cards, gradient stroke dark UI, glowing border cards, border-gradient style), or describes its traits: 1–2px blue→violet gradient strokes; flat shadowless dark surfaces; animated border sweep on hover; mask-composite border technique; quiet neutral resting state.

## Design tokens

### Color palette

- Near-black page canvas: `#0d0d0f` (--color-bg)
- Card fill — one step above the canvas: `#161618` (--color-surface)
- Primary light text: `#ededf0` (--color-text)
- Secondary copy: `#9c9ca6` (--color-text-muted)
- Blue gradient start; links and focus: `#3b82f6` (--color-accent)
- Violet gradient end: `#8b5cf6` (--color-accent-2)
- Resting border before the gradient activates: `#232328` (--color-border)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- 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 600, line-height 1.25, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 80 — Comfortable card grids with 24px gaps and 24–32px internal padding; the dark canvas absorbs generous section spacing.
- Border radius: md 12px, pill 999px — 12px everywhere the gradient border runs; the stroke needs a consistent curve to read cleanly.
- Border treatment: 1px solid #232328 — Cards rest on a quiet neutral stroke; the gradient border is the featured/hover state, built via border-image or a masked gradient layer.

### Shadows

- none: `none` — Default — depth comes entirely from the stroke, not shadows
- edge-glow: `0 0 24px rgba(99,102,241,0.25)` — Optional faint bloom behind a hovered gradient border

### Layout

- Max content width: 1140px
- Feature grids of 2–3 equal cards per row
- One hero-width gradient-border panel as the focal point
- Flat sections divided by spacing, not rules
- Gradient strokes reserved for interactive or featured surfaces — static text blocks stay strokeless

### Effects

- Gradient border via mask-composite: exclude on a padded pseudo-element
- Perimeter light sweep: rotating conic highlight animated around the stroke on hover
- Very subtle radial blue haze behind the hero panel

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 150ms / 250ms / 450ms
- Hover fades the neutral stroke into the gradient over 250ms
- The sweep highlight completes one perimeter lap in ~1.2s, then rests
- Card content never moves — the border animates, the body holds still
- Sweep animation disabled under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0d0d0f;
  --color-surface: #161618;
  --color-text: #ededf0;
  --color-text-muted: #9c9ca6;
  --color-accent: #3b82f6;
  --color-accent-2: #8b5cf6;
  --color-border: #232328;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-edge-glow: 0 0 24px rgba(99,102,241,0.25);
  --border-default: 1px solid #232328;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}
```

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

## Component recipes

- **Nav:** #0d0d0f bar with hairline #232328 bottom border; the CTA is the only nav element wearing a gradient stroke
- **Hero:** Centered Inter 600 headline, muted subhead, and a wide gradient-border panel beneath holding a product screenshot or code sample
- **Card:** #161618 fill, 12px radius, resting #232328 stroke that transitions to the blue→violet gradient on hover, with the perimeter sweep
- **Button (primary):** Solid #3b82f6→#8b5cf6 gradient fill, white 500 text, 12px radius or pill; brightness lifts slightly on hover
- **Button (secondary):** Transparent fill, 1px gradient stroke, light text — the border style in miniature
- **Form fields:** #161618 fill, resting neutral stroke, 12px radius; focus replaces the stroke with the gradient plus a faint edge-glow

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

A card whose rounded 1px edge carries a #3b82f6→#8b5cf6 gradient — built with a padded gradient layer and mask-composite: exclude — with a bright highlight that sweeps around the perimeter when hovered. Spend boldness here; keep everything else quiet.

## Do

- Build strokes with the masked-gradient technique so corners stay perfectly rounded
- Keep surfaces flat and shadowless — the stroke is the only depth cue
- Reserve gradient strokes for interactive or featured elements so hover states mean something
- Hold the gradient to two stops; blue→violet reads premium, rainbow reads gimmick

## Don't

- Don't put a gradient stroke on every card at rest — resting state is quiet neutral
- No drop shadows competing with the strokes
- Don't animate multiple perimeter sweeps simultaneously in one grid
- Avoid strokes over 2px; thickness turns the effect from light into plastic

## Accessibility notes

- Text roles pass AA on both #0d0d0f and #161618, but the gradient stroke itself is decorative — hover and focus changes need a non-color cue (e.g., visible focus ring) for low-vision users
- Accent #3b82f6 on #0d0d0f is ~5.1:1 — fine for links, but avoid the violet #8b5cf6 for small text (~3.9:1 on canvas)
- The perimeter sweep must respect prefers-reduced-motion

## Reference sites

- shadcn/ui: https://ui.shadcn.com
- Framer: https://www.framer.com
- Linear: https://linear.app

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

Install this skill

unzip gradient-border-dark.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/gradient-border-dark.json

Settings → Capabilities → Skills → Upload skill → gradient-border-dark.zip