Brand Book

The SaaSmyCow brand guide

A friendly little herd of rules that keep our look, voice and vibe consistent. From decks to LinkedIn banners to that one deal we close on a Friday afternoon.

Our mark

01 - Logo & wordmark

The cow, the wordmark, and the lockup that sits in our header and footer. Grab a PNG or SVG for slides and docs, or copy the HTML/CSS to drop the wordmark straight into any page.

Icon

Wordmark

saasmycow.com

Logo + wordmark

saasmycow.com

Rendered on a transparent background. Light versions use dark text for light backgrounds; Dark versions use cream text for dark backgrounds.

Do: keep the cow to the left of the wordmark, with a clear space equal to the cow's ear. Use the light version on dark backgrounds and the dark version on light backgrounds.
Don't: recolor the cow, rotate her, stretch the wordmark, or replace "my" with a different word.

Embed the wordmark

HTML

<a href="https://saasmycow.com" class="smc-wordmark">
  <img src="https://saasmycow.com/cow-icon.png" alt="SaaSmyCow" width="40" height="40" />
  <span>saas<em>my</em>cow<sup>.com</sup></span>
</a>

CSS

.smc-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-decoration: none;
}
.smc-wordmark img { width: 40px; height: 40px; }
.smc-wordmark em { font-style: normal; color: #F27D8B; }
.smc-wordmark sup {
  margin-left: 0.15rem;
  font-size: 0.55em;
  color: #6b7280;
  font-weight: 500;
}

Herd palette

02 - Color

#254D34

Pasture Green

--background

Primary background across the whole site.

oklch(0.32 0.09 145)

#F27D8B

Cow Pink

--primary

CTAs, highlights, the 'my' in the wordmark.

oklch(0.74 0.18 5)

#F4EBD6

Cream

--secondary

Soft surfaces, quotes, editorial blocks.

oklch(0.95 0.04 90)

#E9B950

Honey Accent

--accent

Section labels, small emphasis, badges.

oklch(0.78 0.15 80)

#4FA24C

Grass

--grass

Illustrations, decorative pasture accents.

oklch(0.55 0.18 145)

#FBF7EC

Milk

--milk

Whites, cards on dark, splashes.

oklch(0.97 0.02 100)

Voice on the page

03 - Typography

Display

Fraunces

Used for headlines, big moments, and moo-ments of drama. Weight 700, tight tracking.

Body

System sans

Everything else. Regular to semibold. Muted foreground for supporting copy, foreground for body copy.

H1 · The friendly funnel

H2 · Growth, without the cringe

H3 · A section on your page

Body copy sets the tone: warm, direct, a little playful. Short sentences. Real numbers. No jargon unless we're winking.

Muted copy for captions, meta, footnotes and quiet asides.

How we sound

04 - Voice & tone

Warm

We talk like a smart friend who's been in the trenches - not a gated whitepaper.

Direct

Short sentences. Real numbers. If we can cut a word, we cut it.

Playful (in moderation)

A cow pun per page is plenty. The joke never gets in the way of the point.

Say

"Book a milking session"
"Fractional GTM, grown with care"
"We plug in, ship pipeline, and hand back the reins"

Don't say

"Synergistic growth solutions"
"Leverage best-in-class frameworks"
Any pun involving udders. We have limits.

Grab & go

05 - Downloads

LinkedIn banner

1584×396 · 4:1

Download PNG ↓

Logo & wordmark

All logo, wordmark and lockup files live in section 01 above, with dark and light previews plus HTML/CSS to embed.

Scroll up to section 01 for icon, wordmark and lockup PNGs.

Need something we haven't put in the barn yet?

Case study logos, deck templates, product screenshots - email us and we'll send them over.

hello@saasmycow.com