**About this file**

This Markdown is an auto-generated, plain-text snapshot of one page on mertosolutions.com.
Use it to paste context into an AI assistant. Visual layout, images, and interactive elements exist only on the live site - see **Canonical** below.
**Page:** Brand Guidelines | Merto Software Solutions

**Description:** Merto Software Solutions brand guidelines: logo usage, colour palette, typography, UI effects and component patterns for marketing and design teams.

**Canonical:** https://mertosolutions.com/brand-guidelines

---

Internal Document

# Merto Brand Guidelines

Everything the marketing and design team needs: logos, colours, typography, effects and component patterns. Use this as the single source of truth when creating assets for Figma, socials, print or web.

Last updated May 2026 · Merto Software Solutions

LogoColoursTypographyEffectsComponentsVoice & Tone01 / Logo

## Logo Usage

The Merto logo exists in three variants: on dark backgrounds, on light backgrounds, and an icon-only mark. Always use the correct variant for the context and maintain clear space equal to the height of the "M" letterform on all sides.

Dark Background

Use on dark or coloured backgrounds. Primary usage across the website.

WebSocialsDark slidesLight Background

Use on white or light grey backgrounds. Ideal for print, documents and proposals.

PrintDocumentsLight slidesIcon Mark

Use when space is limited, e.g. favicons, app icons, social media profile pictures.

FaviconApp iconAvatarSignature / Full Wordmark

For email signatures, PDF footers and formal documents where the full company name should appear beside the mark.

Email sigReportsLogo don'ts

- Do not stretch or distort the logo
- Do not use the dark variant on a white background
- Do not apply drop shadows, outlines or effects
- Do not recreate, redraw or recolour the logo
- Do not place on busy photographic backgrounds without a solid container
- Do not use transparency on the logo itself

02 / Colours

## Colour Palette

The Merto palette is built around deep navy backgrounds, a signature blue accent, a supporting purple gradient, and carefully chosen text colours for legibility. All primary colours pass WCAG AA contrast on their intended backgrounds.

### Primary Colours

New Blue / Cyan

#04BEFECopyRGB: 4, 190, 254

HSL: 196°, 98%, 51%

Hero glows, accent highlights, icon fills

Brand Blue

#5FA8F5CopyRGB: 95, 168, 245

HSL: 211°, 88%, 67%

Links, interactive text, CTAs on dark

Primary Blue

#1D4ED8CopyRGB: 29, 78, 216

HSL: 224°, 76%, 48%

Primary buttons, badges, tags on light bg

Secondary Purple

#5B4CDBCopyRGB: 91, 76, 219

HSL: 246°, 63%, 58%

Gradient endpoints, accents, secondary CTAs

Light Purple

#7C6AF7CopyRGB: 124, 106, 247

HSL: 248°, 89%, 69%

Blob glows, gradient fills, decorative use

Lavender

#A394FFCopyRGB: 163, 148, 255

HSL: 249°, 100%, 79%

Text gradients, heading accents

### Background Colours

Footer Dark

#0C0D14CopyPrimary dark background, footer, dark sections

Hero Dark

#0B0D12CopyHero sections, full-bleed dark backgrounds

White

#FFFFFFCopyPage background, light cards, print materials

Off-White

#F7F8FFCopyLight section backgrounds, alternating rows

### Text Colours

Heading text

On Dark: Heading

#F0F0F8CopyBody and descriptive text on dark backgrounds

On Dark: Body

#8889A8CopySlightly lighter muted text on dark

On Dark: Muted Lighter

#B8B9DBCopyHeading text

On Light: Heading

#0F172ACopyBody and descriptive text on light backgrounds

On Light: Body

#475569CopySupporting and footnote text on light bg

On Light: Muted

#6D6D6DCopy

### Brand Gradients

Blue to Lavender

#5FA8F5 -> #A394FFPrimary heading accent gradient. Used on hero text highlights and emphasis spans.

