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

Dark. Gold. Nothing else.

The palette is dark-first. Nearly black backgrounds, warm gold as the single accent. No secondary accent. No surface gradients. Click any swatch to copy the hex.

Foundations
Black
#0a0a0a
Page background
Copy
Dark
#111111
Section backgrounds
Copy
Card
#161616
Card surfaces, modals
Copy
Border
#222222
Borders, dividers
Copy
Text
White
#f0f0f0
Headings, emphasis
Copy
Text
#d0d0d0
Body text
Copy
Muted
#555555
Secondary text, nav
Copy
Accent
Gold
#c8a97e
CTAs, labels, logo, hover
Copy
Gold Dim
rgba(200,169,126,.12)
Tint, insight boxes
Copy
Gold Glow
rgba(200,169,126,.25)
Radial glow, hero
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.
Weight 400 only -- the delicacy of the serifs provides natural emphasis.
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 italic --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: 16px · hover: translateY(-4px)

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 Bar
Hover this card
Top accent bar scales in.
scaleX 0 → 1.
0.4s ease
Quick Reference

Design tokens.

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

CSS Custom Properties 
/* Soulcraft Design Tokens */

/* Backgrounds */
--black:        #0a0a0a;
--dark:         #111111;
--card:         #161616;
--border:       #222222;

/* Text */
--white:        #f0f0f0;
--text:         #d0d0d0;
--muted:        #555555;

/* Accent */
--accent:       #c8a97e;
--accent-dim:   rgba(200,169,126,0.12);
--accent-glow:  rgba(200,169,126,0.25);

/* Shape */
--radius:       16px;
--radius-sm:    10px;
--radius-pill:  100px;

/* Typography */
--font-serif:   'Playfair Display', serif;
--font-sans:    'Inter', sans-serif;