Frequently Asked Questions

Marketing Design System & Website Rewrite

What is Gestalten, Hygraph's marketing design system?

Gestalten is Hygraph's marketing design system, created to streamline the process of building new website pages efficiently and consistently. It is an organized system built in Figma and translated into code and the CMS, allowing the marketing team to scale faster and reduce dependency on design and development resources. Gestalten covers foundational elements (colors, typography, spacing), reusable components, website blocks, and page templates, ensuring brand consistency and adaptability across all marketing assets. Read more.

How did Hygraph approach building its marketing design system?

Hygraph built its marketing design system in four stages: (1) establishing foundational elements like colors, typography, and spacing; (2) creating reusable components such as buttons and form fields; (3) assembling blocks for website sections; and (4) constructing pages using these blocks and components. The system was designed to be adaptable, accessible, and easy for editors to use, with a focus on consistency and scalability. Learn more.

What are the benefits of using a marketing design system like Gestalten?

Gestalten enables Hygraph to build new pages faster, maintain brand consistency, and reduce reliance on design and development resources. It allows for easy adaptation of colors, themes, and components, supports accessibility, and ensures that editors can quickly replicate designs in the CMS. The system also facilitates collaboration between designers, developers, and content writers, improving efficiency and scalability. Details here.

How does Hygraph's marketing design system differ from a product design system?

Hygraph's marketing design system is tailored for multiple audiences, including marketing editors and CMS features, and is built to be easy to consume in Figma for quick replication. Unlike a product design system, which focuses on product UI/UX, the marketing design system prioritizes flexibility for content creators and adaptability for various marketing needs. Read more.

Features & Capabilities

What features does Hygraph offer?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. Key features include robust integrations (e.g., Netlify, Vercel, Shopify, AWS S3, Cloudinary), enterprise-grade security, and support for both technical and non-technical users. The platform is designed for rapid content delivery, efficient data querying, and seamless collaboration across teams. See full feature list.

What integrations are available with Hygraph?

