Symbol / logo mark
Logo mark
Asset · Existing masterGuidance · Candidate
Use for favicons, avatars, and compact spaces where Motif is already named nearby.
Treatments: Full color, One color, Reversed.
See production details
BrandIdentity and expression
Make Motif recognizable—and useful.
The core choices behind how Motif looks, sounds, and behaves. Start here before making anything new.
Working draft · September 2026Logos
Choose the mark, wordmark, compact lockup, or horizontal lockup for the space.
One identity, three useful forms. Choose the version that fits the job: use the full signature when Motif needs an introduction, the wordmark when space is narrow, and the mark only when the name is already understood.
- Does this surface introduce Motif?Use the logo mark + wordmark.
- Is the space too narrow for the signature?Use the wordmark.
- Is Motif already named nearby, or is the surface inherently compact?Use the logo mark.
- Is the background not White?Use an approved one-color or reversed asset; do not recolor the full-color file.
Wordmark / lettering
Wordmark
Asset · Existing masterGuidance · Candidate
Use when the space is narrow and the mark would become too small or crowded.
Treatments: Aubergine. Other treatments are not available; do not recreate them.
See production details
160px reference specimen · Minimum under reviewHorizontal lockup / signature
Logo mark + wordmark
Asset · Existing masterGuidance · Candidate
Use by default when Motif needs to be introduced and identified clearly.
Treatments: Full color, One color, Reversed.
See production details
120px actual sizeResponsive option
Compact responsive option
Use this existing compact lockup only after choosing among the three core forms. It is a secondary responsive option, not a fourth core identity.
Clear spaceKeep at least one Motif “M” of clear space on every side.
Keep it stillRibbons and motion stay outside logo clear space. The logo itself does not animate.
Package recordSource: Working Rhythm SVG masters · Questions or exceptions: hello@withmotif.fyi · Distribution: working draft.
See what to avoid
Please don’t
Keep the signature intact.
Stretch
Do not change the logo’s proportions.
Rotate
Do not turn the signature into decoration.
Place on a busy photo
Use a clear, supported background.
Recolor
Do not invent a treatment by recoloring the full-color asset.
Rebuild in live type
Use the existing outlined wordmark master.
Overlap with ribbons
Protect clear space from crossing graphics.
Colors
Use a grounded aubergine-and-parchment system with lilac support and a deliberate coral pulse.
AnchorAubergine
#2E0F3DEnergyElectric Coral
#FF5A3CImaginationMuted Lilac
#C8A4E6GroundParchment
#F7EBDDUtilityWhite
#FFFFFFLet Aubergine, Parchment, and White carry most of the surface. Use Lilac for support and Coral as a small pulse.
Don’t use Coral as a large background wash or assume a palette value proves the finished design is accessible.
Shapes and graphics
Build a steady rhythm, then use one crossing, crop, curve, or ribbon for a reason.
- CrossingConnects a real narrative boundary.
- CropBreaks one dominant module.
- ScaleMakes one short statement focal.
- SequencePreserves continuity through motion.
Create a steady reading rhythm, then break it once for a reason.
Don’t stack ribbons, oversized type, dramatic crops, and motion in the same moment.
Voice
Sound human, grounded, capable, curious, and ready to help.
Motif is helpful, grounded, warm, expressive, capable, and curious. We respect the experience people already bring, say what Motif can do now, and make it easy to reach a real person.
Plain, situated language
Help · support · build · learn · listen · prepare · teach · perform · organize · next.
Inflated platform language
Revolutionary · seamless · all-in-one · empower · disrupt · frictionless · for everyone.
“Your answers are still here. Try sending them again, or email us if you need help.”
“Oops! Something went wrong. Please try again later.”
Typography
Use Figtree for everyday clarity and a restrained serif for editorial warmth.
Everyday clarityFigtree
Navigation, body, labels, forms, controls, product UI, status, and help.
Editorial warmthGeorgia
Short headlines, quotations, founder stories, and community storytelling.
Use one controlled serif statement with Figtree doing the practical work around it.
Don’t set instructions, forms, long passages, or dense mobile UI in oversized serif type.
Candidate Display ranges require compact, 400% reflow, fallback-font, localization, and long-content testing before approval.