---
title: "Drepute design system"
variant: extended
source: https://drepute.xyz/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/drepute-xyz)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Drepute · Design System

> A quiet launch announcement beneath a cinematic night sky.

**Theme:** dark · **Industry:** saas · **Source:** https://drepute.xyz/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Drepute pairs a restrained launch announcement with an immersive night-sky landscape. A compact email signup sits below the full-bleed hero, keeping the page focused on anticipation and one clear action.

## North star

Let one cinematic full-bleed image carry the page, and keep every signup element quiet, centered, and easy to find.

## Overview

The page is built around a full-bleed night landscape: a star-filled sky, dark mountain silhouettes, and their reflection make the hero image the dominant visual surface. A small white announcement strip and thin teal rule cap the top, while the centered DREPUTE wordmark and large Playfair Display “Launching Soon” headline sit directly over the image in pale text. The lower newsletter area shifts to a near-black canvas, with a centered serif heading, quiet supporting copy, and a simple horizontal email form. Source Sans Pro and GD Sherpa keep utility text compact; Montserrat appears in uppercase, widely tracked display labels. Whitespace and measured section spacing preserve a calm, uncluttered rhythm rather than adding cards or decorative modules. White buttons and fine borders supply the functional contrast, while teal is reserved for the narrow divider rather than spread across the page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#161616` | `--color-midnight-canvas` | surface | Measured dark canvas; use for the lower newsletter and footer area, not as a substitute for the photographic hero. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Top announcement strip, signup button, email-field border, and bright hero lettering. |
| Button Ink | `#000000` | `--color-button-ink` | neutral | Text on the white signup button and measured dark text in the announcement area. |
| Quiet Silver | `#a9a9a9` | `--color-quiet-silver` | neutral | Muted footer and secondary copy against the dark lower-page canvas. |
| Signal Teal | `#00a4a6` | `--color-signal-teal` | accent | Thin horizontal accent at the boundary below the white announcement strip. |
| Soft Ash | `#a4a4a4` | `--color-soft-ash` | neutral | Secondary measured text tone; use sparingly for subdued supporting copy. |
| Frost White | `#f7f7f7` | `--color-frost-white` | neutral | Light heading text measured on the dark photographic and newsletter surfaces. |
| Form Silver | `#bfbfbf` | `--color-form-silver` | neutral | Email input text or placeholder, keeping the form legible without competing with its heading. |

### Semantic aliases

