Chainzoku

# Chainzoku — Style Reference
> Neon Cyberpunk Nightscape – A high-contrast world of dark urban realism punctuated by electric neon accents.

**Theme:** light

Chainzoku's visual system evokes a dark, gritty cyberpunk aesthetic set against an urban nightscape. It uses stark black and off-white as primary textual and surface colors, punched up by vivid, almost neon, greens and hot pinks for interactive elements and accents. Typography is oversized and angular, featuring a custom variable font with high contrast and tight-tracked display text, giving the brand a distinct, almost aggressive, voice. Surfaces are generally flat and unshadowed, opting for strong borders and high-contrast color shifts to delineate elements.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, borders, dark backgrounds, decorative fills. Creates stark definition against lighter surfaces |
| Ghost White | `#fffff7` | `--color-ghost-white` | Primary background, inverse text, active states. Provides a bright, slightly warm canvas for content |
| Deep Shadow | `#1c1616` | `--color-deep-shadow` | Card backgrounds, secondary text on light surfaces. A nuanced dark gray providing subtle depth |
| Faded Concrete | `#c4c1c6` | `--color-faded-concrete` | Footer backgrounds, subtle contextual surfaces. A cool off-white for low-contrast backgrounds |
| Electric Lime | `#cdfb52` | `--color-electric-lime` | Primary interactive elements, navigation active states, accent borders, highlights. A vivid, almost radioactive green that signifies action and attention |
| Sky Blue | `#5c97ce` | `--color-sky-blue` | Hero background accents, informational highlights. A moderately saturated blue used for atmospheric background elements |
| Cyber Pink | `#f24ac7` | `--color-cyber-pink` | Illustrative accents, decorative fills – creates a high-energy contrast with the primary green |
| Olive Drab | `#485229` | `--color-olive-drab` | Container backgrounds, contextual elements. A muted green providing a grounded, earthy counterpoint |
| Forest Fern | `#8c9b57` | `--color-forest-fern` | Illustrative accents. A moderate green providing visual richness in graphical elements |
| Crimson Glare | `#ab0000` | `--color-crimson-glare` | Container backgrounds, accent borders for high visual impact. A vivid red used sparingly for emphasis |
| Lavender Ash | `#deafd2` | `--color-lavender-ash` | Subtle container backgrounds, contextual elements. A muted pink providing a soft, atmospheric background |
| Vibrant Magenta | `#f756a3` | `--color-vibrant-magenta` | Illustrative accents. A vivid pink for graphical flair |
| Gradient Sky | `linear-gradient(rgb(162, 182, 207), rgb(196, 193, 198))` | `--color-gradient-sky` | Background gradient for atmospheric depth |

## Tokens — Typography

### NeueHaasGrotDisp — Versatile workhorse font for body text, navigation, and many headings. Its slightly condensed forms give a modern, efficient feel, even at lighter weights. The negative letter-spacing maintains a tight, compact readability. · `--font-neuehaasgrotdisp`
- **Substitute:** Helvetica Neue
- **Weights:** 400, 500, 900
- **Sizes:** 16px, 18px, 23px, 26px, 40px, 57px, 90px, 100px
- **Line height:** 1.00, 1.19, 1.20, 1.39
- **Letter spacing:** -0.0200em
- **Role:** Versatile workhorse font for body text, navigation, and many headings. Its slightly condensed forms give a modern, efficient feel, even at lighter weights. The negative letter-spacing maintains a tight, compact readability.

### Helvetica Neue — Used for specific callouts and contextual text where a classic, highly readable sans-serif is needed, often with extremely tight line heights for a stacked, graphic effect. · `--font-helvetica-neue`
- **Weights:** 400, 700
- **Sizes:** 26px, 30px
- **Line height:** 0.78
- **Letter spacing:** normal
- **Role:** Used for specific callouts and contextual text where a classic, highly readable sans-serif is needed, often with extremely tight line heights for a stacked, graphic effect.

