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

# TopDomains — relate.app · Design System

> A premium domain offer over a people-powered photo mosaic.

**Theme:** dark · **Industry:** other · **Source:** https://www.relate.app/ · **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._

TopDomains presents relate.app for sale over a vivid, tiled portrait-photo background. A large domain headline and floating white information cards keep the offer and purchase details prominent.

## North star

Let the colourful portrait mosaic attract attention, but keep the domain, price, and transaction details legible on uncluttered white overlays.

## Overview

The page pairs a clean white TopDomains masthead with a full-width mosaic of brightly coloured portrait photographs. The mosaic supplies most of the visual energy; the deep indigo canvas is visible at the outer edges and in the measured section styling, rather than defining a uniformly dark interface. A bold, black relate.app headline sits on a white strip near the top of the imagery, while the price and purchase action form a compact blue-and-dark control. Several broad white cards float over the portraits, using dark grey body copy, selective blue links, and green emphasis for offer-related words. Typography is functional and mixed: a condensed caps display face marks the brand, with Proxima, Inter, and Roboto supporting headings, explanatory copy, and links. Content aligns to a centered single-column composition, with generous breaks between cards and little decorative framing. The result feels like a straightforward domain-sale landing page, not a conventional dark-mode product site.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Copy Charcoal | `#444444` | `--color-copy-charcoal` | neutral | Primary body copy inside the white information cards and some navigation text. |
| Domain Indigo | `#2d3284` | `--color-domain-indigo` | brand | Measured section canvas and the narrow outer edges around the portrait mosaic. |
| Offer White | `#ffffff` | `--color-offer-white` | surface | Masthead canvas, domain-name strip, and large floating explanatory cards. |
| Quiet Teal | `#579db5` | `--color-quiet-teal` | semantic | Measured border colour; not a prominent defining colour in the visible page composition. |
| Footer Mist | `#eeeeee` | `--color-footer-mist` | neutral | Measured footer text colour, used for low-emphasis footer content. |
| Action Blue | `#2484f2` | `--color-action-blue` | accent | Bright blue purchase-price block and prominent explanatory links. |
| Link Blue | `#2374c4` | `--color-link-blue` | accent | Secondary blue link treatment, including the smaller Learn more link. |
| Card Ink | `#222222` | `--color-card-ink` | neutral | Dark copy on the secondary transaction-information card. |
| Headline Black | `#000000` | `--color-headline-black` | neutral | Domain headline and selected dark text layered over the image mosaic. |
| Offer Green | `#7bd428` | `--color-offer-green` | accent | Green emphasis on offer-related words; also appears within the colourful portrait imagery. |
| Panel Lilac | `#d5d6e6` | `--color-panel-lilac` | surface | Pale lavender-grey measured behind a transaction detail card. |

### Semantic aliases

`--color-canvas` → `#2d3284` (Domain Indigo) · `--color-surface` → `#ffffff` (Offer White) · `--color-text` → `#eeeeee` (Footer Mist) · `--color-text-muted` → `#444444` (Copy Charcoal) · `--color-text-subtle` → `#222222` (Card Ink) · `--color-border` → `#579db5` (Quiet Teal) · `--color-accent` → `#2d3284` (Domain Indigo) · `--color-accent-2` → `#2484f2` (Action Blue) · `--color-accent-3` → `#2374c4` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeee` | `#2d3284` | 9.52:1 | AAA |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#444444` | `#2d3284` | 1.13:1 | fail |
| `#444444` | `#ffffff` | 9.74:1 | AAA |
| `#222222` | `#2d3284` | 1.44:1 | fail |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#2d3284` | `#ffffff` | 11.05:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 700 | Main explanatory card copy and caption text. | Inter |
| roboto | `--font-roboto` | webfont | 400, 700 | Purchase action and compact transaction or navigation details. | Roboto |
| proxima | `--font-display` | webfont | 300, 800, 500, 400 | Secondary headings and domain-sale display text. | Montserrat |
| proximacapsbold | `--font-proximacapsbold` | webfont | 400 | Prominent relate.app display headline. | Oswald |

- **inter:** Regular body weight; keep copy readable and sentence case.
- **roboto:** Use bold for link emphasis; compact interface text stays sentence case.
- **proxima:** Measured in several weights; use moderate weight for headings and a clean, untracked appearance.
- **proximacapsbold:** Bold condensed capitals create a strong domain-name label.

