Datamotive
Making enterprise trust visible. A brand evolution that connects three cloud products, a technical story and a production website.
1 token system
3product identities
Brand evolution / Digital experience
Complex technology.
Clear confidence.
A connected identity for the moments when continuity matters.
01 / The identity in usedatamotive.io ↗
From brand foundations to a working enterprise website.
At a glance
When a company sells business continuity, every touchpoint has to feel dependable. Datamotive’s three cloud products needed to read as one company. As the sole designer, I connected identity, messaging, technical diagrams and the website through one shared system — carrying the work from brand decisions to production.
- The challenge
- Unify three products without losing the recognition of the existing brand.
- Employment & role
- In-house at Datamotive · Senior Visual Designer / Creative Strategy · Jun 2025 – present · sole designer
- Delivered
- Corporate and three product identities, shared tokens, technical diagrams, website build and TCO calculator
- The approach
- Keep the hexagon, cube and teal. Establish shared rules for everything around them.
- Outcome
- Rebrand live on datamotive.io and applied across sales decks, marketing and social
Related services:B2B SaaS Brand Design SaaS Website Design Visual Design Systems
01 Problem
One company, reading as three.
Datamotive sells enterprise IT a single promise: when infrastructure fails, recovery takes minutes. But EasyMigrate, EasyHybridDR and EasyProtect had grown up separately — different type weights on adjacent pages, decks on incompatible grids, technical diagrams with arbitrary colour and line weight.
For someone evaluating disaster recovery, inconsistency reads as risk.
Trust was being rebuilt on every page.
Different visual rules made related products feel disconnected. The rebrand needed to make that relationship obvious, while keeping enough technical detail for an enterprise buyer to evaluate the product.
02 Role
One designer, brand to production.
- Strategy & language
- Positioning, outcome-first messaging, an eight-phrase CTA library calibrated to buyer stage.
- Identity
- Logo refinement; the meaning of the hexagon and cube documented so the motif can extend without drift.
- System
- Colour, type, spacing and elevation tokens; sixteen documented foundations; component rules.
- Information design
- A diagram standard for migration, replication, failover and recovery flows.
- Interface
- Site architecture and page design, including an interactive TCO calculator.
- Frontend
- React and Tailwind build on Sanity CMS, preview deploys on Vercel.
No design-system budget, no dedicated frontend engineer, and the weekly queue of decks, campaigns and events never paused. The system had to pay for itself as it was being built.
03 Strategy
Keep the recognition. Build the confidence.
The founder’s brief was explicit, and right: the hexagon, the cube and the teal already carried meaning and recognition. The job was to strengthen the foundation, not replace it.
The category splits into two registers — dark-mode neon that reads “startup”, and grey density that reads “legacy enterprise”. The open position was warm, calm and exact: mature without being old.
Make reliability visible.
01 / RetainThe brand’s memory
Keep the hexagon, cube and teal. Refine the rules around the recognisable identity.
Build on existing recognition while making future applications more consistent.
02 / UnifyThe product family
Use one type hierarchy, spacing system and component language across three products.
A buyer can move between products without learning a different visual language.
03 / ClarifyThe technical story
Give nodes, flow lines, labels and recovery states defined roles.
Make complex infrastructure easier to follow without removing the detail that establishes credibility.
04 / ApplyThe buying journey
Lead with outcomes, use specific actions and let buyers explore their own TCO scenario.
Connect the brand promise to something a buyer can understand and evaluate.
Four buyers, one voice
- CIO / CTO
- Needs predictable recovery and executive confidence. Distrusts vague claims.
- Cloud architect
- Reads the diagrams first. Loses trust the moment marketing oversimplifies.
- IT infrastructure manager
- Owns uptime. Reads operational credibility into visual consistency.
- SI partner
- Has to re-explain the value to their own clients. Can’t sell a fragmented brand.
The system got a name the team could argue with: Architectural Fluidity — sections separated by tone, spacing and hierarchy rather than heavy borders. Personality was locked at six words: clear, reliable, technical, calm, enterprise-grade, foundation-first. They rule out more than they prescribe.
04 Brand system
Three products. A shared visual DNA.
Every product shares one grid, one type ramp and one component set. Only four parameters flex: primary colour, tone weight, information density and diagram register. A fourth product joins by setting values, not by starting over.
One recognisable source.
Three distinct buyer needs.
EasyMigrate
How do we move?
Lead with the journey. Make source, destination and movement easy to follow.
EasyHybridDR
How do we recover?
Lead with continuity. Give replication, recovery and failback a consistent visual grammar.
EasyProtect
How do we protect?
Lead with assurance. Keep protection within the same trusted brand family.
Colour & typography
A palette with a job to do.
Colour establishes hierarchy before it adds personality. Navy anchors the brand, teal guides action, and the supporting palette separates information, proof and risk.
Three core colours anchor the identity. Nine supporting colours have specific roles. Each pairing below shows its measured text contrast.
- Aa#102841Navy13.95:1 whitesmoke text · AAAPrimary text, dark surfaces and hero emphasis
- Aa#F5F7F9Whitesmoke13.95:1 navy text · AAAPage backgrounds, soft sections and negative space
- Aa#297186Teal5.53:1 white text · AAPrimary actions, links, active states and key metrics
- Aa#57A4B3Cadet Blue5.25:1 navy text · AADiagram nodes, supportive highlights and soft badges
- Aa#99A8AEDark Gray6.11:1 navy text · AASecondary hierarchy, dividers and disabled UI
- Aa#2E7FADSteel Blue4.42:1 white text · AA LargeTechnical diagrams, platform cues and information
- Aa#C2CDD1Light Gray9.24:1 navy text · AAACard borders, table rules and subtle separators
- Aa#BBB0B2Warm Dark Gray7.11:1 navy text · AAAInactive states, muted backgrounds and footer dividers
- Aa#D5D3D5Warm Light Gray10.06:1 navy text · AAANeutral outlines, comparison separators and form borders
- Aa#E6D1A7Wheat10.02:1 navy text · AAATrust stories, partner highlights and testimonials
- Aa#EEBC35Goldenrod8.47:1 navy text · AAAAwards, certifications and patent proof only
- Aa#D2313CCrimson4.95:1 white text · AAAlerts, critical risk, errors and incident warnings only
Predictable recovery.
Agentless replication across hybrid and multi-cloud environments, with one recovery standard.
Behind the system Design-to-code handoff ↗
One name, both sides of the handoff
- $color.brand.primary
- --accent
- $spacing.lg
- --spacing-lg
Figma variables and CSS custom properties share names. Components accept tokens only, so a new product identity is new values, not new components.
The system in use
Different stories. Same company.
These delivered product pages show how the shared structure holds while the content and technical story change.
Information design
Clarity is part of the identity.
The diagram standard extends the brand into the place a cloud architect looks first: how the technology actually works.
- Simple nodes, one weight
- Teal flow lines, one direction
- Labels in navy, never on the line
- Animated dash = active flow only
05 In practice
From recognition to evaluation.
The website is where the rebrand has to work hardest: explain a technical product, establish confidence and help a buyer take the next step. The same design decisions carry from the first headline to the calculator.
Interactive tool
A useful exchange: buyers select their source platform, target and scale, then see a cost comparison before being asked for an email. The detailed report becomes a reason to continue the conversation.
Responsive by default
The brand has to hold on a small screen, too. The same hierarchy restacks, navigation collapses to one control, and the technical story stays in a deliberate reading order.
Language, rewritten
Zero downtime guaranteed.
Build reliable failover readiness for moments when recovery matters.
Feature-first became outcome-first; hype became proof. The claims had to survive a cloud architect’s reading.
Workflow
Design → local build → review → Git → preview deploy → merge. AI tools compressed research, scaffolding and token-consistency checks; hierarchy, typography, language and what shipped stayed human decisions.
06 Outcome
A brand the company can build on.
The result is a connected brand foundation: three product identities, a documented visual language and a working website. The same rules now extend across sales decks, marketing and social.
Delivered scope
- 3product identities on one token setEasyMigrate, EasyHybridDR, EasyProtect.
- 16documented foundationsFrom logo usage and colour tokens to diagrams and developer handoff.
- 8CTA phrasesA fixed library, calibrated to buyer stage.
- 1production website, designed and built in-houseLive at datamotive.io, with the TCO calculator.
Recognition
The existing identity remains recognisable, with a consistent framework around it.
Consistency
Product pages, technical diagrams and marketing materials draw from the same foundations.
Continuity
Documented rules give future work a starting point, from a new campaign to another product page.
What I’d do differently
Front-load voice. The visual system came quickly; the brand language took three iterations. “Reliable recovery” versus “eliminate downtime risk” sounds like copy. It’s positioning — and it’s the part enterprise buyers actually read. Next time the messaging architecture happens in week one, with the same rigour as the tokens.