Archetype
The Editor
Curated, intentional, refined. You don't shout — you compose. Every element earns its place, mirroring how clients experience your work: deliberate, not noisy.
Christian Schmitt
Editorial warmth — a personal brand built on distinctive typography, earthy tones, and calm confidence.
01 — Brand essence
Personal, not corporate
This identity positions you as a thoughtful creative — someone who leads with craft and clarity. The serif carries personality; the sans-serif keeps things readable. The palette feels like quality paper, ink, and open sky.
Emotional tone
Warm authority
Deep brown signals substance and reliability. Soft blue adds openness and calm. Together they say: competent, approachable, human — not cold or generic.
Differentiator
Editorial craft
PP Editorial New is distinctive enough to be remembered after one visit (mere exposure builds preference). Helvetica stays invisible so your voice — not the typeface — does the work in body copy.
02 — Design psychology
Why this system works
Good branding isn't decoration — it's decision architecture. These principles explain how visual choices influence perception and memory.
Mere exposure effect
Consistency builds trust
Repeated use of the same colors, type, and spacing makes your brand feel familiar and safe. Apply this system everywhere — Webflow, social, decks — so recognition compounds over time.
Von Restorff effect
Accent with intention
Soft blue (#9EC6F1) stands out against warm cream and brown because it breaks the warm palette. Use it sparingly for highlights — one accent per viewport keeps attention focused, not scattered.
Cognitive fluency
Easy to process = trustworthy
High contrast brown-on-cream text (13.6:1) reduces mental effort. Clear hierarchy — large serif headlines, calm sans body — lets visitors grasp your message in seconds. Complexity erodes confidence.
Peak–end rule
Design memorable moments
Reserve PP Editorial New italic and soft blue backgrounds for hero lines, pull quotes, and thank-you states. People remember the peak and the ending — make those moments visually distinct.
Paradox of choice
Limit the palette
Three core colors plus derived tokens prevent visual noise. Fewer options mean faster decisions for you and clearer signals for your audience. Don't introduce new accent colors without strong reason.
Pratfall effect
Warmth over perfection
Cream backgrounds and earthy brown feel human and tactile — not sterile white and pure black. A slightly imperfect, editorial aesthetic can increase likability compared to overly polished corporate design.
03 — Color system
Earth, paper, sky
Warm neutrals carry the brand. Blue provides calm contrast. On white or lighter backgrounds, always use deep sky (#4A7FA8) for readable blue UI — links, labels, icons, and chart keys. Reserve sky (#9EC6F1) for fills, washes, and wordmark italic.
Off-white
#F8F3EF
Primary background. Warm cream — never pure white for full-page layouts.
Espresso
#481701
Primary text, headings, strong UI. Replaces black for a softer, warmer feel.
Sky
#9EC6F1
Soft accent — tags, highlight blocks, decorative backgrounds. Not for small text on cream.
Deep sky
#4A7FA8
Links, buttons, interactive states. Readable on off-white backgrounds.
Umber
#6B4423
Secondary text, subtitles, supporting copy. Same family as espresso, less intense.
Sand
#E8DFD6
Borders, dividers, subtle separators. Keeps structure without harsh lines.
Midnight brown
#2E1200
Dark sections, footers, inverted layouts. Deeper than espresso — still warm.
White
#FFFFFF
Cards and elevated surfaces only. Creates subtle depth against cream backgrounds.
Blue scale — 9 steps
Ton-in-ton from lightest to darkest. Step 5 is your brand sky (#9EC6F1). Step 7 is for links and CTAs. Click any swatch to copy the hex.
Brown scale — 9 steps
Warm earthy tones from cream to espresso. Step 1 matches your off-white background. Step 8 is primary text. Step 9 is for dark sections and footers.
| Token | Use for | Avoid |
|---|---|---|
| Off-white | Page backgrounds, large areas | Small text (too light as foreground) |
| Espresso | Headlines, body text, primary buttons | Large solid fills (too heavy) |
| Sky | Fills, tag backgrounds, opacity washes, wordmark italic | Text or icons on off-white, white, or light tans (use deep sky instead) |
| Deep sky | Links, CTAs, eyebrows, icons, chart keys on light surfaces | Replacing espresso for headings; large solid fills |
On light surfaces → deep sky
Any time the background is off-white (#F8F3EF), white, or a light scale step
(brown 1–4, blue 1–4), blue foregrounds must use
--color-accent-on-light (deep sky #4A7FA8). Sky blue is decorative
only — except the wordmark italic “Schmitt”, which stays sky on cream by design.
Deep sky on cream — links & labels
Sky on cream — too light for UI text
Dark band example
Inverted sections create rhythm and mark transitions — ideal for footers, CTAs, or portfolio case-study closings. Pair cream text with soft blue links.
Back to top →04 — Typography
Voice in type
PP Editorial New owns the stage at large sizes. Helvetica carries everything functional — navigation, paragraphs, labels, and UI.
PP Editorial New — Headings
Christian Schmitt
Craft with intention.
Wordmark lockup: Christian in PP Editorial New Regular (espresso). Schmitt in PP Editorial New Italic (sky blue #9EC6F1). Always keep this pairing — never swap weights or colors.
Wordmark — clear-space & sizing
Christian Schmitt
- Clear space: minimum of one cap-height (
x) on every side. No graphics or copy inside that margin. - Minimum size: 18px (digital) / 14mm (print). Below that, use the
CSmonogram instead. - Color: espresso + sky blue on cream is canonical. Inverted: cream + sky blue on espresso. Single-color: espresso on cream or cream on espresso.
- Spacing: the two words sit on one line with a single space — never stacked, never hyphenated.
Helvetica — Body (default)
I help brands and teams build digital experiences that feel considered — from Webflow sites to motion and strategy. Clear structure, warm tone, and attention to the details people feel but rarely name.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Licensed files live in fonts/helvetica/.
Use Regular for body copy, Bold for labels and UI emphasis, Light sparingly for
large supporting text. Compressed and Rounded cuts are not part of this brand system.
Hero headline
56px
Page title
40px
Section heading
32px
Card title
24px
Paragraph text — 16px base, 1.6 line-height
16px
Captions, metadata, labels
14px
Category label
12px
05 — Voice & tone
How you sound
Visual identity and written voice should align. If the design feels editorial and warm, the copy should too — clear, confident, never corporate-speak.
01
Clear over clever
Lead with what you do and who it's for. Wit is welcome; ambiguity isn't. Cognitive fluency applies to words as much as layout.
02
Confident, not loud
Short sentences. Active voice. No hype words ("revolutionary", "synergy"). Your work should prove the claim — framing effect: how you say it shapes what people believe.
03
Human and direct
Write like you speak in a good client call. Use "you" and "I". The pratfall effect: admitting limits ("I'm not the cheapest option, but…") can increase trust.
04
Editorial rhythm
Mix sentence lengths. One-line paragraphs for emphasis. Pull quotes in PP Editorial Italic for moments that deserve to be remembered (peak–end).
05b — Copy (DE)
Product naming & site copy
German site copy follows christianschmitt_strategie_v2.pdf (Persona A first).
Operative module logic (Setup/Care): strategy/package-system-2026.md.
A
Module (what you sell)
Performance · Security · Tracking · SEO · Paid Landing Pages. Fundament is always Webflow + Cloudflare. Performance is the entry module.
B
Stages (how you buy)
Every module has two stages only: Setup (one-off build, audit, implementation) and Care (ongoing monthly). No third label, no cute tier names.
C
Performance Care depth (retainer)
When Care needs depth, use a functional suffix after an middle dot:
Performance Care · Monitoring (Core Web Vitals, reports, alerts, from ab 490 €/mo)
Performance Care · Optimierung (monitoring + active Cloudflare work, from ab 990 €/mo)
Performance + SEO Care (Optimierung + crawl policy, llms.txt, schema, from ab 1.490 €/mo)
Say
- Kostenlosen Performance-Check anfragen (15 Min), primary CTA site-wide
- Hero speaks to Persona A (Marketing Manager), not three audiences at once
- Three pillars on Home: Core Web Vitals · AI Visibility · One Owner
- AI Visibility in Retainer, not a standalone product on Home
- Du arbeitest direkt mit mir
- Reports, die du intern verteidigen kannst
- Ansprache: du on the German site
Never say
- Wachhund, Performance-Partner, Agent-Ready (retired tier names)
- Tier metaphors: Hund, Partner, Stack as product names
- Gespräch vereinbaren, Mehr erfahren, Submit
- Innovative Lösungen, ganzheitlich, leidenschaftlich
- Agentur-Pingpong, Feature-Bingo, PDF-Wüste (sloppy filler)
- Mixing du and Sie on the same page
Headline patterns (DE)
Keyword + outcome: Webflow Performance optimieren: Core Web Vitals stabil halten.
System: Webflow + Cloudflare als System. Performance, Security, Tracking, SEO.
Proof: LCP 4,6s → 1,8s, danach 6+ Monate stabil.
Full messaging reference: strategy/messaging-customer-de.md
06 — Brand assets
Brand mockups
Square 1:1 visualizations — digital product UI and physical applications — to see how the identity holds up beyond the screen.
Digital · Web UI
Stationery · Brand kit
The wordmark as it lives on paper — boutique stock, restrained color, and tactile materials that match the on-screen palette.
Physical · OOH & apparel
Billboards, street posters, and merch — same wordmark rules, scaled for impact in the real world.
07 — UI style lab
Preview in context
Like uicolors.app — same card layouts, but with your real fonts: PP Editorial New on display headlines, Helvetica on UI labels and body. Switch layout and theme to preview in context.
Editorial
craft
Projects shipped
18
JanFebMarAprMayJun
Webflow
builds
Active stack
6 live
| Webflow | 3 projects | |
| Cloudflare | 2 projects | |
| Tracking | 1 project |
Blog
Cloudflare caching rules for Webflow
Performance
GTM data layer blueprint for Webflow
Tracking
GSAP scroll motion that feels intentional
Motion
Product
clarity
Active62 in review
LCP1.8swas 4.6s last audit
Shipped18since 2024
Brand
guidelines
Christian
Schmitt
Services
Webflow developmentClient-First · CMSRemote
Cloudflare performanceCaching · CWVHybrid
Tag Manager & trackingGTM · sGTM · CAPIAudit
Editorial
warmth
in every launch.
Focus areas
Webflow12 builds
›Cloudflare8 integrations
›Tracking15 setups
›Packages
Portfolio
2.0
This week
Ship GSAP hero for Portfolio 2.0
TodayConfigure Cloudflare caching rules
TomorrowFinalize brand guidelines UI lab
In 2 daysMonday, May 25
Client kickoff9 - 10 AM
Webflow designer sync1 - 2 PM
Launch prep3 - 4 PM
Book a call
motuwethfrsasu
12345
6789101112
13141516171819
20212223242526
2728293031
⌂ Work
◎ Services
◔ Cases
▤ Tools
◫ Blog
⚙ Contact
Core Web Vitals
98 ↑
Green scores after Cloudflare + Webflow passChristian Schmitt
Work
Services
Cases
Tools
Blog
Contact
Performance-Check anfragen
Web development · DACH
Editorial craft.
Product clarity.
Webflow-native builds, Cloudflare performance, and tracking that stays GDPR-clean — messbar schneller, sauber getrackt.
View work
Performance audit
Active projects
Webflow · Cloudflare · Stripe
What I work on
Webflow
Sites that feel considered
Client-First
12 builds
CMS
GSAP motion
Cloudflare
Performance in the green
LCP 4.6s → 1.8s after caching pass
View caseTracking
Measure what matters
GTM
sGTM
“Christian brought editorial warmth to our product UI without sacrificing clarity — the site finally feels like us.”
Common questions
Do you work with Webflow Enterprise?+
What's included in a performance audit?+
Can you set up GTM, sGTM & Stripe on Cloudflare?+
Ship with a system, not a one-off
Brand tokens, Webflow components, Cloudflare rules — ready for your next launch.
Project overview
New projectActive
6
In review
2
Shipped
18
| Project | Stack | Status |
|---|---|---|
| Portfolio 2.0 | Webflow | In progress |
| B2B site relaunch | Cloudflare | Review |
| Brand guidelines | HTML | Shipped |
| GTM data layer | Tracking | Shipped |
Buttons
Primary
Secondary
Accent
Input
Tags
Webflow
Cloudflare
GTM
Notifications
Project updates
Warm authority — sky blue works best as highlights on cream, not body text.
Pull quote
Personal, not corporate.
Webflow, Cloudflare & tracking — messbar schneller, sauber getrackt
Christian Schmitt
Christian Schmitt
Work · Services · Cases
Christian Schmitt
Christian Schmitt
Schmitt
Christian Schmitt
Editorial craft. Product clarity.
Webflow · Cloudflare · GTM · GSAP
CS
08 — UI components
Building blocks
Reusable patterns for Webflow, decks, and marketing pages. Buttons use scale(0.97) on press — small feedback that confirms interaction without distraction.
Card padding
Cards share one inset system on the 8pt grid — values scale fluidly with
viewport and preview frame width. Set padding on the card shell, not on
display headlines like .pv-ui-card__display, so photo, title,
and metrics stay aligned at every size.
| Token | Value | Use for |
|---|---|---|
--card-padding-lg |
16–24px fluid | Media cards, marketing cards, nav glass, featured blocks |
--card-padding |
12–16px fluid | Data cards — head, metrics, lists, spark rows |
--card-padding-sm |
10–12px fluid | Compact footers, chart month labels |
--card-gap |
10–12px fluid | Photo → display headline, vertical rhythm inside a card |
--card-gap-sm |
6–8px fluid | Label → metric in card headers |
--card-grid-gap |
10–12px fluid | Gap between cards in masonry / grid layouts |
Tags
Webflow
Motion
Strategy
Card · lg inset (fluid)
Case study
Editorial portfolio refresh
Warm typography and restrained color lifted conversion while keeping the brand feel personal.
Links
Inline links use deep sky (#4A7FA8) for accessibility. Hover shifts to a lighter blue — instant feedback, ease-out timing.
09 — Usage rules
Do & don't
Constraints protect the brand. Following them keeps every touchpoint reinforcing the same memory — the foundation of recognition and trust.
Do
- Wordmark: Christian (Regular, espresso) + Schmitt (Italic, sky blue)
- Use Helvetica Regular for all body copy, nav, and UI
- Use PP Editorial New for headlines at 24px and above
- Keep page backgrounds on off-white (#F8F3EF)
- Use espresso brown for all primary text
- Apply sky blue as fills and washes — not as UI text on light backgrounds
- On white or lighter backgrounds, use deep sky (#4A7FA8) for links, labels, and icons
- Maintain generous whitespace — let content breathe
- Use deep sky for links and primary CTAs
- Media cards:
--card-padding-lg(16–24px fluid) on all sides - Data cards:
--card-padding(12–16px fluid) — align content to one inset - Let the card shell own padding; display headlines stay flush to that inset
Don't
- Don't set both name parts in the same style or color
- Don't use Helvetica Compressed or Rounded in brand materials
- Don't set body copy in PP Editorial New
- Don't use pure black (#000) — it breaks the warm system
- Don't add neon or saturated accent colors
- Don't use sky blue for text or icons on off-white, white, or light tans
- Don't stretch, outline, or add effects to the serif
- Don't mix multiple display fonts — one voice, one headline face
- Don't add extra horizontal padding on display type inside cards
- Don't use arbitrary card insets (18px, 20px) — stay on the 8pt tokens
- Don't double-pad nested blocks (shell + child both at 24px)