Abstract

Abstract — design reference

Source: 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)