# Abstract > Version, Collaborate & Share‎ Abstract UI and UX design examples on SaaSFrame: 20 screens, 3 user flows. - URL: https://www.saasframe.io/saas/abstract - Website: https://www.abstract.com/ - Industry: [Design](https://www.saasframe.io/industries/design) - Websites: 7 screens - Products: 13 screens - Built with: [Cloudflare](https://www.saasframe.io/stack/cloudflare), [Webflow](https://www.saasframe.io/stack/webflow), [Wordpress](https://www.saasframe.io/stack/wordpress) ## Websites (7) - [Landing Page](https://www.saasframe.io/examples/abstract-landing-page) - [Blog Feed](https://www.saasframe.io/examples/abstract-blog-feed) - [Webinars Page](https://www.saasframe.io/examples/abstract-webinars-page) - All 7 websites from Abstract: https://www.saasframe.io/search-screens?brand=47&format=marketing ## Products (13) - [Signup Page](https://www.saasframe.io/examples/abstract-sign-up-flow) - [User Onboarding](https://www.saasframe.io/examples/abstract-user-onboarding) - [Invite Team Members](https://www.saasframe.io/examples/abstract-invite-team-members) - All 13 products from Abstract: https://www.saasframe.io/search-screens?brand=47&format=product ## User flows (3) - [User Onboarding](https://www.saasframe.io/flows/user-onboarding-7): 4 steps - 2 more flows with SaaSFrame Pro: https://www.saasframe.io/pricing ## Design reference ## Abstract — design reference Source: [https://www.abstract.com/](https://www.abstract.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-std)` — selector `body` - `font-family: var(--font-head)` — selector `.u-title` - `font-size: 1.125em` — selector `.wp-block-button**link` - `font-size: 16px` — selector `body` - `font-size: 1.625rem` — selector `.splash-page**content .u-title` - `font-size: 2.6875rem` — selector `.splash-page**content .u-title` - `font-size: 2rem` — selector `.splash-page**content .u-title` - `font-size: 2.8125rem` — selector `.splash-page**content .u-title` - `font-size: 1.125rem` — selector `.simple-content**text-hld` - `font-weight: 400` — selector `body` - `font-weight: normal` — selector `.u-title` - `font-weight: 600 !important` — selector `.cky-preference-header .cky-preference-title` - `line-height: 1.2` — selector `body` - `line-height: 2.17` — selector `.site-footer-navs ul a .text` - `line-height: 1.86` — selector `.site-footer-navs ul a .text` - `line-height: 1.75 !important` — selector `.cky-preference-header .cky-preference-title` - `line-height: 100%` — selector `.cky-btn-close::before` - `line-height: 2 !important` — selector `.cky-notice-des p` - `line-height: 2.17 !important` — selector `.cky-notice-des p` - `letter-spacing: normal` — selector `body` - `letter-spacing: -0.32px` — selector `.splash-page**content .u-title` - `letter-spacing: -0.45px` — selector `.splash-page**content .u-title` - `letter-spacing: -0.43px` — selector `.splash-page**content .u-title` - `letter-spacing: .48px` — selector `.site-footer-navs ul a .text` - `letter-spacing: .56px` — selector `.site-footer-navs ul a .text` - `letter-spacing: .72px` — selector `.p404**title,.p404**content` ### Colors and surfaces - `color: #fff` — selector `.wp-block-button**link` - `color: var(--c-soft-black)` — selector `body` - `color: var(--c-soft-beige)` — selector `.splash-page**content .u-title` - `color: var(--c-accent)` — selector `.mobile-nav>.mobile-nav**item.current_page_item a .text` - `background-color: #32373c` — selector `.wp-block-button**link` - `background-color: var(--c-beige)` — selector `body` - `background-color: rgba(0,0,0,0)` — selector `.u-btn-hld .u-btn` - `background-color: var(--c-white)` — selector `.news-listing-filters-hld .news-listing-filters**item a .text::before` - `background-color: var(--brand-primary-30)` — selector `.cky-btn-close` ### Components and layout - `border-radius: 9999px` — selector `.wp-block-button**link` - `border-radius: 2px !important` — selector `.cky-btn-close` - `border-radius: 0 !important` — selector `.cky-btn-close` - `box-shadow: none` — selector `.wp-block-button**link` - `max-width: 20rem` — selector `.simple-content**text-hld` - `max-width: 32.0625rem` — selector `.simple-content**text-hld` - `max-width: 41.125rem` — selector `.simple-content**text-hld` - `max-width: 14.125rem` — selector `.p404**title,.p404**content` - `max-width: none` — selector `.p404**title,.p404**content` - `padding: calc(.667em + 2px) calc(1.333em + 2px)` — selector `.wp-block-button**link` - `padding: 0 1.5625rem` — selector `.simple-content**text-hld` - `padding: 2.125rem 2.5rem 0` — selector `.simple-content**text-hld` - `padding: 10px` — selector `.u-btn-hld .u-btn` - `padding: 100px 50px 40px` — selector `.mobile-nav-body` - `padding: 10px 15px` — selector `.news-listing-filters-hld .news-listing-filters**item a` - `padding: 2px 25px !important` — selector `.cky-btn` - `gap: 0.5em` — selector `:where(.is-layout-flex)` - `gap: 20px` — selector `.site-footer-navs ul` - `gap: 1rem` — selector `.socials` - `gap: .6875rem` — selector `.socials` - `transition: all .6s ease` — selector `.splash-page**logo-container` - `transition: all 1.2s ease` — selector `.loading-page .splash-page**logo-container` - `transition: opacity .8s ease .2s` — selector `.home.is-animate .simple-content**text-hld` - `transition: opacity .2s` — selector `.mobile-nav-background` - `transition: transform .5s` — selector `.mobile-nav-body` - `transition: opacity 1s` — selector `.site-footer-navs ul a .text::after` - `transition: all .3s ease` — selector `.p404\_\_btn` - `transition: scale .4s ease-in-out !important` — selector `.cky-btn-close` ### Responsive rules ``` only screen and (min-width: 768px) only screen and (min-width: 1024px) only screen and (width: 1024px)and (height: 768px) only screen and (width: 1024px)and (height: 1366px) only screen and (width: 1366px)and (height: 1024px) only screen and (min-width: 400px) only screen and (min-width: 1680px) only screen and (min-width: 1280px) only screen and (height: 1366px)and (width: 1024px) only screen and (min-width: 1365px) only screen and (min-height: 800px)and (max-height: 1023px)and (max-width: 1023px) only screen and (max-width: 1366px) only screen and (max-width: 1279px) only screen and (max-width: 767px) ``` Source: [SaaSFrame](https://www.saasframe.io/saas/abstract)