Arc

Arc — design reference

Source: https://www.joinarc.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: gt-america,sans-serif,-apple-system,blinkmacsystemfont,Apple Color Emoji,Segoe UI,Segoe UI Emoji,Segoe UI Symbol — selector button
• font-family: gt-america — selector .treasuryHero form .checkboxDropdown .slideTrigger,.treasuryHero form input:not([type=checkbox],[type=submit]),.treasuryHero form select,.treasuryHero form textarea
• font-size: calc(.875rem + (16 - 14) _ ((100vw - 320px) / (1260 - 320))) — selector .p,p
• font-size: .875rem — selector .p,p
• font-size: 1rem — selector .p,p
• font-size: calc(.75rem + (14 - 12) _ ((100vw - 320px) / (1260 - 320))) — selector .p small,.p.p--small,p small,p.p--small
• font-size: .75rem — selector .p small,.p.p--small,p small,p.p--small
• font-size: calc(2.5rem + (64 - 40) _ ((100vw - 320px) / (1260 - 320))) — selector .h1,h1
• font-size: 2.5rem — selector .h1,h1
• font-weight: 400 — selector button
• font-weight: 700 — selector .p .strong,.p strong,p .strong,p strong
• font-weight: 500 — selector .h5,h5
• font-weight: 300 — selector .treasuryHero**heading
• font-weight: 600 — selector .NewsletterHero**form input[type=email]
• line-height: 150% — selector .p,p
• line-height: 110% — selector .h1,h1
• line-height: 115% — selector .h2,h2
• line-height: 120% — selector .h3,h3
• line-height: 125% — selector .h5,h5
• line-height: 130% — selector .h6,h6
• line-height: 1rem — selector .button
• line-height: .875rem — selector .hero .hero**overlineTag,.hero .hero**overlineTag _
• letter-spacing: -.015em — selector .h1,h1
• letter-spacing: .1em — selector .platinumHero**eyebrow
• letter-spacing: .02em — selector .featureBlock**bodyListItemHeading

Colors and surfaces

• color: #53524b — selector .p,p
• color: #206d69 — selector .h1,h1
• color: #fafaf9 — selector .button,.button**text
• color: #000 — selector .button.style--outlined
• color: #000!important — selector .button.theme--gold:hover:not(:disabled)
• color: #fff — selector .header.theme--green-300 .header**secondaryNavItems .button.style--outlined
• color: #fff!important — selector .header.theme--dark .header**secondaryNavItems .button
• color: #1e1e1c — selector .hero .hero**overlineText,.hero .hero**overlineText _
• background-color: transparent — selector button
• background-color: #1e1e1c — selector .button
• background-color: #206d69 — selector .button:hover:not(:disabled)
• background-color: #70e0b4 — selector .button.theme--primary
• background-color: #cbb46c — selector .button.theme--gold
• background-color: #68b9d9 — selector .button.theme--gs
• background-color: #a89355!important — selector .button.theme--gold:hover:not(:disabled)
• background-color: #4a9bbb!important — selector .button.theme--gs:hover:not(:disabled)

Components and layout

• border-radius: .25rem — selector .button
• border-radius: 5px — selector .hamburgerButton _
• border-radius: .5rem — selector .treasuryHero**dashboard
• border-radius: .625rem — selector .treasuryHero**formColumnInner
• border-radius: 2.5rem — selector .goldHero**figure-option
• border-radius: 20px — selector .partnerHero**rewardsCard
• border-radius: 8px — selector .partnerHero**figure
• border-radius: 50% — selector .FormHero svg
• box-shadow: 0 100px 80px rgba(0,0,0,.03),0 41.7776px 33.4221px rgba(0,0,0,.022),0 22.3363px 17.869px rgba(0,0,0,.018),0 12.5216px 10.0172px rgba(0,0,0,.015),0 6.6501px 5.3201px rgba(0,0,0,.012),0 2.7673px 2.2138px rgba(0,0,0,.008) — selector .treasuryHero**dashboard
• box-shadow: none — selector .partnerHero--useForm .partnerHero**figure
• max-width: 4.125rem — selector .header**navLinkContainer
• max-width: 3.125rem — selector .header**navLinkContainer
• max-width: 33.5rem — selector .hero .hero**contentColumn
• max-width: 5rem — selector .hero .hero**overlineImageWrapper
• max-width: 4rem — selector .hero .hero**overlineImageWrapper
• max-width: none — selector .hero .hero**image
• max-width: calc(5% + 50rem) — selector .hero:not(.withImage) .hero**contentColumn
• max-width: 33rem — selector .hero:not(.withImage) .hero**body
• padding: unset — selector button
• padding: 1.125rem 1.875rem — selector .button
• padding: .9375rem 1.5625rem — selector .button.size--small
• padding: .75rem 1.25rem — selector .header**secondaryNavItems .button
• padding: .25rem .75rem — selector .hero .hero**overlineTag
• padding: .1875rem .6875rem — selector .hero .hero**overlineTag
• padding: 0 1% — selector .treasuryHero**graphic
• padding: 2.5rem — selector .treasuryHero**formColumnInner
• gap: 1.5rem — selector .treasuryHero**ctas
• gap: 1rem — selector .treasuryHero**ctas
• gap: 60px — selector .treasuryHero**logoCallout.opticallySizeImages .treasuryHero**logoCalloutLogosList
• gap: .625rem — selector .platinumHero**eyebrow-wrap
• gap: .75rem — selector .platinumHero**eyebrow-wrap
• gap: .875rem — selector .platinumHero**eyebrow-wrap
• gap: .5rem — selector .platinumHero**feature
• gap: 48px — selector .partnerHero--widerImage .partnerHero**figure-wrap
• transition: all .2s ease — selector a,a:hover
• transition: fill .2s ease — selector .header**navLinkContainer .navLogo path
• transition: background-color .2s ease,border-color .2s ease,color .2s ease,fill .2s ease,background-position .2s ease — selector .button
• transition: background-color .3s ease,opacity .3s ease,top .3s ease,transform .3s ease,visibility .3s ease — selector .hamburgerButton \*
• transition: opacity .75s ease-in-out,transform .75s ease-in-out — selector .treasuryHero**eyebrow
• transition: opacity 1s ease-in-out,transform 1s ease-in-out — selector .treasuryHero**dashboard
• transition: transform 2s cubic-bezier(.77,0,.175,1) — selector .treasuryHero**bar
• transition: opacity 1s ease-in-out — selector .ReserveHero\_\_video

Responsive rules

(max-width:320px)
(min-width:1260px)
(max-width:48rem)
print
(max-width:73.75rem)
(max-width:64rem)
(min-width:64.0625rem)
(min-width:48.0625rem)
(min-width:90.0625rem)
(max-width:90rem)
(max-width:30rem)
(min-width:39.0625rem)
(min-width:80.0625rem)
(min-width:30.0625rem)
(max-width:1028px)
(max-width:48rem)and (max-width:48rem)
(max-width:39rem)
(min-width:48rem)
(min-width:48rem)and (max-width:320px)
(min-width:48rem)and (min-width:1260px)
(min-width:39.0625rem)and (max-width:48rem)
(max-width:87.5rem)
(max-width:75rem)
(max-width:32.5rem)