# Wanna.fashion Design System

> High-contrast technical luxury defined by a neon-acid primary accent cutting through a deep obsidian and industrial grey foundation.

**Source:** https://wanna.fashion | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Wanna.fashion utilizes a "monochrome plus one" strategy where a high-voltage neon yellow-green (`#deff1d`) serves as the exclusive interactive signal against a dark, tech-focused backdrop. The system leans heavily on **SuisseIntl** for all typographic hierarchy, ranging from massive 120px display numbers to functional 13px button labels. Layouts are structured with industrial precision, using sharp 0px corners for major containers and soft 10px to pill-shaped radii for interactive elements. The aesthetic is "technical fashion," blending the starkness of developer tools with the high-contrast legibility of luxury editorial.

## Signature DNA
1. **The Acid Accent** (`#deff1d`): Used exclusively for primary calls to action and critical brand highlights, creating a 1.0:1 "vibration" against light backgrounds but maximum visibility on dark surfaces.
2. **SuisseIntl Dominance**: A total reliance on a single neo-grotesque family across all roles, eschewing serif pairings for a unified, engineered feel.
3. **Container Contrast**: Large-scale sections use sharp (`0px`) corners, while interactive components use a tiered rounding system (10px for buttons, 28.8px for feature cards).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--black` | `#000000` | Primary surface, text, button text | 128 | 1 | Computed style |
| `--grey` | `#f1f1f1` | Backgrounds, borders, secondary text | 225 | 1 | CSS variable |
| `--grey-sec` | `#a9a9a9` | Deemphasized body text | 13 | 1 | CSS variable |
| `--white` | `#ffffff` | High-contrast text on dark surfaces | 18 | 0.8 | Computed style |
| Foundation Dark | `#131313` | Card surfaces, section backgrounds | 12 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--accent` | `#deff1d` | Primary CTA background, brand text | 20 | 1 | CSS variable |
| `--accent-sec` | `#7980fc` | Secondary brand token (decorative) | — | 1 | Declared token |
| Brand Coral | `#ff8562` | Tertiary text highlight | 3 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| SuisseIntl | 400, 500 | Display, Heading, Body, UI | Inter | Licensed |
| Times New Roman | 400 | Fallback body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 120px | 96px | normal | 400 | Hero numbers | `div#number` |
| `{type.display.lg}` | 76px | 75.8px | normal | 500 | Section headers | `h2` |
| `{type.display.md}` | 63px | 63px | normal | 500 | Page titles | `h1.tn-atom` |
| `{type.heading.lg}` | 32px | normal | normal | 500 | Feature headlines | `div.headline` |
| `{type.heading.md}` | 24px | normal | normal | 400 | Testimonial body | `div.comment-body` |
| `{type.body.lg}` | 18px | normal | normal | 400 | Standard body | `div#allrecords` |
| `{type.body.md}` | 16px | 21.2px | normal | 400 | Form inputs, Nav | `input.t-input` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Footer links | `a` |
| `{type.button.sm}` | 13px | 30px | normal | 500 | Compact CTAs | `a.t-btn` |

### Principles
1. **SuisseIntl for everything**: No secondary typeface is used for UI or brand elements.
2. **Tight Display Leading**: Large headers (76px) use a line-height slightly smaller than the font size (75.8px) to create a compact, "stacked" look.
3. **Medium Weight for Emphasis**: Interactive labels and headlines consistently use weight 500.

## Spacing
**Base unit:** Custom (14px/15px/16px cluster)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 3 |
| `{space.sm}` | 14px | 28 |
| `{space.md}` | 16px | 10 |
| `{space.lg}` | 29px | 16 |
| `{space.xl}` | 50px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|----------|
| `{radius.sharp}` | 0px | Main containers, footer, nav | 280 occurrences |
| `{radius.sm}` | 10px | Primary buttons | Rounded Button component |
| `{radius.md}` | 20px | Secondary cards | Pricing/About cards |
| `{radius.lg}` | 28.8px | Feature cards | Main page cards |
| `{radius.pill}` | 999px | Badges, secondary buttons | Pill / Badge component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|------|----------|
| Flat | none | Default state for all cards | Most components |
| Surface | `rgba(0, 0, 0, 0) 0px 1px 3px 0px` | Subtle section separation | Surface component |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global header and site structure
**Pages observed:** All
**Spec:** Background `#000000` / Text `#ffffff` / Radius `0px` / Font Size `16px` (SuisseIntl 500)
**States observed:** Default | Hover: captured

