---
name: Drepute
description: "This site is a great example of a clean, effective pre-launch page that uses a photographic hero to establish a premium mood without needing complex UI components."
version: alpha

colors:
  background: "#161616"
  primary: "#ffffff"
  neutral: "#a9a9a9"
  line: "rgba(0, 0, 0, 0.3)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 62px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  h2:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 4px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 56px

---

## Overview

A clean, atmospheric pre-launch page with a strong photographic hero and clear calls to action.

*A premium pre-launch waiting room that lets the product speak for itself.*

## Colors

High contrast monochrome palette with a dominant photographic background.

- **Background (`#161616`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Muted (`#a9a9a9`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.3)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

## Layout

Full-width photographic hero followed by centered content sections.

*Rhythm:* 8px based grid with generous section padding (56px vertical).

## Elevation & Depth

- rgba(0, 0, 0, 0.3) 0px 2px 6px 0px
- rgba(0, 0, 0, 0.25) 0px 3px 18px 0px
- Borders: 1px solid #000000

## Shapes

- `sm`: 4px
- `md`: 4px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Solid white background with black uppercase text and small border-radius.
- **input:** Dark background with a thin white border.
- **hero:** Full-viewport height with centered text and a large background image.

## Do's and Don'ts

**Don't:**
- don't use a bright or neon color palette — screenshot shows a dark, moody photographic theme
- don't use small, cramped text — screenshot shows generous spacing and large headlines
- don't use complex grid layouts — screenshot shows a simple, single-column centered layout
- don't use rounded, bubbly buttons — screenshot shows sharp, rectangular buttons with minimal radius
- don't use decorative or script fonts — screenshot shows clear serif and sans-serif pairings
- don't use cluttered navigation — screenshot shows a clean header with only a single button

---

## System Prompt (paste into AI agent)

```
This is a minimalist pre-launch page for a brand called Drepute. The design is defined by a dark, atmospheric photographic background and high-contrast white typography. The color palette is almost entirely monochrome, featuring a deep charcoal background (#161616) and pure white text (#ffffff). The typography combines a transitional-serif for headlines with a humanist-sans for body text. Key interactions are simple button hovers and page transitions. Critical design rules include: maintain the high-contrast monochrome palette, use generous whitespace and section padding (56px), and avoid any use of bright accent colors or complex, multi-column layouts.
```