# Simulate · Design system migration spec

> Source: https://simulate.com  ·  Curated by OpenDesign  ·  en

> A clean, professional example of a premium digital asset marketplace listing page with a clear transactional focus.

## 1. Identity DNA

The system is built for a high-end digital real estate broker, where every pixel must convey value and trust. Its identity is that of a premium domain marketplace, structured to facilitate direct, high-value transactions with professional clarity.

**One-liner:** A premium domain marketplace listing page focused on high-value digital asset acquisition.
**Keywords:** domain · premium · transaction · professional · digital-asset
**Analogy:** A high-end digital real estate broker for premium domain names.

## 2. Color

A high-contrast scheme is anchored by deep indigo and white, using bright blue for primary actions and orange for secondary highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#160042` | body text |
| `--muted` | `#8E8F94` | placeholder |
| `--line` | `rgba(22, 0, 66, 0.12)` | divider |

**Color principle:** A high-contrast scheme anchored by deep indigo, using bright blue for primary actions and orange for secondary highlights.

The palette strictly follows a dual-accent system, reserving blue for primary CTAs and orange for secondary highlights without deviation.

## 3. Typography

Geometric and humanist sans-serif typefaces are selected for their clean, transactional clarity. The scale supports a clear hierarchy from the primary domain headline down to navigation and body text.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 68px | 1.0 | 700 | -2px | Primary domain name headline |
| heading | 36px | 1.2 | 600 | -1px | Section headings |
| body | 16px | 1.625 | 400 | 0px | Body text and navigation |

## 4. Spacing

A consistent 4px base unit governs all spacing and padding, creating a predictable vertical rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base scaling for spacing and padding

## 5. Surfaces

Depth is created through layered box-shadows and subtle borders, defining elevation for cards and surfaces. The primary dark sections use deep indigo backgrounds with subtle noise textures.

- **Radius:** sm 4px · md 5px · lg 12px · pill 50px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 15px 20px 0px
  - rgba(57, 59, 106, 0.18) 23px 23px 24px 0px
- **Borders:** 1px solid rgba(22, 0, 66, 0.12)

## 6. Layout

The layout follows a standard responsive container, centered to focus attention. A vertical-flow structure presents a prominent hero section followed by supporting content blocks.

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

**Skeleton:** Standard responsive container with centered hero content

## 7. Motion & Interaction

Motion is minimal and utilitarian, confined to functional state changes. The philosophy favors immediate feedback through color transitions and opacity fades for loading states over elaborate choreography.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Color and background-color transitions on hover
  - Opacity fades for loading states

- **Hover:** Standard color/background-color transitions at 0.2s ease-in-out for buttons and links.
- **Click:** Immediate feedback via state changes.
- **Transition:** Global 0.2s ease-in-out transitions applied to color properties.
- **Keyboard:** Standard browser defaults for focus management.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and transactional. Headlines are short, capitalized declarations, and CTAs are clear, action-oriented phrases.

- **Tone:** Professional, direct, and transactional.
- **Headline style:** Short, capitalized or bolded declarations focused on the domain asset.
- **CTA style:** Clear, action-oriented buttons like 'Make offer' or 'Sign Up'.
- **Avoid:** Informal language / Playful metaphors / Excessive exclamation marks

### Don'ts
- ❌ don't use light backgrounds for primary CTAs — screenshot shows a solid bright blue 'Make offer' button instead
- ❌ don't use wide tracking for headlines — screenshot shows tight negative letter-spacing (-1px to -2px) instead
- ❌ don't use multiple accent colors — screenshot shows strictly blue for primary actions and orange for secondary highlights
- ❌ don't use decorative serifs — screenshot shows clean geometric and humanist sans-serif typefaces instead
- ❌ don't use square corners for primary buttons — screenshot shows a 50px pill-shaped border-radius instead
- ❌ don't use complex gradients — screenshot shows flat colors and subtle noise textures on dark backgrounds instead

The system deliberately avoids informal language, playful metaphors, and decorative typography to maintain its transactional focus.

## System Prompt (paste into AI tool)

```
This is a premium domain name marketplace listing page designed for direct, high-value transactions. The visual identity is anchored by a deep indigo (#160042) background for dark sections, contrasted with a clean white (#FFFFFF) primary background. Key accent colors include bright blue (#0073E5) for primary CTAs and orange (#E86D1F) for secondary elements. The typography utilizes geometric and humanist sans-serif categories with tight negative letter-spacing for impact. Critical constraints: avoid using light backgrounds for buttons, maintain tight headline tracking, use strictly the blue/orange accent palette, stick to sans-serif type, use pill-shaped buttons, and avoid complex gradients. The layout is centered and professional, focusing on a single domain asset with clear calls to action.
```