#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.
Essence
mintlify.com is a Jester brand — warm, kinetic, modern, fun and irreverent — anchored on #faf8f5 and inter, springy motion.
Adjectives
- warm
- kinetic
- modern
- fun
- irreverent
Personality axes
Evidence
- #faf8f5 at 36° reads warm → warm (warmth +1)
- 12px median radius, 165ms median motion, springy easing → kinetic (energy +0.47)
- sans display face, flat material → modern (era +0.3)
- Axis fingerprint nearest the Jester archetype (73% fit, vs Lover).
About
Logo
Colour
1 primary · 1 secondary · 1 accent · 7 neutrals · 15 total
Neutrals
#000000#FFFFFF#121715#969E9B#485450#717D79#CFCDCAFull palette
#000000#FFFFFF#121715#969E9B#485450#FAF8F5#0C8C5E#1FA77A#717D79#CFCDCA#16A34A#EF6333#004CFF#FF7A59#00A8E0WCAG 100% · 7 passing pairs · 0 failing. Full breakdown in §11.
Typography
3 families · 9 sizes · 2 weights
Specimen
Scale
| Step | Size | Sample |
|---|---|---|
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 |
Spacing
Base 2px · 12 steps captured
Rhythm
4px
40px
48px
64px
80px
93px
104px
128px
160px
266px
Shape
4 radii · 1 elevation tiers
Border radii
2px
6px
12px
24px
Elevation
xs
Iconography
unknown · 24 captured
iconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconMotion
Feel: springy · 5 durations · 6 easings
Duration scale
55ms
100ms
165ms
280ms
500ms
Easings
ease-outcustomease-outease-out
Components
shadcn/ui · 2 component patterns captured
Mocks
Built from these tokens
Radius, primary, surface, text — all sampled from the live site.
Read more →Detected patterns
card
button
Voice
neutral · — · —
Headlines from the site
- The knowledge infrastructure agents build on
- Join 20,000+ of the world's most ambitious companies building for agents.
- One platform for your entire knowledge stack. Agents that keep work moving 24/7.
- Agent-native platform
CTA verbs
×1×1×1×1×1×1
Accessibility
7 passing · 0 failing
No failing contrast pairs detected.
Tokens
Drop-in code for the most common stacks. All values from the live extraction.
:root {
--color-primary: #faf8f5;
--font-display: "inter";
--space-base: 2px;
--radius-md: 6px;
}
// 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).
Usage
-
Lead with the primary.
It belongs on calls-to-action and one accent moment per screen. Not on body copy.
-
Two type families, three weights.
Display for headlines, body for paragraphs. Resist a third unless there is a real reason.
-
Snap to the spacing scale.
Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.
-
Treat accessibility as a hard constraint.
When a colour pair fails WCAG, fix the colour — not the contrast check.