Contractbook

Contractbook — design reference

Source: https://contractbook.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: Arial,sans-serif — selector body
• font-family: Abcwhyte,sans-serif — selector body
• font-size: 2em — selector h1
• font-size: 14px — selector body
• font-size: 38px — selector h1
• font-size: 32px — selector h2
• font-size: 24px — selector h3
• font-size: 18px — selector h4
• font-weight: 700 — selector h1,h2,h3,h4,h5,h6
• font-weight: 600 — selector .heading-612394
• font-weight: 500 — selector .accordion-item-title---brix
• line-height: 20px — selector body
• line-height: 44px — selector h1
• line-height: 36px — selector h2
• line-height: 30px — selector h3
• line-height: 24px — selector h4
• line-height: 18px — selector h6
• line-height: 140% — selector body
• letter-spacing: 0 — selector .terms--heading
• letter-spacing: .01375rem — selector .btn-secondary

Colors and surfaces

• color: #333 — selector body
• color: var(--washed-black) — selector body
• color: var(--white) — selector .main-btn--small.bg-wh:hover
• color: #1a1a1a — selector .main-btn--small.bg-yellow
• background-color: transparent — selector .tabs-menu\_home::-webkit-scrollbar-button, .layout_home-roi::-webkit-scrollbar-button
• background-color: #0000 — selector a
• background-color: #fff — selector body

Components and layout

• border-radius: .73em — selector .main-btn--small
• border-radius: 1.25em — selector .herobody
• border-radius: .63em — selector .tabs--btn
• border-radius: .8em — selector .stroke-btn--small
• border-radius: .83em — selector .main-btn
• border-radius: 5.16em — selector .rounded-btn-small
• border-radius: 99px — selector .main-button--small-black
• box-shadow: 0 3px .9375rem #69739333 — selector .index-item-container:hover
• box-shadow: 0 0 145.01px #0000000d — selector .main-image_legalportal-hero
• max-width: 92rem — selector .containerzed
• max-width: 91rem — selector .containerzed.is--wide
• max-width: 110rem — selector .containerzed.is--wide.\_110rem
• max-width: 56.0625rem — selector .section-title.cta
• padding: 0 — selector button::-moz-focus-inner,input::-moz-focus-inner
• padding: .5rem .5rem .5rem 1rem — selector .containerzed.is-nav
• padding: .75rem 1.35em — selector .main-btn--small
• padding: .42em 1.46em — selector .tabs--btn
• transition: background-color .4s,color .4s — selector .main-btn--small
• transition: border-color .4s,color .4s,background-color .4s — selector .stroke-btn
• transition: background-color .4s — selector .rounded-btn-small.bg-yellow
• transition: background-color .15s cubic-bezier(.215,.61,.355,1) — selector .main-button--small-black.bg-black
• transition: background-color .2s ease-in-out — selector .submit-button-6
• transition: all .2s — selector .apply-discount-btn
• transition: all .2s ease-in-out — selector .btn-rounded-yellow
• transition: all .35s — selector .btn-rounded-black-stroke

Responsive rules

screen and (min-width: 768px) 
screen and (max-width: 767px) 
screen and (max-width: 479px) 
(prefers-reduced-motion) 
screen and (max-width: 1920px) 
screen and (max-width: 1440px) 
screen and (max-width: 992px) 
screen and (max-width: 991px) 
(min-width: 992px) and (max-width: 1200px) 
screen and (max-width:991px)
screen and (max-width:767px)
screen and (max-width:479px)
(min-width:768px)
screen and (min-width:1920px)
(max-width:500px)
(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi)