Internal · v0.1
TAXCLARA brandbook.
The visual system. Pinned here so every page, ad, and email looks like it was made by the same person on the same afternoon.
1. Logo
A teal circle with a teal dot inside - clarity, focus, one number. Always paired with TAXCLARA in caps. Mark may appear alone (favicon, app icon, watermark).
On cream
Mark only
On ink
2. Color
Cream + teal + ink. Three colors do almost everything. Use teal sparingly - it's an accent, not a wash.
Cream (background)
#fafaf7
Page background
Teal (accent)
#0d9488
Brand accent · CTAs · highlights
Ink (primary)
#0a0a0d
Headlines · primary text
Charcoal (body)
#4a4a52
Body copy
Slate (muted)
#6b6b73
Captions · secondary labels
Stone (hint)
#8a8a92
Hints · disclaimers
Surface (panel)
#ffffff
Card backgrounds
Sand (subtle bg)
#f5f5f0
Inset · segmented controls
3. Typography
The system is a sans for the wordmark + UI, plus Fraunces italic for accent (pull-quotes, founder signature).
Canonical wordmark
Bricolage Grotesque, weight 500 (small) / 600 (display), with a teal underline on the “CLARA” portion. Loaded globally in Layout.astro via Google Fonts. Apply with the .wordmark class plus a size modifier - wrap CLARA in .wordmark-clara for the underline accent.
.wordmark.wordmark-sm · ≤14px · 0.16em
.wordmark.wordmark-md · 14-24px · 0.14em
.wordmark.wordmark-lg · 24-40px · 0.08em
.wordmark.wordmark-xl · 40px+ · 0.04em
Header lockups pair the wordmark with the mark at gap-1 - the mark’s own SVG padding (circle inscribed in a 32×32 viewbox) provides all the breathing room the lockup needs.
Wordmark variants
The name decomposes into TAX + CLARA (“clara” = clear, PT/IT). A visual split can carry that meaning. Each row shows the variant at header (17px), display (28px), and hero (56px) sizes on cream chrome.
1. Plain (current canonical)
Single colour, weight 500/600, no split.
2. Colour split - TAX ink + CLARA teal
“Tax” is the problem, “CLARA” is the brand.
3. Colour split - TAX teal + CLARA ink
Reversed. Anchors with weight on the right.
4. Mark-dot interpunct - TAX·CLARA
Teal dot mirrors the inner dot of the logo mark.
5. Weight split - TAX 500 + CLARA 700
Subtler than colour. Works in monochrome (favicons, dark bg).
6. Weight split inverse - TAX 700 + CLARA 500
Heavy “tax” sets up light, “clear” reveal.
7. Combo - TAX·CLARA with colour split
Both signals together. Most visible - risk of being too much.
8a. Underline on CLARA only
Original idea. Risk: reads as hyperlink, dated.
8b. Full-name underline at mark stroke weight
Underline matches the 2.5px circle stroke - same visual language.
8c. Short accent bar under CLARA
Doesn't span letters - reads as accent mark, not hyperlink.
8d. Highlight bar behind CLARA
Marker-style. Bold, distinctive - can be too loud.
Other typeface candidates (reference)
Click any row to expand and see TAXCLARA at three sizes plus a tracking-axis comparison in that font. Kept here for future revisits if Bricolage Grotesque ever needs to be replaced.
TAXCLARA
System default Current. Fast, native, generic.
+
weight 600
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
TAXCLARA
Cabinet Grotesk Editorial, slight character. Free, Fontshare.
+
weight 500
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
TAXCLARA
Geist Vercel's font. Modern geometric. Free.
+
weight 500
Tracking comparison · 28px
weight 600
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
TAXCLARA
Bricolage Grotesque Variable, warm + flexible. Free, Google Fonts.
+
weight 500
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
TAXCLARA
Space Grotesk Slightly quirky geometric. Free, Google Fonts.
+
weight 500
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
TAXCLARA
Manrope Soft geometric, friendly. Free, Google Fonts.
+
weight 600
Tracking comparison · 28px
weight 800
Tracking comparison · 28px
TAXCLARA
Sora Wide caps, futuristic. Free, Google Fonts.
+
weight 600
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
TAXCLARA
DM Sans Workhorse geometric. Free, Google Fonts.
+
weight 600
Tracking comparison · 28px
weight 700
Tracking comparison · 28px
Paid options worth considering
- PP Neue Montreal - ~€80, Pangram Pangram. The Linear / Vercel-tier indie-SaaS pick. Best caps shapes of all options. Preview at pangrampangram.com.
- GT America - ~€500+, Grilli Type. Used by Notion, Patagonia, Vox. Premium swiss precision.
- Söhne - ~€400+, Klim. Modern Helvetica replacement with warmth. Used by Vercel and Substack.
Type system at a glance
Display / Hero · 56-64px · weight 600 · tracking -0.035em
Stop guessing what you owe.
Section heading · 24-32px · weight 600 · tracking -0.02em
Lock your €99/year for life.
Body · 15-17px · weight 400 · line-height 1.55
Your Portuguese tax, updated every month, in English. Built from interviews with expats across six nationalities.
Eyebrow · 11px · weight 500 · uppercase · tracking 0.16em
Founding membership · 87 of 100 spots remain
Accent serif · Fraunces italic · used only for pull-quotes
“The shocker for me was that at the end, I had no idea how much tax I owed.”
4. Voice
Plain English. Concrete. Slightly understated. Sounds like the founder is actually writing it - because he is.
Sounds like
- "Stop guessing what you owe in Portugal."
- "One number, in English, that you can check on a Tuesday."
- "No drip, no newsletter, just the one message that matters."
- "Built from interviews with expats across six nationalities."
Doesn't sound like
- "Revolutionary AI-powered tax intelligence platform."
- "Unlock seamless financial visibility today!"
- "We're delighted to announce…"
- Anything that ends in an exclamation mark.
5. Do / Don't
The short list. If a design or piece of copy violates one of these, rework it before shipping.
Do
- ·Use TAXCLARA all-caps for the wordmark and prominent brand mentions.
- ·Use teal (#0d9488) sparingly - only for accent, never as a flat background.
- ·Lead with one number in product UI. Tabular numerals for any monetary value.
- ·Keep copy concrete, English, plain. Mention the Portuguese tax term once, then translate.
Don't
- ×Don't use teal at full saturation as a large background fill - it competes with the cream.
- ×Don't add gradients to the wordmark. The mark is geometric; the type is geometric; that's the whole effect.
- ×Don't use stock photos. The brand is product-screenshots and serif pull-quotes only.
- ×Don't write 'taxclara' in lowercase prose anymore - it's TAXCLARA.
- ×Don't dilute the brand by mentioning consumer products (cybind, personal services) - taxclara stands alone.