---
version: alpha
name: Chainzoku
description: Cyberpunk-manga web3 energy — near-black canvas, electric magenta-pink accent, bold condensed display type and clean geometric sans body, neon glow as the signature depth move, and angular tactile cards inspired by Japanese clan/biker (bōsōzoku) culture.

colors:
  # Canvas + ink
  background: "#0a0a0f"
  surface: "#13131c"
  surface-soft: "#1c1c28"
  ink: "#f5f5fa"
  ink-secondary: "#9a9ab0"
  ink-muted: "#62627a"

  # Neon accents
  primary: "#ff2d8e"        # electric magenta-pink — the clan signature
  accent-cyan: "#21e6ff"    # cyberpunk cyan counter-accent
  accent-violet: "#8b5cff"  # bridge between pink and cyan

  # Glow tints (opaque approximations over the canvas)
  glow-pink: "#3a0f25"      # magenta glow flattened over #0a0a0f
  glow-cyan: "#0c2a31"      # cyan glow flattened over #0a0a0f

  # Borders + lines
  border: "#26263a"
  border-strong: "#3a3a52"

  # On-color
  on-primary: "#0a0a0f"
  on-accent: "#0a0a0f"

  # Status
  success: "#3ddc97"
  warning: "#ffc24b"
  danger: "#ff4d5e"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1px
  display:
    fontFamily: "Anton, Oswald, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0px
  card-title:
    fontFamily: "Oswald, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Oswald, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.5px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-violet}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  badge:
    backgroundColor: "{colors.glow-pink}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-cyan:
    backgroundColor: "{colors.glow-cyan}"
    textColor: "{colors.accent-cyan}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-featured:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.primary}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Chainzoku Design System

## Overview

Chainzoku is a web3 anime/manga brand built on a cyberpunk-meets-traditional-Japan tension — its whole world splits between the order of the OniZoku and the rebellion of the BosoZoku (biker-gang) clans. The interface translates that energy into a near-black canvas (`{colors.background}`) lit by a single electric magenta-pink (`{colors.primary}`) and a cool cyberpunk cyan (`{colors.accent-cyan}`). The result is high-contrast, nocturnal, and loud: the kind of dark mode that feels like a neon-soaked Tokyo alley rather than a developer console.

The type system leans on the brand's manga roots. Display sizes use a tall, heavy condensed face (Anton/Oswald) that reads like a comic-cover logotype — packed tight, set in near-uppercase, pushing maximum impact per inch. Body copy switches to a clean geometric sans (Inter) so long-form story and roadmap text stays readable against the dark surfaces. A monospace label face (Space Mono) carries the "on-chain" technical voice: clan tags, token IDs, and small all-caps eyebrows with wide tracking.

Depth comes from glow, not shadow. Instead of the soft drop shadows of light-mode systems, Chainzoku uses neon glow tints — magenta (`{colors.glow-pink}`) and cyan (`{colors.glow-cyan}`) — flattened over the canvas to suggest light bleeding off accent elements. Cards are angular and tactile, with hairline borders (`{colors.border}`) that sharpen to full magenta on the featured/hover state. The radius scale stays small and hard-edged, reinforcing the biker-gang, decal-and-patch aesthetic.

**Key Characteristics:**
- Near-black nocturnal canvas (`{colors.background}`) with bright `{colors.ink}` text
- Single electric magenta-pink signature accent (`{colors.primary}`) plus a cyberpunk cyan counter-accent (`{colors.accent-cyan}`)
- Condensed heavy display type (Anton/Oswald) as comic-cover logotype voice
- Clean geometric sans (Inter) for readable body on dark surfaces
- Monospace all-caps eyebrows and clan tags for the on-chain technical voice
- Glow-as-depth: neon tint bleed instead of soft drop shadows
- Hard, small-radius angular cards with hairline borders that light up magenta on focus

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): Near-black page background, the nocturnal base.
- **Surface** (`{colors.surface}`): Card and panel surface, one step off the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Raised/featured surfaces, modals, featured cards.
- **Ink** (`{colors.ink}`): Primary text and headings on dark surfaces.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Neon Accents
- **Magenta** (`{colors.primary}`): The clan signature — primary CTA, links, active state.
- **Cyan** (`{colors.accent-cyan}`): Cyberpunk counter-accent, secondary highlights, data.
- **Violet** (`{colors.accent-violet}`): Bridge accent, used for primary hover and gradients.

### Glow & Depth
- **Glow Pink** (`{colors.glow-pink}`): Magenta glow tint flattened over canvas — badge bg, ambient light.
- **Glow Cyan** (`{colors.glow-cyan}`): Cyan glow tint flattened over canvas — secondary badges.

### Borders
- **Border** (`{colors.border}`): Hairline card and divider lines.
- **Border Strong** (`{colors.border-strong}`): Input outlines, secondary button borders.

### Status
- **Success** (`{colors.success}`): Confirmations, mint success.
- **Warning** (`{colors.warning}`): Cautions, countdowns.
- **Danger** (`{colors.danger}`): Errors, destructive actions.

## Typography

### Font Family
- **Display**: `Anton` / `Oswald` — tall heavy condensed, comic-cover logotype voice.
- **Body**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif`.
- **Mono**: `Space Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — clan tags and on-chain labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — comic-cover billboard impact |
| `display` | Major section openers |
| `section-heading` | Feature section titles |
| `card-title` | Feature and clan cards |
| `body-large` | Story intros, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons — uppercase, wide tracking |
| `caption` | Metadata, tags |
| `label-mono` | Clan tags, token IDs, all-caps eyebrows |

