Skip to content
DesignMunkDesignMunk Submit a site

GitBook

gitbook.com
AI-made docs easy to write, not easy to trust.
AI Developer Tools Framer Homepage General Sans
Share Visit site
gitbook.com DESKTOP · 1440
GitBook

AI Breakdown

Design export

# Design brief: the GitBook design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/14172312/gitbook-1440x8523.webp
- Above the fold: https://cdn.designmunk.com/2026/09/14172312/gitbook-1440x900.webp
- On DesignMunk: https://designmunk.com/gitbook/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# GitBook: Blunt Centered Headlines and a Framed Docs Demo

## Overview

A minimal, developer-first system: serious, confident, and low-color. The UI should feel fast to scan—large headlines, compact body, and wide white margins. Interactions are clear and direct; accent color is reserved for links and key actions. When tokens don't specify, prefer neutral surfaces, strong text contrast, and generous spacing.

## Page Structure

- Global header: left logo, horizontal product/solutions/resources nav with simple dropdowns; right cluster of utility links and two pill CTAs.
- Hero: large, center-aligned display headline with one-line subcopy; two primary actions in a pill group beneath; very open spacing.
- Trust row: a single line of monochrome customer logos centered under the hero.
- Product proof: oversized browser-frame card showing a docs UI; subtle shadow; decorative color waves sit behind and bleed off-edge.
- Problem/diagnostics section: statement headline followed by short supportive items and a simple progress/metric readout.
- Feature grid: repeated blocks with overline, compact h3, one-sentence detail, and a single link; arranged in a tidy grid on desktop and stacked on mobile.
- Testimonial: centered quote with attribution and an external "view docs/story" link.
- Enterprise panel: concise paragraph with demo CTA and a list of enterprise capabilities grouped as short blurbs.
- Customers showcase: heading plus link to the customers index; logos or tiles in a clean row/grid.
- Closing CTA band: centered summary line with two CTAs.
- Mega footer: multi-column navigation (Product, Solutions, Resources, Company), legal and policy links, and a small "Get an AI summary" utilities row.

## Colors

