Chatterkick β€” Brand & Design

The system
behind the brand.

Colors, type, components, and kits. Everything the Chatterkick team needs to build on-brand, consistently β€” without starting from scratch.

Browse Website Kit Read the Docs

Foundation

Design Tokens

All colors, typography, spacing, radii, and shadows live in a single CSS file. Import it before anything else and every value stays consistent across every surface.

View Token File
/* Core palette */ --ck-pink-700: #B11871; --ck-black: #000000; --ck-white: #ffffff; --ck-purple: #1a1a5e; /* Typography */ --font-sans: 'Montserrat', sans-serif; --font-display: 'TAN Aegean', serif; /* Spacing (8pt grid) */ --space-1: 8px; --space-2: 16px; --space-4: 32px; --space-6: 48px; /* Usage */ @import 'colors_and_type.css';

Components

Component Library

Individual component previews. Each card opens a live rendered reference you can inspect directly in the browser.

🎨 Primary Colors Black, pink, white, and the full brand palette with usage rules. 🌸 Pink Scale Full pink spectrum from tint to deep. Rules for when to use each step. ⬜ Neutrals Grays, borders, and surface colors for light and dark contexts. ✨ Accent Colors Deck-only accents: yellow, lime, cyan, mint. Presentation surfaces only. β—‘ Semantic Pairs Good, watch, and bad as tint + legible text. Plus the chart series doubling as report accents. Aa Type Scale H1–H6, body, label, and eyebrow sizes with weights and tracking. ΒΆ Content Type Scale The reading scale for reports, research, guides, and dense layouts. Six steps, 1.25 contrast minimum. T Display Type TAN Aegean usage: the one-word moments that define the brand's editorial rhythm. Ff Type Pairing Montserrat + TAN Aegean combinations. How the two fonts work together. β–ͺ Buttons Primary (pink fill), ghost, and link variants. Sharp corners β€” a brand signature. β—¨ Button Component The reusable React component behind those styles. Four locked variants: primary, yellow, ghost, light. β–¦ Cards Light, dark, and pink card variants with hover states and shadow rules. πŸ’Š Pills & Chips Platform chips (TikTok, Meta, etc.) and deck highlight stamps. ⬚ Forms Input fields, labels, error states, and the newsletter capture pattern. γ€° Motifs Squiggle SVGs, underline accents, and other decorative brand elements. ↔ Spacing 8pt grid with token reference. Section padding, gutters, and content widths. β—± Radii & Shadows Card radii (14px), image tiles (22px), buttons (0px). Shadow levels for light and dark. β—‰ Logo & Icon All logo lockups with usage rules. When to use horizontal vs. bubble mark.

UI Kits

Full Surface Kits

Production-ready component assemblies for each major Chatterkick surface. Open, inspect, and copy what you need.

Website Kit Marketing Site Full hi-fi marketing site: hero, nav, service cards, testimonials, stats band, newsletter capture, and footer β€” all on-brand and click-through. Open Kit β†’ Dashboard Kit Client Dashboard Reporting dashboard layout with KPI cards, chart placeholders, and the full nav shell. Replace placeholders with live data. Open Kit β†’ Executive Social Kit Exec Social Report The standardized monthly LinkedIn report for an executive: KPI strip, content performance, top posts, who's engaging, profile-view quality, and next moves. Content lives in one data file. Open Kit β†’

Templates

Fill-in-the-Blank Reports

Claude Design templates. Unlike the kits, these declare the fields that change each time (client, period, title) so you fill them in rather than editing markup. Open one to see it rendered with sample content.

Template Executive Social Report Same report as the Executive Social kit, as a template. Exec name, title, platform and period are fields; post thumbnails are drop targets; the profile-views section can be switched off. Styling comes from the kit, so the two cannot drift. Open Template β†’ Template Research Report Long-form audience and messaging research on a light paper surface. Numbered sections, theme cards with copy examples, and image slots for the creative that ran. Open Template β†’

Presentation System

Slide & Deck Kit

Every slide type used in Chatterkick's monthly client reports, built as reusable React components. Cover, executive summary, data slides, appendix, and more.

Report Slides Full Slide Kit 16 slide types: cover, quarterly insight, summary highlights, executive summary, discoverability, AI visibility, demographics, benchmarks, top content, messaging, action items, appendix, resources, and reach-out slides. Open Deck β†’ Title Kit Title Slides Standalone title and cover slide variants. Exported and ready to use without the full React build environment. Open Slides β†’

Team Workflow

Requesting Changes

The design system lives in GitHub. Here's how to get something added, changed, or fixed.

πŸ› Found a bug? Open a GitHub Issue on the repo. Describe what's wrong and include a screenshot if you can.
πŸ’‘ New component needed? Open a GitHub Issue with the label "component request." Describe where it'll be used and link any examples.
🎨 Token update? Color, type, or spacing changes go through Beth. Tag her in the Issue β€” these affect every surface.
πŸ“ Add new assets? Photos and logos go in assets/. Open a PR with the files and a short description of intended use.