.webp)
PlanetScale
The MySQL-compatible serverless database platform.
No items found.
No items found.
Visual identity
PlanetScale — design reference
Source: https://planetscale.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Typography
font-family: var(--font-mono)— selectorbodyfont-size: var(--text-sm)— selector.text-smfont-size: var(--text-xs)— selector.text-xsfont-size: 12px— selector.text-[12px]font-size: 32px— selector.text-[32px]font-size: var(--text-base)— selector.text-basefont-size: var(--text-2xl)— selector.sans-prose h1font-weight: var(--font-weight-semibold)— selector.cta a:first-childfont-weight: var(--font-weight-medium)!important— selector.sans-prose aside h2font-weight: var(--font-weight-medium)— selector.sans-prose aside ul li afont-weight: var(--font-weight-normal)— selector.sans-prose p a,.sans-prose ol a,.sans-prose ul a,.sans-prose table afont-weight: var(--font-weight-bold)— selectorh1line-height: 1— selector.cta a:first-childline-height: 1.25— selector.cta a:first-childline-height: var(--tw-leading,var(--text-2xl--line-height))— selector.sans-prose h1line-height: var(--tw-leading,var(--text-xl--line-height))— selector.sans-prose h2line-height: var(--leading-normal)— selectorpreletter-spacing: var(--tw-tracking,var(--text-sm--letter-spacing))— selector.text-smletter-spacing: var(--tw-tracking,var(--text-xs--letter-spacing))— selector.text-xsletter-spacing: var(--tw-tracking,var(--text-2xl--letter-spacing))— selector.sans-prose h1letter-spacing: var(--tw-tracking,var(--text-xl--letter-spacing))— selector.sans-prose h2letter-spacing: var(--tw-tracking,var(--text-lg--letter-spacing))— selector.sans-prose h3
Colors and surfaces
color: var(--color-white)— selector.cta a:first-childcolor: var(--text-color-primary)— selector.btn-outlinecolor: var(--color-black)— selector.text-blackcolor: var(--color-black)!important— selector.text-black!color: var(--color-blue)— selector.text-bluecolor: var(--color-blue-700)— selector.text-blue-700color: var(--color-blue-800)— selector.text-blue-800background-color: #0000— selectorbutton,input,select,optgroup,textareabackground-color: var(--color-orange)— selector.cta a:first-childbackground-color: var(--color-gray-100)— selectorprebackground-color: #41414199— selectorprebackground-color: color-mix(in oklab,var(--color-gray-700) 60%,transparent)— selectorprebackground-color: var(--color-gray-850)— selector.code-block pre.shikibackground-color: #fff— selector[data-headlessui-state_=active][data-headlessui-state_=focus] a
Components and layout
border-radius: 0— selectorbutton,input,select,optgroup,textareabox-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)— selector:is(a,button,button[role=tab],div[role=tabpanel]):focus-visiblemax-width: 40rem— selector.containermax-width: 48rem— selector.containermax-width: 64rem— selector.containermax-width: 80rem— selector.containermax-width: 96rem— selector.containermax-width: 100%— selector.cta a:first-childpadding: 0— selector::file-selector-buttonpadding: calc(var(--spacing) _ 2)— selectorpregap: calc(var(--spacing) _ 2)— selector.cta pgap: var(--spacing-sm)— selector.cta a:first-child
Responsive rules
(forced-colors:active)
(min-width:40rem)
(min-width:48rem)
(min-width:64rem)
(min-width:80rem)
(min-width:96rem)
(hover:hover)
(prefers-reduced-motion:reduce)
not all and (min-width:80rem)
not all and (min-width:64rem)
not all and (min-width:48rem)
not all and (min-width:40rem)
(min-width:801px)
(prefers-color-scheme:dark)
(hover:hover)and (pointer:fine)
(hover:hover)_and_(pointer:fine)]:opacity-0
(prefers-color-scheme:light)
(color-gamut:p3)
(min-width:640px)
(min-width:768px)Source: https://planetscale.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.
https://planetscale.com/assets/styles-b1Mpi-ry.css — :root,:host
--spacing: 8px;
--breakpoint-lg: 64rem;
--breakpoint-2xl: 96rem;
--container-lg: 32rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-7xl: 80rem;
--tracking-tighter: -.05em;
--tracking-tight: -.025em;
--tracking-widest: .1em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--radius-xs: .125rem;
--radius-sm: .25rem;
--blur-xs: 4px;
--aspect-video: 16 / 9;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-white: #fff;
--color-black: #000;
--color-primary: var(--bg-primary);
--color-gray-50: #fafafa;
--color-gray-100: #ebebeb;
--color-gray-200: #e1e1e1;
--color-gray-300: #c1c1c1;
--color-gray-400: #a1a1a1;
--color-gray-500: #818181;
--color-gray-550: #737373;
--color-gray-600: #616161;
--color-gray-700: #414141;
--color-gray-800: #2b2b2b;
--color-gray-850: #1a1a1a;
--color-gray-900: #111;
--color-red-50: snow;
--color-red-100: #ffe5e9;
--color-red-200: #fbbfc7;
--color-red-300: #ff909f;
--color-red-400: #ff7082;
--color-red-500: #ff455d;
--color-red-600: #d92038;
--color-red-700: #c11027;
--color-red-800: #8f0718;
--color-red-900: #341418;
--color-red-950: #200a0d;
--color-red: var(--text-red);
--color-orange-50: #fff8f3;
--color-orange-100: #ffe8d8;
--color-orange-200: #ffc59b;
--color-orange-300: #fc9c66;
--color-orange-400: #fd812d;
--color-orange-500: #f35815;
--color-orange-600: #b83a05;
--color-orange-700: #962d00;
--color-orange-800: #672002;
--color-orange-900: #3c1403;
--color-orange-950: #240b00;
--color-orange: var(--text-orange);
--color-yellow-50: #fffbe4;
--color-yellow-100: #fff1a8;
--color-yellow-200: #fed54a;
--color-yellow-300: #f2b600;
--color-yellow-400: #d19f03;
--color-yellow-500: #a78103;
--color-yellow-600: #7d5903;
--color-yellow-700: #5c4716;
--color-yellow-800: #41320c;
--color-yellow-900: #281e03;
--color-yellow-950: #171101;
--color-green-50: #effff3;
--color-green-100: #d7fbdf;
--color-green-200: #a9ecb8;
--color-green-300: #75db8c;
--color-green-400: #40d763;
--color-green-500: #27b648;
--color-green-600: #13862e;
--color-green-700: #19652a;
--color-green-800: #10481d;
--color-green-900: #0a2b13;
--color-green-950: #041a0a;
--color-green: var(--text-green);
--color-neki: #fbca00;
--color-postgres: var(--text-postgres);
--color-blue-50: #f3fbff;
--color-blue-100: #ddf2ff;
--color-blue-200: #a9dffe;
--color-blue-300: #73c7f9;
--color-blue-400: #47b7f8;
--color-blue-500: #1e9de7;
--color-blue-600: #0b6ec5;
--color-blue-700: #144eb6;
--color-blue-800: #0e3682;
--color-blue-900: #08204e;
--color-blue-950: #04122e;
--color-blue: var(--text-blue);
--color-purple-50: #f9f8ff;
--color-purple-100: #eeeaff;
--color-purple-200: #d4c9fe;
--color-purple-300: #b7a5fb;
--color-purple-400: #a18bf5;
--color-purple-500: #8467f3;
--color-purple-600: #5e49af;
--color-purple-700: #4b3990;
--color-purple-800: #3e1f75;
--color-purple-900: #27124a;
--color-purple-950: #180636;
--color-purple: var(--text-purple);
--color-focus: rgb(var(--bg-focus) / 60%);
--font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--font-sans: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
--text-base: 16px;
--text-xs: 12px;
--text-xs--letter-spacing: 0;
--text-sm: 14px;
--text-sm--letter-spacing: -.006em;
--text-lg: 18px;
--text-lg--letter-spacing: -.014em;
--text-xl: 20px;
--text-xl--letter-spacing: -.017em;
--text-xl--line-height: 1.1;
--text-2xl: 24px;
--text-2xl--letter-spacing: -.019em;
--text-2xl--line-height: 1.2;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--spacing-px: 1px;
--spacing-xs: 2px;
--spacing-sm: 4px;
--spacing-md: 6px;
--spacing-screen: 100vh;
--spacing-1ch: 1ch;
--spacing-2ch: 2ch;
--spacing-3ch: 3ch;
--spacing-4ch: 4ch;
--z-index-1: 1;
--z-index-10: 10;
--z-index-top: 999999;
--background-color-primary: var(--bg-primary);
--background-color-secondary: var(--bg-secondary);
--background-color-inverted: var(--bg-inverted);
--border-color-primary: var(--border-primary);
--border-color-contrast: var(--border-contrast);
--text-indent-1ch: 1ch;
--text-color-contrast: var(--text-contrast);
--text-color-primary: var(--text-primary);
--text-color-secondary: var(--text-secondary);
--text-color-decoration: var(--text-decoration);
--text-color-inverted: var(--bg-primary);
--text-color-disabled: var(--text-disabled);https://planetscale.com/assets/styles-b1Mpi-ry.css — :root,.invert-color-mode
--white: #fff;
--black: #000;
--gray-50: var(--color-gray-50);
--gray-100: var(--color-gray-100);
--gray-200: var(--color-gray-200);
--gray-300: var(--color-gray-300);
--gray-400: var(--color-gray-400);
--gray-500: var(--color-gray-500);
--gray-550: var(--color-gray-550);
--gray-600: var(--color-gray-600);
--gray-700: var(--color-gray-700);
--gray-800: var(--color-gray-800);
--gray-850: var(--color-gray-850);
--gray-900: var(--color-gray-900);
--red-50: var(--color-red-50);
--red-100: var(--color-red-100);
--red-200: var(--color-red-200);
--red-300: var(--color-red-300);
--red-400: var(--color-red-400);
--red-500: var(--color-red-500);
--red-600: var(--color-red-600);
--red-700: var(--color-red-700);
--red-800: var(--color-red-800);
--red-900: var(--color-red-900);
--red-950: var(--color-red-950);
--orange-50: var(--color-orange-50);
--orange-100: var(--color-orange-100);
--orange-200: var(--color-orange-200);
--orange-300: var(--color-orange-300);
--orange-400: var(--color-orange-400);
--orange-500: var(--color-orange-500);
--orange-600: var(--color-orange-600);
--orange-700: var(--color-orange-700);
--orange-800: var(--color-orange-800);
--orange-900: var(--color-orange-900);
--orange-950: var(--color-orange-950);
--yellow-50: var(--color-yellow-50);
--yellow-100: var(--color-yellow-100);
--yellow-200: var(--color-yellow-200);
--yellow-300: var(--color-yellow-300);
--yellow-400: var(--color-yellow-400);
--yellow-500: var(--color-yellow-500);
--yellow-600: var(--color-yellow-600);
--yellow-700: var(--color-yellow-700);
--yellow-800: var(--color-yellow-800);
--yellow-900: var(--color-yellow-900);
--yellow-950: var(--color-yellow-950);
--green-50: var(--color-green-50);
--green-100: var(--color-green-100);
--green-200: var(--color-green-200);
--green-300: var(--color-green-300);
--green-400: var(--color-green-400);
--green-500: var(--color-green-500);
--green-600: var(--color-green-600);
--green-700: var(--color-green-700);
--green-800: var(--color-green-800);
--green-900: var(--color-green-900);
--green-950: var(--color-green-950);
--blue-50: var(--color-blue-50);
--blue-100: var(--color-blue-100);
--blue-200: var(--color-blue-200);
--blue-300: var(--color-blue-300);
--blue-400: var(--color-blue-400);
--blue-500: var(--color-blue-500);
--blue-600: var(--color-blue-600);
--blue-700: var(--color-blue-700);
--blue-800: var(--color-blue-800);
--blue-900: var(--color-blue-900);
--blue-950: var(--color-blue-950);
--purple-50: var(--color-purple-50);
--purple-100: var(--color-purple-100);
--purple-200: var(--color-purple-200);
--purple-300: var(--color-purple-300);
--purple-400: var(--color-purple-400);
--purple-500: var(--color-purple-500);
--purple-600: var(--color-purple-600);
--purple-700: var(--color-purple-700);
--purple-800: var(--color-purple-800);
--purple-900: var(--color-purple-900);
--purple-950: var(--color-purple-950);
--text-contrast: var(--black);
--text-primary: var(--gray-700);
--text-secondary: var(--gray-550);
--text-decoration: var(--gray-300);
--text-disabled: var(--gray-400);
--text-red: var(--red-600);
--text-orange: var(--orange-500);
--text-green: var(--green-600);
--text-blue: var(--blue-600);
--text-purple: var(--purple-600);
--text-postgres: #336791;
--bg-primary: var(--gray-50);
--bg-secondary: var(--gray-100);
--bg-focus: 235 235 235;
--bg-inverted: var(--gray-900);
--bg-green: var(--green-600);
--bg-green-light: var(--green-50);Source: https://planetscale.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.
| Property | Declared value | Selector |
|---|---|---|
| font-family | var(--font-mono) | body |
| font-size | var(--text-sm) | .text-sm |
| font-size | var(--text-xs) | .text-xs |
| font-size | 12px | .text-[12px] |
| font-size | 32px | .text-[32px] |
| font-size | var(--text-base) | .text-base |
| font-size | var(--text-2xl) | .sans-prose h1 |
| font-weight | var(--font-weight-semibold) | .cta a:first-child |
| font-weight | var(--font-weight-medium)!important | .sans-prose aside h2 |
| font-weight | var(--font-weight-medium) | .sans-prose aside ul li a |
| font-weight | var(--font-weight-normal) | .sans-prose p a,.sans-prose ol a,.sans-prose ul a,.sans-prose table a |
| font-weight | var(--font-weight-bold) | h1 |
| line-height | 1 | .cta a:first-child |
| line-height | 1.25 | .cta a:first-child |
| line-height | var(--tw-leading,var(--text-2xl--line-height)) | .sans-prose h1 |
| line-height | var(--tw-leading,var(--text-xl--line-height)) | .sans-prose h2 |
| line-height | var(--leading-normal) | pre |
| letter-spacing | var(--tw-tracking,var(--text-sm--letter-spacing)) | .text-sm |
| letter-spacing | var(--tw-tracking,var(--text-xs--letter-spacing)) | .text-xs |
| letter-spacing | var(--tw-tracking,var(--text-2xl--letter-spacing)) | .sans-prose h1 |
| letter-spacing | var(--tw-tracking,var(--text-xl--letter-spacing)) | .sans-prose h2 |
| letter-spacing | var(--tw-tracking,var(--text-lg--letter-spacing)) | .sans-prose h3 |
| color | var(--color-white) | .cta a:first-child |
| color | var(--text-color-primary) | .btn-outline |
| color | var(--color-black) | .text-black |
| color | var(--color-black)!important | .text-black! |
| color | var(--color-blue) | .text-blue |
| color | var(--color-blue-700) | .text-blue-700 |
| color | var(--color-blue-800) | .text-blue-800 |
| background-color | #0000 | button,input,select,optgroup,textarea |
| background-color | var(--color-orange) | .cta a:first-child |
| background-color | var(--color-gray-100) | pre |
| background-color | #41414199 | pre |
| background-color | color-mix(in oklab,var(--color-gray-700) 60%,transparent) | pre |
| background-color | var(--color-gray-850) | .code-block pre.shiki |
| background-color | #fff | [data-headlessui-state_=active][data-headlessui-state_=focus] a |
| border-radius | 0 | button,input,select,optgroup,textarea |
| box-shadow | var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) | :is(a,button,button[role=tab],div[role=tabpanel]):focus-visible |
| max-width | 40rem | .container |
| max-width | 48rem | .container |
| max-width | 64rem | .container |
| max-width | 80rem | .container |
| max-width | 96rem | .container |
| max-width | 100% | .cta a:first-child |
| padding | 0 | ::file-selector-button |
| padding | calc(var(--spacing) _ 2) | pre |
| gap | calc(var(--spacing) _ 2) | .cta p |
| gap | var(--spacing-sm) | .cta a:first-child |
Source: https://planetscale.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Evidence and limitations
- Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
- CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
- No inferred dark theme, semantic color roles or framework defaults have been added.
- 315 custom-property declarations found; 452 relevant property declarations parsed.