PandaDoc

PandaDoc — design reference

Source: https://www.pandadoc.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-graphikl), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif — selector .style-module**P0jVJa**author .author-avatar+div p:first-child
• font-size: 1rem — selector .style-module**P0jVJa**author .author-avatar+div p:first-child
• font-size: 1.125rem — selector .style-module**P0jVJa**author .author-avatar+div p:first-child
• font-size: .875rem — selector .style-module**P0jVJa**author .author-avatar+div p:last-child
• font-size: 2rem — selector .styles-module**QWl0KG**peerTitle :is(p,h1,h2,h3,h4,h5,h6)
• font-size: 2.625rem — selector .styles-module**QWl0KG**peerTitle :is(p,h1,h2,h3,h4,h5,h6)
• font-size: var(--text-2xl,1.5rem) — selector .styles-module**QWl0KG**peerTagline :is(p,h1,h2,h3,h4,h5,h6)
• font-size: 1.5rem — selector .styles-module**QWl0KG**quote :is(p,h1,h2,h3,h4,h5,h6)
• font-size: .75rem — selector .styles-module**QWl0KG**author p:last-child
• font-weight: var(--font-weight-bold,700) — selector .style-module**P0jVJa**author .author-avatar+div p:first-child
• font-weight: var(--font-weight-normal,400) — selector .style-module**cLghWW**heroMediaPrimaryContent p
• font-weight: var(--font-weight-semibold,600) — selector .style-module**T559zW**card .integration-card**pill
• font-weight: var(--font-weight-bold) — selector h1
• font-weight: var(--font-weight-semibold) — selector .btn.btn-primary-small
• font-weight: var(--font-weight-normal) — selector .[&_p]:font-normal p
• line-height: var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1))) — selector .style-moduleP0jVJaauthor .author-avatar+div p:first-child
• line-height: 1.2 — selector .style-moduleP0jVJaauthor .author-avatar+div p:first-child
• line-height: var(--tw-leading,var(--text-xs--line-height,calc(1 / .75))) — selector .style-moduleP0jVJaauthor .author-avatar+div p:last-child
• line-height: 1.5 — selector .style-moduleP0jVJaauthor .author-avatar+div p:last-child
• line-height: var(--tw-leading,var(--text-6xl--line-height,1)) — selector .styles-moduleQWl0KGpeerTitle :is(p,h1,h2,h3,h4,h5,h6)
• line-height: var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5))) — selector .styles-moduleQWl0KGpeerTagline :is(p,h1,h2,h3,h4,h5,h6)
• line-height: var(--tw-leading,var(--text-8xl--line-height,1)) — selector .style-module1Y3aGqtitle :is(p,h1,h2,h3,h4,h5,h6)
• line-height: var(--tw-leading,var(--text-8xl--line-height)) — selector h1

Colors and surfaces

