Design System
Brand Design Systems
Two Webflow-based brand guideline microsites for Cognism and Mailtastic, aligning all brand assets and evolving our visual identity for mid-market and enterprise audiences.
Project Overview:
In 2023–2025, I led the creation and evolution of brand guideline microsites for Cognism and Mailtastic, built on Webflow. These systems ensure brand consistency across all digital and offline channels, providing centralised access to assets, design specifications, and tone of voice guidelines.
The Cognism brand guidelines can be viewed at https://www.cognismstyleguide.com/ and Mailtastic’s at mailtasticstyleguide.webflow.io. These guidelines have become essential tools for internal teams, partners, and agencies when producing campaigns, content, and product collateral.
The Challenge:
As Cognism scaled its marketing and product portfolio, there was a growing need for comprehensive, accessible, and regularly updated brand guidelines that:
Reflected evolving brand positioning for mid-market and enterprise audiences.
Provided easy access for internal and external stakeholders.
Allowed flexible updates as brand visuals, tone of voice, and assets evolved.
Incorporated multiple brands (Cognism and Mailtastic) under one parent company while preserving individual brand identities.
The Approach:
I led the design and build of these brand guideline microsites, working with our design and web development teams to:
1. Build Dynamic Brand Guidelines:
Created Webflow-based microsites for Cognism and Mailtastic with intuitive navigation and searchable content.
Structured guidelines into sections covering logos, typography, layouts, colours, imagery, illustrations, motion, and tone of voice.
2. Customise Webflow Templates:
Customised Webflow templates to fit Cognism and Mailtastic’s unique brand content.
Managed on-page optimisation, responsive design, and pre-launch testing.
3. Brand Evolution:
Updated Cognism’s guidelines to reflect new brand colour palettes, reduced reliance on shapes, updated tone of voice, and refined messaging for mid-market and enterprise segments.
Supported the Mailtastic rebrand (March 2023) with guidelines influenced by Cognism but adapted for a unique identity.
4. Collaboration & Communication:
Worked closely with graphic designers, developers, and brand managers to ensure consistency and accuracy.
Used a dedicated #design Slack channel to communicate updates across the business.
Execution Highlights:
Two fully built and live brand guideline microsites for Cognism and Mailtastic.
Custom Webflow design tailored to evolving brand needs.
Integration of new brand colours, imagery, and tone of voice for mid-market and enterprise positioning.
Successfully learned and applied Webflow CMS, overcoming its higher initial learning curve.
Established processes for regular updates to keep guidelines current and communicated changes across teams.
Results & Impact:
Improved brand consistency across all campaigns, product materials, and content.
Centralised brand resource hubs widely used by internal teams and external agencies.
Positive feedback from stakeholders on ease of use and accessibility.
Supported Cognism’s brand evolution and the successful Mailtastic rebrand.
More Projects
Design System
Brand Design Systems
Two Webflow-based brand guideline microsites for Cognism and Mailtastic, aligning all brand assets and evolving our visual identity for mid-market and enterprise audiences.
Project Overview:
In 2023–2025, I led the creation and evolution of brand guideline microsites for Cognism and Mailtastic, built on Webflow. These systems ensure brand consistency across all digital and offline channels, providing centralised access to assets, design specifications, and tone of voice guidelines.
The Cognism brand guidelines can be viewed at https://www.cognismstyleguide.com/ and Mailtastic’s at mailtasticstyleguide.webflow.io. These guidelines have become essential tools for internal teams, partners, and agencies when producing campaigns, content, and product collateral.
The Challenge:
As Cognism scaled its marketing and product portfolio, there was a growing need for comprehensive, accessible, and regularly updated brand guidelines that:
Reflected evolving brand positioning for mid-market and enterprise audiences.
Provided easy access for internal and external stakeholders.
Allowed flexible updates as brand visuals, tone of voice, and assets evolved.
Incorporated multiple brands (Cognism and Mailtastic) under one parent company while preserving individual brand identities.
The Approach:
I led the design and build of these brand guideline microsites, working with our design and web development teams to:
1. Build Dynamic Brand Guidelines:
Created Webflow-based microsites for Cognism and Mailtastic with intuitive navigation and searchable content.
Structured guidelines into sections covering logos, typography, layouts, colours, imagery, illustrations, motion, and tone of voice.
2. Customise Webflow Templates:
Customised Webflow templates to fit Cognism and Mailtastic’s unique brand content.
Managed on-page optimisation, responsive design, and pre-launch testing.
3. Brand Evolution:
Updated Cognism’s guidelines to reflect new brand colour palettes, reduced reliance on shapes, updated tone of voice, and refined messaging for mid-market and enterprise segments.
Supported the Mailtastic rebrand (March 2023) with guidelines influenced by Cognism but adapted for a unique identity.
4. Collaboration & Communication:
Worked closely with graphic designers, developers, and brand managers to ensure consistency and accuracy.
Used a dedicated #design Slack channel to communicate updates across the business.
Execution Highlights:
Two fully built and live brand guideline microsites for Cognism and Mailtastic.
Custom Webflow design tailored to evolving brand needs.
Integration of new brand colours, imagery, and tone of voice for mid-market and enterprise positioning.
Successfully learned and applied Webflow CMS, overcoming its higher initial learning curve.
Established processes for regular updates to keep guidelines current and communicated changes across teams.
Results & Impact:
Improved brand consistency across all campaigns, product materials, and content.
Centralised brand resource hubs widely used by internal teams and external agencies.
Positive feedback from stakeholders on ease of use and accessibility.
Supported Cognism’s brand evolution and the successful Mailtastic rebrand.
More Projects
Design System
Brand Design Systems
Two Webflow-based brand guideline microsites for Cognism and Mailtastic, aligning all brand assets and evolving our visual identity for mid-market and enterprise audiences.
Project Overview:
In 2023–2025, I led the creation and evolution of brand guideline microsites for Cognism and Mailtastic, built on Webflow. These systems ensure brand consistency across all digital and offline channels, providing centralised access to assets, design specifications, and tone of voice guidelines.
The Cognism brand guidelines can be viewed at https://www.cognismstyleguide.com/ and Mailtastic’s at mailtasticstyleguide.webflow.io. These guidelines have become essential tools for internal teams, partners, and agencies when producing campaigns, content, and product collateral.
The Challenge:
As Cognism scaled its marketing and product portfolio, there was a growing need for comprehensive, accessible, and regularly updated brand guidelines that:
Reflected evolving brand positioning for mid-market and enterprise audiences.
Provided easy access for internal and external stakeholders.
Allowed flexible updates as brand visuals, tone of voice, and assets evolved.
Incorporated multiple brands (Cognism and Mailtastic) under one parent company while preserving individual brand identities.
The Approach:
I led the design and build of these brand guideline microsites, working with our design and web development teams to:
1. Build Dynamic Brand Guidelines:
Created Webflow-based microsites for Cognism and Mailtastic with intuitive navigation and searchable content.
Structured guidelines into sections covering logos, typography, layouts, colours, imagery, illustrations, motion, and tone of voice.
2. Customise Webflow Templates:
Customised Webflow templates to fit Cognism and Mailtastic’s unique brand content.
Managed on-page optimisation, responsive design, and pre-launch testing.
3. Brand Evolution:
Updated Cognism’s guidelines to reflect new brand colour palettes, reduced reliance on shapes, updated tone of voice, and refined messaging for mid-market and enterprise segments.
Supported the Mailtastic rebrand (March 2023) with guidelines influenced by Cognism but adapted for a unique identity.
4. Collaboration & Communication:
Worked closely with graphic designers, developers, and brand managers to ensure consistency and accuracy.
Used a dedicated #design Slack channel to communicate updates across the business.
Execution Highlights:
Two fully built and live brand guideline microsites for Cognism and Mailtastic.
Custom Webflow design tailored to evolving brand needs.
Integration of new brand colours, imagery, and tone of voice for mid-market and enterprise positioning.
Successfully learned and applied Webflow CMS, overcoming its higher initial learning curve.
Established processes for regular updates to keep guidelines current and communicated changes across teams.
Results & Impact:
Improved brand consistency across all campaigns, product materials, and content.
Centralised brand resource hubs widely used by internal teams and external agencies.
Positive feedback from stakeholders on ease of use and accessibility.
Supported Cognism’s brand evolution and the successful Mailtastic rebrand.