---
name: Automator Community
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#374151"
  secondary: "#4B5563"
  tertiary: "#049FCE"
  neutral: "#9CA3AF"
  bg-soft: "#FBFBFB"
  bg-quiet: "#DBEEF9"
  muted-soft: "#D1D5DB"
  line: "rgba(209, 213, 219, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 35px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 600
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A professional domain marketplace tool for discovering and securing expired domains

*A clean, data-rich financial dashboard tailored for domain investors*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#374151`)** — uses `ink` token
- **Secondary text (`#4B5563`)** — uses `ink-soft` token
- **Accent (`#049FCE`)** — uses `accent` token
- **Muted (`#9CA3AF`)** — uses `muted` token
- **Borders (`rgba(209, 213, 219, 1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Standard 4px grid system with 16px base padding for cards

## Elevation & Depth

- 0px 4px 8px 0px rgba(0, 0, 0, 0.06)
- 0px 1px 2px 0px rgba(0, 0, 0, 0.06)
- Borders: 1px solid #D1D5DB

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Rounded pill buttons, primary uses cyan-to-purple gradient or solid cyan, secondary uses white with subtle border
- **card:** Rounded containers with subtle shadows or light background tints, used for grouping data blocks
- **chip:** Inline badges for metadata (e.g., status tags), solid background with high-contrast text
- **input:** Clean bordered inputs with 16px padding, transitioning on focus
- **hero:** Split card layout combining a high-contrast banner (gradient background) with a soft-text content block below

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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