Brand
Brand Guidelines.
How to use the elMudita logo, color palette, typography, and voice consistently across every surface.
Logo
The mark is an abstract lowercase “e”, drawn as a single open stroke, with a Signal-green dot standing in for the joy (mudita) at the center of the name. Use the full lockup (mark + wordmark) whenever there’s room; use the mark alone only at small sizes — favicons, app icons, social avatars.
Primary lockup — light background
Primary lockup — dark background
Clear space
Maintain clear space around the lockup equal to the height of the mark on all sides. Never let text, images, or UI chrome intrude on that space.
Minimum size
The mark alone should never render below 20px. The full lockup should never render below 100px wide, to keep the wordmark legible.
Backgrounds
The mark is drawn to work on both the Foreground-dark badge (default) and directly on Signal Tint. Avoid placing it on busy photography or low-contrast color fields.
Misuse
Don’t recolor or desaturate the mark.
Don’t stretch or distort the aspect ratio.
Don’t rotate or add drop shadows / effects.
Color
A restrained neutral base with a single accent duotone (Signal). Signal green is reserved for live data, growth indicators, and active states — not decoration.
Foreground
#1B1510 · --foreground
Primary text, headlines, primary buttons.
Background
#FCFAF6 · --background
Warm paper page background.
Background Alt
#F5F2EB · --background-alt
Inset section bands, input fills, quiet contrast.
Surface
#FFFFFF · --surface
Cards, forms and floating panels that sit above the page.
Muted
#605954 · --muted
Secondary text, captions, metadata.
Line
#E3DFD8 · --line
Hairline rings and dividers.
Signal
#3EC25F · --signal
The one accent — growth lines, CTA arrow chips, highlights.
Signal Ink
#07602F · --signal-ink
Accent text on light backgrounds (AA contrast).
Signal Tint
#DCF9E1 · --signal-tint
Positive chips and subtle highlight fills.
Mint
#D4F9E7 · --mint
Pastel surface — lead capture, positive outcomes.
Peach
#FFE7D4 · --peach
Pastel surface — ads, skincare.
Sky
#DAF1FE · --sky
Pastel surface — AI & tech, process.
Lilac
#F0E9FF · --lilac
Pastel surface — leadership, apparel.
Butter
#FEF5C7 · --butter
Pastel surface — tips, quotes, home goods.
Down
#DB423C · --down
Losses, errors, negative deltas — used sparingly.
Typography
Inter Tight carries every headline and display role, set large (hero headlines run up to ~128px, standard display sizes start at 56px+). Inter carries body copy, nav, buttons, and UI chrome, restricted to weights 400/500/600 — never bold for running text. Code and technical values use the system monospace stack on a fixed #09090b surface, regardless of light or dark mode. This is the typography system for the whole site — new components should reuse font-display, font-sans, and font-mono rather than introducing another typeface.
Display / H1
Grow your brand without the guesswork.
Display / H2
One team. Everything you need to grow.
Display / H3
How we work
Body / Large
elMudita is a marketing and growth partner for online brands.
Body
Every recommendation is weighed against your actual profit.
Eyebrow
The problem
Code
const roas = revenue / spend;
Voice & tone
elMudita writes like an operator, not a marketer: specific numbers over adjectives, plain language over jargon, confidence without hype.
Direct, not hype-driven
Do: "Clients got $3.80 back for every $1 they spent on ads."
Don’t: "We CRUSHED it with insane, game-changing results!!!"
Specific, not vague
Do: "Sales more than tripled in 90 days for a skincare brand."
Don’t: "We help brands grow fast."
Confident, not arrogant
Do: "We're selective about who we take on."
Don’t: "We're the best growth agency in the world."
Plain language, not jargon-stacked
Do: "A discount code that grows revenue while shrinking margin is a fail by our scorecard."
Don’t: "We leverage synergistic omnichannel paradigms to optimize growth vectors."