<!-- Generated by ExtractVibe — https://extractvibe.com/brand/urban-exotics.com -->
<!-- Extracted: 2026-08-18T22:27:20.981Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Urban Exotics"
description: "Urban Exotics projects a high-octane, aggressive, and urgent brand personality centered on luxury car giveaways. The design is stark and functional, utilizing sharp geometry and high-contrast red accents to drive immediate action without visual clutter or softness."
colors:
  primary: "#d71d0c"
  secondary: "#000000"
  tertiary: "#1e2a38"
  neutral: "#1e2a38"
  surface: "#f7f7f9"
  on-surface: "#1e2a38"
  on-surface-secondary: "#1e2a38"
  border: "#cccccc"
  link: "#1e2a38"
  error: "#fc4f4f"
  surface-dark: "#000000"
typography:
  display-lg:
    fontFamily: "Jost"
    fontSize: "48px"
    fontWeight: "900"
    lineHeight: "52.8px"
    letterSpacing: "-2.4px"
  headline-lg:
    fontFamily: "Jost"
    fontSize: "40px"
    fontWeight: "900"
    lineHeight: "48px"
    letterSpacing: "-2px"
  headline-md:
    fontFamily: "Jost"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "21.6px"
    letterSpacing: "-0.36px"
  headline-sm:
    fontFamily: "Jost"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "16.8px"
    letterSpacing: "1px"
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#d71d0c"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "15px 28px"
    fontSize: "22px"
    fontWeight: "900"
    borderColor: "#ffffff"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: "0px"
    padding: "15px 28px"
    fontSize: "22px"
    fontWeight: "900"
    borderColor: "#000000"
  button-outline:
    textColor: "#1e2a38"
    rounded: "0px"
    padding: "14px 21px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#1e2a38"
    borderWidth: "1px"
---

# Urban Exotics — Design System

## Overview

The Urban Exotics design system operates as a high-velocity visual engine, engineered to convert attention into immediate action. Rooted in the archetypes of The Ruler and The Outlaw, the interface rejects passive observation in favor of aggressive engagement. The aesthetic mirrors the precision of Gymshark and the cultural dominance of Supreme, leveraging stark geometry and high-contrast elements to create a sense of urgency. This is not a platform for subtle exploration; it is a direct channel for luxury acquisition, characterized by sharp edges, unapologetic boldness, and a complete absence of visual softness or decorative clutter. Every pixel serves the primary function: driving the user toward the giveaway call-to-action with maximum intensity.

The atmosphere is defined by a binary tension between the pristine white surface and the violent red accent, creating a visual field that feels both exclusive and accessible. Like Netflix’s content-focused UI or Coca-Cola’s iconic red, the design relies on brand recognition through consistent, high-impact color blocking rather than complex layouts. The user experience is streamlined and functional, removing all friction between the viewer and the prize. This system does not whisper; it commands. It projects an image of authority and excitement, ensuring that the luxury nature of the cars is communicated through the quality of the execution rather than ornate decoration. The result is a digital environment that feels fast, dangerous, and irresistibly direct, aligning perfectly with the high-octane personality of the brand.

**Key characteristics:**

- Vibe — urgent, bold, sharp, high-contrast, direct, luxury
- Archetypes — The Ruler, The Outlaw
- Comparable to — Gymshark, Supreme, Coca-Cola, Netflix
- Design era — neo-brutalism-flat
- Emotional tone — urgent-bold
- Target audience — Young to middle-aged males interested in luxury automotive culture, high-risk/high-reward opportunities, and direct-response marketing.
- Visual energy — 9/10 (high-energy/bold)

## Colors

