# Hygraph · Design system migration spec

> Source: https://hygraph.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern, enterprise B2B SaaS design that balances professionalism with a clean, modern aesthetic.

## 1. Identity DNA

The Hygraph design system is built like a high-performance engine for enterprise content operations—every component precisely machined to accelerate content velocity. It achieves this through a disciplined, clean aesthetic where white space serves as the primary structural element, allowing the vibrant purple accent to function as a clear signal for action and state change.

**One-liner:** An AI-powered headless CMS designed to accelerate content velocity for enterprise teams.
**Keywords:** Headless CMS · Content Velocity · Structured Content · AI-Powered
**Analogy:** A high-performance engine for enterprise content operations.

## 2. Color

The color system is a disciplined study in restraint, using a vast field of neutral grays and white to establish a clean, professional baseline. This makes the single, vibrant purple accent a powerful and unambiguous signal for calls-to-action and interactive states.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F6F8F9` | card background |
| `--bg-quiet` | `#E7EAEF` | quiet area |
| `--ink` | `#081026` | body text |
| `--ink-soft` | `#2D3A5F` | secondary text |
| `--muted` | `#566A95` | placeholder |
| `--accent` | `#685CEF` | single accent |
| `--line` | `rgba(231, 234, 239, 1.0)` | divider |

**Color principle:** Clean and professional with a vibrant purple accent to highlight key actions and state changes.

The governing principle is functional clarity: color is applied with purpose, never for mere decoration.

## 3. Typography

Typography is bifurcated by function: a geometric sans-serif provides a modern, structured voice for headlines, while a humanist sans-serif ensures high readability for body copy. A monospace font, Space Grotesk, is reserved for technical code snippets, maintaining a clear hierarchy of information.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -2.4px | Main hero headline |
| headline | 40px | 1.2 | 500 | -0.56px | Section headlines |
| subtitle | 20px | 1.5 | 400 | -0.22px | Hero subtext and lead paragraphs |
| body | 16px | 1.625 | 400 | normal | General body copy |
| label | 14px | 1.57 | 500 | 1.28px | Navigation, uppercase buttons, and tags |

**Type rules:**
- Headlines use a geometric sans font for a modern, structured look.
- Body text uses a humanist sans font for high readability.
- Monospace font (Space Grotesk) is used for code snippets and technical details.
- Uppercase text is used sparingly for labels and navigation elements.
- Letter spacing is slightly increased for uppercase text to improve legibility.

## 4. Spacing

A strict 4px base grid underpins the entire system, establishing a consistent vertical and horizontal rhythm that creates order and predictability in all spacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A 4px base grid is used consistently for padding, margins, and layout spacing.

## 5. Surfaces

Depth is communicated sparingly through a single, soft shadow that lifts surfaces subtly off the white canvas. Borders are reduced to the faintest hairline, defining space without visual weight.

- **Radius:** sm 6px · md 8px · lg 10px · pill 9999px
- **Shadows:**
  - None: rgba(0, 0, 0, 0.047) 0px 12px 12px 0px, rgba(0, 0, 0, 0.055) 0px 25px 25px 0px
  - None: rgba(91, 76, 255, 0.6) 0px 2px 4px 0px, rgb(91, 76, 255) 0px 0px 0px 1px
- **Borders:** 1px solid rgba(231, 234, 239, 1.0)

## 6. Layout

The layout skeleton is a standard 12-column grid with a maximum container width, providing a spacious yet structured foundation. Responsive breakpoints ensure the grid adapts gracefully, maintaining clarity from desktop to mobile.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A standard 12-column grid system with a maximum width of 1280px and responsive breakpoints at 768px and 1024px.

## 7. Motion & Interaction

Motion is minimal and purposeful, applied only to communicate interactivity and state changes. The philosophy favors subtle feedback—a soft spring for hover states and smooth fades for reveals—over flashy animation.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - A subtle spring animation (cubic-bezier(0.18, 0.89, 0.31, 1.57)) is used for bouncy hover states on interactive elements.
  - Smooth transitions (0.15s) are used for color, background-color, and border-color changes.
  - Opacity fades (0.3s) are used for revealing elements.

- **Hover:** Interactive elements like buttons and links have subtle color or background changes on hover, often accompanied by a subtle spring animation.
- **Click:** Clicking an element may trigger a slight transform or color change to provide feedback.
- **Transition:** All transitions use a consistent 0.15s or 0.3s duration with a standard ease-out cubic-bezier curve.
- **Keyboard:** Standard keyboard navigation is supported, with focus states likely matching hover states for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and forward-thinking, stating clear value propositions through large, impactful headlines. Language is direct and action-oriented, avoiding casual tone, unexplained jargon, and passive constructions.

- **Tone:** Professional, confident, and forward-thinking.
- **Headline style:** Large, impactful headlines that state a clear value proposition.
- **CTA style:** Direct and action-oriented, such as 'Contact us' or 'Get started'.
- **Avoid:** Overly casual language / Technical jargon without context / Passive voice

### Don'ts
- ❌ Don't use harsh, high-saturation colors outside the established purple palette.
- ❌ Don't use a heavy, blackletter or highly decorative font for headlines.
- ❌ Don't use a fully dark mode theme, as the screenshot shows a light, airy interface.
- ❌ Don't use sharp, 90-degree corners on buttons or cards, as the design favors softer, rounded shapes.
- ❌ Don't use dense, multi-column text layouts for main content, as the design favors clean, centered reading paths.
- ❌ Don't use large, complex background images that compete with the text content.

The system deliberately forgoes dark mode, sharp corners, and dense layouts in favor of its defined light, airy, and soft-edged aesthetic.

## System Prompt (paste into AI tool)

```
You are designing a professional, enterprise-focused B2B SaaS website for an AI-powered headless CMS. The design should be clean, airy, and trustworthy, using a white background with a primary purple accent (#685CEF) to drive calls to action. Typography is a mix of a geometric sans for headlines and a humanist sans for body text, both highly legible. Key elements include rounded buttons (pill-shaped), subtle shadows, and a generous amount of white space. Do not use a dark mode, do not use sharp corners on interactive elements, and do not use dense, cluttered layouts. The overall feeling should be one of precision, efficiency, and modern technology.
```
