---
title: "Grafbase design system"
variant: extended
source: https://grafbase.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/grafbase-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Grafbase · Design System

> A bright, precise interface for API governance

**Theme:** light · **Industry:** devtools · **Source:** https://grafbase.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Grafbase pairs a restrained white canvas and oversized black typography with quiet product-interface visuals. Its homepage moves from a dashboard-led hero into feature cards, integration marks, comparison content, and a direct call to action.

## North star

Keep the page bright and spacious, using bold black typography and pale product UI as the primary contrast rather than large blocks of color.

## Overview

The page is built around a white canvas (#ffffff), with near-black headings (#1b1b1b) and muted gray supporting copy keeping the presentation crisp and legible. A narrow green-to-teal announcement band is the most saturated brand moment; the measured gradient uses #19a05f and #0d7f8c, while the main call to action is black rather than green. Inter carries nearly all of the interface: the hero uses large, tightly tracked bold type, and section headings, card titles, and compact navigation step down into more practical weights and sizes. The first viewport balances a text-led hero on the left with a large, pale dashboard preview on the right. Below, generous white space separates centered section headings, two-column feature cards, integration logos, and comparison content. Fine gray borders and lightly tinted panels define product surfaces without heavy shadows. Most imagery is product UI or restrained technical illustration, not photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation background, and open space around content. |
| Slate Copy | `#60646c` | `--color-slate-copy` | neutral | Primary muted body copy and secondary navigation text. |
| Carbon Ink | `#1b1b1b` | `--color-carbon-ink` | brand | Headings, primary navigation, dark CTA text, and key interface labels. |
| Soft Divider | `#eaeaea` | `--color-soft-divider` | surface | Pale button fills, card surfaces, and frequent hairline borders. |
| Canopy Green | `#19a05f` | `--color-canopy-green` | accent | Green endpoint of the announcement-band gradient and restrained technical UI details. |
| Harbor Teal | `#0d7f8c` | `--color-harbor-teal` | accent | Teal endpoint of the announcement-band gradient; not a dominant page surface. |
| Ash Gray | `#7c7c7c` | `--color-ash-gray` | neutral | Tertiary navigation and supporting text where lower emphasis is needed. |
| Mist Border | `#e0e1e6` | `--color-mist-border` | neutral | Thin outlines around pale secondary buttons. |
| Graphite Gray | `#606060` | `--color-graphite-gray` | neutral | Occasional secondary text, especially in footer and supporting interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eaeaea` (Soft Divider) · `--color-text` → `#1b1b1b` (Carbon Ink) · `--color-text-muted` → `#60646c` (Slate Copy) · `--color-text-subtle` → `#7c7c7c` (Ash Gray) · `--color-border` → `#eaeaea` (Soft Divider) · `--color-accent` → `#19a05f` (Canopy Green) · `--color-accent-2` → `#0d7f8c` (Harbor Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1b1b1b` | `#ffffff` | 17.22:1 | AAA |
| `#1b1b1b` | `#eaeaea` | 14.32:1 | AAA |
| `#60646c` | `#ffffff` | 5.94:1 | AA |
| `#60646c` | `#eaeaea` | 4.94:1 | AA |
| `#7c7c7c` | `#ffffff` | 4.17:1 | AA-large |
| `#7c7c7c` | `#eaeaea` | 3.47:1 | AA-large |
| `#19a05f` | `#ffffff` | 3.37:1 | AA-large |
| `#19a05f` | `#eaeaea` | 2.8:1 | fail |

### Gradients

- `linear-gradient(89.97deg, rgb(25, 160, 95) 0.02%, rgb(13, 127, 140) 123.85%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Primary typeface for headings, body copy, navigation, buttons, and most links. | Inter |
| sans | `--font-sans` | system | 400, 500 | System sans-serif fallback, measured on a small number of links. | Inter |

- **Inter:** Use a clean sans-serif hierarchy from regular body text to bold display headings; the hero heading is tightly tracked.
- **sans:** Keep link styling compact and medium-weight; use sentence case rather than decorative capitalization.

### Type scale — Perfect Fifth (ratio ≈ 1.54, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 700 | 1 | -0.05em | — | Inter | Large, bold display treatment for the primary hero statement. |
| h1 | 40px | 700 | 1.1 | -0.025em | — | Inter | Primary page headline and prominent section headline. |
| h2 | 24px | 600 | 1.1 | 0 | — | Inter | Section titles introducing feature and content groups. |
| h3 | 20px | 400 | 1.5 | 0 | — | Inter | Feature-card titles and subordinate content headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Hero description, feature explanations, and general paragraph copy. |
| caption | 14px | 500 | 1.43 | 0 | — | Inter | Compact helper text, labels, and secondary information. |
| button | 16px | 500 | 1.5 | 0 | — | Inter | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.43 | 0 | — | Inter | Header navigation and compact menu items. |
| link | 14px | 500 | 1.43 | 0 | — | sans | Inline links, including announcement and content links. |
| code | 12px | 400 | 1.33 | 0 | — | ui-monospace | Small technical snippets and product-interface code labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 15, 16, 20, 24, 28, 32, 48, 128 px.
- Section rhythm 80px · element gap 12px · card padding 24px · max content width 1280px.

The desktop page uses a centered content area with a measured maximum width of 1280px. The hero is a broad two-column composition: left-aligned copy and actions sit beside an oversized dashboard image. Subsequent sections alternate centered headings with two- or three-column content, while logo and integration rows create lighter transitions. Section spacing is generous, with compact gaps inside cards and controls. The overall density is comfortable, not editorially crowded.

## Shape & elevation

- Radius: button `6px` · card `20px` · xs `6px` · sm `12px` · md `20px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat. Fine gray borders and softly tinted card panels distinguish content from the white canvas; avoid pronounced shadows. Buttons and dashboard cards use restrained outlines, while the hero preview gains prominence through scale and placement rather than heavy layering.

## Imagery

The hero uses a large dashboard preview rather than photography, with pale panels, charts, navigation labels, and fine interface details. Feature sections use product diagrams, integration logos, and simple technical illustrations on lightly tinted backgrounds. Keep image framing wide and clean, with low-contrast borders and ample surrounding white space; avoid decorative imagery that competes with the product UI.

## Components

### Announcement strip

A slim green-to-teal top band with centered acquisition news and a contrasting announcement link.

### Header navigation

Compact horizontal header with the Grafbase mark, text navigation, utility icons, a pale Sign in button, and dark Get started CTA.

### Hero

Left-aligned oversized two-line headline, muted explanatory copy, black primary CTA, pale secondary CTA, and a small video link.

### Dashboard preview

Large pale product-interface visual with a side menu, analytics charts, and a centered play affordance.

### Feature cards

Lightly framed product visuals paired with compact titles, muted descriptions, and pale Read more buttons.

### Integration row

A clean horizontal collection of technology logos with a small centered exploration button.

### Footer

Sparse white footer with brand and social links at left and compact resource, company, and compliance columns.

### Measured component styles

- **Primary button** (“Read more”): background #eaeaea · text #1b1b1b · border 1px solid #e0e1e6 · radius 6px · padding 14px 28px · 500 16px Inter
- **Secondary button** (“Try it for free”): background #000000 · text #ffffff · border 1px solid · radius 6px · padding 14px 28px · 500 16px Inter
- **Link** (“Try it for free”): transparent background · text #1b1b1b · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Snowflake”): background #fcfcfc · text #1b1b1b · border 1px solid #eeeeee · radius 20px · padding 24px · 400 16px Inter
- **Navigation item** (“Products Solutions Resources Extensions ”): transparent background · text #1b1b1b · radius 0px · padding 0px · 400 16px Inter

## Do

- Use white as the dominant page canvas.
- Set hero and section headlines in bold near-black Inter.
- Reserve the green-to-teal gradient for a narrow announcement treatment.
- Use pale borders to define cards and secondary buttons.
- Show product UI and technical diagrams as the main imagery.
- Leave generous space between major content sections.

## Don't

- Do not make the page dark or color-blocked.
- Do not use saturated accents as large section backgrounds.
- Do not add heavy shadows to cards or dashboard panels.
- Do not center-align the hero copy.
- Do not let illustrations overwhelm their accompanying product content.
- Do not use oversized decorative typography throughout the page.

## Agent prompt

Build a new Grafbase-style developer SaaS page with a white Gallery White (#ffffff) canvas, Carbon Ink (#1b1b1b) headings, and Slate Copy (#60646c) supporting text. Use Inter throughout, with a very bold, tightly tracked hero headline and restrained navigation. Make the top announcement the only prominent gradient treatment, blending Canopy Green (#19a05f) into Harbor Teal (#0d7f8c). Pair left-aligned hero copy and CTAs with a wide, pale dashboard preview. Continue with spacious feature grids, integration marks, and concise comparison content. Define cards and secondary controls with Soft Divider (#eaeaea) or Mist Border (#e0e1e6), keeping surfaces flat and shadows minimal. Favor realistic product UI and technical diagrams over photography. Keep the composition crisp, modular, readable, and generous with whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Announcement and navigation above a left-aligned hero; copy and CTAs sit beside a large dashboard preview. | Announcement link, Primary and secondary CTA, Video preview link | Gradient announcement strip, Oversized bold headline, Pale dashboard panel, Compact top navigation |

## Source CSS custom properties (selected)

```css
--colors-base: #FFFFFF;
--colors-bg1: #FFFFFF;
--colors-bg2: #FBFBFB;
--colors-bg3: #EAEAEA;
--colors-bgSecondary: #FCFCFD;
--colors-bgError: #FFFBFB;
--colors-bgWarning: #FFFDF9;
--colors-bgSuccess: #F7FCF7;
--colors-bgCard: #F9F8F9;
--colors-borderCard: #EEEDEF;
--colors-text1: #1B1B1B;
--colors-text2: #606060;
--colors-text3: #7C7C7C;
--colors-text4: #BCBCBC;
--colors-textAccent: #FFFFFF;
--colors-textSecondary: #FFFFFF;
--colors-textError: #A32929;
--colors-textWarning: #855E15;
--colors-accent: #4A9C6D;
--colors-accentHover: #41895F;
--colors-secondary: #60646C;
--colors-secondaryHover: #258AE2;
--colors-error: #BE4444;
--colors-errorHover: #A83A3A;
--colors-success: #50B490;
--colors-successHover: #449f7e;
--colors-warning: #C18F2D;
--colors-warningHover: #9F792E;
--colors-green: #1FD8A4;
--colors-transparent: #FFFFFF00;
--colors-gradient: linear-gradient(89.97deg, #19A05F 0.02%, #0D7F8C 123.85%);
--colors-marketingGreen: #30A46C;
--colors-reversed: #000000;
--colors-reversedHover: #222222;
--colors-textReversed: #FFFFFF;
--colors-grass1: color(display-p3 0.986 0.996 0.985);
--colors-grass2: color(display-p3 0.966 0.983 0.964);
--colors-grass3: color(display-p3 0.923 0.965 0.917);
--colors-grass4: color(display-p3 0.872 0.94 0.865);
--colors-grass5: color(display-p3 0.811 0.908 0.802);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/grafbase-com