The palette is strictly binary to eliminate ambiguity and maximize impact. Primary red (#d71d0c) serves as the exclusive signal for action, urgency, and brand identity, demanding immediate attention without deviation. Surface white (#ffffff) provides a clinical, high-contrast backdrop that ensures legibility and focuses the eye solely on the content and the red accents. This high-contrast approach mirrors the bold simplicity of Supreme and Coca-Cola, reinforcing a sense of authority and clarity. No secondary colors are permitted to dilute the message; the starkness of the red against the white creates a visual vibration that communicates speed and luxury simultaneously.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#d71d0c` | Firebrick |
| secondary | `#000000` | Black |
| accent / tertiary | `#1e2a38` | Charcoal |
| surface | `#f7f7f9` | White Smoke |
| background | `#ffffff` | White |
| text | `#1e2a38` | Charcoal |
| secondary text | `#1e2a38` | Charcoal |
| border | `#cccccc` | Light Gray |
| link | `#1e2a38` | Charcoal |
| muted | `#1e2a38` | Charcoal |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#000000` | Black |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| error | `#fc4f4f` | Failures, destructive actions |

## Typography

The type system utilizes Jost for headlines and Instrument Sans for body text to balance geometric aggression with functional readability. Jost’s modern, slightly condensed structure projects confidence and sharpness, aligning with the 'Outlaw' archetype while maintaining a luxury feel. Instrument Sans provides a neutral, highly legible foundation for information, ensuring that critical details remain accessible without competing with the bold headlines. The hierarchy is rigid and direct: large, impactful headlines drive the emotional register, while clean, concise body copy delivers the necessary facts. This combination ensures that every word feels intentional, urgent, and aligned with the high-stakes nature of the brand.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Instrument Sans | body | self-hosted | 400, 800 |
| Jost | heading | self-hosted | 500, 700, 900 |
| Jost | body | self-hosted | 900 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Jost | 48px | 900 | 52.8px | -2.4px |
| Heading 2 | Jost | 40px | 900 | 48px | -2px |
| Heading 3 | Jost | 18px | 500 | 21.6px | -0.36px |
| Heading 4 | Jost | 14px | 700 | 16.8px | 1px |
| Body | Instrument Sans | 16px | 400 | 24px | — |

### Conventions

- Heading case — title-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Gradients

- `linear-gradient(rgb(163, 0, 0) 0%, rgb(112, 0, 0) 25%, rgb(48, 0, 0) 60%, rgb(0, 0, 0) 100%)`
- `linear-gradient(0deg, rgb(255, 59, 59) 0%, rgb(255, 255, 255) 70%)`
- `linear-gradient(135deg, rgba(0, 0, 0, 0) 30%, rgba(249, 255, 231, 0.55) 45%, rgb(250, 255, 234) 55%, rgba(0, 0, 0, 0) 70%)`

## Components

### Buttons

**Primary**

- Background — `#d71d0c`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `15px 28px`
- Font size — `22px`
- Font weight — `900`
- Border — ` solid #ffffff`
- Sample copy — "Enter Now"

**Secondary**

- Background — `#ffffff`
- Text — `#000000`
- Radius — `0px`
- Padding — `15px 28px`
- Font size — `22px`
- Font weight — `900`
- Border — ` solid #000000`
- Sample copy — "View the Build"

**Outline**

- Text — `#1e2a38`
- Radius — `0px`
- Padding — `14px 21px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #1e2a38`
- Sample copy — "Continue shopping"

## Do's and Don'ts

### Do

- Use Jost 900 for all body text and Jost 500-900 for headings; ensure headings are Title-Case.
- Apply Instrument Sans 400 for standard body copy with a fixed 24px line-height.
- Primary CTA buttons must use #d71d0c background, #ffffff text, 0px border-radius, and 15px 28px padding.
- Secondary buttons must use #ffffff background, #000000 text, 0px border-radius, and 1px #000000 border.
- Maintain a strictly flat design aesthetic: do not apply any box-shadows to any element.
- Utilize linear gradients in hero sections or backgrounds, specifically using red-to-black or red-to-white transitions.
- Keep all UI elements (buttons, inputs, cards) with 0px border-radius for a sharp, aggressive look.
- Use #1e2a38 for secondary text and borders, and #ffffff for main backgrounds to maintain high contrast.

### Don't

- Do not use rounded corners (border-radius > 0px) on any interactive elements or containers.
- Do not use emojis in any marketing copy or UI text.
- Do not use exclamations marks in headings; keep punctuation minimal and rare.
- Do not apply box-shadows or drop-shadows to buttons, cards, or text.
- Do not use serif fonts; the brand is strictly sans-serif (Jost and Instrument Sans).
- Do not use soft pastel colors; stick to the high-contrast primary red (#d71d0c) and black.
- Do not use sentence case for headings; always use Title-Case.
- Do not use playful or whimsical tones; maintain a matter-of-fact, urgent, and hyperbolic voice.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 2/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 9/10 | matter-of-fact |
| Respectful ↔ Irreverent | 4/10 | respectful |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — some
- CTA style — urgent imperative verbs with benefit emphasis
- Rhetorical devices — repetition, imperative, hyperbole

### Sample copy

> DON'T MISS OUT ON THIS THE 2018 Mercedes-Benz AMG gt GIVEAWAY

> You could take home our THE 2018 MERCEDES-BENZ AMG GT +$25,000 CASH

> HOW YOU CAN HAVE THE KEYS

> Race Cars & Beer

> FAST ENTRIES

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/urban-exotics.com/logo-0.png) | 95% |
| primary | — | png | [link](brands/urban-exotics.com/logo-1.png) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/urban-exotics.com
- Raw JSON — https://extractvibe.com/api/brand/urban-exotics.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/urban-exotics.com/design.md
- Extracted — 2026-08-18T22:27:20.981Z
- Generator — ExtractVibe vv1
- Quality score — 90/100