Design System · v1.0

The Talisman AI brand guide

The single reference for how Talisman AI looks, feels, and speaks — across the website, mobile app, admin portal, documentation, and everything we build next.

Logo

A talisman gem carrying an AI spark. Use the full lockup where space allows; the mark alone for avatars, app icons, and tight spaces.

Talisman AIPrimary lockup

Mark only

Talisman AI

Keep clear space around the mark equal to the gem's height.

Don't recolor, stretch, rotate, or add effects to the logo.

Colors

Brand is indigo — inherited from the mobile app's Material seed (#4F46E5). Semantic tokens adapt automatically across light and dark themes.

Brand — Indigo

50#eef2ff

100#e0e7ff

200#c7d2fe

300#a5b4fc

400#818cf8

500#6366f1

600•#4f46e5

700#4338ca

800#3730a3

900#312e81

950#1e1b4b

Status

Success#16A34A

Warning#D97706

Info#2563EB

Danger#DC2626

Semantic tokens (theme-aware)

--background--foreground--card--muted--muted-foreground--secondary--accent--border--primary--ring

Typography

Geist for everything — geometric, modern, and highly legible. Geist Mono for code, versions, and data.

DisplayOutreach that lands

H1Built for deliverability

H2Smart mailbox rotation

H3AI personalization

BodyEvery message tailored to the prospect — at scale.

SmallFree during Beta · No credit card required

Weights:Regular 400Medium 500Semibold 600Geist Mono 01234

Buttons

One primary action per view. Consistent radius, on-brand focus ring, and a subtle press (scale 0.98).

Cards

Hairline borders, generous padding, and a soft indigo glow on hover. The workhorse surface for features, pricing, and content.

Card title

A short, benefit-led description that explains the value in one line.

Card title

A short, benefit-led description that explains the value in one line.

Card title

A short, benefit-led description that explains the value in one line.

Icons

Lucide (2px stroke) as the single icon set — never emoji. Brand marks (GitHub, X, LinkedIn) ship as custom filled SVGs.

Sizes: 16 / 18 / 20 / 24px. Match the stroke weight to surrounding text; align to the text baseline.

Visual language

Restrained and premium: an indigo aura, a faint dot-grid, hairline borders, and gradient brand text. Depth comes from light, not heavy shadows.

Aura + dot-grid

Gradient text

Screenshot presentation

Always present app screens in a device or browser frame with a soft glow — never a bare image. Data-driven and reusable across pages.

Dashboard — screenshot coming soon

Your outreach at a glance — sends, replies, and account health.

Spacing

A 4/8px rhythm. Sections breathe (80–112px); components stay compact. Consistent gutters via the shared Container.

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

12 · 48px

16 · 64px

Animation

Motion conveys meaning, never decoration. Subtle, fast, and always respectful of reduced-motion preferences.

Micro-interactions: 150–300ms, ease-out on enter.

One or two animated elements per view — no more.

Animate transform & opacity only (never width/height).

Fade-up reveals: 12px, staggered 30–50ms.

Exit faster than enter (~60–70%).

Honor prefers-reduced-motion everywhere.

Voice & tone

Talisman AI sounds like a sharp, trustworthy operator — modern and AI-powered, never hypey.

Clear and confident

Hypey or salesy

Benefit-led (deliverability, replies)

Feature-dumping jargon

Human and direct

Corporate and vague

Trustworthy about data & privacy

Over-promising results

Writing style

Practical rules for copy across the product and marketing.

Lead with the outcome, then the how.
Short sentences. Active voice. Second person ("you").
Sentence case for headings and buttons — not Title Case.
Say "cold email", "mailbox", "campaign", "prospect" consistently.
Numbers over adjectives when we can prove them.
No exclamation marks in product copy; let the value speak.