# Everafter · Design system migration spec

> Source: https://www.everafter.ai  ·  Curated by OpenDesign  ·  en

> Worth including as a strong example of modern premium B2B SaaS design, combining bold serif typography with a dark-mode-first aesthetic.

## 1. Identity DNA

The Everafter design system is built for a platform where dynamic, AI-native intelligence meets a scalable, modern aesthetic. It establishes a clear, premium language for a B2B SaaS product, grounding complex capability in a clean, confident interface.

**One-liner:** An AI-native platform for scalable, real-time customer experience management.
**Keywords:** Customer Experience · Scalable · AI-powered · Dynamic · Modern
**Analogy:** A modern, premium B2B SaaS platform for customer success.

## 2. Color

The color system operates on a principle of high-contrast dark mode, anchored by a deep purple primary field. This creates a strong foundation for a vibrant violet accent and soft pastel highlights on lighter surfaces, ensuring clarity and visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#221437` | main background |
| `--bg-soft` | `#FDFEFF` | card background |
| `--bg-quiet` | `#F8F5FF` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#616161` | placeholder |
| `--accent` | `#793CFB` | single accent |
| `--line` | `rgba(34,20,55,1)` | divider |

**Color principle:** High-contrast dark mode with a vibrant violet accent and soft pastel accents for light surfaces.

The palette prioritizes legibility and depth, using contrast not just for style but for functional information structure.

## 3. Typography

The typographic voice pairs a high-contrast transitional serif for headlines with a geometric humanist sans-serif for body text. This contrast establishes a premium, authoritative tone for titles while maintaining exceptional clarity for extended reading.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 600 | -1px | Hero headlines and major section titles |
| body | 18px | 1.4 | 400 | 0px | Primary body text and descriptions |

**Type rules:**
- Headlines use a high-contrast transitional serif (Moret) for a premium feel.
- Body text uses a geometric humanist sans (Poppins) for clarity.
- Use sentence case for navigation and most UI elements.

## 4. Spacing

A consistent 48px rhythm between major sections establishes a measured, open cadence throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of 48px spacing between major layout sections.

## 5. Surfaces

Surface depth is communicated through soft, diffused shadows and precise borders. The treatment avoids harsh edges, opting for rounded corners and light, layered elevation.

- **Radius:** sm 8px · md 12px · lg 24px · pill 999px
- **Shadows:**
  - 0px 1px 2px rgba(8, 8, 8, 0.08)
  - 0px 4px 4px rgba(8, 8, 8, 0.08)
  - 0px 8px 12px rgb(248, 245, 255)
- **Borders:** 1px solid rgba(34,20,55,1) for dark mode elements, or light gray for light mode.

## 6. Layout

The core layout is a generous, single-column structure centered on the page with ample whitespace. Hero sections employ a split composition, balancing bold serif typography with product imagery.

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

**Skeleton:** A single-column centered layout with generous whitespace and distinct hero sections.

## 7. Motion & Interaction

Motion philosophy favors subtlety and fluidity, focusing on smooth opacity transitions for state changes. Interactive elements receive gentle scale transforms, creating a responsive feel without visual noise.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 0.48, 0.23, 0.92)`
- **Patterns:**
  - Smooth opacity transitions for hover states and page loads.
  - Subtle scale transforms on interactive elements.

- **Hover:** Subtle background color changes or opacity shifts on buttons and links.
- **Click:** Immediate visual feedback with slight scale or color shifts.
- **Transition:** Smooth 0.2s to 0.4s transitions for most interactive states.
- **Keyboard:** Standard tab-based navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and forward-thinking, avoiding passive constructions and excessive jargon. Language is direct and action-oriented, using sentence case for most interface elements.

- **Tone:** Professional, confident, and forward-thinking.
- **Headline style:** Bold, assertive statements using a serif typeface for impact.
- **CTA style:** Direct and action-oriented (e.g., 'Get a Tailored Walkthrough').
- **Avoid:** Passive voice / Excessive jargon / All-caps headings

### Don'ts
- ❌ Don't use a monospace font — screenshot shows a serif for headlines and sans-serif for body.
- ❌ Don't use bright neon colors — screenshot shows a deep violet accent (#793CFB) and pastel accents.
- ❌ Don't use sharp corners — screenshot shows pill-shaped buttons (radius 999px) and rounded cards.
- ❌ Don't use a dark mode-only palette — screenshot shows a white/light mode for internal UI components.
- ❌ Don't use heavy drop shadows — screenshot shows soft, diffused shadows for elevation.
- ❌ Don't use all-caps for primary headlines — screenshot shows sentence case or title case.

The system deliberately rejects monospace fonts, sharp corners, neon colors, and heavy drop shadows, maintaining a focused, premium aesthetic.

## System Prompt (paste into AI tool)

```
EverAfter is a premium B2B SaaS platform for AI-native customer experience management. The design features a deep dark purple (#221437) primary background with a vibrant violet (#793CFB) accent. Typography uses a high-contrast transitional serif (Moret) for bold headlines and a clean humanist sans (Poppins) for body text. Layout is spacious with generous 48px+ vertical gaps. Key components include pill-shaped buttons, rounded cards with soft shadows, and light-themed internal UI mockups. Critical donts: avoid monospace fonts, avoid sharp corners, avoid overly bright or neon colors, avoid heavy solid borders, avoid all-caps for headlines, and avoid cluttered layouts. The voice is professional and confident.
```