Baremetrics

Baremetrics

Subscription Analytics and Insights
Visit
Baremetrics
Screens
21
Flows
4
Updates
Sections

Marketing Pages

4
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Landing Page
Baremetrics
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Pricing Page
Baremetrics
Pricing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Affiliate Page
Baremetrics
Affiliate Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics 404 Page
Baremetrics
404 Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Landing Page
Baremetrics
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Pricing Page
Baremetrics
Pricing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Affiliate Page
Baremetrics
Affiliate Page

🔒 Get SaaSFrame Pro to see 1 more marketing pages from Baremetrics

Product Interfaces

7
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Dashboard
Baremetrics
Dashboard
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Signup Page
Baremetrics
Signup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Upgrading Flow
Baremetrics
Billing
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Upgrading Flow
Baremetrics
Billing
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Upgrading Flow
Baremetrics
Billing
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Sign Up Flow
Baremetrics
Account Setup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Login
Baremetrics
Login
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Dashboard
Baremetrics
Dashboard
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Signup Page
Baremetrics
Signup
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Upgrading Flow
Baremetrics
Billing

🔒 Get SaaSFrame Pro to see 4 more product intefaces from Baremetrics

Emails

10
Baremetrics Activation Emails
Baremetrics
Activation Emails
Baremetrics Activation Emails
Baremetrics
Activation Emails
Baremetrics Onboarding Emails
Baremetrics
Onboarding Email
Baremetrics Onboarding Emails
Baremetrics
Onboarding Email
Baremetrics Activation Emails
Baremetrics
Activation Emails
Baremetrics Product Hunt Launch Email
Baremetrics
Product Hunt Emails
Baremetrics New Features Emails
Baremetrics
Product Update Emails
Baremetrics Activation Emails
Baremetrics
Activation Emails
Baremetrics Retention Emails
Baremetrics
Retention Email
Baremetrics Onboarding Emails
Baremetrics
Onboarding Email
Baremetrics Activation Emails
Baremetrics
Activation Emails
Baremetrics Activation Emails
Baremetrics
Activation Emails
Baremetrics Onboarding Emails
Baremetrics
Onboarding Email

🔒 Get SaaSFrame Pro to see 7 more emails from Baremetrics

Baremetrics

Activation Emails

4 screens

Baremetrics

Upgrading

3 screens

Baremetrics

Onboarding Email Flow

3 screens

Baremetrics

Sign Up Flow

2 screens
No items found.
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Baremetrics Calculator Section
Baremetrics Calculator Section
This is some text inside of a div block.
Baremetrics Calculator Section

Visual identity

DESIGN.md
CSS Variables
Design Tokens
Notes

Baremetrics — design reference

Source: https://baremetrics.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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif — selector body
  • font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol — selector body
  • font-family: Work Sans Regular,sans-serif — selector .two-col-content.cm_two_column.connect_your_data .description p
  • font-family: Inter,sans-serif — selector .custom_new_heading h1
  • font-family: Georgia,serif — selector .customers-blog-post_body .quote_wrap .quote\_text p
  • font-size: 2em — selector h1
  • font-size: 1em — selector pre
  • font-size: 100% — selector button, input, optgroup, select, textarea
  • font-size: 0.92rem — selector button, .button
  • font-size: 0.875em — selector .header .alert-section .text-alert
  • font-size: 35px — selector .header .search .search-icon-container:after
  • font-weight: 200 — selector .header .search .search-icon-container:after
  • font-weight: 300 — selector header.header .nav .header**menu.header**menu--desktop> ul >li ul ul a
  • font-weight: 700 — selector .footer .blog_feed_item_title
  • font-weight: 400 — selector .logo_slider.logo_section .top_sec h5
  • font-weight: 800 — selector .logo_slider.logo_section_type2 .top_sec h5
  • font-weight: 700!important — selector .custom_new_heading h1
  • font-weight: 600 — selector .cnt-wit-tp-img-wrp.cm_image_section .col-title
  • line-height: 1.15 — selector button, input, optgroup, select, textarea
  • line-height: 1.625 — selector body
  • line-height: 1.48208333 — selector h1
  • line-height: 1.48205882 — selector h2
  • line-height: 1.25 — selector h3
  • line-height: 1.48222222 — selector h4
  • line-height: 1.42857142857 — selector h6
  • letter-spacing: -.011em — selector .logo_slider.logo_section .top_sec h5
  • letter-spacing: -.021em — selector .testimonials_slider.testimonial\__wrap .testmn_inner .card_quote p
  • letter-spacing: -.022em — selector .affiliate_banner .banner-content-inner h1
  • letter-spacing: -.014em — selector .faq_wrapper .content-col .description p
  • letter-spacing: 2px — selector .logo_slider.logo_section.performance .page-center h5
  • letter-spacing: 1px — selector .custom_tags ul li a
  • letter-spacing: -.022em!important — selector .custom_new_heading h1

Colors and surfaces

  • color: #E6E6E6 — selector button:disabled, .button:disabled
  • color: #FFF — selector .fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus
  • color: #fff — selector header.header .container-wrapper.mobile-open .cst-inner-wrapper .text h4:last-child
  • color: #b8b8d9 — selector .logo_slider.logo_section .top_sec h5
  • color: #33334f — selector .logo_slider.logo_section_type2 .top_sec h5
  • color: #292940 — selector .testimonials_slider.testimonial\__wrap .testmn_inner .card_quote p
  • color: #7171a6 — selector .testimonials_slider.testimonial\__wrap .card_content span
  • background-color: transparent — selector a
  • background-color: #D0D0D0 — selector button:disabled, .button:disabled
  • background-color: rgba(0,0,0,0.4) — selector .nav-menu-2024-backdrop
  • background-color: #fff5f8 — selector .mobile-nav-2024-product-recommended-link, .mobile-nav-2024-product-trial-link
  • background-color: hsla(0,0%,100%,0) — selector body
  • background-color: #33334f!important — selector .fn-date-picker td .pika-button:hover

Components and layout

  • border-radius: 0 — selector .fn-date-picker td.is-selected .pika-button
  • border-radius: 0 !important — selector .fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus
  • border-radius: 90px — selector header.header .section-icon
  • border-radius: 0 0 10px 10px — selector .header .right-section .globe_class ul.lang_list_class
  • border-radius: 5px — selector .header .popup-wrapper .inner-popup-container
  • border-radius: 8px — selector .cnt-wit-tp-img-wrp.cm_card_section .cnt-col .inner_spacing
  • border-radius: 45px — selector .cnt-wit-tp-img-wrp.cm_card_section .cnt-col .inner_spacing .tp-img-cnt .tp-img-cnt-inner a:before
  • box-shadow: none — selector .fn-date-picker td.is-selected .pika-button
  • box-shadow: 0 26px 30px 0 rgb(32 32 32 / 25%) — selector .header .right-section .globe_class ul.lang_list_class
  • box-shadow: 0 1px 8px 0 rgba(0,0,0,.1) — selector html[lang=ja] .advanced-two-column-content.video_bnr.home-page-bnr span:last-child a.btn
  • box-shadow: 0 1px 4px 0 rgba(0,0,0,.1) — selector .cnt-wit-tp-img-wrp.cm_card_section .cnt-col .inner_spacing
  • max-width: none !important — selector .banner\_area-row-1-force-full-width-section > .row-fluid
  • max-width: 100% — selector .page-center, .content-wrapper , .dnd-section > .row-fluid
  • max-width: 600px — selector .header .popup-wrapper .inner-popup-container
  • max-width: 1024px — selector .header .popup-wrapper .inner-popup-container
  • max-width: unset — selector .logo_slider.logo_section_type2 .logos_row .logo_item.col2 img
  • max-width: 200px — selector .testimonials_slider.testimonial\__wrap .top_sec a img
  • max-width: 800px — selector .advanced-two-column-content.img.video_bnr.btn_sec .content-wrapper .feature_img
  • max-width: 50vw!important — selector .advanced-two-column-content.img.video_bnr.btn_sec .content-wrapper .img_section
  • padding: 0 — selector button::-moz-focus-inner, [type="submit"]::-moz-focus-inner
  • padding: 0 10px — selector .dnd-section > .row-fluid .dnd-column, .dnd-section > .row-fluid > [class\*="span"].dnd-module
  • padding: 15px — selector .header .right-section .globe_class ul.lang_list_class > li > a
  • padding: 50px 20px — selector .header .csutom-section-popup
  • padding: 10px 20px — selector .nav:not(.megamenu) > nav > ul ul li > a
  • padding: 10px — selector header .nav > nav > ul .headermenu-item--depth-1 ul > li a
  • gap: 5px — selector header.header .button-section-container
  • gap: 3em — selector .logo_slider.logo_section.performance .logos_row.glide\__slides.flex_row
  • transition: all 0.15s linear — selector a
  • transition: all 0.25s linear — selector header.header .section-icon
  • transition: opacity 0.7s, transform 0.7s — selector .header .btn-section.popup-open .popup-wrapper
  • transition: all 0.3s ease-in-out 0s — selector .header .right-section .globe_class ul.lang_list_class
  • transition: .4s ease .2s — selector .footer .popup-wrapper .inner-popup-container
  • transition: all 125ms ease-out — selector .custom_tags ul li a
  • transition: transform 0.5s ease — selector .primary-menu-2024\_title-arrow
  • transition: 0.5s — selector .nav-2024-product-recommended

Responsive rules

(max-width: 568px)
(max-width: 767px) 
(min-width: 768px) 
(min-width: 768px) and (max-width: 1139px) 
(max-width:767px)
(max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) 
(min-width: 992px) 
(min-width:992px)
(max-width:1200px)
(max-width:1200px) and (min-width:992px)
(max-width:991px)
(max-width:480px)
(max-width:350px)
(max-width:991px) and (min-width:768px)
(min-width:768px)
screen 
screen and (max-width: 991px) 
(max-width: 1280px)
(max-width:1300px) and (min-width:1101px)
(max-width:1100px) and (min-width:992px)
(min-width:768px) 
(max-width:767px) 
(min-width:981px)
(max-width:1350px)
(max-width:1300px)

Source: https://baremetrics.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.

Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css — .fa-spin-reverse

--fa-animation-direction: reverse;

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css — :host,:root

--fa-style-family-brands: "Font Awesome 6 Brands";
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
--fa-style-family-classic: "Font Awesome 6 Free";
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";

Source: https://baremetrics.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.

Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.

PropertyDeclared valueSelector
font-family-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serifbody
font-familyInter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbolbody
font-familyWork Sans Regular,sans-serif.two-col-content.cm_two_column.connect_your_data .description p
font-familyInter,sans-serif.custom_new_heading h1
font-familyGeorgia,serif.customers-blog-post_body .quote_wrap .quote\_text p
font-size2emh1
font-size1empre
font-size100%button, input, optgroup, select, textarea
font-size0.92rembutton, .button
font-size0.875em.header .alert-section .text-alert
font-size35px.header .search .search-icon-container:after
font-weight200.header .search .search-icon-container:after
font-weight300header.header .nav .header**menu.header**menu--desktop> ul >li ul ul a
font-weight700.footer .blog_feed_item_title
font-weight400.logo_slider.logo_section .top_sec h5
font-weight800.logo_slider.logo_section_type2 .top_sec h5
font-weight700!important.custom_new_heading h1
font-weight600.cnt-wit-tp-img-wrp.cm_image_section .col-title
line-height1.15button, input, optgroup, select, textarea
line-height1.625body
line-height1.48208333h1
line-height1.48205882h2
line-height1.25h3
line-height1.48222222h4
line-height1.42857142857h6
letter-spacing-.011em.logo_slider.logo_section .top_sec h5
letter-spacing-.021em.testimonials_slider.testimonial\__wrap .testmn_inner .card_quote p
letter-spacing-.022em.affiliate_banner .banner-content-inner h1
letter-spacing-.014em.faq_wrapper .content-col .description p
letter-spacing2px.logo_slider.logo_section.performance .page-center h5
letter-spacing1px.custom_tags ul li a
letter-spacing-.022em!important.custom_new_heading h1
color#E6E6E6button:disabled, .button:disabled
color#FFF.fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus
color#fffheader.header .container-wrapper.mobile-open .cst-inner-wrapper .text h4:last-child
color#b8b8d9.logo_slider.logo_section .top_sec h5
color#33334f.logo_slider.logo_section_type2 .top_sec h5
color#292940.testimonials_slider.testimonial\__wrap .testmn_inner .card_quote p
color#7171a6.testimonials_slider.testimonial\__wrap .card_content span
background-colortransparenta
background-color#D0D0D0button:disabled, .button:disabled
background-colorrgba(0,0,0,0.4).nav-menu-2024-backdrop
background-color#fff5f8.mobile-nav-2024-product-recommended-link, .mobile-nav-2024-product-trial-link
background-colorhsla(0,0%,100%,0)body
background-color#33334f!important.fn-date-picker td .pika-button:hover
border-radius0.fn-date-picker td.is-selected .pika-button
border-radius0 !important.fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus
border-radius90pxheader.header .section-icon
border-radius0 0 10px 10px.header .right-section .globe_class ul.lang_list_class
border-radius5px.header .popup-wrapper .inner-popup-container
border-radius8px.cnt-wit-tp-img-wrp.cm_card_section .cnt-col .inner_spacing
border-radius45px.cnt-wit-tp-img-wrp.cm_card_section .cnt-col .inner_spacing .tp-img-cnt .tp-img-cnt-inner a:before
box-shadownone.fn-date-picker td.is-selected .pika-button
box-shadow0 26px 30px 0 rgb(32 32 32 / 25%).header .right-section .globe_class ul.lang_list_class
box-shadow0 1px 8px 0 rgba(0,0,0,.1)html[lang=ja] .advanced-two-column-content.video_bnr.home-page-bnr span:last-child a.btn
box-shadow0 1px 4px 0 rgba(0,0,0,.1).cnt-wit-tp-img-wrp.cm_card_section .cnt-col .inner_spacing
max-widthnone !important.banner\_area-row-1-force-full-width-section > .row-fluid
max-width100%.page-center, .content-wrapper , .dnd-section > .row-fluid
max-width600px.header .popup-wrapper .inner-popup-container
max-width1024px.header .popup-wrapper .inner-popup-container
max-widthunset.logo_slider.logo_section_type2 .logos_row .logo_item.col2 img
max-width200px.testimonials_slider.testimonial\__wrap .top_sec a img
max-width800px.advanced-two-column-content.img.video_bnr.btn_sec .content-wrapper .feature_img
max-width50vw!important.advanced-two-column-content.img.video_bnr.btn_sec .content-wrapper .img_section
padding0button::-moz-focus-inner, [type="submit"]::-moz-focus-inner
padding0 10px.dnd-section > .row-fluid .dnd-column, .dnd-section > .row-fluid > [class\*="span"].dnd-module
padding15px.header .right-section .globe_class ul.lang_list_class > li > a
padding50px 20px.header .csutom-section-popup
padding10px 20px.nav:not(.megamenu) > nav > ul ul li > a
padding10pxheader .nav > nav > ul .headermenu-item--depth-1 ul > li a
gap5pxheader.header .button-section-container
gap3em.logo_slider.logo_section.performance .logos_row.glide\__slides.flex_row
transitionall 0.15s lineara
transitionall 0.25s linearheader.header .section-icon
transitionopacity 0.7s, transform 0.7s.header .btn-section.popup-open .popup-wrapper
transitionall 0.3s ease-in-out 0s.header .right-section .globe_class ul.lang_list_class
transition.4s ease .2s.footer .popup-wrapper .inner-popup-container
transitionall 125ms ease-out.custom_tags ul li a
transitiontransform 0.5s ease.primary-menu-2024\_title-arrow
transition0.5s.nav-2024-product-recommended

Source: https://baremetrics.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.

Evidence and limitations

  • Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
  • CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
  • No inferred dark theme, semantic color roles or framework defaults have been added.
  • 6 custom-property declarations found; 1756 relevant property declarations parsed.

Stylesheet sources