### Druk Heavy — Signature display font for large, impactful headlines. Its heavy weight and expansive width, combined with tight letter spacing and line height, create a powerful, almost monumental presence. · `--font-druk-heavy`
- **Substitute:** Bebas Neue
- **Weights:** 400
- **Sizes:** 100px, 177px, 301px
- **Line height:** 0.80
- **Letter spacing:** -0.0200em
- **Role:** Signature display font for large, impactful headlines. Its heavy weight and expansive width, combined with tight letter spacing and line height, create a powerful, almost monumental presence.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.39 | — | `--text-body` |
| subheading | 23px | 1.2 | — | `--text-subheading` |
| heading | 40px | 1.19 | -0.8px | `--text-heading` |
| heading-lg | 57px | 1 | -1.14px | `--text-heading-lg` |
| display-md | 100px | 0.8 | -2px | `--text-display-md` |
| display-lg | 177px | 0.8 | -3.54px | `--text-display-lg` |
| display | 301px | 0.8 | -6.02px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 100 | 100px | `--spacing-100` |
| 112 | 112px | `--spacing-112` |
| 180 | 180px | `--spacing-180` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 10px |
| navigation | 15px |

### Layout

- **Section gap:** 50px
- **Card padding:** 40px
- **Element gap:** 8px

## Components

### Ghost Navigation Link: Dark
**Role:** Primary header navigation and sidebar links.