• color: #248567 — selector :is(.styles-moduleQWl0KGpeerTitle,.styles-moduleQWl0KGpeerTagline) a
• color: #136a50 — selector :is(.styles-moduleQWl0KGpeerTitle,.styles-moduleQWl0KGpeerTagline) a:hover
• color: #242424b3 — selector .styles-moduleQWl0KGpeerTagline :is(p,h1,h2,h3,h4,h5,h6)
• color: #888 — selector .styles-moduleQWl0KGauthor p:last-child
• color: #242424!important — selector .style-modulepHFw5qauthor [data-author-type]>div .author-avatar+div p:last-child
• color: lab(14.1977% -.0000149012 .00000596046/.7) — selector .style-moduleYNW4BqheroCustomerStoriesPrimaryContent>p
• color: #242424 — selector .style-moduleYNW4BqheroCustomerStoriesPrimaryContent h1,.style-moduleYNW4BqheroCustomerStoriesPrimaryContent h2
• color: #666 — selector .style-module1Y3aGqprimaryContent :is(p,h1,h2,h3,h4,h5,h6,ul,ol)
• background-color: #242424 — selector .CardsCarousal-moduleMt1VqcardsSlider .splidepaginationpage
• background-color: #fff — selector .CardsCarousal-moduleMt1VqcardsSlider[data-dark-background=true] .splidepaginationpage
• background-color: var(--color-white,#fff) — selector .style-moduleYNW4BqheroCustomerStoriesSecondaryContent:after
• background-color: #6453cf — selector .style-moduleT559zWcard .integration-cardpill.integration-cardpill--new
• background-color: #d5ad15 — selector .style-moduleT559zWcard .integration-cardpill.integration-cardpill--premium
• background-color: #ff523f — selector .style-moduleT559zWcard .integration-cardpill.integration-cardpill--waitlist
• background-color: #f3f5f6 — selector .style-moduleT559zWlist li a:hover
• background-color: #e7ebed — selector .style-moduleT559zWlist li.navigation-list-item--active a

Components and layout

• border-radius: 8px — selector .style-moduleR5lvtaheroVideoLargeSecondaryContent [data-embedded-entry=video] .video-container
• border-radius: 2px — selector .style-moduleT559zWcard .integration-cardpill
• border-radius: 4px — selector .style-moduleT559zWlist li a
• border-radius: 0 — selector button,input,select,optgroup,textarea
• border-radius: 3.40282e38px — selector .style-module1jT1Zqpost-card .post-cardinfo .post-cardinfo-separator
• border-radius: 0 0 8px 8px — selector .style-moduleqjklhWbannerTabCard
• box-shadow: 0 2px 6px #0000001f — selector .style-module1Y3aGqimageWrapper figure>div picture
• box-shadow: 0 2px 8px #0000002e — selector .style-moduletLobpWdocumentSections section .container>.templatePageGlob
• max-width: 100% — selector .style-modulecLghWWheroMediaPrimaryContent figure
• max-width: 200px — selector .style-moduleYNW4BqheroCustomerStoriesPrimaryContent figure
• max-width: 250px — selector .style-moduleYNW4BqheroCustomerStoriesPrimaryContent [data-embedded-entry=cta]
• max-width: 33.33% — selector .style-moduleYNW4BqheroCustomerStoriesPrimaryContent [data-embedded-entry=item-container]:has(.content-item) .content-item
• max-width: 420px — selector .style-moduleYNW4BqheroCustomerStoriesSecondaryContent
• max-width: none — selector .style-moduleYNW4BqheroCustomerStoriesSecondaryContent
• max-width: 480px — selector .style-moduleYNW4BqheroCustomerStoriesSecondaryContent
• max-width: 248px — selector .style-moduleYNW4BqheroCustomerStoriesSecondaryContent figure
• padding: calc(var(--spacing,.25rem) \* 0)!important — selector .style-moduleR5lvtaheroVideoLargeSecondaryContent section>.container
• padding: 1.25rem — selector .style-moduleT559zWcard .integration-cardlink
• padding: 9px 2px 10px — selector .Table-moduleB7UdPqrow .btn
• padding: 3px 0 0 — selector .Table-moduleB7UdPqcellFirst .Table-moduleB7UdPqtooltipButton
• padding: calc(var(--spacing,.25rem) 0) — selector .style-modulelbfNNWtemplatePage section>.container
• padding: 0 — selector ::file-selector-button
• padding: calc(var(--spacing) 0)!important — selector .with-fancybox .fancyboxcontainer .has-html .f-html,.with-fancybox .fancyboxcontainer .has-html5video .f-html
• padding: 1.875rem — selector .styles-moduleFIIXYGformCard
• gap: 1.25rem — selector .CardsCarousal-moduleM_t1Vq**cardsSlider .splide:not(.is-active) .splide**list
• gap: 1.875rem — selector .CardsCarousal-module**M\_t1Vq**cardsSlider .splide:not(.is-active) .splide**list
• gap: calc(var(--spacing,.25rem) _ 1.25) — selector .style-module**YNW4Bq**heroCustomerStoriesPrimaryContent [data-embedded-entry=item-container]:has(.content-item) .content-item
• gap: calc(var(--spacing,.25rem) _ 5) — selector .style-module**YNW4Bq**heroCustomerStoriesSecondaryContent [data-embedded-entry=content-item] .content-item
• gap: calc(var(--spacing,.25rem) \* 3.75) — selector .style-module**owjneG**heroVideoPrimaryContent [data-embedded-entry=item-container]:has([data-type=cta]) .hero-video-item-container
• gap: 2.5rem — selector .style-module**T559zW**card.integration-card--featured .integration-card**inner
• gap: .625rem — selector .style-module**T559zW**card.integration-card--featured .integration-card**content
• gap: 10px — selector .btn.btn-primary-small
• transition: all .25s — selector .styles-module**FMV01G**UICardContent ul li:before
• transition: color .25s — selector .styles-module**YGK4mq**faqItemTitle h1,.styles-module**YGK4mq**faqItemTitle h2,.styles-module**YGK4mq**faqItemTitle h3,.styles-module**YGK4mq**faqItemTitle h4,.styles-module**YGK4mq**faqItemTitle h5,.styles-module**YGK4mq**faqItemTitle h6,.styles-mo

Responsive rules

(min-width:600px)
(min-width:1200px)
(min-width:960px)
(hover:hover)
(min-width:768px)
(max-width:959px)
(max-width:599px)
(min-width:1400px)
(min-width:96rem)
(prefers-reduced-motion:reduce)
screen and (-ms-high-contrast:none)
not all and (min-width:600px)
(min-width:1540px)
(max-width:479px)
(min-width:480px)
not all and (min-width:599px)
not all and (min-width:767px)
not all and (min-width:959px)
not all and (min-width:1199px)
(min-width:1820px)