# Bento > A Link in Bio, but Rich and Beautiful. Bento UI and UX design examples on SaaSFrame: 18 screens, 2 user flows. - URL: https://www.saasframe.io/saas/bento - Website: https://bento.me/en/home - Industry: [Social](https://www.saasframe.io/industries/social) - Websites: 5 screens - Products: 13 screens - Built with: [Webflow](https://www.saasframe.io/stack/webflow) ## Websites (5) - [Landing Page](https://www.saasframe.io/examples/bento-landing-page) - [About Page](https://www.saasframe.io/examples/bento-about-page) - [Careers Page](https://www.saasframe.io/examples/bento-careers-page) - All 5 websites from Bento: https://www.saasframe.io/search-screens?brand=187&format=marketing ## Products (13) - [Claim Your Link](https://www.saasframe.io/examples/bento-claim-your-link) - [Create Account](https://www.saasframe.io/examples/bento-create-account) - [Add Social Media Links](https://www.saasframe.io/examples/bento-add-social-media-links-5) - All 13 products from Bento: https://www.saasframe.io/search-screens?brand=187&format=product ## User flows (2) - [Add A Link](https://www.saasframe.io/flows/bento-add-a-link): 4 steps - 1 more flow with SaaSFrame Pro: https://www.saasframe.io/pricing ## Design reference ## Bento — design reference Source: [https://linktr.ee/](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) ``` Source: [SaaSFrame](https://www.saasframe.io/saas/bento)