WePresent

# WePresent — Style Reference
> Dramatic editorial contrast

**Theme:** dark

WePresent adopts an editorial, deep-contrast aesthetic designed for immersive digital experiences. Its visual system pairs dark, luxurious backgrounds with stark white typography, creating a gallery-like atmosphere. The design emphasizes clear boundaries through prevalent outline styles for interactive elements, reinforcing a sense of curated content behind a frame. Typography is confident and expressive, balancing classic elegance with modern readability, while accent colors are restrained, used primarily for subtle interactive cues.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Roast | `#000000` | `--color-midnight-roast` | Page backgrounds, elevated card surfaces, primary text color for light backgrounds |
| Canvas White | `#ffffff` | `--color-canvas-white` | Interface text, button text on dark backgrounds, primary borders, card backgrounds on light sections |
| Flame Accent | `#fd4344` | `--color-flame-accent` | Outlined button borders, subtle interactive highlights, decorative accents in UI elements |

## Tokens — Typography

### FaktProBlond — Body text, navigation links, and most informational elements. Its clean, sans-serif structure ensures readability across varying sizes. · `--font-faktproblond`
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 10px, 13px, 14px, 16px, 18px, 21px, 22px
- **Line height:** 1.00, 1.20, 1.35
- **Letter spacing:** -0.0150em
- **Role:** Body text, navigation links, and most informational elements. Its clean, sans-serif structure ensures readability across varying sizes.

### FaktProMedium — Used for specific secondary text elements, providing a slightly more pronounced weight than FaktProBlond without over-emphasizing. · `--font-faktpromedium`
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 15px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Used for specific secondary text elements, providing a slightly more pronounced weight than FaktProBlond without over-emphasizing.

