HAPE PRIME

# HAPE PRIME — Style Reference
> Neon Red Noir — a digital fashion runway bathed in dramatic light.

**Theme:** dark

HAPE's visual system evokes a high-contrast, edgy digital fashion magazine. A dominant, vivid red acts as a powerful brand accent against deep black and pure white, creating high-impact statements. Typography is bold and tightly tracked, featuring extended and condensed forms for a distinctive editorial feel. The overall presentation is dark and atmospheric, using minimal surfaces and relying on strong color pops and sculptural 3D imagery to define its presence.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Crimson Flux | `#730200` | `--color-crimson-flux` | Brand accent, background for embedded content blocks, card surfaces — a vivid red that saturates the dark canvas |
| Deep Space Black | `#000000` | `--color-deep-space-black` | Primary surface for backgrounds and structural borders, dominant text color against lighter canvases — creates a strong, immersive dark mode aesthetic |
| Ghost White | `#ffffff` | `--color-ghost-white` | Primary text color against dark backgrounds, border for ghost buttons and navigation items, icon accents — provides stark contrast |
| Heat Stroke Radial | `radial-gradient(circle at 50% 0%, rgb(183, 5, 5) 40%, rgb(119, 0, 0) 140%)` | `--color-heat-stroke-radial` | Hero section background, conveying visual depth and intensity |

## Tokens — Typography

### Integral CF — Headlines and prominent display text — its condensed, strong forms and tight tracking make a bold statement, essential for brand recognition. · `--font-integral-cf`
- **Substitute:** Bebas Neue
- **Weights:** 400, 600, 800
- **Sizes:** 8px, 11px, 13px, 16px, 20px, 40px
- **Line height:** 0.90, 1.00, 1.05, 1.10, 1.25, 2.63
- **Letter spacing:** -0.02em, 0.12em, 0.58em
- **Role:** Headlines and prominent display text — its condensed, strong forms and tight tracking make a bold statement, essential for brand recognition.

### Neue Plak Extended — Body copy, navigation links, and descriptive text — provides a modern, slightly extended read that complements the primary display font with its own tight tracking. · `--font-neue-plak-extended`
- **Substitute:** Oswald
- **Weights:** 400
- **Sizes:** 12px, 13px, 15px
- **Line height:** 1.40, 1.50, 1.54, 1.75
- **Letter spacing:** -0.02em
- **Role:** Body copy, navigation links, and descriptive text — provides a modern, slightly extended read that complements the primary display font with its own tight tracking.

### Arial — Functional UI labels and secondary content, used sparingly for small, neutral elements. · `--font-arial`
- **Substitute:** Arial
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Role:** Functional UI labels and secondary content, used sparingly for small, neutral elements.

### Druk Text Wide — Small, uppercase labels and metadata where extreme compactness and impact are needed, often found in technical or index-like contexts. · `--font-druk-text-wide`
- **Substitute:** DIN Condensed
- **Weights:** 700
- **Sizes:** 10px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Small, uppercase labels and metadata where extreme compactness and impact are needed, often found in technical or index-like contexts.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.54 | — | `--text-caption` |
| body-sm | 13px | 1.54 | — | `--text-body-sm` |
| body | 15px | 1.54 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |
| 50 | 50px | `--spacing-50` |

### Border Radius

| Element | Value |
|---------|-------|
| links | 26px |
| buttons | 26px |

### Layout

- **Section gap:** 50px
- **Element gap:** 6px

## Components

### Ghost Button (White Border)
**Role:** Primary navigation and interactive elements where minimal visual weight is desired.

Transparent background, Ghost White text, 1px Ghost White border, 26px border-radius, 0px padding. Uses light text on dark background.

### Ghost Button (Black Border)
**Role:** Secondary interactive elements, often within hero sections or against lighter backgrounds.

Transparent background, Deep Space Black text, 1px Deep Space Black border, 26px border-radius, 0px padding. Uses dark text on light background.

### Ghost Button (No Radius)
**Role:** Text-based actions with a subtle border for emphasis.

Transparent background, Deep Space Black text, 1px Deep Space Black border, 0px border-radius, 0px padding.

### Crimson Content Card
**Role:** Container for distinct content blocks within the layout, particularly for rich media.

