Brand guidelines

Everything you need to represent Contento consistently — logos, colours, typography, and usage rules.

Logo

The Contento logo combines the word "content" with a friendly speech-bubble smiley, followed by "cms" in a slightly smaller weight. The speech-bubble icon represents the conversational, approachable nature of the platform.

Primary logo

Contento CMS logo — dark on light
Contento CMS logo — inverted on dark

Left: light backgrounds. Right: dark backgrounds (CSS filter: brightness(0) invert(1)).

Small / compact logo

Contento CMS small logo — dark on light
Contento CMS small logo — inverted on dark

Use the small variant for navigation bars, favicons at higher resolutions, and inline references.

Download

Primary logo (PNG) Small logo (PNG)

Logo usage rules

Do

  • ✓ Use the logo on a solid background with sufficient contrast
  • ✓ Maintain minimum clear space equal to the height of the "o" in "content"
  • ✓ Use the inverted (white) variant on dark backgrounds
  • ✓ Scale proportionally — never distort

Don't

  • ✗ Rotate, skew, or add effects to the logo
  • ✗ Change the colours of individual parts of the logo
  • ✗ Place the logo on busy backgrounds or photos without an overlay
  • ✗ Recreate or redraw the logo with different typefaces

Colour palette

Primary

Contento Blue

#3D5A80

rgb(61, 90, 128)

Ink

#1A1A1A

rgb(26, 26, 26)

White

#FFFFFF

rgb(255, 255, 255)

Secondary & UI

Blue Dark

#34506F

Stone

#E5E5E3

Ash

#F5F5F4

Success

#065F46

Accent gradient

Used sparingly for hero text highlights and call-to-action accents. Defined as a 135-degree gradient from Contento Blue to #5B8CB8.

Typography

Display & headings

Inter

The primary typeface for headings and display text. Use bold (700) for headings and semibold (600) for sub-headings. Apply tight letter-spacing (tracking-tight).

Heading 1 — 36px bold

Heading 2 — 24px bold

Heading 3 — 18px semibold

Body & UI

Inter

Body text uses Inter at regular (400) weight. UI labels and navigation use medium (500). The base size is 16px with relaxed line-height for readability.

Body — 16px regular, 1.6 line-height

Caption — 14px, gray-500

Code — 12px mono, gray-400

Voice & tone

Friendly, not casual

We are approachable and warm — the smiley in our logo says it all. But we are also professional. Avoid slang, excessive exclamation marks, and emojis in product copy.

Clear, not clever

Prefer plain language. Say "Create a post" instead of "Craft your narrative." Our users are busy — respect their time with concise, direct copy.

Confident, not arrogant

We believe Contento is a great CMS. We state facts and let the product speak for itself. Avoid superlatives like "the best" or "revolutionary."

Inclusive, not exclusive

Write for everyone — beginners and experts alike. Avoid jargon without explanation. When we say "developer-friendly", we also make sure it is accessible to non-developers.

Naming & spelling

Context Correct Incorrect
Full product name Contento CMS ContentoCMS, contento cms, CONTENTO
Short form (after first mention) Contento contento, CONTENTO, The Contento
In a URL or slug contento Contento, contentoCms
Possessive Contento's API Contento' API, Contentos API