# Drepute · Design system migration spec

> Source: http://drepute.xyz  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Drepute is a design of deliberate restraint, a pre-launch environment built on the principle that atmosphere can communicate more than ornamentation. It functions like a premium waiting room, where the architecture of the space—the photography, the typography, the generous void—prepares the visitor for a product that speaks for itself.

**One-liner:** A clean, atmospheric pre-launch page with a strong photographic hero and clear calls to action.
**Keywords:** pre-launch · minimal · atmospheric · professional
**Analogy:** A premium pre-launch waiting room that lets the product speak for itself.

## 2. Color

The system is built on a foundation of high-contrast monochrome, pairing a deep charcoal ground with pure white text. This stark simplicity ensures the photographic hero image remains the emotional core of every view.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#161616` | main background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#a9a9a9` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.3)` | divider |

**Color principle:** High contrast monochrome palette with a dominant photographic background.

The guiding principle is one of atmospheric dominance, where color is a function of light and shadow rather than a decorative hue.

## 3. Typography

The typographic voice is split between authority and approachability, using a transitional-serif for commanding headlines and a humanist-sans for clear, readable body text. This pairing establishes a hierarchy that is both editorial and modern, with scale clearly defining the journey from a primary hero statement to default paragraph copy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 62px | 1.2 | 400 | 0px | Primary hero headline |
| h2 | 44px | 1.25 | 400 | 0px | Section headline |
| body | 16px | 1.5 | 400 | 0px | Default paragraph text |

## 4. Spacing

A consistent 8px grid establishes a quiet, mathematical rhythm, with generous vertical padding creating clear separation between content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 56 / 64 / 96 px
- **Rhythm:** 8px based grid with generous section padding (56px vertical).

## 5. Surfaces

Depth is achieved not through elaborate effects, but through carefully calibrated shadows and a single, precise border. The surfaces feel tangible and grounded, providing subtle lift without visual clutter.

- **Radius:** sm 4px · md 4px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 2px 6px 0px
  - rgba(0, 0, 0, 0.25) 0px 3px 18px 0px
- **Borders:** 1px solid #000000

## 6. Layout

The structural skeleton is one of singular focus: a full-viewport photographic hero commands the initial view, giving way to a single column of centered content below. This straightforward path eliminates distraction and guides the eye with purpose.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width photographic hero followed by centered content sections.

## 7. Motion & Interaction

Motion is employed as functional punctuation, not narrative. Transitions are swift and predictable, designed to provide immediate feedback on interaction or mark a change in state, preserving the interface's calm professionalism.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - 1s ease-in transitions for page load elements

- **Hover:** Background transitions for buttons.
- **Click:** Standard pointer cursor for interactive elements.
- **Transition:** All properties with a 0.15s to 0.3s duration.
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

The editorial voice is minimal and anticipatory, speaking in short, large serif words and direct calls to action. It avoids fluff and complexity, mirroring the clean, spacious layout it inhabits.

- **Tone:** Minimalist and anticipatory.
- **Headline style:** Short, large serif words centered on the page.
- **CTA style:** Direct and functional (e.g., 'Learn More', 'Accept').
- **Avoid:** Fluff / Long sentences / Busy UI patterns

### Don'ts
- ❌ 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

This system deliberately avoids the hallmarks of busy, high-energy interfaces: bright accent colors, cramped text, complex grids, and decorative typography are all excluded from its vocabulary.

## System Prompt (paste into AI tool)

```
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.
```