Arcade

Arcade — design reference

Source: https://www.arcade.software/. 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: Inter Variable,Arial,sans-serif — selector body
• font-family: Geist Mono Variable,Arial,sans-serif — selector .text-block-56
• font-family: var(--_new-brand---content) — selector .btn
• font-family: var(--_new-brand---heading) — selector .heading-1
• 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-size: 12px — selector h6
• font-weight: 700 — selector h1,h2,h3,h4,h5,h6
• font-weight: 600 — selector h1
• font-weight: 500 — selector h2
• font-weight: 900 — selector .title-2
• 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: 1.4 — selector body
• letter-spacing: -0.02em — selector h1
• letter-spacing: -0.015em — selector h2
• letter-spacing: -0.01em — selector h3, h4, h5
• letter-spacing: -0.0075em — selector h4
• letter-spacing: -0.005em — selector h5
• letter-spacing: 0 — selector .text-2xl
• letter-spacing: .5px — selector .blog-card_time
• letter-spacing: -.01em — selector .customer-card_link

Colors and surfaces

• color: unset — selector .text-gradient
• color: hsla(221, 41%, 20%, 0.9) — selector .hero-heading.typing-anim
• color: #333 — selector body
• color: var(--new-text-dim-black) — selector body
• background-color: white — selector #navbar.navbar-scrolled
• background-color: #2142E7 — selector .url-to-demo-button
• background-color: #4460ED !important — selector .url-to-demo-button:hover, .url-to-demo-button:focus, .url-to-demo-button:focus-visible
• background-color: #fff — selector .nav-link > .sub-nav-container .menu-drop
• background-color: #F9F9FB — selector .sub-nav-item:hover
• background-color: rgba(17, 24, 39, 0.06) — selector .sub-nav-item:hover .nav-icon-parent
• background-color: #0000 — selector a

Components and layout

• border-radius: 16px — selector .blog-card\_img:before
• border-radius: 50% — selector .video-play-button, .video-gen-play
• border-radius: 72px — selector .url-to-demo-button
• border-radius: 12px — selector .text-2xl.tool-opening
• border-radius: 94px — selector .home-tabs_button
• border-radius: 8px — selector .casestudy-logos_card
• border-radius: 19.4px — selector .aboutpage-title-wrapper
• box-shadow: none — selector #navbar
• box-shadow: 0 1px 0 rgba(0,0,0,0.1) — selector #navbar.navbar-scrolled
• box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12), 0 2px 2px -2px rgba(17, 24, 39, 0.03), 0 4px 4px 0 rgba(17, 24, 39, 0.03), 0 8px 8px 0 rgba(17, 24, 39, 0.03), 0 16px 16px 0 rgba(17, 24, 39, 0.03) — selector .video-play-button, .video-gen-play
• box-shadow: 0 0 0 1px #182FA5, 0 2px 2px -2px rgba(17, 24, 39, 0.04), 0 4px 4px 0 rgba(17, 24, 39, 0.04), 0 8px 8px 0 rgba(17, 24, 39, 0.04), 0 16px 16px 0 rgba(17, 24, 39, 0.04), 0 32px 32px 0 rgba(17, 24, 39, 0.04) — selector .url-to-demo-button
• box-shadow: 0 0 0 1px #2142E7, 0 2px 2px -2px rgba(17, 24, 39, 0.04), 0 4px 4px 0 rgba(17, 24, 39, 0.04), 0 8px 8px 0 rgba(17, 24, 39, 0.04), 0 16px 16px 0 rgba(17, 24, 39, 0.04), 0 32px 32px 0 rgba(17, 24, 39, 0.04) !important — selector .url-to-demo-button:hover, .url-to-demo-button:focus, .url-to-demo-button:focus-visible
• box-shadow: 0px 16px 16px 0px rgba(17, 24, 39, 0.03), 0px 8px 8px 0px rgba(17, 24, 39, 0.03), 0px 4px 4px 0px rgba(17, 24, 39, 0.03), 0px 2px 2px -2px rgba(17, 24, 39, 0.03), 0px 0px 0px 1px rgba(17, 24, 39, 0.12) — selector .nav-link > .sub-nav-container .menu-drop
• box-shadow: 0 32px 32px #1118270a,0 16px 16px #1118270a,0 8px 8px #1118270a,0 4px 4px -2px #1118270a,0 2px 2px -1px #1118270a,0 0 0 1px #182fa5 — selector .button
• box-shadow: 0 32px 32px #11182700,0 16px 16px #11182700,0 8px 8px -4px #1118270a,0 4px 4px -2px #1118270a,0 2px 2px -1px #1118270a,0 0 0 1px #2142e7 — selector .button:hover
• max-width: 90% — selector .text-2xl.mb-0.sub-adventure.anim-slidefade-speed-2
• max-width: 1330px — selector .big-container
• max-width: 580px — selector .hero-content
• max-width: 600px — selector .hero-content.cc-blog
• padding: 0 — selector .url-to-demo-button
• padding: 4px — selector .nav-link > .sub-nav-container .menu-drop
• padding: 0 1rem — selector .button
• padding: 0 24px — selector .button.button-link
• gap: 0rem !important — selector .logo-context-menu .sub-nav-item
• transition: background-color 150ms ease-in — selector #navbar
• transition: all 0.2s cubic-bezier(0.6, 0.6, 0, 1) — selector .nav-arrow
• transition: all 0.3s cubic-bezier(0.6, 0.6, 0, 1) — selector .type-icon-wrapper svg path
• transition: opacity 0.3s ease — selector .video-play-button, .video-gen-play
• transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) — selector .url-to-demo-button
• transition: all 260ms cubic-bezier(0.175, 0.885, 0.32, 1.275) — selector .url-to-demo-button-icon
• transition: all 200ms ease-out — selector .logo-context-menu
• transition: all 240ms ease — selector .sub-nav-item, .sub-nav-item .nav-icon-parent

Responsive rules

screen and (min-width: 991px) 
screen and (max-width: 991px) 
screen and (max-width: 1240px) 
screen and (max-width: 1040px) 
(min-width: 991px) 
(max-width: 991px) 
screen and (max-width:991px)
screen and (max-width:767px)
screen and (max-width:479px)
(min-width:768px)