The Financemate Brand
How we look, sound, and show up — across every touchpoint. This guide covers visual identity and tone of voice for the website, content marketing, social media, emails, and product UI.
Positioning & Mission
What Financemate is — and isn’t.
What we are
Financemate helps international professionals and expats in Germany understand and access real estate investment, primarily for tax optimisation. We’re a facilitator — we make the complex simple, handle the paperwork, and connect people with the right partners.
The one-liner
“Find your financial opportunities in Germany, then execute on them.”
What we are NOT
Not a financial advisor (Finanzberater), tax advisor (Steuerberater), investment advisor (Anlageberater), bank, or lender. This is a legal and regulatory distinction that shapes everything we write and say.
Positioning language
- “Financemate helps you understand and navigate real estate investment in Germany”
- “We walk you through the process — from understanding tax benefits to finding the right property”
- “Think of us as your guide to German real estate — we make the complex simple”
Audience
Who we’re talking to — and how to think about them.
International professionals and expats living in Germany. They’re smart and accomplished in their own fields, likely earning well, but often unfamiliar with Germany’s financial and legal systems.
Key principles
- Plain English. Accessible to non-native English speakers without being condescending.
- German terms need context. Always explain on first use (e.g. “Grunderwerbsteuer — the one-off property transfer tax”).
- No unexplained jargon. “Cap rate,” “amortisation,” “yield spread” all need a plain-language sibling.
- Gender-neutral language. Use “they/them” as default.
- Diverse examples. Vary names and nationalities.
Logo
Four variants for different contexts. The logo mark is two overlapping parallelograms (blue + orange). The wordmark is “Finance” in navy/white + “mate” in orange/amber.
Full colour — light backgrounds
Full colour — dark backgrounds
White mono — dark / photo backgrounds
Dark mono — greyscale contexts
Usage rules
- Use the full colour version whenever possible.
- On dark backgrounds, use the dark background variant (white “Finance” text).
- Use mono versions only when colour reproduction is limited (print, watermarks, embossing).
- Minimum clear space: half the height of the mark on all sides.
- Never stretch, rotate, recolour, or add effects to the logo.
- On infographics: logo goes bottom-right, in the reserved 120×32px space.
Colour System
Three contexts: the website & product palette, semantic category colours, and the chart/infographic Data Studio palette.
Website & product — core palette
The actual colours used across the homepage and app. Primary CTA is dark charcoal (slate-800), main accent is orange.
Backgrounds
Warm off-whites for most sections. Dark slate-900 for contrast blocks (quotes, footer events). Never pure white (#fff) as a section background — use or white with warm context.
Semantic / category colours
Used for content categories, status indicators, and highlights. These are functional, not decorative.
Green (emerald-500) is a semantic colour only — used for success states, checkmarks, and the “Taxes” category. It is not a brand colour.
Chart palette: orange ramp — Data Studio / infographics only
Primary palette for single-series charts on the cream background.
Chart palette: blue ramp — Data Studio / infographics only
Secondary palette for multi-series comparisons and “hero” data layers.
Semantic usage in charts
| Meaning | Colour |
|---|---|
| Positive / gain / highlight | (blue) |
| Negative / deduction / cost | (orange) |
| Neutral / baseline | (grey) |
| Reference / dashed lines | + dash [4,3] |
Typography
Figtree everywhere. Caveat for handwritten annotations.
| Typeface | Where | Weights |
|---|---|---|
| Figtree | Everything — headings, body, UI, CTAs, charts, labels | 300–800 |
| Caveat | Handwritten annotations, callouts, playful accents | 400, 600 |
Type scale
| Element | Size | Weight | Colour |
|---|---|---|---|
| h1 | 2.5–3rem | 800 (extrabold) | slate-900 |
| h2 | 1.75–2rem | 800 | slate-900 |
| h3 | 1.25rem | 600–700 | slate-900 |
| Body | 1rem | 400 | slate-500 (relaxed leading) |
| Helper | 0.85rem | 400 | slate-400 |
| Chart heading | 24px | 600 | |
| Chart labels | 11–12px | 400–500 | |
| Infographic badge | 10px | 600 uppercase | white on |
| Caveat annotation | 1.1–1.3rem | 400 | orange-500 or accent |
Design Tokens
Source of truth: tailwind.config.ts and globals.css.
| Token | Value | Notes |
|---|---|---|
| Border radius | 0.5rem | Cards, inputs, buttons |
| Container max width | 1400px | Centered, 2rem padding |
| Dark mode | Class-based | Configured but not active on web |
Animations
| Class | Effect | Duration |
|---|---|---|
.animate-gradient-flow | Background gradient loop | 6s |
.animate-pulse-slow | Gentle opacity/scale pulse | 8s |
.animate-pulse-subtle | Subtle scale + shadow pulse | 3s |
.pulse-ring / .pulse-dot | Pulsing indicator dots | — |
shimmer | Horizontal shimmer (loading) | 3s |
Power button glow
The CTA power button uses a gradient glow: from-yellow-400 to-orange-500. Used sparingly for the primary hero CTA.
UI Components
Buttons, badges, and component patterns.
Buttons & CTAs
Primary CTA is dark charcoal. Orange for accent/highlight actions. Always inviting, never pressuring.
Primary: slate-800 · Accent: orange-500 · Secondary: outlined · Soft: orange tint. Border radius 0.5rem. Figtree 500.
Handwritten annotations ← like this
Caveat font used sparingly: callouts on landing pages, playful labels. Never in body copy or formal contexts.
Infographic badge
Insight callout box
Infographic container
Chart Title Goes Here
Subtitle — what this chart shows and why it matters.
Charts & Infographics
These use the orange / blue Data Studio palette on the cream background — not the website palette.
Design principles
- One chart, one takeaway.
- Simpler is always better. Remove anything that doesn’t aid comprehension.
- No dots on lines. pointRadius: 0, pointHitRadius for hover.
- Shaded areas tell the story. Fill the gap between two lines subtly.
- Dashed lines for baselines. Always labelled.
- End-of-line labels. Final value next to last data point.
- Summary cards below. 2–3 key metrics.
- Insight box for the “so what.”
Chart types
▸H-Bar — ranked comparisons
▸V-Bar — category comparisons
▸Line — trends over time
▸Stacked — composition of a total
▸Top-Down — deductions eating into income
▸Waterfall — step-by-step buildup
▸Sankey — money flows
▸Donut — proportions
▸Gauge — single KPI
▸Radar — multi-dimensional
▸Scorecard — key metrics
▸Timeline — chronological journey
Voice Principles
How Financemate sounds everywhere.
1. Conversational, not corporate
Write like a knowledgeable friend explaining something over coffee.
“Here’s what the process typically looks like — and where most people get tripped up.”
“Financemate’s comprehensive suite of solutions empowers clients to navigate the German real estate landscape.”
2. Empowering, not prescriptive
“Property investment in Germany can offer tax advantages worth understanding.”
“You should buy property to save on taxes.”
3. Calm confidence
Reassuring and grounded. No urgency tricks, no anxiety.
4. Inclusive by default
Smart but unfamiliar with the German system. Different nationalities, genders, backgrounds.
5. Always give something useful
Every page should leave the reader with something they didn’t have before.
Regulatory Guardrails
Financemate is not a licensed financial, tax, or investment advisor.
Hard rules
- Never recommend. No “we recommend,” “you should invest,” “the best option is.”
- Never guarantee outcomes. No “guaranteed returns,” “risk-free.”
- Never compare with a winner. Present facts — let the reader decide.
- Never provide personalised financial advice.
- Never claim authority you don’t have.
- Never make return projections in prose. Calculators only, with disclaimers.
Reframe instead
| Instead of… | Write… |
|---|---|
| “We recommend investing in…” | “Many expats in Germany explore…” |
| “You should buy property to save on taxes” | “Property investment can offer tax advantages worth understanding” |
| “This is the best way to build wealth” | “This is one approach many professionals consider” |
| “Our experts advise…” | “Here’s what the process typically looks like…” |
| “Risk-free investment” | “An approach with a well-understood risk profile” |
| “You need to act now” | “Here’s what the timeline typically looks like” |
Disclaimers
- Calculators & charts: “These figures are illustrative and based on general assumptions. They do not constitute financial advice. Consult a Steuerberater for your situation.”
- Tax mentions: Applicability depends on individual circumstances.
- Property examples: Clarify they are examples, not recommendations.
Copy Rules & Banned Words
Words to always use — and never use.
Banned
Preferred
CTA language
Content by Type
Channel-specific guidance.
▸Website — landing pages
▸Blog & educational
▸Calculator UI text
▸Email campaigns
▸Error messages
▸Charts & infographics
Pre-publish Checklist
Run through before anything goes live.