- Primary (#1c1917): Deep ink for headlines and core text.
- Secondary (#8c9494): Muted gray for supportive copy and UI labels.
- Tertiary (#0000ee): Link and accent color for interactive text and highlights.
- Neutral (#ffffff): Base page background and card surfaces.
- Border (#000000): Hairlines, icon strokes, and high-contrast dividers when needed.
- brand-ancestral-water (#d0d0d1): Subtle tint for section backgrounds and low-emphasis dividers.
- surface ({colors.neutral}): Canonical surface color reference for containers.
- on-surface ({colors.primary}): Canonical text color on light surfaces.

## Typography

- General Sans Variable Variable Bold (custom, self-hosted): used for display and primary text. Not vendor-served; if unavailable, substitute Inter, Manrope, or Plus Jakarta Sans for similar geometric-humanist shapes and x-height.
- Headline-lg: 52px/1, weight 700, letter-spacing -0.02em for hero statements and key section leads.
- Headline-md: 40px/1.2, weight 700 for secondary section headings.
- Headline-sm: 20px/1.2, weight 600 for small headings, nav items, and overlines.
- Headline-xs: 17px/1.2, weight 600 for badges/eyebrows and compact labels.
- Body-md: 16px/1.5, weight 600; use for paragraphs, lists, and UI copy to maintain the page's sturdy rhythm.

## Layout

- Spacing scale favors compact steps: 2, 6, 14, 18, 24px. Use xl (24px) for section padding multiples and inter-section rhythm; lg (18px) and md (14px) for intra-component gaps.
- Layouts alternate between centered single-column sections and simple grids. Keep generous outer gutters and avoid edge-to-edge blocks except for decorative backgrounds.
- Content width stays comfortable for reading; feature blocks align to a consistent column grid so headings and links line up across rows.
- Vertical rhythm: headline → md gap → body → lg/xl gap → action(s).

## Elevation & Depth

- Shadows are minimal. Use the sm shadow for large mockups or elevated cards; otherwise keep md/lg/xl at none.
- When depth is needed, prefer thin borders (Border #000000 at low opacity) or a very light tint (brand-ancestral-water) over heavy drop shadows.
- Hierarchy is carried by type scale, spacing, and contrast rather than elevation.

## Shapes

- Radius sm (16px) for cards, browser frames, input fields, and screenshots.
- Radius full (9999px) for pills, badges, and circular UI elements.
- Avoid mixing radii within a single component; rounded language signals approachable but precise tooling.

## Components

- Buttons
  - Primary: background #1c1917, text #0000ee, 46px height, 8px 20px padding, full radius. Use for the main action per section.
  - Secondary: background #656973, text #656973, 46px height, 8px 20px padding, full radius. Reserve for low-emphasis actions beside the primary.
  - Link: text #1c1917, radius 0; use inline with body copy and for tertiary actions.
- Card: background #ffffff, text #000000, radius 16px, padding 0 8px 8px. Use for contained content like mockups or quotes.

### Header Bar
- Neutral background with on-surface text. Body-md (16/1.5, 600) for items; xl (24px) horizontal padding. Right-aligned utility links plus pill CTAs.

### Promo Badge
- Small pill announcing new items. Headline-xs (17px/1.2, 600), full radius, on-surface text; use tertiary (#0000ee) for the text or dot when emphasis is needed.

### Hero CTA Group
- Centered stack: headline-lg, short body, then a row of two buttons (46px high, full radius) spaced with md–lg gaps.

### Logo Row
- Single row of monochrome client logos centered; equal gaps using md or lg. Keep the row visually lighter than the hero.

### Browser Mock Card
- Large card with radius 16px and sm shadow; neutral surface with on-surface text. Decorative background artwork may extend beyond the card edges.

### Feature Block
- Overline (headline-xs), h3 (headline-md or sm depending on hierarchy), one-sentence body (body-md), and a single link in tertiary blue. Use consistent top/bottom xl spacing.

### Testimonial Quote
- Card or section with generous padding, body-md for the quote and headline-sm for attribution; subtle divider or tint background to separate from features.

### Enterprise Feature List
- Compact two-to-four item list; each item uses headline-sm title and body-md description with md gaps. Conclude with a primary or link-style CTA.

## Do's and Don'ts

- Do keep the palette restrained: primary ink for text, tertiary blue for links, and neutral surfaces.
- Do use full-radius (9999px) only for pills and badges; keep cards at 16px.
- Do align feature blocks to a consistent grid and repeat the overline → title → one-line pattern.
- Don't add heavy shadows; use the sm shadow sparingly and rely on borders or tints for separation.
- Don't mix multiple accent colors; tertiary (#0000ee) is the single interactive accent.
- Don't reduce the button height below 46px; the system reads as generous and touch-friendly.

## Agent Prompt Guide

Quick color reference — text: #1c1917; background: #ffffff; border: #000000; accent: #0000ee.

1) Hero section, centered headline and pill CTAs
- Container: background #ffffff; max-width readable; center content.
- H1: font-family 'General Sans Variable Variable Bold', Inter, Manrope, sans-serif; size 52px; weight 700; line-height 1; letter-spacing -0.02em; color #1c1917.
- Body: size 16px; weight 600; line-height 1.5; color #1c1917.
- Buttons: primary = bg #1c1917, text #0000ee, radius 9999px, height 46px, padding 8px 20px; secondary beside it with same dimensions.
- Gaps: md (14px) between text and buttons; xl (24px) top/bottom of section.

2) Browser mock proof block
- Card: bg #ffffff; text #000000; radius 16px; padding 0 8px 8px; shadow sm (rgba(0,0,0,0.05) 0 1px 3px, rgba(0,0,0,0.05) 0 1px 2px -1px).
- Place centered under hero with xl (24px) top margin; keep surrounding background #ffffff; optional decorative layer behind.

3) Feature grid (four items)
- Section padding: xl (24px) top/bottom.
- Each item: overline using 17px/1.2, 600; title using 40px/1.2, 700 or 20px/1.2, 600 depending on hierarchy; body 16px/1.5, 600.
- Link: color #0000ee; no background; inline.
- Layout: responsive grid (two-up on wide screens, stacked on small) with lg (18px) column gap and xl (24px) row gap.

4) Testimonial strip
- Container: brand-ancestral-water #d0d0d1 as a light tint; inner max-width content.
- Quote: body-md 16px/1.5, 600 in #1c1917; attribution in headline-sm 20px/1.2, 600.
- Optional card treatment: radius 16px; padding xl (24px); no heavy shadow.

5) Footer, mega navigation
- Background #ffffff; text #1c1917 with secondary #8c9494 for labels.
- Four columns; headings in headline-sm; links in body-md with 6–14px vertical gaps.
- Include a small utilities row with links styled in #0000ee; use hairline borders in #000000 at low opacity if separation is needed.

## Similar Brands

- Notion: similarly sparse palette and oversized type; Notion leans softer with lighter weights and more grayscale icons.
- Linear: minimal color and strong type rhythm; Linear's dark theme and motion are more pronounced.
- Vercel: developer-first clarity and centered hero; Vercel uses stronger black/white contrast and more code-centric imagery.
- ReadMe: docs-centric storytelling with product proofs; ReadMe uses friendlier color accents and illustrations.
- Stripe: rigorous type scale and disciplined spacing; Stripe employs richer gradients and more animated transitions.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1c1917;
  --color-secondary: #8c9494;
  --color-tertiary: #0000ee;
  --color-neutral: #ffffff;
  --color-border: #000000;
  --color-brand-ancestral-water: #d0d0d1;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 17px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.2;
  --text-headline-xs-tracking: -0.02em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 600;
  --text-body-md-leading: 1.5;
  --font-general-sans-variable-variable-bold: "General Sans Variable Variable Bold";
  --font-sans-serif: "sans-serif";

  /* Rounded */
  --radius-sm: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 6px;
  --spacing-md: 14px;
  --spacing-lg: 18px;
  --spacing-xl: 24px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-tertiary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 20px;
  --button-primary-height: 46px;
  --button-secondary-background-color: #656973;
  --button-secondary-text-color: #656973;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 20px;
  --button-secondary-height: 46px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-border);
  --card-rounded: var(--radius-sm);
  --card-padding: 0px 8px 8px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1c1917;
  --color-secondary: #8c9494;
  --color-tertiary: #0000ee;
  --color-neutral: #ffffff;
  --color-border: #000000;
  --color-brand-ancestral-water: #d0d0d1;
  --color-surface: #ffffff;
  --color-on-surface: #1c1917;
  --font-headline-lg: "General Sans Variable Variable Bold";
  --font-headline-md: "General Sans Variable Variable Bold";
  --font-headline-sm: "sans-serif";
  --font-headline-xs: "General Sans Variable Variable Bold";
  --font-body-md: "General Sans Variable Variable Bold";
  --text-headline-lg: 52px;
  --text-headline-md: 40px;
  --text-headline-sm: 20px;
  --text-headline-xs: 17px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: -0.02em;
  --tracking-headline-xs: -0.02em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 600;
  --radius-sm: 16px;
  --radius-full: 9999px;
  --spacing-xs: 2px;
  --spacing-sm: 6px;
  --spacing-md: 14px;
  --spacing-lg: 18px;
  --spacing-xl: 24px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.098,
                    0.09
                ],
                "hex": "#1c1917"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.58,
                    0.58
                ],
                "hex": "#8c9494"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0.933
                ],
                "hex": "#0000ee"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "brand-ancestral-water": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.816,
                    0.816,
                    0.82
                ],
                "hex": "#d0d0d1"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.11,
                    0.098,
                    0.09
                ],
                "hex": "#1c1917"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "General Sans Variable Variable Bold",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "General Sans Variable Variable Bold",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "General Sans Variable Variable Bold",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "General Sans Variable Variable Bold",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as GitBook**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears