Bento

Bento — design reference

Source: https://linktr.ee/. 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-linksans) — selector .text-display
• font-family: var(--font-linksans)!important — selector .md:!text-h3
• font-size: clamp(40px,6.67vw,96px) — selector .text-display
• font-size: clamp(62px,6.28vw,90px) — selector .text-h1
• font-size: 64px — selector .text-h1-compact
• font-size: clamp(20px,4vw,56px) — selector .text-h2
• font-size: clamp(24px,2.85vw,41px) — selector .text-h3
• font-size: clamp(18px,1.67vw,28px) — selector .text-h4
• font-weight: 800 — selector .text-display
• font-weight: 700 — selector .text-h2
• font-weight: 500 — selector .text-h3
• font-weight: 400 — selector .text-body
• font-weight: 500!important — selector .md:!text-h3
• font-weight: var(--font-weight-medium) — selector .[&_a:not([data-help-cta])]:font-medium a:not([data-help-cta])
• font-weight: var(--font-weight-bold) — selector .[&_h2]:font-bold h2
• line-height: var(--leading-display) — selector .text-display
• line-height: var(--leading-h1) — selector .text-h1
• line-height: var(--leading-h2) — selector .text-h2
• line-height: var(--leading-h3) — selector .text-h3
• line-height: var(--leading-body) — selector .text-body
• line-height: var(--tw-leading,1.4) — selector .text-report-body
• line-height: var(--tw-leading,1.04) — selector .text-report-display
• line-height: var(--tw-leading,1.2) — selector .text-report-h3
• letter-spacing: -.02em — selector p,h1,h2,h3,h4,h5,h6
• letter-spacing: var(--tracking-display) — selector .text-display
• letter-spacing: -.01em — selector .text-h3
• letter-spacing: var(--tw-tracking,0em) — selector .text-report-body
• letter-spacing: var(--tw-tracking,-.02em) — selector .text-report-display
• letter-spacing: var(--tw-tracking,-.04em) — selector .text-report-nav
• letter-spacing: -.01em!important — selector .md:!text-h3

Colors and surfaces

• color: #2665d6!important — selector .!text-hydrangea
• color: #1e2330!important — selector .!text-shade
• color: var(--callout-icon) — selector .text-(--callout-icon)
• color: #5c6568 — selector .text-[#5c6568]
• color: #7d8087 — selector .text-[#7d8087]
• color: #333 — selector .text-[#333]
• color: #471e67 — selector .text-[#471e67]
• background-color: #0000 — selector button,input,select,optgroup,textarea
• background-color: var(--callout-card) — selector .bg-(--callout-card)
• background-color: #fff — selector body:has([data-treetop-page])

Components and layout

• border-radius: 0 — selector button,input,select,optgroup,textarea
• border-radius: 40px — selector .rounded-card
• box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) — selector .shadow-(--pricing-card-compact-recommended-shadow)
• max-width: 480px — selector .container
• max-width: 768px — selector .container
• max-width: 992px — selector .container
• max-width: 1280px — selector .container
• max-width: 1440px — selector .container
• max-width: 1920px — selector .container
• max-width: 1504px — selector .container
• max-width: none — selector .container
• padding: 0 — selector ::file-selector-button
• padding: calc(var(--spacing) \* 0) — selector .[&_pre_code]:p-0 pre code
• gap: 5vw — selector .gap-editorial-hero-gap
• gap: 7.5vw — selector .max-sm:gap-editorial-hero-gap-sm
• gap: 63.6px — selector .xl:gap-editorial-hero-gap-xl
• gap: 70px — selector .\32 xl:gap-editorial-hero-gap-2xl
• transition: border-color .2s,box-shadow .2s,--nav-surface-h .32s cubic-bezier(.32,.72,0,1) — selector .data-[morph=true]:[transition:border-color_200ms,box-shadow_200ms,--nav-surface-h_320ms_cubic-bezier(0.32,0.72,0,1)][data-morph=true]
• transition: transform .25s ease-out — selector body.all-features-active nav[role=navigation]

Responsive rules

(max-width:1439px)
(max-width:1279px)
(max-width:991px)
(min-width:480px)
(min-width:768px)
(min-width:992px)
(min-width:1280px)
(min-width:1440px)
(min-width:1920px)
(prefers-reduced-motion:reduce)
not all and (min-width:1440px)
not all and (min-width:1280px)
not all and (min-width:992px)
not all and (min-width:768px)
not all and (min-width:480px)
(orientation:landscape)
(max-width:479px)
(min-width:992px) and (max-width:1279px)
screen and (max-width:991px)
screen and (max-width:479px)
(prefers-reduced-motion:no-preference)