Brand Guidelines
PrivateThe Simitive brand system.
How we use our logo, colours, type and layout to make Simitive feel clear, confident and consistent - wherever it shows up.
Logo
One mark, used with care.
White on Teal Dark
Green on Cream / Light
Clear space
Keep clear space around the mark equal to at least the height of the "S". Never let other elements crowd the logo.
Minimum size
Don't render the logo smaller than 24px tall on screen, or 12mm in print.
The "S" motif
A faded "S" can sit in the background of dark sections at 8–14% opacity. Use sparingly - once per page maximum.
Don't
- • Recolour, distort, rotate or add effects to the mark.
- • Place the green logo on busy photography or dark backgrounds.
- • Use the watermark "S" as a primary logo.
Downloads
Logo files, ready to use.
Download the official logo files below. Right-click and "Save link as…" if your browser opens the file instead of downloading it.
S monogram - Teal on white
PNGSquare monogram for avatars, social profiles, app tiles on light.
Download
S monogram - White on teal
PNGSquare monogram for dark surfaces, social headers and app tiles.
Download
S monogram - White (transparent)
SVGVector mark for overlay on photography or coloured backgrounds.
Download
Colour
A palette built around teal.
Teal Dark
Primary dark background - hero, CTA bands, conversion sections.
Teal Deep
Mid-teal for eyebrow labels, secondary buttons and emphasis.
Teal (Accent)
Bright mint accent - primary CTAs, highlights, dividers.
Ink
Body text and headings on light surfaces.
Surface Cream
Warm off-white section background.
Surface Teal Tint
Pale teal section background - alternates with cream.
Background
Default page background.
Where each colour leads
Teal Dark dominates conversion and hero moments. Cream and Teal Tint alternate across content sections to create rhythm. Bright Teal is reserved for action - CTAs, eyebrow underlines, check marks.
Contrast rules
Never put bright Teal text on white - it fails contrast. Use Teal Deep for text accents on light backgrounds, and bright Teal only on Teal Dark or as a button fill with Teal Dark text.
Supporting Accents
Colours for variety in multi-card layouts.
When a page presents several cards side by side, these accent tones add visual distinction to card headers while staying within the Simitive palette. They are not primary brand colours - use them only as gradient fills on card tops, never as text or UI accents.
Deep Blue
Healthcare / Cool tone
Used for the Healthcare sector card and any cool-themed multi-card layout. Pair with a glow of oklch(0.7 0.14 220 / .35).
Muted Slate
Legal / Neutral tone
Used for the Legal sector card and any neutral-themed multi-card layout. Pair with a glow of oklch(0.65 0.1 290 / .3).
Warm Gold
Financial & Prof. Services / Warm tone
Used for the Financial & Professional Services card and any warm-themed multi-card layout. Pair with a glow of oklch(0.78 0.13 70 / .35).
When to use accents
Reserve these gradients for card header backgrounds in grids of three or more cards. Never use them for primary CTAs, text, or page backgrounds. If a layout contains fewer than three cards, stick to the core teal gradient or solid teal-dark instead.
Typography
Poppins, used with confidence.
Display & Body
Poppins
400, 500, 600, 700, 800 - used for everything from H1 to body copy.
Editorial accent
Instrument Serif
Reserved for italic pull-quotes and brand statements.
Display H1
From insight to impact.
Poppins, ~60–72px, tight tracking (-0.02em). Mix weight 400 with bold 700 within a heading.
H2 Section
One platform for planning, costing and performance.
Poppins, ~36–48px. Bold only the words that matter.
H3 Card
Capacity and Workload
Poppins, ~24px. Used for card titles.
Eyebrow
The Simitive Way
16px, uppercase, 0.16em tracking, teal-deep, paired with a 12px teal underline.
Body
Software and services that help organisations see their work clearly, model what's possible, and make the decisions that shape what comes next.
Poppins, 18px, line-height 1.6.
Editorial italic
Simitive does not replace leadership judgement. It strengthens it.
Reserved for pull-quotes and brand statements.
Headline craft
Headings mix regular weight with selective bold on the two or three words that carry meaning. Tracking is tight (-0.02em). Avoid all-bold or all-light headlines.
Layout & UI
Patterns that hold it all together.
Section eyebrow
The Simitive Way
12px teal rule + uppercase Teal Deep label opens every section.
Buttons
Primary pill button (Teal on light) and dark variant (Teal Dark on Cream). Always include the arrow-in-circle.
Cards
WAMS
Capacity and Workload
rounded-3xl, 1px border, lift on hover.
Stat block
176M
Hours of work managed
Display number 60–72px, uppercase label below. Use in 3-up grids divided by 1px borders.
Radius scale
Spacing rhythm
Sections use py-24 (96px). Alternate cream and teal-tint backgrounds. Content stays within max-w-7xl with px-6.
Voice & Tone
How Simitive sounds.
Headline
From insight to impact.
Short. Confident. Two or three bold words carry the meaning.
Body
Software and services that help organisations see their work clearly, model what's possible, and make the decisions that shape what comes next.
Plain English. Lists of three. No jargon, no hype.
CTA
Contact us
Action verbs only - Contact, Explore, Get started, Learn more.
"Simitive does not replace leadership judgement. It strengthens it."
Brand statement - used sparingly, set in Instrument Serif italic.