BackMowify

Brand kit

The Mowify identity

The mark is an eye — Mowify sees the lawn from above. One almond lens, one solid pupil, nothing else. It is the product in a single glyph: this exact property, seen and measured from the sky.

Mowify
Mowify
Mowify

Downloads

Logo (light backgrounds)Logo (dark backgrounds)App mark / avatarFavicon

All assets are scalable SVG — they stay sharp from favicon to billboard.

Colour

Forest

#123D28

Primary brand green, tiles, dark bands

Ink

#0B2016

Headlines and body text

Lawn

#87DA81

Logo mark, accent, measured geometry, highlights

Bone

#F7F5EF

Page background

Survey red

#FF2020

Measured lawn outline only — never UI chrome

Typography

Display

Bricolage Grotesque

Headlines, numbers, the wordmark. 600–800 weights.

Body

Plus Jakarta Sans

Interface, paragraphs, labels. 400–700 weights.

Do

  • Keep clear space around the logo equal to the height of the eye mark.
  • Use the inverse lockup on forest green or photography — mark and wordmark both in Lawn green.
  • Scale the eye mark on its own below 24px — the wordmark stops being legible.
  • Keep the mark in Lawn green; it is the one constant across every surface.

Don't

  • Ship a black-background logo tile — the mark is always transparent.
  • Recolour the mark outside Lawn green.
  • Stretch, rotate, outline or add drop shadows to the lockup.
  • Rebuild the wordmark in another typeface.

Style checklist

Every new Mowify screen ships against this list. If a page fails a line, it is not on brand yet.

Colour

  • Only semantic tokens: bg-background, text-ink, text-muted-foreground, bg-primary, bg-lawn, bg-card. Never text-white, bg-black or hex literals.
  • One dark forest band per page at most; everything else sits on bone paper.
  • Lawn green is an accent, never a large text colour on light surfaces.
  • Survey red (#FF2020) is reserved for measured lawn geometry — never buttons, badges or borders.

Typography

  • Headings: font-display (Bricolage Grotesque) 600–800, tracking-tight, text-ink.
  • Body: Plus Jakarta Sans 400–500, text-muted-foreground, leading-relaxed.
  • Eyebrows and data labels: font-mono, text-xs, uppercase, tracking-[0.2em].
  • One h1 per page; hero headlines use the text-hero utility.

Spacing & shape

  • Page width: mx-auto max-w-5xl (marketing max-w-6xl), px-5 on mobile.
  • Section rhythm: mt-14 between sections, gap-4 in grids, p-6 inside cards.
  • Radii: rounded-2xl for cards, rounded-3xl for feature panels, rounded-full for pills.
  • Borders are hairline border-border; depth comes from shadow-card / shadow-lift, never heavy shadows.

Motion & polish

  • Entrances use animate-rise; live states use animate-pulse-soft. No bounce, no spin.
  • Interactive surfaces change border or background on hover — never scale text.
  • Every screen is mobile-first: test at 390px before 1440px.