---
name: Everafter
description: "Worth including as a strong example of modern premium B2B SaaS design, combining bold serif typography with a dark-mode-first aesthetic."
version: alpha

colors:
  background: "#221437"
  primary: "#FFFFFF"
  secondary: "#333333"
  tertiary: "#793CFB"
  neutral: "#616161"
  bg-soft: "#FDFEFF"
  bg-quiet: "#F8F5FF"
  line: "rgba(34,20,55,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

An AI-native platform for scalable, real-time customer experience management.

*A modern, premium B2B SaaS platform for customer success.*

## Colors

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

- **Background (`#221437`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#793CFB`)** — uses `accent` token
- **Muted (`#616161`)** — uses `muted` token
- **Borders (`rgba(34,20,55,1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent use of 48px spacing between major layout sections.

## Elevation & Depth

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

## Shapes

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

## Components

- **button:** Primary buttons are pill-shaped with a solid violet (#793CFB) background and white text. Secondary buttons are outlined with white borders.
- **card:** Rounded rectangular cards with subtle shadows, used to showcase product interfaces.
- **chip:** Small, pill-shaped tags with light backgrounds and text labels (e.g., 'Success Plan').
- **input:** Clean, outlined input fields with rounded borders.
- **hero:** A split layout with bold serif typography on one side and a product screenshot on the other, set against a dark background.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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