# Relevance AI · Design system migration spec

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

> The design effectively communicates enterprise readiness and technical sophistication through its restrained yet bold visual language.

## 1. Identity DNA

Like a modern enterprise control tower, this system is built on clarity, not complexity. Its identity is defined by the precise coordination of high-contrast elements and a single, authoritative accent, creating a platform feel that is both scalable and immediately recognizable.

**One-liner:** AI agents that drive business impact, managed by your team
**Keywords:** AI agents · enterprise · automation · collaboration · scale
**Analogy:** A modern enterprise control tower

## 2. Color

The color system operates on a clean white canvas, establishing a foundation of high-contrast readability. Deep navy provides the grounding for text, while a signature vibrant purple is reserved exclusively as a directional signal for key actions and highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F3F4F6` | card background |
| `--bg-quiet` | `#EEF2FF` | quiet area |
| `--ink` | `#0D162F` | body text |
| `--ink-soft` | `#6B7280` | secondary text |
| `--muted` | `#9CA3AF` | placeholder |
| `--muted-soft` | `#D1D5DB` | weak hint |
| `--accent` | `#6056FF` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Clean white canvas with high-contrast dark text and vibrant purple accents for key actions and highlights.

The principle is restraint: a minimalist palette where every color serves a clear, functional purpose in the hierarchy.

## 3. Typography

Typographic voice is divided between a tight geometric sans-serif for authoritative display headings and a clean humanist sans-serif for legible body copy. This pairing establishes a modern, technical tone without sacrificing readability across the interface.

- **Display:** sans-serif
- **Body:** sans-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main hero headline |

**Type rules:**
- Display headings use a tight geometric sans-serif.
- Body text uses a clean humanist sans-serif.
- Monospace is used sparingly for technical elements.
- Letter spacing is generally tight for headings and normal for body.

## 4. Spacing

Spacing follows a strict 8px base grid, creating a consistent and predictable rhythm throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with generous padding for sections.

## 5. Surfaces

Surfaces are defined by depth through subtle, purposeful elevation. Borders are a faint, consistent gray, and shadows are soft, using a signature purple tint to tie interactive elements to the brand's accent color.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
  - rgba(59, 50, 249, 0.25) 0px 1.6px 6.4px 0px
- **Borders:** 1px solid #E5E7EB

## 6. Layout

The layout skeleton is anchored by a centered, commanding hero section. Below it, a multi-column logo grid provides social proof, establishing a spacious, vertically-oriented structure that guides the user's focus downward.

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

**Skeleton:** Centered hero with a multi-column logo grid below.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose. Transitions are smooth, typically between 150-300ms, focusing on elegant state changes rather than decorative animation to maintain professional fluidity.

- **Durations:** micro 150ms · small 220ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover.
  - Opacity changes for interactive elements.

- **Hover:** Subtle color shift or background change.
- **Click:** Immediate feedback with a slight scale or color change.
- **Transition:** Smooth 150-300ms transitions on interactive states.
- **Keyboard:** Standard focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and forward-thinking. Headlines are concise and bold, while calls to action are direct and action-oriented, avoiding jargon and passive language.

- **Tone:** Professional, authoritative, and forward-thinking.
- **Headline style:** Concise, bold, and impactful statements.
- **CTA style:** Direct and action-oriented.
- **Avoid:** Jargon-heavy technical speak. / Passive or weak language. / Overly casual tone.

### Don'ts
- ❌ Don't use a dark theme — screenshot shows a predominantly white background.
- ❌ Don't use serif fonts — screenshot shows clean sans-serif typography.
- ❌ Don't use multi-color gradients — screenshot uses solid purple as the primary accent.
- ❌ Don't use sharp corners — screenshot shows pill-shaped buttons and rounded cards.
- ❌ Don't use dense layouts — screenshot shows generous white space and large headlines.
- ❌ Don't use small, cramped text — screenshot features large, readable display sizes.

The system deliberately avoids dark themes, serif fonts, multi-color gradients, and dense layouts to maintain its core identity of clean, enterprise-ready sophistication.

## System Prompt (paste into AI tool)

```
Relevance AI is an enterprise AI agent platform with a clean, professional SaaS aesthetic. The design uses a white background with deep navy text (#0D162F) and a vibrant purple accent (#6056FF) for key CTAs and highlights. Typography is modern sans-serif, with bold, large headlines that have tight tracking. Critical design principles include generous white space, a strict focus on readability, and a minimalist color palette. Do not use dark themes, serif fonts, or multi-colored gradients. Avoid cluttered layouts; maintain a high-end, enterprise feel with ample padding and clear visual hierarchy.
```
