.webp)
PlayPlay
The simplest video maker
No items found.
No items found.
Visual identity
PlayPlay — design reference
Source: https://playplay.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: Aeonik,sans-serif— selector.text-field[data-astro-cid-u2oz6abr]font-family: Aeonik— selector.promo-cta-wrapper[data-astro-cid-npm3adck] .buttonfont-size: 1.125rem— selector.button[data-astro-cid-5dsbubbz]font-size: 48px— selector.title-news[data-astro-cid-mtedrqom]font-size: 16px— selector.title-news[data-astro-cid-mtedrqom].navbarfont-size: 14px— selector.inner-wrapper[data-astro-cid-mtedrqom].navbarfont-size: 32px— selector.title-news[data-astro-cid-mtedrqom]font-size: 24px— selector.select-display[data-astro-cid-oqamg6xj]font-size: 0.9rem— selector.nav-wrapper .buttonfont-size: 1rem— selector.navbar-link[data-astro-cid-ollyizez]font-weight: 400— selector.title-news[data-astro-cid-mtedrqom]font-weight: 500— selector.ppd-form-headingfont-weight: 700— selector.promo-text-bold[data-astro-cid-npm3adck]font-weight: 400!important— selector#prompt-video-home #url-prompt-text-inputline-height: 100%— selector.title-news[data-astro-cid-mtedrqom]line-height: 1.2em— selector.text-field[data-astro-cid-u2oz6abr]line-height: normal— selector.ppd-promo-title[data-astro-cid-szn7fqsx]line-height: 1— selector.card-name[data-astro-cid-xhmbmswj]line-height: 150%— selector.promo-cta-wrapper[data-astro-cid-npm3adck] .buttonline-height: 1.08— selector.prompt-hero**title[data-astro-cid-p54rh5wh]line-height: 28px— selector.prompt-hero**subtitle[data-astro-cid-p54rh5wh]letter-spacing: 6px— selector.text-h5letter-spacing: .84px— selectorh5
Colors and surfaces
color: #fff— selector.logo-scroller-container[data-astro-cid-4ov5hbh4]color: var(--pp-dark-grey)— selector.desc[data-astro-cid-mtedrqom].navbarcolor: #000— selector.text-input[data-astro-cid-mtedrqom]color: #242528— selector.ppd-form-cardcolor: var(--pp-purple)— selector.ppd-form-heading b, .ppd-form-heading strongcolor: #686e78— selector.ppd-back-buttoncolor: white— selector.ppd-form-card .loader-buttonbackground-color: var(--pp-superdark-grey)— selectorbutton[data-astro-cid-5dsbubbz].button:disabledbackground-color: var(--pp-purple)— selector.purple-btn[data-astro-cid-mtedrqom]background-color: var(--pp-transparent-purple)— selector.purple-btn[data-astro-cid-mtedrqom]:hoverbackground-color: #fff— selector.text-input[data-astro-cid-mtedrqom]background-color: white— selector.ppd-form-cardbackground-color: var(--pp-purple-600)— selector.loader-button[data-astro-cid-iqpa5wr6]background-color: var(--pp-white-grey)— selector.card[data-astro-cid-xaye2zfv]:hoverbackground-color: var(--pp-black)— selector.nav-black[data-astro-cid-ollyizez]
Components and layout
border-radius: 12px— selector.button[data-astro-cid-5dsbubbz]border-radius: 10px— selector.text-input[data-astro-cid-mtedrqom]border-radius: .5rem— selector.text-field[data-astro-cid-u2oz6abr]border-radius: 8px— selector.nav-wrapper .buttonborder-radius: 16px— selector.ppd-form-cardborder-radius: 32px— selector.signup-card[data-astro-cid-iqpa5wr6]border-radius: 20px— selector.pros-cards**card[data-astro-cid-y54v2wey]border-radius: 40px— selector.prompt-hero[data-astro-cid-p54rh5wh]box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1) !important— selector.main-body-wrapper > .cta-background.home .image-wrapper :is(img, picture, video)box-shadow: 0 4px 16px #0000000d— selector.signup-card[data-astro-cid-iqpa5wr6]box-shadow: 0 4px 8px #0000000d— selector.fcr**card[data-astro-cid-swv32sqj]box-shadow: 0 10px 28px #00000040— selector.fcr**card--link[data-astro-cid-swv32sqj]:hovermax-width: 100%— selector.logo-scroller-container-section[data-astro-cid-4ov5hbh4]max-width: 440px— selector.ppd-form-cardmax-width: 1440px— selector.nav-wrapper[data-astro-cid-ollyizez]max-width: none— selector.media-toggle**title[data-astro-cid-4ti33iys]max-width: 638px— selector.media-toggle**title[data-astro-cid-4ti33iys]max-width: 1260px— selector.pros-cards[data-astro-cid-y54v2wey]max-width: 358.67px— selector.pros-cards**carousel[data-astro-cid-y54v2wey] .pros-cards**card[data-astro-cid-y54v2wey]max-width: 335px— selector.fcr**title[data-astro-cid-swv32sqj]padding: 10px 20px— selector.button[data-astro-cid-5dsbubbz]padding: 16px— selector.text-input[data-astro-cid-mtedrqom]padding: 14px 10px— selector.text-input[data-astro-cid-mtedrqom].navbarpadding: .75rem— selector.text-field[data-astro-cid-u2oz6abr]padding: 6px .75rem 4px— selector.select-display[data-astro-cid-oqamg6xj]padding: 3px— selector.select-display[data-astro-cid-oqamg6xj]:afterpadding: 8px— selector.nav-wrapper .buttonpadding: 32px— selector.ppd-form-cardgap: 0— selector.logo-scroller-container[data-astro-cid-4ov5hbh4]gap: 20px— selector.signup-card-step[data-astro-cid-iqpa5wr6]gap: 16px— selector.signup-card-name-row[data-astro-cid-iqpa5wr6]gap: 10px— selector.card[data-astro-cid-xaye2zfv]gap: 1rem— selector.group-cards[data-astro-cid-xaye2zfv]gap: 28px— selector.nav-wrapper[data-astro-cid-ollyizez]gap: 60px— selector.hero-wrapper[data-astro-cid-nvxsfg7b]gap: 40px— selector.pros-cards[data-astro-cid-y54v2wey]transition: background-color .2s— selector.button[data-astro-cid-5dsbubbz]transition: background-color .2s,border-color .2s— selector.text-field[data-astro-cid-u2oz6abr]transition: border-color .2s— selector.card-name[data-astro-cid-xhmbmswj]transition: top .5s ease-in-out,background-color .2s,color .2s— selector.navbar[data-astro-cid-ollyizez]transition: background-color .1s— selector.navgroup-link[data-astro-cid-ollyizez],.navbar-link[data-astro-cid-ollyizez]transition: background-color .2s ease— selector.promo-cta-wrapper[data-astro-cid-npm3adck] .buttontransition: background .2s ease— selector.home-hero[data-astro-cid-nvxsfg7b]:aftertransition: transform .5s cubic-bezier(.4,0,.2,1)— selector.pros-cards**grid[data-astro-cid-y54v2wey] .pros-cards**card[data-astro-cid-y54v2wey]
Responsive rules
screen and (max-width:1024px)
screen and (max-width:800px)
screen and (max-width:1279px)
screen and (max-width:1023px)
screen and (max-width:767px)
screen and (min-width:1024px)
screen and (max-width:360px)
(min-width:1024px)
(max-width:480px)
screen and (max-width:480px)
screen and (max-width:768px)
screen and (max-width: 1279px) and (min-width: 1024px)
screen and (min-width:1280px)
screen and (max-width:1024px)and (min-width:768px)
screen and (min-width:1024px)and (max-width:1400px)
screen and (min-width:1024px)and (max-width:1279px)
screen and (max-width:1400px)and (min-width:1024px)
screen and (max-width:500px)
screen and (max-width:639px)
screen and (min-width:640px)
screen and (max-width:1279px)and (min-width:1024px)
screen and (min-width:500px)
screen and (min-width:1024px)and (hover:hover)
(prefers-reduced-motion:reduce)
(pointer:fine)Source: https://playplay.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://playplay.com/_astro/_astro_assets.C_by7iUC.css — :root
--pp-black: #000000;
--pp-hover-black: #353637;
--pp-purple: #B353FF;
--pp-hover-purple: #BF6FFF;
--pp-lightpurple: #F7EEFF;
--pp-purple-25: #F1DEFF;
--pp-purple-50: #EACFFF;
--pp-purple-600: #9646D6;
--pp-blue: #5884FF;
--pp-blue-50: #D0DDFF;
--pp-blue-600: #4A6FD6;
--pp-burple: #6E55FF;
--pp-burple-50: #DAD4FF;
--pp-burple-600: #6855D6;
--pp-coral: #FA6268;
--pp-orange: #FF9737;
--pp-orange-50: #FFE4CC;
--pp-orange-600: #D6863D;
--pp-green: #37C871;
--pp-red-50: #FFD0D2;
--pp-red-600: #D64A50;
--pp-superdark-grey: #4B4B4B;
--pp-dark-grey: #7F8692;
--pp-grey: #9FA4AE;
--pp-light-grey: #BFC2C9;
--pp-superlight-grey: #DFE1E4;
--pp-white-grey: #F5F5F5;
--pp-gradient: linear-gradient(230deg, #5884FF 0%, #7056FF 24.5%, #B353FF 49.5%, #FA636B 75%, #FF9737 100%);
--pp-grey-0: #FFFFFF;
--pp-grey-50: #F5F6F6;
--pp-grey-100: #E5E7E8;
--pp-grey-200: #CDD0D4;
--pp-grey-300: #AAADB6;
--pp-grey-400: #808690;
--pp-grey-500: #686E78;
--pp-grey-600: #575B63;
--pp-grey-700: #4A4D54;
--pp-grey-800: #414349;
--pp-grey-900: #3A3C3F;
--pp-grey-950: #242528;
--pp-grey-1000: #000000;
--pp-green-50: #F1FCF4;
--pp-green-100: #DEFAE8;
--pp-green-200: #BEF4D3;
--pp-green-300: #8BEAB0;
--pp-green-400: #51D786;
--pp-green-500: #2ABD65;
--pp-green-600: #1FA856;
--pp-green-700: #1A7B41;
--pp-green-800: #1A6137;
--pp-green-900: #175030;
--pp-green-950: #072C17;
--pp-orange-100: #FFDDBD;
--pp-orange-200: #FFCEA0;
--pp-orange-300: #FFBE83;
--pp-orange-400: #FFAF66;
--pp-orange-500: #FFA049;
--pp-orange-700: #AD6D32;
--pp-orange-800: #855326;
--pp-orange-900: #5C3A1A;
--pp-red-100: #FFC3C5;
--pp-red-200: #FFA8AC;
--pp-red-300: #FF8D92;
--pp-red-400: #FF7379;
--pp-red-500: #FF585F;
--pp-red-700: #AD3C41;
--pp-red-800: #852E31;
--pp-red-900: #5C2022;
--pp-burple-100: #D0C8FF;
--pp-burple-200: #BBAFFF;
--pp-burple-300: #A696FF;
--pp-burple-400: #917EFF;
--pp-burple-500: #7C65FF;
--pp-burple-700: #5445AD;
--pp-burple-800: #403585;
--pp-burple-900: #2D245C;
--pp-purple-100: #E4C1FF;
--pp-purple-200: #D7A6FF;
--pp-purple-300: #CB8AFF;
--pp-purple-400: #BF6FFF;
--pp-purple-500: #B353FF;
--pp-purple-700: #7A38AD;
--pp-purple-800: #5D2B85;
--pp-purple-900: #401E5C;
--pp-blue-100: #C3D3FF;
--pp-blue-200: #A8BFFF;
--pp-blue-300: #8DABFF;
--pp-blue-400: #7398FF;
--pp-blue-500: #5884FF;
--pp-blue-700: #3C5AAD;
--pp-blue-800: #2E4585;
--pp-blue-900: #20305C;Source: https://playplay.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 | Aeonik,sans-serif | .text-field[data-astro-cid-u2oz6abr] |
| font-family | Aeonik | .promo-cta-wrapper[data-astro-cid-npm3adck] .button |
| font-size | 1.125rem | .button[data-astro-cid-5dsbubbz] |
| font-size | 48px | .title-news[data-astro-cid-mtedrqom] |
| font-size | 16px | .title-news[data-astro-cid-mtedrqom].navbar |
| font-size | 14px | .inner-wrapper[data-astro-cid-mtedrqom].navbar |
| font-size | 32px | .title-news[data-astro-cid-mtedrqom] |
| font-size | 24px | .select-display[data-astro-cid-oqamg6xj] |
| font-size | 0.9rem | .nav-wrapper .button |
| font-size | 1rem | .navbar-link[data-astro-cid-ollyizez] |
| font-weight | 400 | .title-news[data-astro-cid-mtedrqom] |
| font-weight | 500 | .ppd-form-heading |
| font-weight | 700 | .promo-text-bold[data-astro-cid-npm3adck] |
| font-weight | 400!important | #prompt-video-home #url-prompt-text-input |
| line-height | 100% | .title-news[data-astro-cid-mtedrqom] |
| line-height | 1.2em | .text-field[data-astro-cid-u2oz6abr] |
| line-height | normal | .ppd-promo-title[data-astro-cid-szn7fqsx] |
| line-height | 1 | .card-name[data-astro-cid-xhmbmswj] |
| line-height | 150% | .promo-cta-wrapper[data-astro-cid-npm3adck] .button |
| line-height | 1.08 | .prompt-hero**title[data-astro-cid-p54rh5wh] |
| line-height | 28px | .prompt-hero**subtitle[data-astro-cid-p54rh5wh] |
| letter-spacing | 6px | .text-h5 |
| letter-spacing | .84px | h5 |
| color | #fff | .logo-scroller-container[data-astro-cid-4ov5hbh4] |
| color | var(--pp-dark-grey) | .desc[data-astro-cid-mtedrqom].navbar |
| color | #000 | .text-input[data-astro-cid-mtedrqom] |
| color | #242528 | .ppd-form-card |
| color | var(--pp-purple) | .ppd-form-heading b, .ppd-form-heading strong |
| color | #686e78 | .ppd-back-button |
| color | white | .ppd-form-card .loader-button |
| background-color | var(--pp-superdark-grey) | button[data-astro-cid-5dsbubbz].button:disabled |
| background-color | var(--pp-purple) | .purple-btn[data-astro-cid-mtedrqom] |
| background-color | var(--pp-transparent-purple) | .purple-btn[data-astro-cid-mtedrqom]:hover |
| background-color | #fff | .text-input[data-astro-cid-mtedrqom] |
| background-color | white | .ppd-form-card |
| background-color | var(--pp-purple-600) | .loader-button[data-astro-cid-iqpa5wr6] |
| background-color | var(--pp-white-grey) | .card[data-astro-cid-xaye2zfv]:hover |
| background-color | var(--pp-black) | .nav-black[data-astro-cid-ollyizez] |
| border-radius | 12px | .button[data-astro-cid-5dsbubbz] |
| border-radius | 10px | .text-input[data-astro-cid-mtedrqom] |
| border-radius | .5rem | .text-field[data-astro-cid-u2oz6abr] |
| border-radius | 8px | .nav-wrapper .button |
| border-radius | 16px | .ppd-form-card |
| border-radius | 32px | .signup-card[data-astro-cid-iqpa5wr6] |
| border-radius | 20px | .pros-cards**card[data-astro-cid-y54v2wey] |
| border-radius | 40px | .prompt-hero[data-astro-cid-p54rh5wh] |
| box-shadow | 0px 0px 12px 0px rgba(0, 0, 0, 0.1) !important | .main-body-wrapper > .cta-background.home .image-wrapper :is(img, picture, video) |
| box-shadow | 0 4px 16px #0000000d | .signup-card[data-astro-cid-iqpa5wr6] |
| box-shadow | 0 4px 8px #0000000d | .fcr**card[data-astro-cid-swv32sqj] |
| box-shadow | 0 10px 28px #00000040 | .fcr**card--link[data-astro-cid-swv32sqj]:hover |
| max-width | 100% | .logo-scroller-container-section[data-astro-cid-4ov5hbh4] |
| max-width | 440px | .ppd-form-card |
| max-width | 1440px | .nav-wrapper[data-astro-cid-ollyizez] |
| max-width | none | .media-toggle**title[data-astro-cid-4ti33iys] |
| max-width | 638px | .media-toggle**title[data-astro-cid-4ti33iys] |
| max-width | 1260px | .pros-cards[data-astro-cid-y54v2wey] |
| max-width | 358.67px | .pros-cards**carousel[data-astro-cid-y54v2wey] .pros-cards**card[data-astro-cid-y54v2wey] |
| max-width | 335px | .fcr**title[data-astro-cid-swv32sqj] |
| padding | 10px 20px | .button[data-astro-cid-5dsbubbz] |
| padding | 16px | .text-input[data-astro-cid-mtedrqom] |
| padding | 14px 10px | .text-input[data-astro-cid-mtedrqom].navbar |
| padding | .75rem | .text-field[data-astro-cid-u2oz6abr] |
| padding | 6px .75rem 4px | .select-display[data-astro-cid-oqamg6xj] |
| padding | 3px | .select-display[data-astro-cid-oqamg6xj]:after |
| padding | 8px | .nav-wrapper .button |
| padding | 32px | .ppd-form-card |
| gap | 0 | .logo-scroller-container[data-astro-cid-4ov5hbh4] |
| gap | 20px | .signup-card-step[data-astro-cid-iqpa5wr6] |
| gap | 16px | .signup-card-name-row[data-astro-cid-iqpa5wr6] |
| gap | 10px | .card[data-astro-cid-xaye2zfv] |
| gap | 1rem | .group-cards[data-astro-cid-xaye2zfv] |
| gap | 28px | .nav-wrapper[data-astro-cid-ollyizez] |
| gap | 60px | .hero-wrapper[data-astro-cid-nvxsfg7b] |
| gap | 40px | .pros-cards[data-astro-cid-y54v2wey] |
| transition | background-color .2s | .button[data-astro-cid-5dsbubbz] |
| transition | background-color .2s,border-color .2s | .text-field[data-astro-cid-u2oz6abr] |
| transition | border-color .2s | .card-name[data-astro-cid-xhmbmswj] |
| transition | top .5s ease-in-out,background-color .2s,color .2s | .navbar[data-astro-cid-ollyizez] |
| transition | background-color .1s | .navgroup-link[data-astro-cid-ollyizez],.navbar-link[data-astro-cid-ollyizez] |
| transition | background-color .2s ease | .promo-cta-wrapper[data-astro-cid-npm3adck] .button |
| transition | background .2s ease | .home-hero[data-astro-cid-nvxsfg7b]:after |
| transition | transform .5s cubic-bezier(.4,0,.2,1) | .pros-cards**grid[data-astro-cid-y54v2wey] .pros-cards**card[data-astro-cid-y54v2wey] |
Source: https://playplay.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.
- 92 custom-property declarations found; 1125 relevant property declarations parsed.
Stylesheet sources
- https://playplay.com/
- https://playplay.com/_astro/CTA.DgWXNKt5.css
- https://playplay.com/_astro/Navigation.CFBZvTOU.css
- https://playplay.com/_astro/_..DXhrqy7U.css
- https://playplay.com/_astro/splide.BRKXMWAJ.css
- https://playplay.com/_astro/_astro_assets.C_by7iUC.css
- https://playplay.com/_astro/URLorPromptVideo.Ox4-p4VK.css