Background of Crimson Flux (#730200), 0px border-radius, 0px box-shadow, 0px top/bottom padding, 50px left/right padding.

## Do's and Don'ts

### Do
- Use Deep Space Black (#000000) as the default background for most page sections.
- Apply Crimson Flux (#730200) as a strong accent color for background washes or content cards.
- Prioritize Integral CF for all headlines and impactful display text, with tight letter-spacing.
- Use Neue Plak Extended for detailed body copy, ensuring -0.02em letter spacing for a refined feel.
- Implement 26px border-radius for all interactive buttons and links to give them a distinct pill-like shape.
- Maintain a clear visual hierarchy with Ghost White (#ffffff) text on dark backgrounds and Deep Space Black (#000000) on lighter surfaces.
- Ensure generous horizontal padding of 50px for card components to create breathing room.

### Don't
- Avoid using multiple chromatic colors; stick to Crimson Flux as the primary accent.
- Do not use box-shadows or elevation to distinguish elements; rely on color contrast and strong borders.
- Do not use system default font stacks; always specify custom fonts for brand consistency.
- Avoid decorative gradients unless explicitly part of a hero or full-bleed background element.
- Do not introduce soft, rounded shapes except for the 26px radius on buttons and links.
- Do not use generic button styles; always apply the ghost button variants to maintain a minimalist interactive approach.
- Avoid complex layouts or grids; prefer full-bleed imagery and two-column content arrangements.

## Imagery

This site predominantly features full-bleed, high-fidelity 3D renders of its primary HAPE character, often in dynamic or editorial poses. These visuals are core to the brand and act as both atmospheric backdrops and product showcases. The visuals are typically dark and moody, with a strong emphasis on red lighting or accents, creating a dramatic and high-fashion aesthetic. Icons appear in an outlined, monochrome style, complementing the minimalist UI. Imagery is high-density, dominating screen real estate over text, and is always fully contained within its section boundaries.

## Layout

The page adheres to a full-bleed layout, particularly in the hero section, which features a large 3D graphic under a centered headline. Subsequent sections maintain a strong visual rhythm with contrasting full-bleed backgrounds (Crimson Flux or Deep Space Black) and content often arranged in a two-column text-left/image-right or centered stack. Vertical spacing between sections is consistent at around 50px, creating defined content blocks without explicit dividers. The navigation is minimal, consisting of a sticky top bar with subtle ghost links and a burger menu, plus a persistent bottom navigation bar for key actions.

## Agent Prompt Guide

Quick Color Reference:
text: #ffffff
background: #000000
border: #000000
accent: #730200
primary action: no distinct CTA color

Example Component Prompts:
1. Create a ghost navigation button: Transparent background, Ghost White (#ffffff) text 'Play Trailer', 1px Ghost White (#ffffff) border, 26px radius. Font is Neue Plak Extended weight 400, 13px size, -0.02em letter spacing.
2. Create a content card: Crimson Flux (#730200) background, 0px border-radius, 0px box-shadow, 0px top/bottom padding, 50px left/right padding. Inside, use Ghost White (#ffffff) text set in Integral CF weight 600, 40px size, -0.02em letter spacing.
3. Create a secondary information section: Deep Space Black (#000000) background. Headline 'Our Roadmap' in Integral CF weight 800, 20px size, -0.02em letter spacing, Ghost White (#ffffff) color. Body text in Neue Plak Extended weight 400, 15px size, -0.02em letter spacing, Ghost White (#ffffff) color.
4. Create a hero overlay element: Deep Space Black (#000000) background with high transparency, Ghost White (#ffffff) text 'Scroll to explore' in Druk Text Wide weight 700, 10px size. Bottom margin of 40px.

## Similar Brands

- **RTFKT Studios** — High-fidelity 3D character renders as central brand imagery, dark and futuristic aesthetic.
- **Dior (digital campaigns)** — Fashion-forward typography, strong use of extended typefaces, and high-impact editorial layouts with bold color accents.
- **Kith (ecommerce)** — Emphasis on lifestyle photography mixed with abstract design elements, strong black-and-white base with color pops.
- **The Fabricant** — Digital fashion focus, use of avant-garde 3D imagery, minimalist UI with strong visual statements.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-crimson-flux: #730200;
  --color-deep-space-black: #000000;
  --color-ghost-white: #ffffff;
  --color-heat-stroke-radial: #b70505;
  --gradient-heat-stroke-radial: radial-gradient(circle at 50% 0%, rgb(183, 5, 5) 40%, rgb(119, 0, 0) 140%);

  /* Typography — Font Families */
  --font-integral-cf: 'Integral CF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-plak-extended: 'Neue Plak Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-druk-text-wide: 'Druk Text Wide', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.54;
  --text-body-sm: 13px;
  --leading-body-sm: 1.54;
  --text-body: 15px;
  --leading-body: 1.54;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-50: 50px;

  /* Layout */
  --section-gap: 50px;
  --element-gap: 6px;

  /* Border Radius */
  --radius-3xl: 26px;

  /* Named Radii */
  --radius-links: 26px;
  --radius-buttons: 26px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-crimson-flux: #730200;
  --color-deep-space-black: #000000;
  --color-ghost-white: #ffffff;
  --color-heat-stroke-radial: #b70505;

  /* Typography */
  --font-integral-cf: 'Integral CF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-plak-extended: 'Neue Plak Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-druk-text-wide: 'Druk Text Wide', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.54;
  --text-body-sm: 13px;
  --leading-body-sm: 1.54;
  --text-body: 15px;
  --leading-body: 1.54;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-50: 50px;

  /* Border Radius */
  --radius-3xl: 26px;
}
```