linear-gradient(135deg, #5fa8f5, #a394ff)

Primary to Secondary

#1D4ED8 -> #5B4CDBLight theme section gradients, card overlays and decorative backgrounds.

linear-gradient(135deg, #1d4ed8, #5b4cdb)

Dark Section Glow

Used behind CTA cards and hero sections. Two radial glows over the dark background.

Dual radial: #3b8be8 + #7c6af7 on #0c0d14

Light Section Glow

Soft ambient glow for light-background sections and hero variants.

Dual radial: #3b8be8 + #7c6af7 on #ffffff

03 / Typography

## Typography System

Two typefaces are used across all Merto materials. Sora leads with character and precision for headings; DM Sans carries everything else with clarity and warmth. Both are variable fonts available from Google Fonts and Fontsource.

Heading Font

Sora

HeadingsDisplayLabelsDisplay / Hero — Bold 700 — clamp(2.5rem, 6vw, 4.5rem)

Build what your business actually needs.

H1 — Bold 700 — clamp(2.125rem, 5vw, 3.875rem)

Custom software, built in-house

H2 — Bold 700 — clamp(1.75rem, 3.5vw, 2.75rem)

Why businesses choose Merto

H3 — SemiBold 600 — 20px

API Integrations

300

Aa Bb Cc 123

400

Aa Bb Cc 123

500

Aa Bb Cc 123

600

Aa Bb Cc 123

700

Aa Bb Cc 123

800

Aa Bb Cc 123

Figma / Google Fonts

Search for **Sora** in Google Fonts or install via npm: `@fontsource-variable/sora`

Weights in use: 300, 400, 500, 600, 700, 800 · Style: Normal only

Body Font

DM Sans

BodyUICaptionsBody Large — Light 300 — 17px / line-height 1.8

We build custom software, API integrations, and AI automation for businesses tired of tools that slow them down. Based in the UK, serving businesses worldwide.

Body Regular — Regular 400 — 16px / line-height 1.75

Every week your team spends on workarounds is a week not spent growing. Our software development team connects your tools, automates manual work.

Body Small — Light 300 — 14px

Supporting copy, card descriptions, footnotes and secondary information. Used across sections where concise clarity is needed.

Label — Medium 500 — 12px / tracking 1.5px / uppercase

Software Solutions · API Integrations · AI Automation

300

Aa Bb Cc 123

Italic variant

400

Aa Bb Cc 123

Italic variant

500

Aa Bb Cc 123

Italic variant

600

Aa Bb Cc 123

Italic variant

700

Aa Bb Cc 123

Italic variant

Figma / Google Fonts

Search for **DM Sans** in Google Fonts or install via npm: `@fontsource-variable/dm-sans`

Weights in use: 300, 400, 500, 600, 700 · Styles: Normal and Italic

Type Scale Reference for Figma

| Name | Font | Size | Weight | Line Height | Tracking |
| --- | --- | --- | --- | --- | --- |
| Display | Sora | clamp(2.5rem, 6vw, 4.5rem) | 700 | 1.10 | -2px |
| H1 | Sora | clamp(2.125rem, 5vw, 3.875rem) | 700 | 1.15 | -1.5px |
| H2 | Sora | clamp(1.75rem, 3.5vw, 2.75rem) | 700 | 1.15 | -0.8px |
| H3 | Sora | 20px | 700 | 1.3 | normal |
| Body LG | DM Sans | 17px | 300 | 1.80 | normal |
| Body | DM Sans | 16px | 400 | 1.75 | normal |
| Body SM | DM Sans | 15px | 300 | 1.70 | normal |
| Caption | DM Sans | 14px | 300 | 1.65 | normal |
| Label | DM Sans | 12px | 500 | 1.0 | 1.5px |
| Micro | DM Sans | 11px | 500 | 1.0 | 1.2px |

04 / Effects

## Visual Effects

Merto's visual language uses depth and light to create a premium, modern feel. These effects should be used consistently and sparingly to maintain impact.

Glassmorphism — Dark

Glass card on dark

Semi-transparent dark panel with backdrop blur, used for floating UI elements, demo cards and info panels.

bg: rgba(13, 14, 22, 0.85)

border: rgba(255, 255, 255, 0.10)

backdrop-filter: blur(8px)

shadow: 0 8px 40px rgba(0,0,0,0.35)

Glassmorphism — Light

Glass card on light

Frosted glass panel for light-background CTA cards, modal surfaces and elevated containers.

bg: rgba(255, 255, 255, 0.52)

border: rgba(255, 255, 255, 0.60)

backdrop-filter: saturate(1.4) blur(24px)

shadow: 0 8px 40px rgba(29,78,216,0.07)

Ambient Blob Glow

Content sits above the glow

Blue blob: #04BEFE, opacity 0.20–0.25

Purple blob: #7c6af7, opacity 0.15–0.20

filter: blur(64px) (blur-3xl)

pointer-events: none; aria-hidden: true

Text Gradient

We build what your business _actually needs._

background: linear-gradient(135deg, #5fa8f5, #a394ff)

-webkit-background-clip: text

-webkit-text-fill-color: transparent

Use <em class="not-italic"> for semantics

Eyebrow / Badge Pill

Software Solutions

Light variant
border-radius: 9999px (rounded-full)

border: 1px rgba(59,139,232,0.25)

bg: rgba(59,139,232,0.12)

font: 12px / 500 / uppercase / tracking 1.5px

Subtle Glow Border Card

Feature card title

A subtle glowing border and tinted background to differentiate feature cards from the base surface.

border: rgba(59, 139, 232, 0.18)

bg: rgba(59, 139, 232, 0.05)

border-radius: 16px (rounded-2xl)

05 / Components

## UI Components

Reusable patterns used across the website. Replicate these in Figma by matching the exact colours, radius and spacing values noted below each example.

### Buttons

On dark backgrounds

Primary Dark CTA

Secondary Ghost

White Solid
On light backgrounds

Primary Light CTA

Secondary Ghost
border-radius: 9999px · padding: 14px 28px · font: 15px / 500

transition: transform 200ms, box-shadow 200ms

hover: translateY(-2px) · active: scale(0.95)

### Section Heading Pattern

Section label

## Section heading with a _gradient accent_

Supporting description text that clarifies the section's purpose. Kept concise, neutral and benefit-led.

Eyebrow pill -> H2 heading -> body description

Eyebrow: 12px / 500 / uppercase / tracking 1.5px

H2: Sora 700, clamp(1.75rem, 3.5vw, 2.75rem), tracking -0.8px

Body: DM Sans 300, 17px, leading 1.8, colour #8889a8

### Feature / Info Cards

1
Feature title here

Supporting description that explains the feature concisely without overloading the reader with detail.

2
Second feature card

Each card carries an icon marker, a short Sora heading, and a DM Sans body. Border and bg are subtle overlays.

Card container: border rgba(255,255,255,0.06) · bg rgba(255,255,255,0.03) · radius 16px · padding 24px

Icon badge: h/w 40px · rounded-full · bg rgba(59,139,232,0.15) · colour #5fa8f5

06 / Voice & Tone

## Voice & Tone

Merto speaks like a trusted expert, not a salesperson. Confident without arrogance, clear without being cold. Always British English spelling and grammar.

We are

- Direct and honest: no fluff, no buzzword bingo
- Technically credible: we show understanding, not just confidence
- Human: we write for business owners, not procurement committees
- Problem-first: lead with the client's challenge, not our services
- Outcome-led: focus on what the client gains
- UK-English always: colour, organise, realise, optimise, specialise

We are not

- Overly formal or stiff: avoid corporate jargon
- Casual or slangy: maintain professionalism
- Hyperbolic: "world-class", "industry-leading" without proof
- Vague: "solutions" and "leverage" without meaning
- US English: no color, organize, realize, optimize
- Em dash users: use a comma, colon or full stop instead

Copy Examples

Avoid — Headline

Leverage world-class, industry-leading software solutions to optimize your business processes

Prefer — Headline

Stop losing time to systems that don't work together

Avoid — CTA

Get in touch to learn more about our range of services

Prefer — CTA

Book a free business assessment. No commitment required.

Avoid — Feature desc

Our cutting-edge AI-powered automation platform delivers ROI across your organization

Prefer — Feature desc

We automate the repetitive work so your team can focus on what actually grows the business

Merto Software Solutions Brand Guidelines · For internal and agency use · Last updated May 2026

Questions? Contact the marketing team before creating new brand assets.