00

Qvalento Solutions AB — Brand Guidelines

A brand built on clarity & restraint

The definitive guide to representing Qvalento across all touchpoints and media.

1.0
April 2026
Gothenburg, Sweden
hello@qvalento.com
Scroll
01 — Introduction

Brand Identity

Qvalento is a data-driven marketing and analytics agency based in Gothenburg. We help our clients reach the maximum potential of their businesses while staying ethical and respecting customer privacy.

Our mission

To help clients reach the maximum potential of their businesses, staying ethical and respecting customer privacy.

Our position

Qvalento positions itself as a quiet, expert-led boutique agency. We bring deep expertise in analytics, tracking, and marketing without the noise. Our brand communicates calm confidence and transparent partnership.

Calm & Confident

We speak with quiet authority. No exclamation marks, no superlatives. Our brand communicates through restraint and precision.

Transparent Partner

We operate as an extension of our clients' teams — honest, ethical, and customer-focused at every step.

Data-Driven

Every decision we make and recommend is grounded in data. Our visual language mirrors this — structured, precise, and purposeful.

03 — Color

Color Palette

Two forest greens anchor the brand alongside a soft dusty rose accent. The palette is deliberately restrained — green carries authority and trust, rose brings warmth. Use them with discipline.

Primary Brand Colors

Green Dark
#346A46
Primary brand. CTAs, headings on dark, contact section.
Green Light
#80B491
Secondary green. Illustration, mosaic tiles, hover states.
Rose
#B58888
Warm accent. Hero highlight, error states on dark.
Pink Light
#EFD3D3
Soft tint. Mosaic backgrounds, error text on dark.

Neutral Surfaces

Background
#fafaf8
Surface
#ffffff
Foreground
#101828
Text Secondary
#4a5565
Text Muted
#6a7282
Text Label
#99a1af

Color in Use

Light sections

A data-driven marketing and analytics agency.

Background: #fafaf8  ·  Text: #101828

Dark sections

Contact us

Background: #346A46  ·  Text: #ffffff

Body copy runs at 50% white opacity for hierarchy.

