CURATED · OPEN · FREE

Everafter

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

SaaSAICleanBold TypographyPremium

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://www.everafter.ai

📦 Browse pack contents →

Identity DNA

Customer ExperienceScalableAI-poweredDynamicModern

A modern, premium B2B SaaS platform for customer success.

Color

#793CFBAccent

#FFFFFFInk

#333333Ink soft

#221437BG

#FDFEFFBG soft

#F8F5FFBG quiet

#616161Muted

rgba(34,20,55,1)Line

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

Typography

transitional-serif · humanist-sans

display56px · 600
body18px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent use of 48px spacing between major layout sections.

Surfaces

sm · 8px

md · 12px

lg · 24px

pill · 999px

1px solid rgba(34,20,55,1) for dark mode elements, or light gray for light mode.

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

200msmicro

400mssmall

800msmedium

cubic-bezier(0.22, 0.48, 0.23, 0.92)easing

Smooth opacity transitions for hover states and page loads. · Subtle scale transforms on interactive elements.

Subtle background color changes or opacity shifts on buttons and links. · Immediate visual feedback with slight scale or color shifts.

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.

Voice & Don'ts

Tone Professional, confident, and forward-thinking.
Headlines Bold, assertive statements using a serif typeface for impact.
CTAs Direct and action-oriented (e.g., 'Get a Tailored Walkthrough').

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.
Avoid: Passive voice
Avoid: Excessive jargon
Avoid: All-caps headings

Inside the pack — real screenshots

Everafter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko