Surfe

Surfe — design reference

Source: https://www.surfe.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: Balto, Arial, sans-serif — selector .frc-card
• font-family: Arial,sans-serif — selector body
• font-family: Inter,sans-serif — selector body
• font-family: Balto,Arial,sans-serif — selector h1
• font-size: 16px — selector .frm-title
• font-size: 14px — selector .frm-dd-btn
• font-size: 1vw — selector body
• font-size: 13px — selector body
• font-size: 9px — selector body
• font-weight: 600 — selector .frm-title
• font-weight: 400 — selector .frc-title
• font-weight: 500 — selector .frc-dropdown-btn
• line-height: 1.1 — selector .c-tabs .c-card .c-text_xl
• line-height: 1.45 — selector .c-tabs .c-card .c-paragraph_m
• line-height: 1.2 — selector .frc-title
• line-height: 20px — selector body
• letter-spacing: 2.4px — selector .c-tag.cc-hero-trust

Colors and surfaces

• color: #fff — selector .c-nav:not(.is-scrolled) .c-nav-option
• color: #001f3d — selector .c-nav:not(.is-scrolled) .c-nav-right .c-button:not(.cc-white_500)
• color: #212427 — selector .c-nav.is-scrolled .c-nav-option
• color: #f2f9ff — selector .c-nav.is-scrolled .c-nav-right .c-button:not(.cc-white_500)
• color: #001B39 — selector .c-tabs .c-card .c-text_xl
• background-color: #fff — selector .c-nav:not(.is-scrolled) .c-nav-right .c-button:not(.cc-white_500)
• background-color: #f2f9ff — selector .c-nav:not(.is-scrolled) .c-nav-right .c-button:not(.cc-white_500):hover
• background-color: #001f3d — selector .c-nav.is-scrolled .c-nav-right .c-button:not(.cc-white_500)
• background-color: #3d546b — selector .c-nav.is-scrolled .c-nav-right .c-button:not(.cc-white_500):hover
• background-color: #F2F9FF — selector .c-tabs .c-card
• background-color: #0000 — selector a

Components and layout

• border-radius: 8px — selector .frm-dd-btn
• border-radius: 0 — selector .c-tabs .c-card
• border-radius: 50% — selector .c-tabs .c-card-headshot
• border-radius: 12px — selector .frc-card
• border-radius: 20px — selector .c-section.cc-z_1
• border-radius: 5.21em — selector .c-button
• border-radius: 1.05em — selector .c-img.cc-article-hero
• box-shadow: none — selector .c-tabs .c-card
• box-shadow: 0 0 0 3px rgba(0,31,61,0.06) — selector .frc-dropdown-btn.is-open
• box-shadow: 0 2px 5px #0003 — selector .c-card.cc-bg_white-50
• box-shadow: 0 .8em 1.6em -.6em #001f3d17 — selector .c-card.cc-white-outline.cc-testimonials
• max-width: 1280px — selector .c-container
• max-width: 12em — selector .c-card-logo.cc-testimonials-video
• padding: 10px 14px — selector .frm-dd-btn
• padding: 2em — selector .c-tabs .c-card
• padding: 8px 14px — selector .frc-dropdown-btn
• padding: 0 — selector button::-moz-focus-inner,input::-moz-focus-inner
• gap: 8px — selector .frm-dd-btn
• transition: border-color 0.15s, box-shadow 0.15s — selector .frc-dropdown-btn
• transition: all .2s — selector .c-button
• transition: all .1s — selector .c-home-hero_ai-link

Responsive rules

(min-width: 768px) and (max-width: 1199px) 
(min-width: 1200px) 
(min-width: 992px) 
only screen and (min-width: 1280px) 
only screen and (max-width: 767px) 
(max-width: 767px) 
screen and (max-width:767px)
screen and (max-width:479px)
(min-width: 767px) 
screen and (max-width:991px)
(min-width:768px)