### GTAlpinaStandardThinItalic — Headline display font, used for artistic titles and short, impactful statements. Its thin italic form creates a sophisticated, editorial signature. · `--font-gtalpinastandardthinitalic`
- **Substitute:** Playfair Display Italic
- **Weights:** 400
- **Sizes:** 13px, 22px
- **Line height:** 1.00, 1.35
- **Letter spacing:** -0.0150em
- **Role:** Headline display font, used for artistic titles and short, impactful statements. Its thin italic form creates a sophisticated, editorial signature.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.35 | — | `--text-caption` |
| heading-sm | 18px | 1.35 | — | `--text-heading-sm` |
| heading-lg | 22px | 1 | -0.33px | `--text-heading-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** spacious

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Element | Value |
|---------|-------|
| all | 0px |

### Layout

- **Section gap:** 40px
- **Card padding:** 35px
- **Element gap:** 5px

## Components

### Outline Button (Dark)
**Role:** Primary Call to Action

Ghost button with no background, 'Canvas White' text and a 1px 'Canvas White' border. Padding is 35px horizontal, 40px bottom, 35px top. Sharp 0px border-radius emphasizes the structured design.

### Outline Button (Light)
**Role:** Primary Call to Action on Dark Backgrounds

Ghost button with no background, 'Midnight Roast' text and a 1px 'Midnight Roast' border. Padding is 35px horizontal, 40px bottom, 35px top. Sharp 0px border-radius.

### Image Card (Dark)
**Role:** Content container for images

Transparent background, 0px border-radius, no shadow. Used for showcasing visual content without added visual weight. All padding is 0px directly around the image.

### Image Card (Light)
**Role:** Content container for images on Light Backgrounds

Canvas White background, 0px border-radius, no shadow. Used when a clear content boundary is needed on a lighter section. All padding is 0px directly around the image.

## Do's and Don'ts

### Do
- Prioritize 'Midnight Roast' and 'Canvas White' for most background and text pairings to maintain high contrast and dramatic readability.
- Use FaktProBlond for all body text, links, and minor UI elements, ensuring good readability at sizes from 10px to 22px with a letter-spacing of -0.0150em.
- Reserve GTAlpinaStandardThinItalic exclusively for headlines and impactful titles, leveraging its unique italic style for brand distinctiveness.
- Apply 0px border-radius to all interactive elements and content containers for a consistently sharp, intentional aesthetic.
- Frame interactive elements like buttons with a 1px border using 'Canvas White' on dark backgrounds or 'Midnight Roast' on light backgrounds.
- Maintain a spacious density; use 40px for section gaps and 35px for internal card padding to give content ample breathing room.

### Don't
- Avoid using saturation to differentiate interactive states; rely on border-only outlines and text color changes.
- Do not introduce rounded corners; commit to a rectilinear visual language across all components and layouts.
- Do not use drop shadows for elevation; surfaces should rely on background color changes or clear border distinctions.
- Avoid mixed-case typography for headlines; stick to all-caps or title-case as dictated by content, but maintain the specified font and weight.
- Do not use 'Flame Accent' as a background color for major elements; it is reserved for subtle interactive cues and decorative details.
- Do not vary letter spacing from -0.0150em for FaktProBlond or GTAlpinaStandardThinItalic; consistent tight tracking is key to its brand identity.

## Imagery

This site predominantly uses a 'no imagery, pure UI' approach for foundational elements. When images are present (not explicitly in provided data but implied by card components), they are expected to be full-bleed or contained within sharp, borderless structures, treated as content rather than decorative UI. The overall impression leans towards a dark, immersive canvas that foregrounds textual and interactive elements, suggesting minimal, high-impact visuals if any.

## Layout

The page exhibits a full-bleed layout on a dark background, establishing an immersive, almost theatre-like experience. The hero section features a centered, high-contrast headline and supporting text with an outlined call-to-action button, conveying an editorial and focused entry point. Content arrangement is primarily stacked vertically, allowing ample whitespace and leading. The general approach seems to be max-width content blocks within the full-bleed canvas, ensuring readability without a strict pageMaxWidth, rather using generous horizontal padding or margins to frame the text.

## Agent Prompt Guide

### Quick Color Reference
text: #ffffff
background: #000000
border: #ffffff
accent: #fd4344
primary action: #fd4344 (outlined action border)

### 3-5 Example Component Prompts
1. Create a Dark Outlined Button: no background, 'Canvas White' text in FaktProBlond weight 400 at 14px, a 1px 'Canvas White' border, 0px border-radius, with 35px horizontal padding, 40px bottom padding, and 35px top padding.
2. Create a Hero Section Text Block: 'Midnight Roast' background. Title with 'Marina Abramovic' in GTAlpinaStandardThinItalic weight 400 at 22px, letter-spacing -0.0150em, 'Canvas White'. Subheading text: FaktProBlond weight 400 at 16px, 'Canvas White', with 40px bottom margin.
3. Create a descriptive paragraph: FaktProBlond weight 400 at 14px, 'Canvas White' text, with 5px bottom margin for line spacing.

## Similar Brands

- **The New York Times** — Similar editorial, high-contrast black-on-white (or white-on-dark) typographic aesthetic with a focus on clear hierarchy and minimal decorative elements.
- **A24** — Employs an art-house, cinematic design with bold typography and a preference for dark themes and stark visual treatments.
- **Nowness** — Focuses on curated cultural content with a clean, grid-based layout, strong typographic choices, and an emphasis on visual storytelling.
- **Apple (Product Pages)** — High-contrast text on dark backgrounds, large display typography, and a 'less is more' approach to interface elements.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-roast: #000000;
  --color-canvas-white: #ffffff;
  --color-flame-accent: #fd4344;

  /* Typography — Font Families */
  --font-faktproblond: 'FaktProBlond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-faktpromedium: 'FaktProMedium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtalpinastandardthinitalic: 'GTAlpinaStandardThinItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.35;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.35;
  --text-heading-lg: 22px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.33px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-80: 80px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 35px;
  --element-gap: 5px;

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

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-roast: #000000;
  --color-canvas-white: #ffffff;
  --color-flame-accent: #fd4344;

  /* Typography */
  --font-faktproblond: 'FaktProBlond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-faktpromedium: 'FaktProMedium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtalpinastandardthinitalic: 'GTAlpinaStandardThinItalic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.35;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.35;
  --text-heading-lg: 22px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.33px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-80: 80px;
}
```