EchoPM merke retningslinjer
Logos, farger, typografi og bruksregler for markedsføring, produkt og partnermaterialer. Last ned ressurser direkte eller referer til de delte design-tokenene i koden.
Merkevarepakke designet av Anymark · Juni 2026
Oversikt
EchoPMs visuelle identitet sentrerer seg rundt en rolig grønn palett, Figtree-typografi og et kompass ordmerke. Bruk disse retningslinjene for å holde presentasjoner, kampanjer og co-branded materialer konsistente med produktopplevelsen på echopm.app.
Logo
Bruk vektorlogoen når det er mulig. Bytt til den hvite rasterlogoen på mørke eller fotografiske bakgrunner.
Farge
Primære tokens bør dekke de fleste overflater. Utvidede nyanser støtter hover-tilstander, nyanser og vekt.
Primære tokens
Primær (#3D7C62) er for CTA-er, aktive tilstander og viktige merkeøyeblikk. Mørk (#1F2937) er for brødtekst og sterk UI-krom. Hvit (#FFFFFF) er for bakgrunner og negativ plass.
Primary
#3D7C62
primary
Dark
#1F2937
dark
White
#FFFFFF
white
Use with dark text
Utvidet palett
Nyanser fra 100 (lyseste nyanse) til 800 (mørkeste) støtter hover-tilstander, skillelinjer, merker og subtile overflater uten å introdusere off-brand nyanser.
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
Verifiser WCAG AA-kontrast (4.5:1) før du sender noen tekst/bakgrunnspar. Reserver den primære grønne for funksjonelle aksenter—ikke dekorative fyll.
Typografi
Figtree er den primære skrifttypen i markedsføring og produkt—den matcher EchoPM-ordmerket. Geist Mono er reservert for kode og tekniske etiketter.
Sans / UI
Gjør utleie enkelt og effektivt
Figtree — brødtekst, navigasjon, skjemaer og generell UI.
Visning / overskrifter
Eiendomsdrift, tilpasset
Figtree via font-serif — seksjonsoverskrifter og markedsføringsvisningstype.
Monospace
ECHOPM_BRAND.primary · #3D7C62
Geist Mono — kodebiter, tokens og teknisk metadata.
Gjør og ikke gjør
Gjør
- Bruk SVG-logoen når målet støtter vektorgrafikk.
- Bruk den hvite logoen på mørke eller fotografiske bakgrunner.
- Hold klar plass rundt logoen lik minst høyden på ikonet.
- Reserver primærgrønn for CTA-er, aktive tilstander og bevisste merkeøyeblikk.
- Verifiser kontrast når du kombinerer utvidede palettfarger.
Ikke gjør
- Roter, strekk, klem eller forvreng logoen.
- Legg til gradienter, skygger, konturer eller streker på logoen.
- Endre fargen på logoen utenfor denne paletten.
- Plasser logoen på bakgrunner med lav kontrast eller rotete.
- Bruk primærgrønn dekorativt – det er en funksjonell aksent.
Nedlastinger
Produksjonsklare filer levert fra echopm.app. Høyreklikk eller bruk nedlastingsknappene over for å lagre lokalt.
Animerte ordmerker