Usage rule Backgrounds alternate off-white (#fafaf8) and white (#ffffff) across sections. The contact section is the only full-bleed green section. Rose and pink-light are used sparingly — one highlighted word in the hero, mosaic tiles, and error states only. Never use rose as a background.
04 — Typography

Type System

Two families define the Qvalento typographic voice: Cormorant Garamond for editorial display, Arimo for all UI and body copy. Together they balance elegance with clarity.

Cormorant Garamond — Serif Display Google Fonts

Aa Bb Cc

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Light 300 Analytics
Regular 400 Analytics
Italic 400 Analytics
Usage All H1 and H2 headings only. Always weight 400 (or 300 for extra lightness). Letter-spacing −0.02em. Line-height 1.06. Never used for body copy or UI labels.
Arimo — Sans Serif Google Fonts

Aa Bb Cc

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Regular 400 Qvalento
Medium 500 Qvalento
Semibold 600 Qvalento
Usage All body copy, UI labels, navigation, buttons, eyebrows, captions. Hierarchy is achieved through size and color — not bold weight. Avoid bold on display copy.

Type Scale

Hero / H1
72px / −0.02em
Data agency
Section / H2
56px / −0.02em
Our Services
Card / H3
20px / −0.01em
Web & App Analytics
Lede
18px / 1.6lh
We help clients reach their potential.
Body
15px / 1.7lh
Implementation and analysis of your digital data.
Nav Link
13px / +0.04em
Services    Team    Contact
Eyebrow
11px / +0.23em / ALL CAPS
What We Do
Button Label
11px / +0.14em / ALL CAPS
Contact Us
05 — Iconography

Brand Icons

Six geometric two-tone marks form the core of Qvalento's visual identity. Drawn exclusively in dark green (#346A46) and light green (#80B491), each icon represents one of our service areas.

Quarter Circles icon
Quarter Circles
Web & App Analytics
Circles icon
Circles
Data Visualization
Arrow icon
Arrow
Search Engine Marketing
Diamond icon
Diamond
Social Media Marketing
Circle Pyramid icon
Circle Pyramid
Server-Side Tracking
Quadro icon
Quadro
Education

Hover any icon to see the active opacity state.

Sizing

20px
32px
40px — default
64px
96px
Usage rules Icons render at 36–40px in service tiles at 40% opacity, increasing to 70% on hover. Never recolor icons — they exist only in the two-green palette. Never use icons decoratively outside of service contexts without approval. Do not mix brand icons with third-party icon libraries in the same context.
06 — Voice & Tone

How We Speak

Qvalento speaks in the first-person plural — we. Our voice is calm, expert, and transparent. We never over-promise, use superlatives, or add emotional punctuation. We earn trust through clarity.

01

Calm expertise

We speak as a trusted, knowledgeable partner — not an aggressive growth agency. Short, declarative sentences. No hype, no urgency tactics.

02

First-person plural

We is our pronoun. We help, we make sure, we'll get back to you. The customer is you. Never I or the company in third person.

03

Transparency first

We are an ethical agency. We acknowledge privacy, we explain what we do. Confidence without arrogance. Our clients' success drives our voice.

04

Restrained warmth

Occasional conversational flair is welcome — "Tired of looking at boring Excel files?" — but only where it adds personality without undermining expertise.

In Practice

Do write
"We are experts in both implementation and analysis of your digital data."
Don't write
"We're the #1 analytics agency! 🚀 Supercharge your data today!!!"
Do write
"Feel free to contact us if you have a question. We'll get back to you as soon as possible."
Don't write
"Don't miss out! Our team of world-class experts is standing by 24/7 to TRANSFORM your business!"
07 — Casing & Punctuation

Text Conventions

Consistent casing and punctuation are as important as visual consistency. These rules apply across all brand touchpoints — website, email, social, and print.

ElementRuleExample
Section titles (H2, serif)Sentence caseOur Services  ·  Our Team  ·  Contact us
Eyebrow labelsALL CAPS, tracking +2.5pxWHAT WE DO  ·  WHO WE ARE
Button labelsALL CAPS, tracking +1.5pxCONTACT US  ·  SUBMIT
Body copyNormal sentence caseWe are experts in digital analytics.
Nav linksTitle caseServices  ·  Team  ·  Contact
Exclamation marksNever usedNever: "Great news!"
EmojiNever usedNever use 🚀 ✨ or similar
Em dashThe only expressive punctuationLast updated — April 2026
08 — Spacing & Layout

Spatial System

Generous whitespace is a core Qvalento design principle. Layout breathes. The grid is unrounded — hard-edged tiles with shared 1px borders, never gapped cards. Asymmetry with breathing room.

Spacing Tokens

TokenValueUsageScale
Container max1280pxmax-w-7xl page content
Gutter (mobile)24pxHorizontal page padding
Gutter (desktop)64pxlg:px-16 horizontal padding
Section padding144pxpy-36 standard section vertical
Section padding (sm)96pxpy-24 client logo wall
Nav height72pxFixed navbar height

Corner Radii

0px
Default — buttons, cards, inputs, sections
2px
Micro — subtle detail contexts
50%
Circle — success checkmark, team avatar
Pill
Brand mark (logo), team avatar variant
Square corners are a Qvalento signature. Do not reach for rounded corners reflexively. Rounded surfaces appear only on the brand mark, certain team avatars, and form success states — never on buttons, inputs, tiles, or cards.

Borders

border-light #f0f0ee
border-medium #e0e0dc
green-dark/30 (buttons)

All borders are 1px hairlines. Never use thicker borders for layout dividers.

09 — Components

UI Components

Core interface components. All follow the same principles: square corners, hairline borders, color-contrast hierarchy, and motion with purpose.

Buttons

Hover buttons to preview states.

Navigation

Qvalento
Services Team Contact
Contact Us

Service Tile

01

Web & App Analytics

We are experts in both implementation and analysis of your digital data.

02

Data Visualization

Tired of looking at boring Excel files? We'll help you set up interactive dashboards.

03

Search Engine Marketing

We make sure your company is visible in organic and paid search results.

Form Elements

10 — Motion

Animation & Motion

Motion is purposeful and calm — never decorative. Transitions reinforce the editorial quality of the brand. All animations use our standard easing curve.

Fast
300ms
Hover states, opacity changes, small color transitions. Buttons, links, icons.
Medium
500ms
Background fills, icon opacity, nav link color. Larger state changes.
Slow
700ms
Mobile menu slide, mosaic tile flip, large structural transitions.

Named Animations

q-float
9s / 14px amplitude
q-float-slow
14s / 7px amplitude
q-shimmer
6s / opacity 0.4→0.7
Standard easing for all transitions: cubic-bezier(0.4, 0, 0.2, 1) — material ease-in-out. Float animations are reserved for the hero mosaic only. Never animate layout-shifting properties (width, height, top, left) — use transform instead.
11 — Applications

Brand in Use

Examples of the Qvalento brand applied across touchpoints — from digital surfaces to correspondence materials.

Business Cards

Linus Larsson
Founder
linus.larsson@qvalento.com
Gothenburg, Sweden
Linus Larsson
Founder
linus.larsson@qvalento.com
Gothenburg, Sweden

Email Signature

Social Card

Social card: black background, white wordmark, center-aligned. Used for Open Graph, LinkedIn, and social sharing.

Geometric Pattern Usage

Brand icons used as background texture at 10% opacity

Brand icons on dark green at 8–10% opacity

↑   Back to top