Hygraph supports a wide range of integrations, including hosting and deployment (Netlify, Vercel), eCommerce (BigCommerce, commercetools, Shopify), localization (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. See all integrations.

Does Hygraph provide an API?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. This API enables developers to build flexible, scalable digital experiences. API Reference.

How does Hygraph ensure optimized content delivery performance?

Hygraph is designed for rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized performance helps reduce bounce rates and increase conversions. Learn more.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection for all users. Security Features.

What security features does Hygraph provide?

Hygraph offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. More details.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For full details, visit the pricing page.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale globally or improve development velocity. See case studies.

What industries use Hygraph?

Hygraph is used across industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Explore industry case studies.

What business impact can customers expect from using Hygraph?

Customers can expect time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experience through consistent and scalable content delivery. Success stories include Komax achieving 3X faster time to market and Autoweb increasing website monetization by 20%. See more success stories.

How quickly can you implement Hygraph?

Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. The platform is easy to start with, even for non-technical users. Read the Top Villas case study.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph addresses operational pains (reducing reliance on developers, modernizing legacy tech stacks, supporting global teams, improving content creation UX), financial pains (lowering operational costs, speeding up time-to-market, reducing maintenance costs, supporting scalability), and technical pains (simplifying development, streamlining queries, resolving cache and integration challenges). Learn more.

How does Hygraph solve pain points for different personas?

For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it offers an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, supports scalability, and accelerates speed to market. Details here.

What KPIs and metrics are associated with the pain points Hygraph solves?

Key metrics include time saved on content updates, system uptime, consistency in content across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, and scalability metrics. See more on CMS KPIs.

Support & Implementation

What support and training does Hygraph provide?

Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, webinars, and a community Slack channel. Contact support.

How easy is it to get started with Hygraph?

Getting started is simple: sign up for a free-forever account, and use resources like documentation, video tutorials, and onboarding guides. The platform is praised for its intuitive interface and ease of use, even for non-technical users. Get started.

What technical documentation is available for Hygraph?

Hygraph provides comprehensive technical documentation covering all aspects of building and deploying projects, including API reference, integration guides, and onboarding resources. Access documentation.

Customer Proof & Success Stories

Who are some of Hygraph's customers?

Notable customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See all case studies.

Can you share specific customer success stories?

Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more success stories.

Product Information & Resources

Where can I find the Hygraph blog?

The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Hygraph Blog.

Where can I learn more about Hygraph's design system?

You can read about the design system and its implementation in the blog post How Hygraph uses Hygraph II: Marketing design system.

Webinar Event: How to Avoid Personalization Tech Traps

How Hygraph uses Hygraph II: Marketing design system

How we built a design system for the marketing front of Hygraph.
Pratibha Motwani

Written by Pratibha 

Sep 10, 2024
Mobile image

As you read in the introductory part of how we use Hygraph at Hygraph, we realized at some point that to scale faster as a company and to use our marketing resources more effectively, we needed a system that made it easier for us to build new pages faster on the website without being too dependent on the design and development resources.

If you haven’t read the previous part of the series yet, go through it here to better understand why we decided to invest our resources into building this system.

#A quick overview

The first part of the process was to build a design system on Figma, that could be later translated to the codebase and the CMS as well. We call our marketing design system inside Hygraph Gestalten. It’s an organized whole that is perceived as more than the sum of its parts. While I take you through the process of how we built it, you’ll know why this name fits the bill perfectly.

We approached the design system in 4 stages, from essential elements to the final pages. We shall dive deeper into these segments, but here’s an overview of the steps:

  1. Building the foundation: colors, typography, spacing, shadows, and all the primitive elements
  2. Building the components: using the foundation elements to create buttons, links, form fields, etc.
  3. Building the blocks: sections where we combine the foundation elements and components to create reusable website blocks, e.g., the hero section, the feature section, the callouts, etc.
  4. Building the pages: the last step is built using all the existing blocks and components

#Laying the foundation

To build a house, you need bricks, concrete, steel, water, etc., and this step was analogous to gathering those essential elements. Even at the first step, we needed to build everything from the ground up, as our brand had existed for some years already, so the idea was to enhance those further.

Colors

This step was the most interesting, and we had the most fun experimenting. We decided to create a pool of colors that would only be on Figma (and could also be used for other brand assets outside the website) and then derive a subset from it as the web palette. The hues were a mix of what was already existing for our brand and some status colors.

Once this was done, we decided upon HSLuv as our main color space, given its accessibility benefits and human-readable nature. While picking colors, we have always been cautious with accessibility scores as a critical factor. To build the color palettes and keep similar levels of saturation and lightness value, we used Github’s Primer Prism.

This helped us be more intentional about different colors while ensuring they were cohesive. When it came to naming the tokens, we relied on the lightness value for each hue so that different hues with the same lightness levels shared a suffix (indigo-100, indigo-200, indigo-600, and so on), and if a particular hue needed more tones, we could add them in the middle.

1 (6).png

Now that we had a core palette, the next step was to generate a web palette that would later be added to the code. The most crucial factor here was naming the color tokens. We were inspired by Google’s Material Design here and took the semantic route where the token names were based on the color usage and not the exact hues. We did this to ensure that anyone using this system would easily understand where to use what and wouldn’t have to do any guesswork.

This also makes changing any colors foolproof. Hygraph’s current primary tokens are based on indigo, but five years down the line, if we want our primary color to be teal, our system is very adaptable to that change. We have been particular with the naming here, and even if two different tokens refer to the same hex value, they will both be living in the same system under different usage categories. This also helps us avoid any confusion around which colors to use for other states, like hover and pressed.

2 (5).png

Typography

We use four typefaces at Hygraph, all designated with a specific purpose

  1. Plus Jakarta Sans: Headings
  2. Manrope: Body text
  3. Space Grotesk: Mono font for labels and specific tabs
  4. Source Code Pro: Code blocks

Once we were sure of the typefaces, we combined them with different attributes like line height, tracking, font-weight, etc., to create typography tokens for different variants for all the possible use cases on the website. We used a progressive line height system for body text, where the font size and the line height factor go up, too. For situations where we needed bigger blocks of text, like on a blog, the line height was increased further for better readability.

3 (3).png

Icons

We wanted to keep things straightforward and scalable here, so we decided to use the icon library from Untitled UI because it has 1000+ icons for different use cases, and they visually aligned well with our brand.

Spacing, shadows, radius, and other effects

Since all the design elements had to be connected to code and needed to have a uniform set of values, along with our developer, we decided to stick to the default Tailwind values for many different foundation elements like spacing, margins, shadows, radius, blur effects, etc. This process helped us move faster without compromising on the quality. Given that Figma has added new variable features, it also helps us use the same variables and a shared language as we evolve.

#Connecting Token Studio

It was finally time that we could start investing in dev resources in parallel to the design work, but we needed a way to be quickly on the same page in case we needed to make any changes. Here comes Token Studio.

Our system was built before Figma introduced native variables, so we depended on Token Studio. This is still our most used plugin, making the collaboration between design and development much smoother. We can also easily sync our earlier efforts with the new variables introduced to Figma.

#Structuring the basic components

Once the foundation elements were decided and ready to be used, the next step was to start putting these together to form components. These include buttons, pills, tags, avatars, form fields, etc. This bit was about keeping usability and versatility in mind, and I had to ensure each component covered different interaction states, sizes, themes, and style variants.

While most of our current website has a light theme, we wanted to keep the possibility of adapting things later if we add accent colors or dark theme components.

4 (3).png

#Block by block

With the essential components in place, we could now start thinking about the actual pages, and the first step was to break them down into different blocks. While this is one segment where we’re constantly improving to keep the system more adaptable and better looking, We still had to start somewhere. Many what-ifs, observations, and collaborations also led to this part.
Situations like,

  1. What if we add an email field to a feature section?
  2. What if the description copy needs to be longer?
  3. What if one of the cards in a grid is too long compared to the rest?
  4. What if we place this section on a light grey background instead of white?

Observations like,

  1. How many cards did we generally use on our old website?
  2. What are the different ways we’re using our callouts, and on which pages?
  3. Are there any pages where we’re breaking down our feature sections into further details?

Over the months, we tried to address all this and more, but working on this segment has made me realize the importance of collaboration with content writers while building and using a design system. No matter how concrete your marketing design system can be, there will always be situations where your copy might look good on one page and not on another, even if they’re using the same blocks. In such cases, it’s helpful to sit with the content writers and develop a middle ground that doesn’t hurt the visuals while still communicating the message effectively.

#Building the pages

After months of work, we could finally see the bigger picture and start designing pages for our website. Once we listed all the needed pages, we categorized them into templatized and modular.

Templatized pages

While we tried to make our building blocks very versatile, in some cases, we only needed a specific block on a single page and never needed to reuse them again; for example, pricing cards for the pricing page, chapter index, and navigation for the academy page. We wanted to avoid bloating the system by loading everything for each page and keeping these specific blocks as local components.

These templates also help me keep the designs consistent. A blog page can only look a certain way, so we wanted to avoid giving the editors the capability to add a custom hero or feature section inside the blog page. This way, it made sense to templatize certain pages that always follow the same structure and avoid confusion.

5 (2).png

Modular pages

These pages use only reusable blocks; think of feature pages, use case pages, or any new landing pages where you could combine all the existing design blocks to communicate the message by mixing and matching different sections on a single page. These are very composable and can be used as you please. The editors only need to go to Figma and check the specific variant used (e.g., if the button is solid, muted, outlined, etc.) and the section padding values, and add it along with the copy to the CMS.

6 (1).png

#Current state and takeaways

Since we launched the current version of our website in July 2023, we have ensured that all the existing and new pages use the design system and source content from our own CMS. While this process has improved our efficiency and collaboration by many folds, we also acknowledge that a design system is always a work in progress. We’re constantly updating tokens, components, and sections to fit our business's varied needs.

It’s important to understand that a marketing design system works very differently from a product design system. We must keep multiple audiences in mind, including the editors from our marketing team and the features inside the CMS. We had to ensure that we built the components in a very easy-to-consume manner on Figma so that the editors could quickly inspect the variants and replicate them on the CMS.

In hindsight, I have also realized that we could have done many things differently, and we’re constantly investing resources to improve these aspects:

  1. When we started, we ensured our color pool was diverse enough to address different UI needs. However, as time passed, these colors didn’t work well for other assets, and we had to revisit this multiple times. When approaching a marketing design system, it’s essential to test the colors for different use cases, social media, ads, print, etc., and then have subsets for different brand categories.
  2. Given the fast-paced nature of marketing teams, sometimes we rush to create new components that might not be 100% aligned with all the previous components and tokens. To solve this, we gather as a team occasionally to inspect such discrepancies and see how we can best address them.
  3. For something so complex, it’s essential to consider the available tools and find solutions together. For example, we could not use size tokens before Figma introduced variables, which affected communication with developers. So, we used to manually check if the values we wanted to use were available in Tailwind. This removed the pressure of being restricted by features while keeping us aligned.

Seeing Gestalten take shape and evolve as a system has been an exciting journey. We did not have anything like this when I joined Hygraph two years ago, and spending so many months on this project has been one of the most fulfilling parts of my design career. It all started with a brief to make our brand more consistent across channels, and I haven’t looked back since. I can’t wait to enhance it further.

In the following parts of this series, you’ll become familiar with the development side of this project and how our editors have been using this system. If this has inspired you to build a design system for your website, too, and you have some questions, I’d be more than happy to help.

Blog Author

Pratibha Motwani

Pratibha Motwani

Senior Brand Designer

Pratibha is a designer who is set to experiment with the world of creative living. When she’s not moving pixels, she’s out exploring new hobbies, from running miles to working on pottery or learning the piano.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.