.webp)
Plausible Analytics
Visual identity
Plausible Analytics — design reference
Source: https://plausible.io/. 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-size: 2em— selectorh1font-size: 1em— selectorprefont-size: 100%— selectorbutton,input,select,textareafont-size: 2.25em— selector.prose h1font-size: 1.5em— selector.prose h2font-size: 1.25em— selector.prose h3font-size: .875em— selector.prose prefont-weight: 800— selector.prose h1font-weight: 700— selector.prose h2font-weight: 600— selector.prose h3font-weight: 400— selector.prose pre codeline-height: 1.15— selectorbutton,input,select,textarealine-height: 1.1111111— selector.prose h1line-height: 1.3333333— selector.prose h2line-height: 1.6— selector.prose h3line-height: 1.5— selector.prose h4line-height: 1.7142857— selector.prose preline-height: 1— selector.md:prose-lg h1letter-spacing: .05em— selector.prose table thletter-spacing: -0.025em— selector.tracking-tightletter-spacing: .025em— selector.tracking-wide
Colors and surfaces
color: #3182ce— selector.prose acolor: #2c5282— selector.prose a:hovercolor: #1a202c— selector.prose h1color: #b4c6fc— selector.post .post-content .heading-anchor,.article .article-content .heading-anchorcolor: rgba(180,198,252,var(--text-opacity))— selector.post .post-content .heading-anchor,.article .article-content .heading-anchorcolor: #5850ec— selector.post .post-content h2:hover .heading-anchor,.post .post-content h3:hover .heading-anchor,.post .post-content h4:hover .heading-anchor,.post .post-content h5:hover .heading-anchor,.post .post-content h6:hover .heading-anchor,.post .post-content .headcolor: rgba(88,80,236,var(--text-opacity))— selector.post .post-content h2:hover .heading-anchor,.post .post-content h3:hover .heading-anchor,.post .post-content h4:hover .heading-anchor,.post .post-content h5:hover .heading-anchor,.post .post-content h6:hover .heading-anchor,.post .post-content .headbackground-color: transparent— selectora
Components and layout
border-radius: .375rem— selector.prose preborder-radius: 0— selector.prose pre codeborder-radius: .25rem— selectorarticle imgbox-shadow: 0 0 0 1px rgba(0,0,0,0.05)— selector.shadow-xsbox-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)— selector.shadowbox-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)— selector.shadow-mdbox-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)— selector.shadow-lgbox-shadow: 0 25px 50px -12px rgba(0,0,0,0.25)— selector.shadow-2xlbox-shadow: 0 0 0 3px rgba(118,169,250,0.45)— selector.focus:shadow-outline:focusbox-shadow: 0 0 0 3px rgba(164,202,254,0.45)— selector.focus:shadow-outline-blue:focusbox-shadow: 0 0 0 3px rgba(180,198,252,0.45)— selector.focus:shadow-outline-indigo:focusmax-width: 640px— selector.containermax-width: 768px— selector.containermax-width: 1024px— selector.containermax-width: 1280px— selector.containermax-width: 70rem— selector.containermax-width: 100%— selectorarticle imgmax-width: unset— selectorarticle imgpadding: 0— selectorbutton::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-innergap: .5rem— selector.gap-2gap: 1rem— selector.gap-4gap: 1.5rem— selector.gap-6gap: 2rem— selector.gap-8gap: 2.5rem— selector.sm:gap-10transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s)— selector\[aria-label]\[role~="tooltip"]::before, \[aria-label]\[role~="tooltip"]::after
Responsive rules
(min-width:640px)
(min-width:768px)
(min-width:1024px)
(min-width:1280px)Source: https://plausible.io/. 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://plausible.io/assets/css/style.css?v=1791884088 — html
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — #markdown-toc
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-content .heading-anchor,.article .article-content .heading-anchor
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-content h2:hover .heading-anchor,.post .post-content h3:hover .heading-anchor,.post .post-content h4:hover .heading-anchor,.post .post-content h5:hover .heading-anchor,.post .post-content h6:hover .heading-anchor,.post .post-content .heading-anchor:focus,.article .article-content h2:hover .heading-anchor,.article .article-content h3:hover .heading-anchor,.article .article-content h4:hover .heading-anchor,.article .article-content h5:hover .heading-anchor,.article .article-content h6:hover .heading-anchor,.article .article-content .heading-anchor:focus
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc-list
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc li>ol,.post .post-toc li>ul
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc a
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc a:hover,.post .post-toc a:focus
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc .toc-active>a
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc .toc-active>a::before
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .post .post-toc .toc-active-branch>a
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .prose table th
--text-opacity: 1;
--border-opacity: 1;
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .prose table td
--text-opacity: 1;
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .space-y-1>:not(template) ~ :not(template)
--space-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-y-2>:not(template) ~ :not(template)
--space-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-x-2>:not(template) ~ :not(template)
--space-x-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-x-3>:not(template) ~ :not(template)
--space-x-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-y-4>:not(template) ~ :not(template)
--space-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-x-4>:not(template) ~ :not(template)
--space-x-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-y-5>:not(template) ~ :not(template)
--space-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-y-6>:not(template) ~ :not(template)
--space-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .space-y-10>:not(template) ~ :not(template)
--space-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .divide-y-2>:not(template) ~ :not(template)
--divide-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .divide-y>:not(template) ~ :not(template)
--divide-y-reverse: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .divide-gray-200>:not(template) ~ :not(template)
--divide-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-white
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-gray-50
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-gray-100
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-gray-800
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-gray-900
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-red-500
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-yellow-100
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-yellow-400
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-green-500
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-indigo-50
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .bg-indigo-600
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:bg-gray-50:hover
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:bg-gray-100:hover
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:bg-gray-700:hover
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:bg-indigo-500:hover
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:bg-gray-50:focus
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:bg-gray-100:focus
--bg-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-gray-100
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-gray-200
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-gray-300
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-yellow-300
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-indigo-100
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-indigo-200
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .border-indigo-400
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:border-indigo-300:hover
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:border-indigo-400:hover
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:border-blue-300:focus
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:border-indigo-400:focus
--border-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .placeholder-gray-500::-moz-placeholder
--placeholder-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .placeholder-gray-500:-ms-input-placeholder
--placeholder-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .placeholder-gray-500::placeholder
--placeholder-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-white
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-300
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-400
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-500
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-600
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-700
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-800
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-gray-900
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-yellow-700
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-green-500
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-blue-500
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-indigo-500
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-indigo-600
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .text-indigo-700
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .group:hover .group-hover:text-blue-500
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-white:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-gray-500:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-gray-700:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-gray-900:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-indigo-500:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-indigo-700:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .hover:text-indigo-800:hover
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:text-gray-500:focus
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:text-gray-900:focus
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .focus:text-indigo-700:focus
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .transform
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .scale-95
--transform-scale-x: .95;
--transform-scale-y: .95;https://plausible.io/assets/css/style.css?v=1791884088 — .scale-100
--transform-scale-x: 1;
--transform-scale-y: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .-rotate-180
--transform-rotate: -180deg;https://plausible.io/assets/css/style.css?v=1791884088 — .-translate-x-1/2
--transform-translate-x: -50%;https://plausible.io/assets/css/style.css?v=1791884088 — .translate-y-0
--transform-translate-y: 0;https://plausible.io/assets/css/style.css?v=1791884088 — .translate-y-1
--transform-translate-y: .25rem;https://plausible.io/assets/css/style.css?v=1791884088 — .tweet-text a
--text-opacity: 1;https://plausible.io/assets/css/style.css?v=1791884088 — .sm:space-y-0>:not(template) ~ :not(template)
--space-y-reverse: 0;Source: https://plausible.io/. 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-size | 2em | h1 |
| font-size | 1em | pre |
| font-size | 100% | button,input,select,textarea |
| font-size | 2.25em | .prose h1 |
| font-size | 1.5em | .prose h2 |
| font-size | 1.25em | .prose h3 |
| font-size | .875em | .prose pre |
| font-weight | 800 | .prose h1 |
| font-weight | 700 | .prose h2 |
| font-weight | 600 | .prose h3 |
| font-weight | 400 | .prose pre code |
| line-height | 1.15 | button,input,select,textarea |
| line-height | 1.1111111 | .prose h1 |
| line-height | 1.3333333 | .prose h2 |
| line-height | 1.6 | .prose h3 |
| line-height | 1.5 | .prose h4 |
| line-height | 1.7142857 | .prose pre |
| line-height | 1 | .md:prose-lg h1 |
| letter-spacing | .05em | .prose table th |
| letter-spacing | -0.025em | .tracking-tight |
| letter-spacing | .025em | .tracking-wide |
| color | #3182ce | .prose a |
| color | #2c5282 | .prose a:hover |
| color | #1a202c | .prose h1 |
| color | #b4c6fc | .post .post-content .heading-anchor,.article .article-content .heading-anchor |
| color | rgba(180,198,252,var(--text-opacity)) | .post .post-content .heading-anchor,.article .article-content .heading-anchor |
| color | #5850ec | .post .post-content h2:hover .heading-anchor,.post .post-content h3:hover .heading-anchor,.post .post-content h4:hover .heading-anchor,.post .post-content h5:hover .heading-anchor,.post .post-content h6:hover .heading-anchor,.post .post-content .head |
| color | rgba(88,80,236,var(--text-opacity)) | .post .post-content h2:hover .heading-anchor,.post .post-content h3:hover .heading-anchor,.post .post-content h4:hover .heading-anchor,.post .post-content h5:hover .heading-anchor,.post .post-content h6:hover .heading-anchor,.post .post-content .head |
| background-color | transparent | a |
| border-radius | .375rem | .prose pre |
| border-radius | 0 | .prose pre code |
| border-radius | .25rem | article img |
| box-shadow | 0 0 0 1px rgba(0,0,0,0.05) | .shadow-xs |
| box-shadow | 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06) | .shadow |
| box-shadow | 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06) | .shadow-md |
| box-shadow | 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05) | .shadow-lg |
| box-shadow | 0 25px 50px -12px rgba(0,0,0,0.25) | .shadow-2xl |
| box-shadow | 0 0 0 3px rgba(118,169,250,0.45) | .focus:shadow-outline:focus |
| box-shadow | 0 0 0 3px rgba(164,202,254,0.45) | .focus:shadow-outline-blue:focus |
| box-shadow | 0 0 0 3px rgba(180,198,252,0.45) | .focus:shadow-outline-indigo:focus |
| max-width | 640px | .container |
| max-width | 768px | .container |
| max-width | 1024px | .container |
| max-width | 1280px | .container |
| max-width | 70rem | .container |
| max-width | 100% | article img |
| max-width | unset | article img |
| padding | 0 | button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner |
| gap | .5rem | .gap-2 |
| gap | 1rem | .gap-4 |
| gap | 1.5rem | .gap-6 |
| gap | 2rem | .gap-8 |
| gap | 2.5rem | .sm:gap-10 |
| transition | all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s) | \[aria-label]\[role~="tooltip"]::before,
\[aria-label]\[role~="tooltip"]::after |
Source: https://plausible.io/. 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.
- 101 custom-property declarations found; 460 relevant property declarations parsed.