BRAVÒ STUDIO

# BRAVÒ STUDIO — Style Reference
> Deep Plum Proscenium

**Theme:** dark

BRAVÒ STUDIO employs a dark, almost monochrome aesthetic, creating a sense of understated drama. The primary visual element is often a central piece of media, framed by vast swaths of a deep, rich plum background. Typography is compact and precise, appearing as subtle, highly contrasted annotations or navigation elements rather than dominant content blocks. The system prioritizes stark legibility against a dark canvas, with minimal decorative elements, allowing the core content to take precedence.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Plum Canvas | `#4D004B` | `--color-plum-canvas` | Page background – creates a dark, theatrical stage for content, especially media |
| Ghostly Slate | `#dedede` | `--color-ghostly-slate` | Primary text for navigation and informational elements, subtle borders |
| Pure White | `#ffffff` | `--color-pure-white` | High-contrast informational text, subtle borders, often used for header text against dark content sections |

## Tokens — Typography

### GTAmerica Condensed — Used for all text, from navigation to body copy, maintaining a consistent, refined voice with its condensed form. · `--font-gtamerica-condensed`
- **Substitute:** IBM Plex Sans Condensed
- **Weights:** 400
- **Sizes:** 16px, 17px
- **Line height:** 1.06, 1.20
- **Role:** Used for all text, from navigation to body copy, maintaining a consistent, refined voice with its condensed form.

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 13 | 13px | `--spacing-13` |

### Border Radius

| Element | Value |
|---------|-------|
| none | 0px |

### Layout

- **Section gap:** 48px
- **Card padding:** 24px
- **Element gap:** 12px

## Components

### Header Navigation Link
**Role:** Top and bottom navigation items

Text: Pure White (#ffffff), weight 400. Hover/active state is the only visual feedback.

## Do's and Don'ts

### Do
- Use Plum Canvas (#4D004B) as the dominant background color for all page sections.
- Utilize GTAmerica Condensed, weight 400, for all text content to maintain a consistent brand voice.
- Set text color to Pure White (#ffffff) for primary navigation and prominent information, and Ghostly Slate (#dedede) for secondary or less prominent text, ensuring high contrast against the dark background.
- Maintain a minimal border radius of 0px for all elements, emphasizing sharp, angular forms.
- Implement a generous vertical spacing of 48px between main content blocks to create a composed layout.

### Don't
- Avoid using highly saturated accent colors that would disrupt the monochrome aesthetic.
- Do not introduce rounded corners; all UI elements should maintain sharp, 0px radii.
- Refrain from using shadows or other elevation cues; the design relies on flat, layered surfaces and color contrast.
- Do not break the GTAmerica Condensed font family with other display fonts or excessive weight variations.
- Avoid dense, paragraph-heavy text blocks; keep text concise and functional to align with the annotated feel.

## Imagery

The site heavily features photography, specifically close-cropped, high-detail shots, often with iridescent or metallic surfaces (as seen in the car headlight). These images are treated as the central content, full-bleed within their section, and appear without rounded corners or masks, presenting raw and impactful visuals. Their role is primarily showcase and atmospheric, with sparse text surrounding them, allowing the visual to dominate and tell the story.

## Layout

The page primarily uses a full-bleed structure, with content sections occupying the full viewport width. The hero pattern seems to be a centered image or media block set against the Plum Canvas background. Vertical sections maintain consistent spacing, with text elements often appearing in a fixed position at the header and footer, acting as navigational anchors for the central, dynamic content area. The overall density is spacious, ensuring strong focus on individual content pieces.

## Agent Prompt Guide

Quick Color Reference:
text: #dedede
background: #4D004B
border: #dedede
accent: no distinct accent color
primary action: no distinct CTA color

Example Component Prompts:
Create a navigation item: GTAmerica Condensed, weight 400, 16px, line height 1.06, color Pure White (#ffffff).
Create a page heading: GTAmerica Condensed, weight 400, 17px, line height 1.20, color Ghostly Slate (#dedede).
Create a standard information text block: GTAmerica Condensed, weight 400, 16px, line height 1.20, color Ghostly Slate (#dedede).
Create a full-width header: background Plum Canvas (#4D004B). Left text 'BRAVÒ STUDIO', right text 'INFORMATION' both GTAmerica Condensed, weight 400, 16px, line height 1.06, color Pure White (#ffffff).

## Similar Brands

- **A24 FILMS** — Minimalist navigation, strong art direction through a central visual motif, and a dark, moody background.
- **Acne Studios** — Focus on high-quality editorial imagery, subtle branding, and a refined, understated typography for supporting text.
- **The Row** — Exclusive use of high-contrast typography, large visual elements, and an overall sparse, luxury aesthetic.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-plum-canvas: #4D004B;
  --color-ghostly-slate: #dedede;
  --color-pure-white: #ffffff;

  /* Typography — Font Families */
  --font-gtamerica-condensed: 'GTAmerica Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-base: 16px;
  --leading-base: 1.2;
  --text-lg: 17px;
  --leading-lg: 1.06;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-13: 13px;

  /* Layout */
  --section-gap: 48px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Named Radii */
  --radius-none: 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-plum-canvas: #4D004B;
  --color-ghostly-slate: #dedede;
  --color-pure-white: #ffffff;

  /* Typography */
  --font-gtamerica-condensed: 'GTAmerica Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-base: 16px;
  --leading-base: 1.2;
  --text-lg: 17px;
  --leading-lg: 1.06;

  /* Spacing */
  --spacing-13: 13px;
}
```