# Automator Community · Design system migration spec

> Source: https://automator.community  ·  Curated by OpenDesign  ·  en

> A solid example of a modern, data-rich professional tool interface that balances clean aesthetics with the high information density required for financial or technical analysis.

## 1. Identity DNA

The Automator Community interface is conceived as a clean, data-rich financial dashboard tailored for domain investors. Its identity is built on the principles of efficiency and trust, presenting complex investment data within a system of orderly, light-mode clarity. This is a tool for discovery and decision-making, where the visual structure serves the analytical task.

**One-liner:** A professional domain marketplace tool for discovering and securing expired domains
**Keywords:** Domain · Expired · Backorder · Investment · Fintech · SEO
**Analogy:** A clean, data-rich financial dashboard tailored for domain investors

## 2. Color

The color system is anchored by a white canvas and soft blue backgrounds, creating a neutral, focused workspace. A vibrant cyan-to-purple gradient marks primary actions, a singular chromatic accent that guides the user toward key metrics and conversion points.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FBFBFB` | card background |
| `--bg-quiet` | `#DBEEF9` | quiet area |
| `--ink` | `#374151` | body text |
| `--ink-soft` | `#4B5563` | secondary text |
| `--muted` | `#9CA3AF` | placeholder |
| `--muted-soft` | `#D1D5DB` | weak hint |
| `--accent` | `#049FCE` | single accent |
| `--line` | `rgba(209, 213, 219, 1)` | divider |

**Color principle:** Clean, data-first layout utilizing a primary cyan accent to highlight actionable elements and key metrics against a neutral white canvas

The principle is a data-first layout where color is used sparingly and strategically to highlight actionable elements against a neutral field.

## 3. Typography

The typographic voice is set by the humanist-sans DM Sans, chosen for its high legibility within dense data tables. Bold weights establish hierarchy, while generous line height ensures that information-dense sections remain readable and uncrushed.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 35px | 1.2 | 700 | -0.5px | Main page headings |
| h2 | 24px | 1.3 | 600 | 0 | Section and card headers |
| body | 16px | 1.5 | 400 | 0 | Standard descriptive text |
| small | 14px | 1.4 | 400 | 0 | Metadata and secondary info |

**Type rules:**
- Use DM Sans for all primary interfaces
- Bold weights (600-700) for hierarchy and emphasis
- Maintain generous line height for dense data tables

## 4. Spacing

The system is built upon a standard 4px grid, establishing a consistent spatial rhythm that underpins all component padding and margin, with a 16px base defining card interiors.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid system with 16px base padding for cards

## 5. Surfaces

Depth is communicated through minimal, light elevation rather than heavy borders or dark mode. Surfaces are differentiated by very subtle rgba(0,0,0,0.06) shadows and a consistent 1px solid border, creating a layered but airy interface.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - 0px 4px 8px 0px rgba(0, 0, 0, 0.06)
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.06)
- **Borders:** 1px solid #D1D5DB

## 6. Layout

The layout skeleton is a centered 12-column grid with a 1280px maximum container width. This traditional structure is optimized for presenting structured domain data in a highly scannable and organized vertical rhythm.

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

**Skeleton:** 12-column grid with a centered container maxing at 1280px, utilizing a standard vertical rhythm for data tables

## 7. Motion & Interaction

Motion is minimal and purposeful, designed to confirm interaction without distracting from data. Background color transitions and subtle transforms provide smooth, state-aware feedback at a measured 0.2-second ease-out.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background color transitions on interactive elements
  - Subtle transform animations for state changes
  - 0.5s background transitions for broader state updates

- **Hover:** Subtle background color darkening or soft shadow elevation
- **Click:** Immediate visual feedback via background shift
- **Transition:** 0.2s ease-out for standard UI element interactions
- **Keyboard:** Standard focus outlines matching the primary accent color

## 8. Voice & Don'ts

The editorial voice is professional, trustworthy, and direct, with headlines that are clear, bold, and data-oriented. Calls to action are prominent and utility-focused, leveraging high-contrast gradients to drive engagement.

- **Tone:** Professional, trustworthy, and direct
- **Headline style:** Clear, bold, and data-oriented, focusing on utility and domain value
- **CTA style:** Action-oriented and prominent, using high-contrast gradients to drive conversions
- **Avoid:** Playful or overly casual language / Abstract metaphors without clear utility / Low-contrast text for critical information / Dense, unformatted walls of text

### Don'ts
- ❌ Don't use unbordered inputs — screenshot shows clear 1px borders on all interactive fields
- ❌ Don't use a purely monochrome palette — screenshot shows a distinct cyan-to-purple gradient for key CTAs
- ❌ Don't use a dark mode interface — screenshot shows a primarily white background with light blue accents
- ❌ Don't use complex serif typography — screenshot exclusively uses a clean humanist-sans-serif font family
- ❌ Don't use sharp corners on elements — screenshot consistently uses border-radius between 8px and 16px
- ❌ Don't use deep, heavy drop shadows — screenshot uses very light, subtle rgba(0,0,0,0.06) elevation

The system deliberately avoids playful language, complex serifs, deep shadows, and unbordered inputs to maintain its focus on clean, data-driven utility.

## System Prompt (paste into AI tool)

```
You are a UI designer creating a professional, data-driven SaaS interface for domain investors. The design must feel trustworthy, efficient, and clean, utilizing a light mode aesthetic with a white (#FFFFFF) base and soft blue tints (#DBEEF9). Primary actions should use a vibrant cyan-to-purple gradient to draw attention. Use the humanist-sans 'DM Sans' font family for all text, maintaining high legibility for dense data tables. Key rules: maintain an 8px+ border-radius for all cards and buttons, use subtle rgba(0,0,0,0.06) shadows instead of heavy borders for elevation, and ensure all status indicators (like 'Blocked' or 'Adult') are clearly highlighted in a high-contrast cyan. Avoid dark mode, overly casual language, or sharp, boxy interface elements.
```