Brand Guide | Claude Code for Marketers

# Philosophy

Design Motifs

The visual identity is built on a terminal-native aesthetic blended with warm, approachable typography. Every detail reinforces the idea that powerful tools don't have to feel cold.

> Terminal CLI Aesthetic

Monospace headings, prompt characters, terminal window mockups, and a blinking cursor create a developer-tool feel that's still accessible to non-technical users.

> Master Claude Code in 15 minutes a day

# Markdown-Inspired Syntax

# Recent Posts

Aa Warm Serif + Sharp Mono

Body text uses Source Serif 4 for readability and warmth, while JetBrains Mono handles all headings, UI, navigation, and code. The pairing creates a literate-programming vibe.

◑ Light / Dark Duality

Full theme toggle with smooth 0.3s transitions. The dark palette uses warm, stone-toned blacks (#0C0A09), never pure black. Light mode uses creamy off-whites (#FAFAF8).

# Palette

Color System

A warm, earth-toned palette anchored by terracotta accents. Colors adapt between light and dark themes via CSS custom properties.

# Light Theme — :root

Background

#FAFAF8

--color-bg

Background Secondary

#F0EFEB

--color-bg-secondary

Text Primary

#1C1917

--color-text

Text Secondary

#57534E

--color-text-secondary

Accent (Terracotta)

#DA7756

--color-accent

Accent Hover

#C4684A

--color-accent-hover

Border

#E7E5E0

--color-border

Code Background

#292524

--color-code-bg

# Dark Theme — [data-theme="dark"]

Background

#0C0A09

--color-bg

Background Secondary

#1C1917

--color-bg-secondary

Text Primary

#FAFAF9

--color-text

Text Secondary

#A8A29E

--color-text-secondary

Accent (Peach)

#F2A688

--color-accent

Accent Hover

#DA7756

--color-accent-hover

Border

#292524

--color-border

Code Background

#1C1917

--color-code-bg

# Terminal Traffic Lights

Close

#FF5F56

Minimize

#FFBD2E

Maximize

#27CA40

# Type

Typography

Two typefaces, clearly divided by role. JetBrains Mono owns structure and UI. Source Serif 4 owns readability and content.

JetBrains Mono Headings, navigation, buttons, labels, code

Claude Code for Marketers

AI superpowers for marketers. No coding required.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+-=[]{}|;:',.<>?

Regular 400

Body mono, inputs, meta

Medium 500

Buttons, nav links

Semibold 600

Headings, logo

Bold 700

Lesson numbers

Source Serif 4 Body text, article content, descriptions

for Marketers

Join our free 7-day email course and learn how to use Claude Code for your marketing work.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+-=[]{}|;:',.<>?

Regular 400

Body text, paragraphs

Regular 400 Italic

"for Marketers" in H1

Bold 700

Strong / emphasis

# Type Scale

H1 (hero)

Claude Code

44px / 600 / -0.88px
Line-height: 1.15

H1 (post)

Blog Post Title

36px / 600 / -0.72px
Line-height: 1.25

H1 (start)

$ ./start-here.sh

28px / 600 / -0.56px
Line-height: 1.3

H2

# Recent Posts

20px / 600 / -0.4px
Line-height: 1.3

H3

Blog Card Title

17.6px / 600 / -0.35px
Line-height: 1.3

Body

Body text in Source Serif 4

17px / 400 / normal
Line-height: 1.7

Content

Article paragraph text

16.8px / 400 / normal
Line-height: 1.8

Nav Logo

> Claude Code for Marketers

15.2px / 600 / -0.3px
Line-height: 1.7

Button

Send me the free course

14.4px / 500 / normal

Code Inline

claude --help

14.28px (0.84em) / 400

Nav Link

Use Cases

13.6px / 500 / +0.27px

Footer

12.8px / 400 / normal

# UI

Components

Every interactive element rendered with actual brand styles. All dimensions, radii, and padding values are extracted directly from the live site.

$ claude --help

Welcome, Marketer.

Terminal Window

bg: --color-code-bg • radius: 8px
shadow: 0 8px 32px rgba(0,0,0,0.2)
border: 1px solid --color-border
max-width: 320px • font: 13.6px mono

Start Here

Buttons

CTA: 14.4px/500, pad: 12px 20px, radius: 6px
Nav pill: 13.6px/600, pad: 6.4px 12px, radius: 4px
bg: --color-accent • text: --color-code-bg
transition: background-color 0.2s

Email Input

font: 14.4px JetBrains Mono / 400
pad: 12px 16px • radius: 6px
border: 1px solid --color-border
focus: border-color --color-accent
transition: border-color 0.2s

The terminal looks intimidating, but it's just a textbox.

Blockquote

border-left: 3px solid --color-accent
bg: --color-bg-secondary
pad: 16px 20px • radius: 0 8px 8px 0
font: 16.8px Source Serif 4 / line-height 1.8

Signup / CTA Box

bg: --color-bg-secondary • border: 1px solid --color-border • radius: 8px • pad: 24px • margin: 32px 0
Header: mono 14px/600 with ">" prompt • Description: serif/secondary color • Form: flex row with gap 8px

How I automated my email marketing

I used to put off promoting my blog posts because the context switch was just enough friction to kill momentum.

Feb 3, 2026

Blog Post Card

border: 1px solid --color-border • radius: 8px
pad: 20px • hover: border-color --color-accent
title: mono 17.6px/600 • desc: serif/secondary
time: mono 13.6px/secondary • transition: 0.2s

01

Don't Be Scared of the Terminal

The terminal looks intimidating, but it's just a textbox.

Lesson Card (Start Here)

display: flex • gap: 16px • pad: 16px 20px
border: 1px solid --color-border • radius: 8px
number: mono 20px/700 in --color-accent
hover: border-color --color-accent

Run claude --help to see all available commands in your terminal.

Inline Code

font: 14.28px (0.84em) JetBrains Mono / 400
bg: --color-code-bg • color: --color-code-text
pad: 3.2px 6.4px • radius: 4px
border: 1px solid --color-border

View all posts →

Arrow Link

font: 13.6px mono / 500 / +0.27px tracking
color: --color-accent • no underline
arrow icon suffix • transition: color 0.2s

# Motion

Animations & Transitions

Subtle motion that reinforces the terminal metaphor. All transitions use ease timing with short durations to keep interactions feeling responsive.

Cursor Blink

Terminal cursor animation used in the navbar logo and hero. Opacity toggles 1 → 0 → 1 on a 1s infinite loop.

@keyframes blink { 50% { opacity: 0 } }

Fade In Up

Content entrance animation. Elements translate 10px upward while fading from 0 to full opacity.

@keyframes fadeInUp { from { opacity:0; translateY(10px) } }

Hover Transitions

All interactive elements use consistent transition durations. Hover the square to preview.

background-color: 0.2s (buttons)
color: 0.2s (links)
border-color: 0.2s (inputs, cards)

Theme Transition

The body element transitions both background-color and color over 0.3s when toggling between light and dark themes.

transition: background-color 0.3s, color 0.3s

# Layout

Spacing & Layout

A constrained, centered layout with generous vertical rhythm. The max-width keeps reading comfortable while spacing scales consistently.

Token	Value	Usage
--max-width	820px	Content container, nav
section-gap	64px	Between major sections
component-gap	40px	Terminal to heading, heading to content
card-margin	32px	Signup box margin
card-padding	24px	Signup box, footer inner
content-gap	24px	Between paragraphs, h2 margin-bottom
element-gap	16px	H1 margin-bottom, lesson card gap
input-padding	12px 16px	Text inputs vertical/horizontal
btn-padding	12px 20px	Primary CTA button
nav-pill-padding	6.4px 12px	Start Here nav button
inline-code-pad	3.2px 6.4px	Inline code snippets

# Border Radii

Value	Usage	Preview
8px	Cards, terminal window, signup box, blockquote (right side)
6px	CTA buttons, email inputs
4px	Nav pill button, inline code
50%	Theme toggle button, terminal dots

# Reference

CSS Custom Properties

The complete token system. Copy these variables directly into any project to match the brand.

Variable	Light Value	Dark Value	Role
--color-bg	#FAFAF8	#0C0A09	Page background
--color-bg-secondary	#F0EFEB	#1C1917	Cards, signup, blockquotes
--color-text	#1C1917	#FAFAF9	Primary text
--color-text-secondary	#57534E	#A8A29E	Muted text, descriptions
--color-accent	#DA7756	#F2A688	CTAs, links, accents
--color-accent-hover	#C4684A	#DA7756	Hover state for accent
--color-border	#E7E5E0	#292524	Borders, dividers
--color-code-bg	#292524	#1C1917	Code blocks, terminal
--color-code-text	#FAFAF9	#FAFAF9	Code text (both themes)
--font-mono	"JetBrains Mono", "SF Mono", "Fira Code", monospace		UI typeface
--font-body	"Source Serif 4", Georgia, "Times New Roman", serif		Body typeface
--max-width	820px		Content max-width
--scanline-opacity	0	0.03	CRT scanline overlay (dark only)