Afrofuturism

---
name: afrofuturism
description: Apply the Afrofuturism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Afrofuturism, mentions afrofuturist, wakanda style, cosmic african design, or describes deep space purple and indigo grounds, gold and bronze as the light source, geometric textile-derived patterns — 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
---

# Afrofuturism Design System

Cosmic futurism fused with African design languages: deep-space purples and indigo grounds lit by gold, geometric textile logic — kente strips, mudcloth symbols, Adinkra-inspired motifs — rebuilt as borders and section patterns, bronze and chrome accents, and confident display type that feels both ancient and interstellar.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Afrofuturism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (afrofuturist, wakanda style, cosmic african design, black speculative design, afrotech aesthetic), or describes its traits: deep space purple and indigo grounds; gold and bronze as the light source; geometric textile-derived patterns; adinkra-inspired symbolic motifs; sci-fi chrome and halo gradients; monumental display type.

## Design tokens

### Color palette

- Deep-space violet ground: `#150f2d` (--color-bg)
- Panels and cards — nebula purple: `#241a45` (--color-surface)
- Warm starlight ivory text: `#f3ecdd` (--color-text)
- Secondary text in muted gold-gray: `#b3a68e` (--color-text-muted)
- Gold — primary actions, pattern work, key lines: `#e0a83c` (--color-accent)
- Electric violet — links, glows, energy states: `#9b6dff` (--color-accent-violet)
- Bronze metallic for secondary trim and pattern depth: `#b26a3e` (--color-bronze)
- Textile indigo for alternate sections and pattern fields: `#2c3f8f` (--color-indigo)
- Ember red for occasional pattern contrast and alerts: `#d64533` (--color-ember)

### Typography

- Display / headings: Unbounded (fallback: Arial Black, sans-serif)
- Body: Manrope (fallback: Helvetica Neue, Arial, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, 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, 120 — Ceremonial: big vertical rhythm between sections, patterned borders given full-width room, content itself set with calm, readable measure — the page processes rather than scrolls.
- Border radius: none 0px, md 12px, pill 999px — Geometry stays deliberate: pattern blocks are sharp, content cards ease at 12px, and ceremonial buttons may go full pill.
- Border treatment: 1px solid #3a2d63 — Quiet violet hairlines for structure; expressive borders are the patterned strips, and gold 2px lines mark focal frames.

### Shadows

- halo: `0 0 24px rgba(155, 109, 255, 0.35)` — Cosmic glow behind focal elements and pattern strips
- gold-edge: `0 0 0 2px #e0a83c, 0 8px 28px rgba(21, 15, 45, 0.7)` — Focal cards and portraits — a gold frame plus deep space drop
- depth: `0 10px 30px rgba(0, 0, 0, 0.5)` — Default card elevation over the violet ground

### Layout

- Max content width: 1200px
- Patterned selvage strips frame the hero and close major sections
- Alternate section grounds between deep violet and textile indigo
- Center ceremonial moments (heroes, quotes); return to a 12-column grid for content
- Portraits and imagery get gold-framed circular or arched crops

### Effects

- Woven pattern strips built from repeating-linear-gradient triangles and bars in gold/bronze/ember
- Radial nebula gradients: violet-to-transparent glows layered behind sections
- Adinkra-inspired single-glyph watermarks at low opacity on section corners
- Chrome text treatment for one hero word: gold-to-ivory gradient with a specular band
- Star-field dusting (tiny ivory dots at low density) on the deepest background only

### Motion

- Easing: cubic-bezier(0.22, 1, 0.36, 1); durations 180ms / 350ms / 700ms
- Slow, gliding entrances — elements arrive like orbits settling
- Glows breathe subtly on focal elements; patterns never animate
- Hover lifts cards with an expanding halo rather than scale
- Parallax is allowed at whisper level on the star-field only

## CSS variables (drop-in)

```css
:root {
  --color-bg: #150f2d;
  --color-surface: #241a45;
  --color-text: #f3ecdd;
  --color-text-muted: #b3a68e;
  --color-accent: #e0a83c;
  --color-accent-violet: #9b6dff;
  --color-bronze: #b26a3e;
  --color-indigo: #2c3f8f;
  --color-ember: #d64533;
  --radius-none: 0px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-halo: 0 0 24px rgba(155, 109, 255, 0.35);
  --shadow-gold-edge: 0 0 0 2px #e0a83c, 0 8px 28px rgba(21, 15, 45, 0.7);
  --shadow-depth: 0 10px 30px rgba(0, 0, 0, 0.5);
  --border-default: 1px solid #3a2d63;
  --font-display: Unbounded, "Arial Black", sans-serif;
  --font-body: Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 350ms;
  --duration-slow: 700ms;
}
```

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

## Component recipes

- **Nav:** A deep-violet bar with a gold-line bottom border: geometric wordmark left, spaced links in warm ivory, active page marked by a small gold pattern-block underline; a thin selvage strip may run above on landing pages.
- **Hero:** A ceremonial gate: monumental Unbounded headline in ivory with one word in chrome-gold gradient, framed above and below by woven pattern strips, a nebula glow rising behind, and a gold pill CTA centered beneath.
- **Card:** A nebula-purple panel, 12px radius, deep shadow, thin violet hairline; feature cards upgrade to the gold-edge treatment with a small Adinkra-style glyph watermark in a corner.
- **Button (primary):** A gold pill or sharp block: #e0a83c fill, deep-violet 700-weight label, subtle inner bronze gradient; hover brightens the gold and blooms the violet halo.
- **Button (secondary):** Outlined in gold on transparent: 1px gold border, ivory label; hover fills with a low-opacity gold wash.
- **Form fields:** A dark field on surface purple with a 1px violet hairline and gold focus border; labels in muted gold-gray small caps; error states use ember red with an explicit message.

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 woven border: a strip of alternating geometric pattern blocks — triangles, combs, zigzags in gold on deep purple — used like kente selvage to frame heroes and section breaks, with a soft cosmic glow behind it. Spend boldness here; keep everything else quiet.

## Do

- Treat gold as light: it should read as the illumination source on every dark ground
- Build patterns from geometric first principles (triangles, combs, zigzags) and repeat them with textile discipline
- Alternate violet and indigo grounds to give long pages movement
- Let display type be monumental — this aesthetic rewards scale and confidence

## Don't

- Don't collage actual sacred or clan-specific symbols as decoration — design in the spirit of the geometry, and credit real traditions when referenced
- Don't let patterns run behind body text; they frame content, never underlay it
- Don't cool the palette toward generic cyber-blue — the warmth of gold against violet is the identity
- Don't stack chrome, glow, and pattern on one element; each focal moment gets one treatment

## Accessibility notes

- Core pairs pass strongly (ivory 13:1, muted gold-gray 7.7:1, gold 8.6:1 on the violet ground), but gold text on indigo section grounds should be checked per-combination — keep body copy ivory everywhere.
- Low-opacity glyph watermarks and star-fields must stay below 8% opacity so they never interfere with text.
- Breathing glows and parallax must respect prefers-reduced-motion; the style loses nothing when fully static.

## Reference sites

- Afrofuturism — history and scope: https://en.wikipedia.org/wiki/Afrofuturism
- NMAAHC 'Afrofuturism: A History of Black Futures' exhibition: https://nmaahc.si.edu/explore/exhibitions/afrofuturism
- Adinkra symbols: https://en.wikipedia.org/wiki/Adinkra_symbols
- Black Panther — Wakanda's production design: https://www.marvel.com/movies/black-panther

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

Install this skill

unzip afrofuturism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/afrofuturism.json

Settings → Capabilities → Skills → Upload skill → afrofuturism.zip