Canny

Canny — design reference

Source: https://canny.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: 14px — selector .landingFooter .footerContainer .sections .section a
• font-size: 12px — selector .landingFooter .footerContainer .footerInfo :is(a,div)
• font-size: 16px — selector .landingFooter .footerContainer .footerInfo .footerText
• font-size: var(--text-base) — selector .text-body
• font-size: var(--text-sm)!important — selector .!text-sm
• font-size: var(--text-2xl) — selector .text-2xl
• font-size: var(--text-3xl) — selector .text-3xl
• font-size: var(--text-4xl) — selector .text-4xl
• font-weight: 500 — selector .landingFooter .Sitemap**column-heading
• font-weight: var(--font-weight-normal) — selector .unstyled-button
• font-weight: 400 — selector h1
• font-weight: 700 — selector .buttonStyle,button
• font-weight: 600 — selector .textV2.heading2Xl
• line-height: 22px — selector .landingFooter .footerContainer .sections .section a
• line-height: 17px — selector .landingFooter .footerContainer .footerInfo :is(a,div)
• line-height: 20px — selector .landingFooter .footerContainer .footerInfo :is(a,div)
• line-height: 24px — selector .landingFooter .footerContainer .footerInfo .footerText
• line-height: var(--tw-leading,var(--text-base--line-height)) — selector .text-body
• line-height: var(--leading-5.5) — selector .text-body
• line-height: var(--tw-leading,var(--text-sm--line-height))!important — selector .!text-sm
• line-height: var(--tw-leading,var(--text-2xl--line-height)) — selector .text-2xl
• letter-spacing: normal — selector a
• letter-spacing: 2px — selector .LandingHero**pretitle

Colors and surfaces

• color: var(--color-gray-110) — selector .landingFooter .footerContainer .sections .section a
• color: var(--color-foreground) — selector .landingFooter .footerContainer .sections .section a .uppercaseHeader:hover,.landingFooter .footerContainer .sections .section a:hover
• color: var(--color-gray-80)!important — selector .!text-gray-80
• color: #6b7180 — selector .text-[#6B7180]
• color: #793aaf — selector .text-[#793AAF]
• color: #993c1d — selector .text-[#993C1D]
• color: #1589ee — selector .text-[#1589ee]
• color: var(--company-color-foreground) — selector .text-[var(--company-color-foreground)]
• background-color: initial — selector .unstyled-button
• background-color: var(--color-card) — selector .bg-card
• background-color: color-mix(in srgb,#525df9 10%,#0000) — selector .group-hover/link-card:bg-primary/10:is(:where(.group/link-card):hover _)
• background-color: color-mix(in oklab,var(--color-primary) 10%,#0000) — selector .group-hover/link-card:bg-primary/10:is(:where(.group/link-card):hover _)
• background-color: var(--color-accent) — selector a.[a&]:hover:bg-accent:hover
• background-color: var(--color-red-20) — selector .buttonStyle.ghostButton.destructive:hover,button.ghostButton.destructive:hover
• background-color: var(--color-red-30) — selector .buttonStyle.ghostButton.destructive:focus,button.ghostButton.destructive:focus
• background-color: #0000 — selector .textToggle.fullBorder .optionButton

Components and layout

• border-radius: 6px — selector .LandingNavMobile**menu-container
• border-radius: var(--radius-xl) — selector .card
• border-radius: 4px — selector .buttonStyle.textButton,button.textButton
• border-radius: 10px — selector .buttonStyle.withBorder,button.withBorder
• border-radius: 50% — selector .buttonStyle .loader:after,button .loader:after
• border-radius: 100px — selector .menuIconButton
• border-radius: 100% — selector .userAvatar .avatarContainer
• border-radius: 0 — selector .textToggle.fullBorder .optionButton
• box-shadow: 0 4px 10px 0 #0000001a — selector .createOrUpdateCompanyFormContainer .createOrUpdateCompanyForm
• box-shadow: 0 24px 48px -12px #0000001a — selector .LandingHeroVisual**inner-wrapper
• max-width: 1280px — selector .landingFooter .footerContainer
• max-width: 70% — selector .existingCompanyContainer .companyList .companyListItem .companyDetails .companyPrimaryDetails
• max-width: 960px — selector .LandingHero
• max-width: 96px — selector .LandingIntegrations**nav-item
• max-width: 600px — selector .LandingTestimonials**title
• max-width: none — selector .LandingTestimonials:not(:has(.LandingTestimonials**tab-list)) .LandingTestimonials**title
• max-width: 400px — selector .LandingTestimonials**title
• padding: 0 — selector .LandingNavMobile**toggle-container
• padding: 80px 0 — selector .landingFooter .footerContainer
• padding: 64px 32px — selector .landingFooter .footerContainer
• padding: 48px 32px — selector .landingFooter .footerContainer
• padding: 5px 0 — selector .landingFooter .footerContainer .sections .section a
• padding: 14px 16px — selector .buttonStyle,button
• padding: 8px 12px — selector .textToggle.fullBorder .optionButton .option
• padding: 3px 8px — selector .buttonV2.small
• gap: 32px — selector .landingFooter .Sitemap**column-container
• gap: 32px 16px — selector .landingFooter .Sitemap**column-container
• gap: 8px — selector .landingFooter .Sitemap**link-container
• gap: 16px — selector .existingCompanyContainer .companyList
• gap: 24px — selector .createOrUpdateCompanyFormContainer
• gap: 48px 16px — selector .LandingContentBlock**point-container
• gap: 0 64px — selector .LandingIntegrations**nav-inner-container
• transition: opacity .1s ease-out,visibility .2s ease-out,top .1s ease-out .1s — selector .LandingNavMobile**menu-container
• transition: all .1s ease-in-out — selector .landingFooter .footerContainer .sections .section .uppercaseHeader
• transition: color .25s cubic-bezier(.16,.83,.31,.99),background-color .25s cubic-bezier(.16,.83,.31,.99) — selector .buttonStyle,button
• transition: border .15s ease-in-out — selector .buttonStyle.textButton,button.textButton
• transition: all .15s ease-in-out — selector .buttonStyle.textButton .label,button.textButton .label
• transition: opacity .25s cubic-bezier(.16,.83,.31,.99) 0s,transform .25s cubic-bezier(.16,.83,.31,.99) 0s,visibility .25s cubic-bezier(.16,.83,.31,.99) .25s — selector .buttonStyle .label,.buttonStyle .loader,.buttonStyle[title]:after,button .label,button .loader,button[title]:after
• transition: none — selector .textToggle.fullBorder .optionButton
• transition: background-color .3s ease-in-out,border-color .3s ease-in-out,outline .3s ease-in-out — selector .buttonV2

Responsive rules

(max-width:780px)
(max-width:420px)
(max-width:1020px)
(min-width:741px)and (max-width:1020px)
(max-width:740px)
(width >= 781px)
(width >= 40rem)
(width >= 64rem)
(width >= 80rem)
(width >= 96rem)
(forced-colors:active)
(hover:hover)
(width < 1020px)