### Type scale — Perfect Fifth (ratio ≈ 1.556, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 400 | normal | 0 | — | proximacapsbold | Large uppercase relate.app domain headline on a white strip. |
| h2 | 31px | 500 | normal | 0 | — | proxima | Secondary page heading describing the domain sale. |
| body | 19px | 400 | normal | 0 | — | inter | Explanatory copy within the floating white information cards. |
| caption | 18px | 400 | 1.39 | 0 | — | inter | Smaller supporting details and transaction explanations. |
| link | 14px | 700 | normal | 0 | — | roboto | Compact bold purchase-related and Learn more links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 6, 7, 8, 19, 20, 25, 26, 28, 29, 30, 39, 50, 60, 90 px.
- Section rhythm 50px · element gap — · card padding 28px · max content width 1090px.

A single centered content column sits over a full-width, tightly tiled portrait mosaic. The measured page max width is 1090px; the masthead occupies a separate white band above the imagery. The headline and compact purchase controls overlay the upper image area, followed by wide white copy cards stacked down the page. Cards have measured padding around 28px and a 10px radius. Comfortable section spacing separates the content, while the dense image grid remains visible between cards and at the outer edges.

## Shape & elevation

- Radius: card `10px` · xs `10px`
- Shadow `inset` (other): `rgb(46, 209, 171) 0px 0px 1.5px 1px inset, rgb(46, 209, 171) 0px 0px 1.5px 1px`

The design relies on flat white cards layered directly over the busy photograph, rather than pronounced drop shadows. Rounded card corners are measured at 10px; other blocks and controls are mostly square-edged. A thin inset teal shadow is measured elsewhere, but it is not a defining visible elevation treatment. The image grid's white dividers provide most of the separation.

## Imagery

The dominant imagery is a full-bleed grid of smiling people, cropped into rectangular tiles with narrow white dividers. Each portrait sits against a different saturated colour, creating a lively patchwork behind the sales content. Photography is natural and people-focused; no product render or decorative illustration defines the page. White overlays deliberately cover parts of the mosaic to preserve text legibility.

## Components

### TopDomains masthead

A compact brand mark and tagline sit in a clean white band above the portrait grid.

### Domain headline strip

A bold black uppercase relate.app title sits on a white horizontal panel over the upper mosaic.

### Price and purchase control

A bright blue price block pairs with a dark Buy Now action near the headline.

### Sale explanation card

A broad white card with a 10px radius contains dark grey copy and a bold purple domain link.

### Transaction details card

A second white rounded card presents the sale price, monthly payment information, and a blue Learn more link.

### Supporting content cards

Additional wide white panels explain the .app extension and domain context over the continuing photo grid.

### Measured component styles

- **Primary button** (“Sales 24/7”): transparent background · text #eeeeee · radius 0px · padding 0px · 400 16px roboto
- **Link** (“Learn more”): transparent background · text #2484f2 · radius 0px · padding 0px · 700 14px roboto
- **Card** (“Relate.app is a premium domain of the .a”): background #ffffff · text #444444 · radius 10px · padding 29px 26px · 400 18px inter
- **Navigation item** (“TOPDOMAINS Domain names that define your”): transparent background · text #444444 · radius 0px · padding 0px · 400 16px Georgia

## Do

- Keep the portrait mosaic as the page's main visual backdrop.
- Place long explanations on clean white cards.
- Make relate.app and its price immediately easy to find.
- Use blue for purchase emphasis and links.
- Reserve green for brief offer-related highlights.
- Keep the masthead distinct on a white band.

## Don't

- Do not turn the whole page into a dark interface.
- Do not place long copy directly on busy portrait tiles.
- Do not add gradients that are absent from the measured design.
- Do not replace the human-photo mosaic with product renders.
- Do not overuse green beyond short highlights.
- Do not add heavy shadows or decorative card borders.

## Agent prompt

Build a new premium domain-sale page in the TopDomains visual style. Put a compact logo and tagline in a white masthead, then use a full-width grid of colourful, cropped portrait photography as the main backdrop. Overlay a strong black domain headline on an Offer White (#ffffff) strip, with a compact Action Blue (#2484f2) price treatment and dark purchase action nearby. Stack broad, rounded white information cards over the mosaic; use Copy Charcoal (#444444) for readable body copy, Card Ink (#222222) for secondary transaction details, and Link Blue (#2374c4) for supporting links. Keep Domain Indigo (#2d3284) restrained to the canvas or outer edges. Apply green (#7bd428) only to short offer highlights. Use a centered single-column layout, generous separation between cards, crisp typography, and minimal elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-detail | Single centered content column over a full-width portrait mosaic, with a separate masthead and stacked white overlay cards. | Prominent domain and price, Direct Buy Now action, Transaction and payment details, Supporting domain information | Portrait photo tiles, White rounded information cards, Blue price and links, Black headline strip |

## Source CSS custom properties (selected)

```css
--text: #111;
--border: rgba(0, 0, 0, 0.18);
--border-hover: rgba(0, 0, 0, 0.35);
--border-focus: rgba(0, 0, 0, 0.7);
--accent: #000;
```

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