EchoPM brand guidelines
Logos, colors, typography, and usage rules for marketing, product, and partner materials. Download assets directly or reference the shared design tokens in code.
Brand kit designed by Anymark · June 2026
Overview
EchoPM's visual identity centers on a calm green palette, Figtree typography, and a compass wordmark. Use these guidelines to keep presentations, campaigns, and co-branded materials consistent with the product experience at echopm.app.
Logo
Use the vector logo whenever possible. Switch to the white raster mark on dark or photographic backgrounds.
Color
Primary tokens should cover most surfaces. Extended shades support hover states, tints, and emphasis.
Primary tokens
Primary (#3D7C62) is for CTAs, active states, and key brand moments. Dark (#1F2937) is for body text and strong UI chrome. White (#FFFFFF) is for backgrounds and negative space.
Primary
#3D7C62
primary
Dark
#1F2937
dark
White
#FFFFFF
white
Use with dark text
Extended palette
Shades from 100 (lightest tint) through 800 (darkest) support hover states, dividers, badges, and subtle surfaces without introducing off-brand hues.
800
#193329
color800
700
#2A5544
color700
600
#3B785F
color600
500
#3D7C62
color500
400
#65B393
color400
300
#87C4AB
color300
Use with dark text
200
#AAD5C3
color200
Use with dark text
100
#CCE6DB
color100
Use with dark text
Verify WCAG AA contrast (4.5:1) before shipping any text/background pairing. Reserve the primary green for functional accents—not decorative fills.
Typography
Figtree is the primary typeface across marketing and product—it matches the EchoPM wordmark. Geist Mono is reserved for code and technical labels.
Sans / UI
Making renting simple and efficient
Figtree — body copy, navigation, forms, and general UI.
Display / headings
Property operations, aligned
Figtree via font-serif — section headings and marketing display type.
Monospace
ECHOPM_BRAND.primary · #3D7C62
Geist Mono — code snippets, tokens, and technical metadata.
Do's and don'ts
Do
- Use the SVG logo whenever the target supports vector graphics.
- Use the white logo on dark or photographic backgrounds.
- Keep clear space around the logo equal to at least the height of the icon.
- Reserve primary green for CTAs, active states, and intentional brand moments.
- Verify contrast when pairing extended palette shades.
Don't
- Rotate, stretch, squash, or distort the logo.
- Add gradients, shadows, outlines, or strokes to the logo.
- Recolor the logo outside this palette.
- Place the logo on low-contrast or cluttered backgrounds.
- Use primary green decoratively—it is a functional accent.
Downloads
Production-ready files served from echopm.app. Right-click or use the download buttons above to save locally.
Animated wordmarks