Soulcraft Identity Guide

Every system
has a soul.

This document defines the visual and verbal identity of Soulcraft. It covers colors, typography, logo, voice, and component patterns used across soulcraftagency.com and all client-facing surfaces. The soul is the system.

Color

Warm. Editorial. Unmistakable.

The palette is light-first. Warm cream paper, ink for type, terracotta as the single accent, with a gold hairline reserved for decorative rules. No secondary accent. No surface gradients. Click any swatch to copy its value.

Foundations
Paper
oklch(96.5% .012 83) · #f6f2ea
Page background
Copy
Paper 2
oklch(93.8% .014 80) · #efe9dd
Alt section band
Copy
Surface
oklch(99.2% .006 83) · #fdfcf8
Cards, inputs
Copy
Rule
oklch(87% .012 75) · #dcd6ca
Hairlines, borders
Copy
Text
Ink
oklch(22% .014 60) · #2b2620
Headings, high-contrast
Copy
Body
oklch(40% .012 58) · #5a534a
Body text
Copy
Muted
oklch(55% .012 60) · #837c72
Secondary text, labels
Copy
Accent
Terracotta
oklch(47% .13 52) · #9d5a37
Links, CTA, emphasis
Copy
Accent Deep
oklch(40% .13 50) · #864428
Accent hover
Copy
Accent Line
oklch(70% .09 72) · #c79a5f
Gold hairline, decorative
Copy
Typography

Two faces. Each with a job.

Playfair Display carries the editorial weight -- soul, character, warmth. Inter does the work. Together they hold precision and poetry in balance.

Playfair Display -- Headings font-family: 'Playfair Display', serif
Agentic marketing
with soul.
Scale. Craft. Identity.
Roman only, never italic -- emphasis comes from weight, accent colour, or a drawn underline.
Inter -- Body & UI font-family: 'Inter', sans-serif
We don't bolt AI onto old processes. We build from the premise that agents do the work, and the soul is what makes that work feel human.
700 600 500 400 300
Element Family Size Weight Color
Hero h1 Playfair Display clamp(44px, 6vw, 72px) 400 --white
Section h2 Playfair Display clamp(28px, 3.5vw, 44px) 400 --white
Card h3 Playfair Display 28px 400 --white
Body paragraph Inter 17px 400 --muted
Hero subtitle Inter 20px 300 --muted
Chapter label Inter 11px 700 --accent
Nav links Inter 13px 500 --muted
Tier name Playfair Display 20px 400 roman --accent
Voice & Tone

The magician at the dinner party.

Wise, not pretentious. Poetic, not flowery. Funny, but never trying too hard. A conversation with someone who knows more than they let on, delivered with warmth and quiet confidence.

Casual
We talk like a person, not a press release. Short sentences. Real words. No jargon that needs a decoder ring.
Example
"The system runs itself. You just set the soul."
Poetic
There's a craft to the words we choose. We're specific, rhythmic, occasionally surprising. Never filler.
Example
"A soul isn't fixed. It changes. It grows. It can be fine-tuned."
Punchy
One idea per sentence. If a word doesn't earn its place, cut it. We trust the reader to keep up.
Example
"We don't bolt AI onto old processes. We build from first principles."
Engaged
We're genuinely interested in what we're building. That curiosity comes through. We're never bored, and it shows.
Example
"This channel barely exists yet, and we're already here."

Word swaps

We have specific language preferences. These aren't suggestions.

brand → identity
journey → path
AI-powered → agentic
brand story → origin

Never use

× Business buzzwords: "circle back," "synergy," "move the needle"
× AI buzzwords: "AI-powered," "leveraging AI," "next-gen"
× Marketing clichés: "journey," "brand," "brand story," "human-centered"
× GrowthX energy: "Expert-Led, AI-Powered Growth" -- exactly what we don't sound like
× Emdashes (--). Use commas, semicolons, colons, or double hyphens (--) instead.
Components

Living elements.

Core UI patterns used across the Soulcraft interface. Hover to see interaction states.

Buttons border-radius: 10px
Cards border-radius: 6px · hover: accent underline

SEO / AEO / GEO

An automated content engine that improves your presence and sentiment. The system runs itself.

Demand Generation

Campaigns and workflows that generate leads. Plugs directly into CRM, email, and social channels.

Badges border-radius: 100px · 11px uppercase
Active New AI Advertising In Progress Recommended
Inputs focus: border-color accent + box-shadow dim
Navigation backdrop-filter: blur(24px)
Soulcraft
What We Do Investment Blog
Pricing Tiers featured: border-color accent
Seed
$2,500/mo
Recommended
Growth
$5,000/mo
Scale
$10,000/mo
Spacing & Layout

Generous. Fluid. Scaled.

Container max-width is 1100px. All spacing uses CSS clamp() for fluid responsiveness. Single breakpoint at 768px.

--space-xs
0.5rem / 8px
--space-sm
1rem / 16px
--space-md
1.5rem / 24px
--space-lg
clamp(2rem → 3rem)
--space-xl
clamp(3rem → 5rem)
--space-section
clamp(5rem → 9rem)
Border Radius 10px  cards
16px  modals
100px badges
Container max-width: 1100px
padding: 0 24px
centered: margin: 0 auto
Breakpoints mobile: 768px
single column
nav collapses
Motion

Purposeful. Never showy.

Animation signals life and state. Entrance reveals use staggered delays. Active elements pulse. Transitions ease at 0.2s. Nothing moves unless it has a reason.

Hover Transition
Simple color and border shift.
No transform, no bounce.
0.2s ease
Heartbeat Pulse
Active agent indicator.
Scale 1 → 1.18, infinite loop.
2s ease-in-out infinite
Staggered Entrance
Items appear with 140ms delay.
translateY 12px → 0.
0.45s ease-out
Card Accent Underline
Hover this card
A terracotta underline fades in.
opacity 0 → 1, no lift.
0.32s ease-out
Quick Reference

Design tokens.

Drop these CSS custom properties into any project to get Soulcraft's visual DNA.

CSS Custom Properties 
/* Soulcraft Editorial Tokens */

/* Palette (OKLCH source of truth) */
--color-paper:       oklch(96.5% 0.012 83);
--color-paper-2:     oklch(93.8% 0.014 80);
--color-surface:     oklch(99.2% 0.006 83);
--color-ink:         oklch(22% 0.014 60);
--color-body:        oklch(40% 0.012 58);
--color-muted:       oklch(55% 0.012 60);
--color-rule:        oklch(87% 0.012 75);
--color-accent:      oklch(47% 0.13 52);
--color-accent-deep: oklch(40% 0.13 50);
--color-accent-line: oklch(70% 0.09 72);

/* Type */
--font-display:      'Playfair Display', serif;
--font-body:         'Inter', sans-serif;

/* Spacing (4pt) */
--space-sm:          16px;
--space-md:          24px;
--space-lg:          48px;

/* Motion & shape */
--ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
--dur-mid:           0.32s;
--radius:            6px;