REFERENCE · PUBLIC

Emmpa design system

The visual and editorial system behind every Emmpa surface — marketing site, sales deck, client email templates, case-study one-pagers. Built for a performance-based email & SMS retention agency for Shopify brands.

VERSION · v1.2 UPDATED · APRIL 2026 REPO · GITHUB →
01 · VOICE

Confident and precise. Numbers do the talking.

The voice is built on four rules and one instinct. Numbers over adjectives. "We" — not "I". Second person for promises, direct imperatives for CTAs. No buzzwords, ever. The instinct: light dry wit is welcome. Hype is not.

On voice

  • Numbers over adjectives. +35% to MRR in 90 days, not "huge growth". $42 back per $1 spent, not "amazing results".
  • Claims must be attributable. Stats cite source — SOURCES · LITMUS 2023 · DMA · NIELSEN.
  • Brevity. Hero copy caps at ~12 words. Body paragraphs rarely exceed three lines.
  • Casing. Sentence case for prose and headlines. ALL CAPS reserved for mono labels (eyebrows, nav meta, timestamps) — tracked at ~0.14em.
  • Emoji — no. Not in copy, not in UI, not in slides. Ever.

Banned words

These never appear in Emmpa copy — not in hero, not in body, not in slides:

unleash · skyrocket · revolutionary · passionate · game-changer · leverage · synergy · disrupt · next-gen

On voice — examples

"Adding +35% to Klaviyo revenue, in the next 90 days."
"We don't add ad spend. We make the channel you already own do more."
"Three options. No hidden fees."
"If we don't hit +25%, we work at half price until we do."
02 · COLORS

Two canvases. One accent.

Deep ink #0E0E10 for dark surfaces. Warm cream #F4F1EC for everything that would otherwise be white. Never #FFFFFF — it reads sterile against this type system. Electric copper #C66A2E is the single accent; one per surface, no more.

03 · TYPOGRAPHY

Editorial serif. Humanist sans. Tabular mono.

Display in GT Sectra (Source Serif 4 as Google Fonts substitute) — all headlines, large numerals in serif contexts, and italic emphasis in copper. Body in Söhne (Inter Tight substitute) for UI, paragraphs, buttons. Mono is JetBrains Mono — every numeral, every metric chip, every eyebrow. font-variant-numeric: tabular-nums by default. Non-negotiable.

04 · SPACING & RADII

Generous whitespace. Sharp or lightly-rounded corners.

Page side margins at least 40px (small) / 96px (slide) / 120px (hero). Max prose column ~64ch. Corners stay small: 4px buttons, 4–6px cards, 2px metric chips. Never 12px+ radii — no pillow cards. Shadows minimal; depth comes from contrast and whitespace.

05 · COMPONENTS

Small set, high specificity.

Buttons in two weights: ink-on-cream primary, ghost underlined. Cards are hairline border + cream surface — no shadow, no hover scale. Featured cards get a 1.5px ink border and a pinned MOST POPULAR mono tag. Press darkens 120ms. Hover transitions 120–180ms ease-out.

06 · BRAND

Geometric e. Serif word. Mono "pro".

The mark is a single geometric e glyph, available in ink, cream, and copper. The wordmark is set in the display serif; the .pro suffix is always mono copper. Minimal iconography — single-weight 1.5–1.75px stroke, Lucide set via CDN. Never emoji. Never custom illustrations.

07 · UI KITS

The system, put to work.

A full marketing-site homepage and a six-slide sales deck, both built entirely from tokens in colors_and_type.css. Copy patterns from these when starting a new surface.

MARKETING SITE · HOMEPAGE OPEN FULL PAGE →

Nav · hero · partner strip · three-card proof · services · guarantee · footer

08 · SLIDES

Sales deck, six templates.

Title · big-number · comparison · quote · pricing · close — sized at 1200×675 for Google Slides / Keynote drop-in. Big numerals occupy up to 50% of slide height, treated as hero graphics.

SALES DECK · SIX SLIDES OPEN FULL PAGE →

Title · big-number · comparison · quote · pricing · close — 1200×675 each

09 · DOWNLOADS

Take what you need.

Link the token stylesheet directly, or grab the logo variants and partner marks. All SVG where possible. No licensed font files included — GT Sectra and Söhne are licensed commercial fonts; the system currently renders via their Google Fonts substitutes.

TOKENS
LOGO MARK
WORDMARK
LOCKUP & MASTERS
PARTNER MARKS
  • partner-klaviyo.webp
    Klaviyo partner mark
    DOWNLOAD →
  • partner-shopify-plus.webp
    Shopify Plus partner mark
    DOWNLOAD →
10 · AI PROMPT

Paste this into any AI assistant.

A compact brief that encodes the voice rules and visual system. Drop it at the top of any ChatGPT, Claude, or Cursor session before asking for copy, slides, or components — the output will come back in Emmpa's voice and on-palette.

PROMPT · EMMPA SYSTEM BRIEF 
You are writing for EMMPA — a performance-based email & SMS retention agency for Shopify brands. Follow this brief on every output.

VOICE
- Numbers over adjectives. "+35% in 90 days", not "huge growth".
- "We" for the agency, never "I". Second person for promises, imperatives for CTAs.
- Claims cite sources — e.g. "SOURCE · LITMUS 2023".
- Sentence case for prose and headlines. ALL CAPS (mono, tracked 0.14em) only for labels, eyebrows, timestamps.
- Brevity: hero copy ≤12 words. Body paragraphs ≤3 lines.
- Never use: unleash, skyrocket, revolutionary, passionate, game-changer, leverage, synergy, disrupt, next-gen.
- No emoji. Ever.

VISUAL SYSTEM
- Canvases: deep ink #0E0E10 (dark) or warm cream #F4F1EC (light). Never #FFFFFF.
- Single accent: electric copper #C66A2E. One per surface.
- Display type: GT Sectra (fallback Source Serif 4) — editorial serif, italic emphasis in copper.
- Body type: Söhne (fallback Inter Tight) — humanist sans.
- Numerals: JetBrains Mono, tabular-nums, always. Units (+, %, $, K) tinted copper.
- Spacing: section padding 96–128px, card internal 24–32px. Generous whitespace.
- Corners: 0–6px (max 10px). Never 12px+ — no pillow cards.
- Shadows minimal; depth comes from contrast and whitespace.
- Iconography: Lucide, 1.5–1.75px stroke. Never custom illustrations.

TOKENS & REFERENCE
- CSS tokens: https://emmpa.pro/design-system/colors_and_type.css (import directly).
- Live system: https://emmpa.pro/design-system.