`--color-canvas` → `#161616` (Midnight Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#a9a9a9` (Quiet Silver) · `--color-text-muted` → `#000000` (Button Ink) · `--color-text-subtle` → `#f7f7f7` (Frost White) · `--color-border` → `#00a4a6` (Signal Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#a9a9a9` | `#161616` | 7.7:1 | AAA |
| `#a9a9a9` | `#ffffff` | 2.35:1 | fail |
| `#000000` | `#161616` | 1.16:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#f7f7f7` | `#161616` | 16.89:1 | AAA |
| `#f7f7f7` | `#ffffff` | 1.07:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Source Sans Pro | `--font-source-sans-pro` | webfont | 400, 700 | Top announcement, wordmark navigation, and the uppercase signup button. | Source Sans 3 |
| GD Sherpa | `--font-body` | webfont | 400 | Body copy, supporting signup text, and the secondary announcement CTA. | Inter |
| Playfair Display | `--font-display` | webfont | 400 | Large centered launch headline and newsletter title. | Playfair Display |
| Montserrat | `--font-montserrat` | webfont | 700 | Measured uppercase display and eyebrow role; use for compact, tracked labels if present. | Montserrat |

- **Source Sans Pro:** Measured at regular and bold weights; keep utility text compact and the signup label uppercase.
- **GD Sherpa:** Regular-weight sans-serif for concise utility copy; avoid turning it into a display face.
- **Playfair Display:** Regular serif weight creates the editorial focal point; retain natural casing and restrained line treatment.
- **Montserrat:** Bold uppercase with pronounced letter spacing; not the primary headline face.

### Type scale — Golden Ratio (ratio ≈ 1.642, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 400 | 1.2 | 0 | — | Playfair Display | Large editorial launch or subscription heading. |
| h1 | 44px | 400 | 1.25 | 0 | — | Playfair Display | Centered “Launching Soon” hero headline. |
| h2 | 26px | 700 | 1.2 | 0.154em | uppercase | Montserrat | Uppercase tracked section or eyebrow labels. |
| body | 14px | 400 | normal | 0 | — | GD Sherpa | Short supporting copy beneath the newsletter heading. |
| button | 14px | 400 | normal | 0 | — | GD Sherpa | Signup and announcement CTA labels. |
| eyebrow | 26px | 700 | 1.2 | 0.154em | uppercase | Montserrat | Compact uppercase label above a section heading, when needed. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 7, 8, 16, 23, 24, 32, 56 px.
- Section rhythm 56px · element gap 24px · card padding — · max content width 1112px.

A narrow full-width announcement bar precedes a full-bleed hero; the wordmark and launch headline are centered over the image. The page then transitions into a dark newsletter/footer band with a centered heading and horizontally aligned email field and signup button. The measured content max width is 1112px, with comfortable density, a 56px section gap, and 24px element gap. Preserve generous open space around the hero title and signup form.

## Shape & elevation

- Radius: button `4px` · input `4px` · xs `4px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.25) 0px 3px 18px 0px`

The layout is mostly flat: no card grid or prominent layered panels. The hero relies on the photograph itself for depth, while white form controls and fine borders distinguish interactive elements. A measured medium shadow exists but is not a defining visual motif; avoid introducing conspicuous elevation.

## Imagery

Use cinematic landscape photography or video as the hero’s full-bleed background. The reference shows a starry night sky over dark mountain silhouettes reflected in still water; keep the image low-key and naturally textured so pale type stays readable. No illustration or 3D treatment defines the brand. The bright top announcement strip and dark lower signup band frame the photograph rather than competing with it.

## Components

### Announcement strip

Compact white top bar with small dark promotional copy, a bordered “Start for free” action, and a thin #00a4a6 divider underneath.

### Wordmark

Centered DREPUTE label near the top of the hero, rendered in uppercase sans-serif and bright text over the dark image.

### Launch hero

Full-bleed night landscape with a large, centered Playfair Display “Launching Soon” heading in pale text.

### Newsletter form

Centered signup block in the dark lower band; pair brief supporting copy with a horizontal email field and white signup button.

### Email input

Simple field with a 1px white border, 4px radius, and subdued #bfbfbf text; avoid a filled card-like container.

### Footer credits

Small, low-contrast copyright and provider credits aligned near the bottom of the dark page.

### Measured component styles

- **Primary button** (“SIGN UP”): background #ffffff · text #000000 · radius 4px · padding 8px 32px · 700 14px Source Sans Pro · uppercase
- **Secondary button** (“Start for free”): transparent background · text #000000 · border 1px solid #8995a9 · radius 4px · padding 8px 24px · 400 14px GD Sherpa
- **Link** (“Go from idea to live site in minutes. Ge”): transparent background · text #000000 · radius 0px · padding 2px · 400 14px GD Sherpa
- **Input**: transparent background · text #bfbfbf · border 1px solid #ffffff · radius 4px · padding 23px 16px 7px 16px · 400 16px Source Sans Pro
- **Navigation item** (“DREPUTE”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Source Sans Pro

## Do

- Use a full-bleed, low-key landscape as the main visual.
- Center the wordmark and launch headline over the hero image.
- Keep the hero title in an editorial serif face.
- Use #161616 for the newsletter and footer canvas.
- Reserve #00a4a6 for the thin top divider.
- Make the email field and signup action a clear horizontal pair.

## Don't

- Do not add bright gradients over the night imagery.
- Do not introduce colorful card grids or decorative illustrations.
- Do not spread teal across buttons or large background areas.
- Do not crowd the centered hero title with extra copy.
- Do not use heavy shadows to create artificial depth.
- Do not replace the restrained form with a multi-step flow.

## Agent prompt

Create a new page in Drepute’s restrained, cinematic launch style. Lead with a full-bleed night landscape—starry sky, dark silhouettes, reflective water—and place a centered wordmark and spacious Playfair Display headline over it. Use Paper White (#ffffff) for a compact announcement strip and signup action, with Signal Teal (#00a4a6) only as a fine divider. Transition into a Midnight Canvas (#161616) newsletter/footer area with centered serif heading, subdued supporting copy, and a simple horizontal email form. Use Source Sans Pro or Source Sans 3 for utility labels and GD Sherpa-like sans-serif for body text; keep the interface flat, low-density, and uncluttered. Maintain measured comfortable spacing and a 1112px content maximum where content needs a constrained width. Avoid cards, gradients, and extra accent colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed image hero with centered wordmark and headline, followed by a dark centered newsletter and footer area. | Announcement CTA, Email signup, Persistent chat launcher | Night landscape background, Centered serif heading, White signup button, Thin teal divider |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/drepute-xyz