The single source of truth for the Synerise visual language — the system behind every screen, campaign, and touchpoint of an AI-native customer platform.
Twenty-one sections · One systemScroll to explore
02 / 22Brand Overview
We build the intelligence layer for customer growth.
Synerise unifies behavioral data, AI and automation into one real-time platform. Our identity has to feel as precise, calm and capable as the product — enterprise-grade, human-centered, unmistakably intelligent.
Master artwork for Synerise and the brands built around it. Take the vector file wherever you can — SVG for screen, PDF for print — and reach for PNG only when nothing else will do.
Clear space, minimum sizes and the things never to do to these marks are set out in 05 · Logo System and 20 · Do & Don't. Need a lockup that isn't here? Ask the brand team rather than redrawing one.
04 / 22Design Philosophy
Four principles guide every decision.
01
Intelligence made visible
Data and AI are the product. The design surfaces their logic with clarity — never decorates over it. Every element earns its place.
02
Clarity over decoration
Generous whitespace, restrained color, precise type. Confidence comes from what we leave out, not what we add.
03
Systematic, not rigid
A modular grid and tokenized scale give structure — with room for editorial rhythm and bold moments where they matter.
04
Human at the center
Enterprise doesn't mean cold. Warm neutrals, real people, and approachable language keep the technology human.
05 / 22Logo System
One wordmark. Applied with discipline.
The Synerise wordmark is the constant across every touchpoint. Its geometric letterforms are never redrawn, restyled, or reproportioned.
Primary wordmark · full color on lightPreferred
On light — grey-900
On mint — dark ink
On dark — reversed white
Clear space
xx
Maintain clear space equal to the cap-height (x) of the wordmark on all sides.
Minimum size
Digital · 120px
Min · 72px / 24mm
Never reproduce the wordmark below 72px wide on screen or 24mm in print.
Misuse
✕ Don't stretch
✕ Don't recolor
✕ Don't rotate
✕ Low contrast
06 / 22Color System
The palette is fixed. This is the one thing we never change.
Ten hues, ten steps each. Mint leads; ink and warm greys carry the weight; accents are used sparingly and with intent.
Primary
Mint
#00FFBC · rgb(0 255 188)
Where it lives
Primary actions · links · focus rings · selected states · active data. If it's interactive or intelligent, it's mint.
Mint — signature scale
050100200300400500600700800900
Grey — neutral scale
050100200300400500600700800900white
Semantic roles
Success
green-600 · #54CB0B
Warning
yellow-600 · #FAB700
Error / Secondary
red-600 · #F52922
Info
mint · #00FFBC
Accents — 600 · for charts & tags
Purple
Violet
Cyan
Orange
Pink
Mars
Fern
Green
Signature gradients — derived from the palette
Gradients blend mint with ink or teal. Reserved for hero moments, never for text or UI chrome.
Usage balance
White 70%Grey 16%Ink 8%Mint 6%
Color is a signal. The more neutral the canvas, the louder a single mint moment reads.
07 / 22Typography
Graphik. One family, every voice.
A single geometric sans carries the whole system — from 132px display to 10px overline. Weight and scale do the work; we never mix in a second typeface.
Aa
Graphik LCG Web
Light · Regular · Medium · Semibold · Bold
Intelligent by designLight · 300
Intelligent by designRegular · 400
Intelligent by designMedium · 500
Intelligent by designSemibold · 600
Type scale · editorial display + product UI
Display / 76Growth, decided
H1 / 24Section heading
H3 / 18Card title
Body / 13Default product body — dense, legible, neutral. The workhorse size across tables and forms.
Overline / 10Metadata label
Sentence case
Labels, buttons, and titles. Never Title Case, never all-caps except the 10px overline.
Tight display tracking
Negative letter-spacing (-0.5 to -3px) on large headlines for a confident, modern set.
Medium for UI
Weight 500 is the default for labels and headings; 700 is almost never used in chrome.
08 / 22Layout System
A modular grid. Space that breathes.
Everything sits on a 12-column grid and an 8-point spacing scale. Structure is invisible; the result is calm, aligned, and unmistakably premium.
12-column grid · 24px gutter
Containers
Content max-width1280px
Page padding24px
Card padding24px
Base radius3px
8-point spacing scale
4
8
12
16
24
32
48
64
09 / 22Components
A library built for density and calm.
Every control shares the same 32px rhythm, 3px radius, 2px input border, and restrained shadow. These are the real product components — not approximations.
Buttons · variants
States · primary
Inputs & selection
AIActiveSegmentBetaRunning
AI Recommendation
Model · updated 2m ago
Predicted next-best action for 24 380 profiles in this segment.
Campaign saved
Your changes are live across all channels.
Table
Segment
Profiles
Status
High-value shoppers
124 590
Active
Churn risk · 30d
18 204
Review
Newsletter engaged
92 118
Active
SegmentsSY
10 / 22Iconography
900+ icons. One geometric voice.
A custom SVG library drawn on a 24px grid. Single-weight, currentColor, sharp geometry. Icons clarify — they never decorate.
Sizes
S · 16
M · 24
L · 32
Outline / filled
Default
Active
Color in context
Icons inherit text color. Reserve mint for interactive or active states.
11 / 22Graphic Elements
The visual signatures that say Synerise.
A small kit of recurring devices — a data mesh, connective nodes, gradient fields, and precise dividers — extend the brand beyond the logo.
Data mesh — intelligence at scale
Connective nodes — unified data
Gradient field — hero surfaces
Dividers
Bracket / tick
[Focused framing]
Square brackets frame key figures and callouts.
Corner marks
Highlight region
12 / 22Photography Direction
Real people. Natural light. Quiet confidence.
Photography keeps the enterprise human. Candid moments over staged stock, soft daylight over hard flash, and generous negative space that lets a single subject breathe. Drop your approved imagery into the frames below.
Do
→Candid, unposed moments in real environments
→Soft, directional daylight and true-to-life color
→Generous negative space for type and UI overlays
→Diverse, authentic people; screens shown in context
Flat, multi-color spot illustrations explain concepts in empty states and onboarding. Sculpted 3D renders — in brand hues on neutral grounds — headline campaigns and launches.
Pixel system — the Synerise ID motif
Pixels · 8 levels
Halftone dots · 0–100%
Byte grid · 1 → 8
Gradient → pixels
3D language
→Soft studio light, matte-to-glass materials
→Mint highlights on neutral forms — one accent only
→Neutral grey or white grounds, generous space
→Abstract, never literal — form suggests intelligence
14 / 22Motion Principles
Fast, functional, never decorative.
Motion confirms and guides — it doesn't perform. Short durations, a single easing curve, and one signature ripple on interaction.
0.2s
Fast — hovers, toggles
0.3s
Base — panels, cards
0.5s
Ripple pulse
cubic-bezier
(.4, 0, .2, 1)
Ripple on press
1s linear spinner
Skeleton shimmer
15 / 22Data Visualization
Charts that read at a glance.
Data is the product, so charts get first-class treatment. One fixed color order keeps every series consistent across the platform.
Ebooks, case studies, and articles share one editorial grammar: a strong kicker, a confident headline, a readable measure, and pull quotes that carry the argument.
Case Study · Retail
How a unified profile lifted repeat purchase by 34%.
The team replaced twelve disconnected tools with a single real-time layer. Within one quarter, decisioning moved from overnight batches to sub-second, and every channel finally spoke the same language.
Columns hold at a comfortable 60–75 character measure. Body is Graphik Regular at 15–17px with 1.7 line-height for sustained reading — denser than product UI, calmer than a landing page.
Section kickers use the mint overline. Numerals are tabular so figures align in tables and stat runs. Links use deep mint and underline on hover — never mid-sentence decoration.
“We stopped guessing. The platform tells us what to do next — in real time, for every customer.”
17 / 22Brand Patterns
Composable blocks, assembled with intent.
A handful of reusable layout patterns cover most needs — drop them in, keep the spacing, change the content.
Hero pattern
Decide the next best action for every customer.
Book a demo
Predict
AI models score every profile continuously.
Segment
Build audiences from live behavior.
Act
Orchestrate across every channel.
34%
Repeat purchase lift
12→1
Tools consolidated
<100ms
Decision latency
1.2M
Profiles unified
18 / 22Micro Details
The details that signal craft.
Premium is felt in the small things — a precise focus ring, a considered shadow, a 3px corner held everywhere.
Radii
3px · base
12px · card
pill · tag
Focus ring
2px blue ring · keyboard only
Elevation
Tabular numerals
124 590092 118018 204
Hover states · hover the buttons
19 / 22Brand Applications
One system, every surface.
The same tokens carry from a social square to a trade-show wall. Drop real imagery into the frames to see it come alive.
AI · Growth
Real-time decisions, for every customer.
Social · 1:1 post
Product update
Your weekly intelligence digest
View insights
Email marketing
synerise.com
PlatformSolutionsResourcesGet started
AI-native platform
Turn behavior into growth.
Unify data, AI and automation in one real-time system.
Book a demo
Website · landing page
Meet the intelligence layer.
Booth 214 · Hall A
Event · booth banner
Q3 Growth Review
Board deck · 2026
Presentation · title
Paid · 300×250
See every customer clearly.
Learn more
Paid media · display
Ebook
The real-time growth playbook
Ebook · case study cover
20 / 22Do & Don't
Clear lines keep the brand consistent.
✓Do
Let neutral space carry the layout — one mint accent at a time.
Use the wordmark as supplied, in approved colors only.
Set headlines in Graphik Medium with tight tracking.
Align everything to the grid and the 8-point scale.
Keep motion short, functional, and consistent.
✕Don't
Flood layouts with color or stack multiple gradients.
Recolor, stretch, rotate, or add effects to the logo.
Introduce a second typeface or use all-caps body copy.
Crowd elements or break the spacing rhythm.
Add bounce, spring, or decorative animation.
21 / 22Creative Showcase
The system, fully expressed.
The Synerise Platform
Every customer, understood in real time.
Data, AI and automation — one intelligence layer behind every decision, every channel, every moment.
Book a demoExplore platform
Intelligence, made visible.
Report 2026
The State of Real-Time Growth
Preserve · Refine · Elevate
This is the Synerise system. Follow it, and every asset feels like it belongs.
22 / 22
Web · Meta & Open Graph
Every public Synerise URL carries a complete meta set. The share card is often the first brand touchpoint — treat the Open Graph image as a designed asset, never an auto-generated screenshot.
OG image template · 1200 × 630
Behavioral AI for real-time growth
synerise.com
1200 × 630 px≤ 300 KB8% safe marginMax 8 words
How the card renders
Behavioral AI for real-time growth
synerise.com
Behavioral AI Platform | Synerise
Turn behavioral signals into real-time predictions, personalization and automation — on one platform.
Preview every release in the LinkedIn Post Inspector, Facebook Sharing Debugger and Slack before shipping. Bust caches by re-scraping after any image change.
Required meta set · every public page
<title>50–60 chars · pattern: Page name | SyneriseBehavioral AI Platform | Synerise
description140–160 chars · unique per page · benefit first, no buzzword stackingTurn behavioral signals into real-time predictions…
canonicalAbsolute https URL, no tracking params, one per pagehttps://synerise.com/platform
og:titleMay drop the "| Synerise" suffix — the logo is in the imageBehavioral AI for real-time growth