AI-Startup Iridescent

---
name: ai-startup-iridescent
description: Apply the AI-Startup Iridescent visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" AI-Startup Iridescent, mentions holographic AI UI, iridescent gradient dark, AI-native look, or describes cyan→violet→magenta iridescent gradient, conic gradient borders, shimmer sweep animation — 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
---

# AI-Startup Iridescent Design System

The house style of LLM-era products: a near-black canvas where iridescent cyan-to-violet-to-magenta gradients shimmer along card borders, button edges, and headline text, with mono-font accents and chat-panel motifs signalling 'AI-native.' Color lives in the light effects, never in flat fills.

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 AI-Startup Iridescent.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (holographic AI UI, iridescent gradient dark, AI-native look, LLM product style), or describes its traits: cyan→violet→magenta iridescent gradient; conic gradient borders; shimmer sweep animation; violet glow shadows; mono-font labels and prompts; chat-panel layout motifs.

## Design tokens

### Color palette

- Near-black blue-tinted canvas: `#0a0a0f` (--color-bg)
- Card and panel fill: `#131318` (--color-surface)
- Primary light text: `#f5f5f7` (--color-text)
- Secondary copy and timestamps: `#9d9daf` (--color-text-muted)
- Cyan — interactive anchor of the iridescent ramp: `#22d3ee` (--color-accent)
- Violet mid-stop; glows and gradient text: `#a855f7` (--color-accent-violet)
- Magenta end-stop; highlights and badges: `#f472b6` (--color-accent-magenta)
- Resting card edges before the gradient lights up: `#26262e` (--color-border)

### Typography

- Display / headings: Geist (fallback: Inter, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Geist Mono (fallback: SFMono-Regular, 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 600, line-height 1.3, letter-spacing -0.025em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 112 — Generous and dark: sections float in space with 72–112px gaps; inside cards, 24–32px padding keeps chat bubbles and code blocks readable.
- Border radius: md 12px, lg 16px, pill 999px — 12px is canonical for gradient-border cards; pills for prompt chips and model badges.
- Border treatment: 1px solid #26262e — Resting borders are quiet; the iridescent conic gradient replaces them on featured or hovered elements.

### Shadows

- glow-violet: `0 0 40px rgba(168,85,247,0.4)` — Featured cards, hero CTA, active AI states
- glow-cyan: `0 0 32px rgba(34,211,238,0.3)` — Focus states and streaming indicators
- ambient: `0 8px 30px rgba(0,0,0,0.4)` — Default card depth on the dark canvas

### Layout

- Max content width: 1200px
- Dark full-bleed canvas; content in centered columns
- Chat-panel motifs: prompt bars, streaming responses, message bubbles as marketing furniture
- One iridescent focal element per viewport — hero text, demo panel, or CTA
- Feature grids of gradient-border cards, 2–3 across

### Effects

- Conic-gradient border rotating via a --angle custom property animation
- Shimmer sweep: a 20% white linear gradient translating across gradient text every 4–6s
- background-clip: text iridescent headlines
- Blinking cursor / streaming-token animation in demo panels
- Faint radial violet haze behind the hero

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 150ms / 250ms / 500ms
- Gradient borders rotate slowly (8–12s loop) on featured cards only
- Text streams in token-by-token in product demos
- Hover swaps the quiet border for the iridescent one with a 250ms fade
- Shimmers and rotation pause under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0a0f;
  --color-surface: #131318;
  --color-text: #f5f5f7;
  --color-text-muted: #9d9daf;
  --color-accent: #22d3ee;
  --color-accent-violet: #a855f7;
  --color-accent-magenta: #f472b6;
  --color-border: #26262e;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-glow-violet: 0 0 40px rgba(168,85,247,0.4);
  --shadow-glow-cyan: 0 0 32px rgba(34,211,238,0.3);
  --shadow-ambient: 0 8px 30px rgba(0,0,0,0.4);
  --border-default: 1px solid #26262e;
  --font-display: Geist, Inter, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", SFMono-Regular, Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --tracking-heading: -0.025em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}
```

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

## Component recipes

- **Nav:** Transparent-to-#0a0a0f on scroll, hairline bottom border; wordmark left, mono 'docs / api' links, gradient-border pill CTA right
- **Hero:** Sentence-case Geist headline with one clause in iridescent background-clip gradient text; mono eyebrow above; prompt-bar mockup with blinking cursor below
- **Card:** #131318 surface, 12px radius, quiet border that lights up iridescent on hover, ambient shadow; icon tinted from the gradient ramp
- **Button (primary):** White or cyan fill with near-black text, pill shape, glow-cyan on hover — solid fill so it outshines the gradients around it
- **Button (secondary):** Transparent with 1px gradient border and light text; glow appears on hover
- **Form fields:** Prompt-bar styling: #131318 fill, 12px radius, mono placeholder, focus ignites a cyan-to-violet gradient border with glow-cyan

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 1px conic-gradient border (#22d3ee → #a855f7 → #f472b6) slowly rotating around a dark card, paired with a violet glow (0 0 40px rgba(168,85,247,.4)) — the card looks lit by a hologram. Spend boldness here; keep everything else quiet.

## Do

- Confine the iridescent ramp to edges, glows, and text clips — fills stay dark and neutral
- Use the mono face for prompts, model names, and eyebrows to ground the sci-fi in engineering
- Keep one holographic focal point per viewport so the shimmer stays special
- Anchor gradient text with plain #f5f5f7 words around it

## Don't

- Don't flood-fill buttons or sections with the full gradient — it tips into vaporwave
- No body copy in gradient text; clip headlines only
- Don't run multiple rotating borders in one viewport; they compete and cheapen
- Avoid pure-black #000 backgrounds — the blue-tinted near-black is what keeps glows soft

## Accessibility notes

- Cyan #22d3ee and the light text roles pass AA on #0a0a0f, but magenta #f472b6 hovers near 4.6:1 — keep it for large text and decorations, not fine print
- Gradient-clipped text has variable contrast along the ramp; the violet mid-section is weakest, so reserve clipping for 32px+ headlines
- Blinking cursors, shimmer sweeps, and rotating borders must all pause under prefers-reduced-motion

## Reference sites

- OpenAI: https://openai.com
- Perplexity: https://www.perplexity.ai
- v0 by Vercel: https://v0.dev

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

Install this skill

unzip ai-startup-iridescent.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/ai-startup-iridescent.json

Settings → Capabilities → Skills → Upload skill → ai-startup-iridescent.zip