### Principles
- **Condensed display, readable body**: heavy condensed faces for headlines, geometric sans for everything you have to read.
- **Wide tracking on small caps**: buttons and mono labels open up letter-spacing (1.5–2px) for the technical/decal look.
- **Mono is the on-chain voice**: monospace all-caps connects the marketing surface to the web3 product.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`–`{spacing.4xl}`) for cinematic full-bleed sections between dense card grids.

### Grid & Container
- Max content width: approximately 1200–1280px
- Hero: full-bleed dark canvas with oversized condensed headline and a glowing magenta CTA
- Feature sections: 2–3 column card grids
- Clan sections: three-faction comparison layouts

### Whitespace Philosophy
- **Cinematic darkness**: generous vertical breathing room lets neon accents pop against the black.
- **Dense where it counts**: roadmap and trait grids tighten up; hero and clan reveals open wide.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | Canvas, no border | Page background, text blocks |
| Hairline | 1px `{colors.border}` | Standard cards, dividers |
| Outlined | 1px `{colors.border-strong}` | Inputs, secondary buttons |
| Glow | `{colors.glow-pink}` / `{colors.glow-cyan}` bleed | Active CTAs, badges, focused elements |
| Featured | 1px `{colors.primary}` border + glow | Featured cards, hover state |

**Glow Philosophy**: Depth here is light, not shadow. Accent elements appear to emit color — magenta and cyan tints bleed off edges and sit behind badges. There are no soft gray drop shadows; on a near-black canvas, glow is the only depth cue that reads.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard-edged decals, full-bleed media |
| `xs` | 2px | Tiny chips, inline tags |
| `sm` | 4px | Buttons, inputs — sharp and tactile |
| `md` | 8px | Small cards, list items |
| `lg` | 12px | Standard and featured cards |
| `xl` | 20px | Large media containers |
| `pill` | 9999px | Badges, clan tags, status pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Magenta fill, dark text, uppercase wide-tracked label, sharp `{rounded.sm}`. Hover shifts to violet.
- **`button-secondary`** — Dark surface with `{colors.border-strong}` outline; hover lights the border and text magenta.

### Pills & Badges
- **`badge`** — Magenta glow background, magenta mono text, full pill. Clan tags and status.
- **`badge-cyan`** — Cyan counterpart for secondary categorization.

### Cards
- **`card`** — Dark surface, hairline border, `{rounded.lg}`.
- **`card-featured`** — Raised surface with full magenta border for the highlighted/clan-reveal card.

### Inputs
- **`input`** — Dark surface, strong border; focus snaps the border to magenta (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Near-black sticky header, uppercase wide-tracked links, bottom hairline border. Magenta connect-wallet CTA right.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let neon accents carry the color
- Use one signature magenta with cyan as the cool counter-accent
- Use condensed heavy display type for headlines, Inter for body
- Use glow tints for depth instead of soft drop shadows
- Open up letter-spacing on uppercase buttons and mono labels
- Light up borders to magenta on focus and featured states

### Don't
- Don't put dark ink on the dark canvas — keep text bright (`{colors.ink}`)
- Don't set the primary accent to the page background
- Don't use soft gray drop shadows — they disappear on black; use glow
- Don't round buttons into full pills — keep them sharp `{rounded.sm}`
- Don't introduce warm pastel palettes that fight the cyberpunk mood
- Don't lowercase the mono clan tags — they read as all-caps decals

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero headline scales down, stacked clans |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | 1024–1280px | Full 3-column grids, max content width |
| Large | >1280px | Centered with generous dark margins |

### Touch Targets
- Buttons use 14px vertical padding for comfortable taps
- Nav collapses to a hamburger; clan tabs stack
- Badges keep 12px horizontal padding for legibility

### Collapsing Strategy
- Hero: 72px display scales down, keeps tight line-height
- Feature cards: 3-column → 2-column → single column
- Clan comparison: side-by-side → stacked accordions
- Roadmap: horizontal timeline → vertical stepper

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Magenta `{colors.primary}` on dark text
- Background: Near-black `{colors.background}`
- Heading text: Bright `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Focus / active: Magenta `{colors.primary}`
- Counter-accent: Cyan `{colors.accent-cyan}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 72px Anton/Oswald, line-height 0.95, near-uppercase, color `{colors.ink}`. Subtitle 18px Inter `{colors.ink-secondary}`. Magenta CTA (`{colors.primary}`, dark text, 4px radius, uppercase 14px wide-tracked) with a soft magenta glow."
- "Design a clan card: dark surface `{colors.surface}`, 1px `{colors.border}`, 12px radius, 24px padding. Title 22px Oswald `{colors.ink}`, mono clan tag badge with `{colors.glow-pink}` background and `{colors.primary}` text."
- "Build a badge: `{colors.glow-pink}` background, `{colors.primary}` text, 9999px radius, 4px 12px padding, 12px Space Mono all-caps 2px tracking."
- "Create nav: near-black sticky header, uppercase 14px wide-tracked links `{colors.ink}`, bottom hairline `{colors.border}`, magenta 'Connect' CTA right."

### Iteration Guide
1. Depth is glow, never gray shadow — on black, only neon reads.
2. One magenta signature; cyan is the cool counterweight, used sparingly.
3. Condensed heavy for headlines, Inter for body, Space Mono for tags.
4. Buttons stay sharp (`{rounded.sm}`) and uppercase with wide tracking.
5. Borders snap from hairline `{colors.border}` to full magenta on focus/featured.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Chainzoku. Brand names and trademarks belong to their respective owners.