designlang
Brand guidelines #004cff

June 25, 2026

mintlify.com

A reading of the visual language at https://mintlify.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
A 92/100
Tokens
15 colours · 9 sizes
Generated
designlang
Chapter 00

Essence

mintlify.com is a Jester brand — warm, kinetic, modern, fun and irreverent — anchored on #faf8f5 and inter, springy motion.

Jester archetype · 73% fit · vs Lover

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 31% confidence
Material language
flat
Imagery style
flat-illustration
Component library
shadcn/ui
Stack
next · Tailwind
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 7 neutrals · 15 total

Primary #FAF8F5
RGB
250, 248, 245
HSL
36°, 33%, 97%
Secondary #004CFF
RGB
0, 76, 255
HSL
222°, 100%, 50%
Accent #FF7A59
RGB
255, 122, 89
HSL
12°, 100%, 67%

Neutrals

#000000
#FFFFFF
#121715
#969E9B
#485450
#717D79
#CFCDCA

Full palette

#000000
#FFFFFF
#121715
#969E9B
#485450
#FAF8F5
#0C8C5E
#1FA77A
#717D79
#CFCDCA
#16A34A
#EF6333
#004CFF
#FF7A59
#00A8E0

WCAG 100% · 7 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

3 families · 9 sizes · 2 weights

Display
inter
Body
paperMono
Weights
500, 400

Specimen

The knowledge infrastructure agents build on
Join 20,000+ of the world's most ambitious companies building for agents.

Scale

StepSizeSample
t00 50px The knowledge infrastructure
t01 44px The knowledge infrastructure
t02 36px The knowledge infrastructure
t03 35px The knowledge infrastructure
t04 24px The knowledge infrastructure
t05 18px The knowledge infrastructure
t06 16px The knowledge infrastructure
t07 14px The knowledge infrastructure
t08 12px The knowledge infrastructure
Chapter 05

Spacing

Base 2px · 12 steps captured

Rhythm

4px
40px
48px
64px
80px
93px
104px
128px
160px
266px
Chapter 06

Shape

4 radii · 1 elevation tiers

Border radii

2px
6px
12px
24px

Elevation

xs
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
roundedCaps
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: springy · 5 durations · 6 easings

Duration scale

55ms
100ms
165ms
280ms
500ms

Easings

Chapter 09

Components

shadcn/ui · 2 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

card

Slots
heading, description, media, footer
Variants
primary, secondary
Sizes
lg, xl

button

Slots
label, icon, badge
Variants
outline, secondary, ghost, primary
Sizes
medium, small
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
7 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #faf8f5;
  --font-display: "inter";
  --space-base: 2px;
  --radius-md: 6px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#faf8f5' },
      fontFamily: { display: ['inter', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '6px' },
    },
  },
};

Run npx designlang pack mintlify.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.