Text in Ghost White (#fffff7) on a transparent background, no borders or padding; used for primary navigation and sidebar on dark backgrounds. Inherits parent typography.

### Ghost Navigation Link: Light
**Role:** Primary header navigation and sidebar links.

Text in Midnight Ink (#000000) on a transparent background, no borders or padding; used for primary navigation and sidebar on light backgrounds. Inherits parent typography.

### Pill Accent Button
**Role:** Primary calls to action for key interactions.

A circular button with Electric Lime (#cdfb52) background and Midnight Ink (#000000) text. Border radius 9999px. Minimal padding on text. Often used for 'Play' or 'Mint' actions.

### Outline Sidebar Button
**Role:** Interactive elements within the left sidebar navigation.

Transparent background with Ghost White (#fffff7) text and a Ghost White (#fffff7) border. No border radius. Minimum content padding, but the visual separation is created by the border.

### Base Card
**Role:** Structural container for content sections.

Transparent background, 0px border radius, no box shadow, 0px padding. Serves as a flexible, borderless content wrapper.

### Content Card Narrow
**Role:** Containers for specific content blocks with subtle visual separation.

Transparent background, 10px border radius, no box shadow, 0px bottom padding, 0px left/right/top padding for tight content grouping.

### Content Card Dark
**Role:** Containers for specific content blocks requiring a darker background.

Deep Shadow (#1c1616) background, 10px border radius, no box shadow, 0px padding. Used for visually distinct blocks on the page.

### Padded Content Block
**Role:** Sections requiring significant internal padding for content.

Deep Shadow (#1c1616) background, 0px border radius, no box shadow, 50px top/bottom padding, 40px left/right padding. Used for clear content separation.

## Do's and Don'ts

### Do
- Use Midnight Ink (#000000) for all primary text on light backgrounds and Ghost White (#fffff7) for primary text on dark backgrounds to maintain high contrast.
- Implement Electric Lime (#cdfb52) as the primary accent color for active states, small interactive elements, and key calls to action like the 'Play' button.
- Apply Druk Heavy for all large display headlines at sizes 100px or larger, using a letterSpacing of -0.0200em and a lineHeight of 0.8em to create a compressed, impactful header.
- Structure primary navigation links using Ghost Navigation Link components, ensuring no background or padding to keep a lightweight, unobtrusive feel.
- Maintain a comfortable density by utilizing an elementGap of 8px for internal spacing between components.
- Round corners of cards and interactive background elements with a 10px border radius, except for header navigation which uses 15px.
- Use 1px borders of either Midnight Ink (#000000) or Ghost White (#fffff7) for subtle separation, particularly in list items or form elements, avoiding overt shadows where possible.

### Don't
- Avoid using soft shadows or complex elevation; the design relies on stark color contrast and clear borders for visual hierarchy.
- Do not use generic system fonts for branding headlines; Druk Heavy is crucial for the strong brand voice.
- Refrain from saturating the interface with multiple vibrant colors; reserve vivid hues like Electric Lime (#cdfb52) and Cyber Pink (#f24ac7) for accents and interactive states.
- Do not introduce gradients unless they are the specific 'Gradient Sky' (#a2b6cf) linear gradient, or directly for background atmosphere.
- Do not apply large internal padding to navigation links or simple buttons; they should feel lightweight and text-focused.
- Avoid arbitrary border radii; adhere strictly to 10px for cards and 15px for navigation to maintain visual consistency.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Canvas Base | `#fffff7` | Primary page background, light sections, often serves as the base for high-contrast text. |
| 2 | Subtle Dark Card | `#1c1616` | Background for self-contained content cards or distinct sections that require a darker context. |
| 3 | Footer Canvas | `#c4c1c6` | Background for the footer and other low-priority information areas, offering minimal contrast against the primary white. |

## Imagery

The site's imagery is characterized by highly stylized, detailed illustrations and concept art, often depicting characters and urban environments. These visuals are typically full-bleed or large contained elements, integrated into the page with masked or irregular edges. The art style is dimensional but not photorealistic, with a strong emphasis on vivid, almost neon, colors against a dark, nocturnal backdrop. Icons are primarily solid or filled, echoing the game-like aesthetic, and serve both decorative and explanatory roles. The imagery is central to content delivery, giving the site a visual-heavy, immersive feel.

## Layout

The page primarily uses a full-bleed layout, allowing atmospheric illustrations to extend to the viewport edges, especially in the hero and section backgrounds. Content sections below the hero often alternate with strong background visuals. The main branding (Chainzoku logo) and primary navigation are confined to a top bar, with an additional sticky left-hand sidebar for section navigation. Text is frequently presented as centered headlines or in distinct, visually separated blocks, often with a unique, cut-out container shape rather than a standard rectangular box, creating an angular, dynamic rhythm. The site features a mix of two-column layouts juxtaposed with large, immersive single-column visual elements. There's a comfortable density with ample breathing room, ensuring large visuals can dominate.

## Agent Prompt Guide

### Quick Color Reference
text: #000000
background: #fffff7
border: #000000
accent: #cdfb52
primary action: #cdfb52 (filled action)

### 3-5 Example Component Prompts
1. Create a Hero section: full-bleed background using Gradient Sky (#a2b6cf) with subtle atmospheric elements. Centered headline 'Chainzoku Saga' in Druk Heavy, size 301px, Midnight Ink (#000000) text, letter-spacing -6.02px, line-height 0.8em. Subtext 'Mint your Zoku. Take a side.' in NeueHaasGrotDisp, size 26px, Midnight Ink (#000000) text, letter-spacing -0.52px, line-height 1.2em.
2. Design a 'Play' Pill Accent Button: Electric Lime (#cdfb52) background, Midnight Ink (#000000) text (NeueHaasGrotDisp, size 16px), 9999px border radius, with minimal padding. Include a small, solid play icon next to the text.
3. Build a 'Clans' Content Card Dark: Deep Shadow (#1c1616) background, 10px border radius, 0px padding. Content includes a subheading 'The Onizoku' from NeueHaasGrotDisp, size 23px, Ghost White (#fffff7) text, and body text in Ghost White (#fffff7) at 16px, line-height 1.39em. Ensure text blocks maintain 8px element spacing.
4. Construct a Sidebar Navigation System: uses Ghost Navigation Link: Dark components in a vertical list. Links should be Ghost White (#fffff7), 16px NeueHaasGrotDisp text. The entire list should sit within a container that uses 'Outline Sidebar Button' styling for interactive elements like 'Zokus', with Ghost White (#fffff7) border and text.

## Similar Brands

- **Cyberpunk 2077 game franchise** — Shares a night theme with neon accents, oversized and condensed distressed typography, and an overall dark, gritty aesthetic.
- **Akira (manga/film)** — Reflects the urban, stylized illustration, and high-contrast visuals of a dystopian future, with a focus on dramatic color pops.
- **Arcane (Netflix series)** — Exhibits a similar artistic blend of 2D concept art with dimensional character designs, strong linear elements, and stylized urban environments.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #000000;
  --color-ghost-white: #fffff7;
  --color-deep-shadow: #1c1616;
  --color-faded-concrete: #c4c1c6;
  --color-electric-lime: #cdfb52;
  --color-sky-blue: #5c97ce;
  --color-cyber-pink: #f24ac7;
  --color-olive-drab: #485229;
  --color-forest-fern: #8c9b57;
  --color-crimson-glare: #ab0000;
  --color-lavender-ash: #deafd2;
  --color-vibrant-magenta: #f756a3;
  --color-gradient-sky: #a2b6cf;
  --gradient-gradient-sky: linear-gradient(rgb(162, 182, 207), rgb(196, 193, 198));

  /* Typography — Font Families */
  --font-neuehaasgrotdisp: 'NeueHaasGrotDisp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-druk-heavy: 'Druk Heavy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.39;
  --text-subheading: 23px;
  --leading-subheading: 1.2;
  --text-heading: 40px;
  --leading-heading: 1.19;
  --tracking-heading: -0.8px;
  --text-heading-lg: 57px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.14px;
  --text-display-md: 100px;
  --leading-display-md: 0.8;
  --tracking-display-md: -2px;
  --text-display-lg: 177px;
  --leading-display-lg: 0.8;
  --tracking-display-lg: -3.54px;
  --text-display: 301px;
  --leading-display: 0.8;
  --tracking-display: -6.02px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-100: 100px;
  --spacing-112: 112px;
  --spacing-180: 180px;
  --spacing-200: 200px;

  /* Layout */
  --section-gap: 50px;
  --card-padding: 40px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-xl: 15px;

  /* Named Radii */
  --radius-cards: 10px;
  --radius-navigation: 15px;

  /* Surfaces */
  --surface-canvas-base: #fffff7;
  --surface-subtle-dark-card: #1c1616;
  --surface-footer-canvas: #c4c1c6;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #000000;
  --color-ghost-white: #fffff7;
  --color-deep-shadow: #1c1616;
  --color-faded-concrete: #c4c1c6;
  --color-electric-lime: #cdfb52;
  --color-sky-blue: #5c97ce;
  --color-cyber-pink: #f24ac7;
  --color-olive-drab: #485229;
  --color-forest-fern: #8c9b57;
  --color-crimson-glare: #ab0000;
  --color-lavender-ash: #deafd2;
  --color-vibrant-magenta: #f756a3;
  --color-gradient-sky: #a2b6cf;

  /* Typography */
  --font-neuehaasgrotdisp: 'NeueHaasGrotDisp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-druk-heavy: 'Druk Heavy', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.39;
  --text-subheading: 23px;
  --leading-subheading: 1.2;
  --text-heading: 40px;
  --leading-heading: 1.19;
  --tracking-heading: -0.8px;
  --text-heading-lg: 57px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.14px;
  --text-display-md: 100px;
  --leading-display-md: 0.8;
  --tracking-display-md: -2px;
  --text-display-lg: 177px;
  --leading-display-lg: 0.8;
  --tracking-display-lg: -3.54px;
  --text-display: 301px;
  --leading-display: 0.8;
  --tracking-display: -6.02px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-100: 100px;
  --spacing-112: 112px;
  --spacing-180: 180px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-xl: 15px;
}
```