#### Footer
**Role:** Site map and legal links
**Pages observed:** All
**Spec:** Background `#000000` / Text `#a9a9a9` / Radius `0px` / Font Size `14px` (SuisseIntl 400)
**States observed:** Default: captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Primary site actions (Contact Us, Explore)
**Pages observed:** All
**Spec:** Background `#deff1d` / Text `#000000` / Radius `10px` / Padding `0px 15px` / Font Size `24px`
**States observed:** Default | Active: captured

#### Pill / Badge
**Role:** Technical tags (AR, 3D)
**Pages observed:** https://wanna.fashion
**Spec:** Background `transparent` / Text `#f1f1f1` / Border `1px solid #f1f1f1` / Radius `999px` / Font Size `22px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Product category display (Footwear, Bags)
**Pages observed:** https://wanna.fashion
**Spec:** Background `#131313` / Text `#f1f1f1` / Radius `28.8px` / Padding `28.8px` / Font Size `18px`
**States observed:** Default: captured

#### Pricing Card
**Role:** Tiered information display
**Pages observed:** https://wanna.fashion/pricing
**Spec:** Background `#e5e5e5` / Text `#000000` / Radius `20px` / Font Size `18px`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 50px - 100px |
| Card Gap | 29px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|------|
| Desktop | 1440px | Multi-column grids (2-up or 3-up) |
| Mobile | 390px | Single column stack, font size reduction for display type |

## Imagery & decoration
- **Device Mockups**: High-fidelity iPhone frames used to showcase AR features.
- **Monochrome Logos**: Client logos (Farfetch, Valentino) rendered in strict black/white grid.
- **No Gradients**: All surfaces use flat hex values or solid black.

## Do's
- Use `#deff1d` for the primary button on dark backgrounds.
- Set all display headers in **SuisseIntl** with weight 500.
- Maintain sharp `0px` corners for global layout containers (Header/Footer).
- Use `#a9a9a9` for secondary body text to maintain hierarchy.
- Apply `28.8px` radius to feature-rich cards on the homepage.

## Don'ts
- **Wrong**: Using `#deff1d` for large blocks of text. **Right**: Use it only for short labels or CTAs. **Reason**: Legibility and brand voltage.
- **Wrong**: Mixing serifs into the UI. **Right**: Stick to SuisseIntl. **Reason**: Preserves the technical/engineered brand signal.
- **Wrong**: Labeling `#7980fc` (Accent-Sec) as a primary action color. **Right**: Use `#deff1d` for all primary actions. **Reason**: Brand consistency.

## Similar brands
- Nothing (Phone)
- Highsnobiety
- Hypebeast
- StockX

## Quick start

### CSS Custom Properties
```css
:root {
  --accent: #deff1d;
  --accent-sec: #7980fc;
  --black: #000000;
  --grey: #f1f1f1;
  --grey-sec: #a9a9a9;
  --font-main: 'SuisseIntl', sans-serif;
  --radius-btn: 10px;
  --radius-card: 28.8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-accent: #deff1d;
  --color-black: #000000;
  --color-industrial-grey: #f1f1f1;
  --font-suisse: 'SuisseIntl';
  --radius-feature: 28.8px;
}
```

## Agent prompt examples
- "Create a primary CTA button using background #deff1d, text #000000, and a 10px border radius with SuisseIntl weight 500."
- "Design a feature card with background #131313, a border radius of 28.8px, and white SuisseIntl text."
- "Generate a navigation bar with a solid #000000 background and 16px SuisseIntl links."

## Known gaps
- Hover states for secondary buttons were not fully captured in the automated crawl.
- Tablet-specific breakpoints (768px-1024px) were not sampled.
- Success/Error semantic colors were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|------|-------------|
| Homepage | https://wanna.fashion | 1440px | 2026-06-06 |
| Pricing | https://wanna.fashion/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://wanna.fashion | 390px | 2026-06-06 |