#f2b600
June 25, 2026
planetscale.com
A reading of the visual language at https://planetscale.com. Every token, every rule, every component — captured from the live site.
Essence
planetscale.com is a Jester brand — warm, kinetic, bold, fun and irreverent — anchored on #f2b600, mixed motion.
Adjectives
- warm
- kinetic
- bold
- fun
- irreverent
Personality axes
Evidence
- #f2b600 at 45° reads warm → warm (warmth +1)
- 9999px median radius, 150ms median motion → kinetic (energy +0.89)
- heaviest weight 700, 1.8:1 brand contrast → bold (weight +0.27)
- Axis fingerprint nearest the Jester archetype (87% fit, vs Lover).
About
Logo
Colour
1 primary · 1 secondary · 1 accent · 7 neutrals · 10 total
Neutrals
#414141#C1C1C1#737373#FFFFFF#000000#111111#EBEBEBFull palette
#414141#0B6EC5#C1C1C1#737373#FFFFFF#000000#111111#F35815#F2B600#EBEBEBWCAG 86% · 6 passing pairs · 1 failing. Full breakdown in §11.
Typography
0 families · 2 sizes · 4 weights
Specimen
Scale
| Step | Size | Sample |
|---|---|---|
t00 |
16px |
The world’s fastest and most |
t01 |
12px |
The world’s fastest and most |
Spacing
Base 4px · 3 steps captured
Rhythm
4px
80px
96px
Shape
1 radii · 0 elevation tiers
Border radii
9999px
Iconography
unknown · 24 captured
iconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconMotion
Feel: mixed · 1 durations · 1 easings
Duration scale
150ms
Easings
custom
Components
tailwindcss · 1 component patterns captured
Mocks
Built from these tokens
Radius, primary, surface, text — all sampled from the live site.
Read more →Detected patterns
button
Voice
friendly · — · —
Headlines from the site
- The world’s fastest and most scalable cloud databases
- Performance
- Uptime
- Cost
CTA verbs
×1×1×1×1×1×1
Accessibility
6 passing · 1 failing
Failing pairs
- Foreground
#ffffff- Background
#f35815- Rule
- AA-normal
Suggested replacements
#ffffff→(3.38:1)
Tokens
Drop-in code for the most common stacks. All values from the live extraction.
:root {
--color-primary: #f2b600;
--font-display: "Inter";
--space-base: 4px;
--radius-md: 9999px;
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: { brand: '#f2b600' },
fontFamily: { display: ['Inter', 'serif'] },
spacing: { base: '4px' },
borderRadius: { md: '9999px' },
},
},
};
Run npx designlang pack planetscale.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.