Greenly

Greenly

The go-to carbon accounting platform
Visit
Greenly

Marketing Pages

8
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available

๐Ÿ”’ Get SaaSFrame Pro to see 5 more marketing pages from Greenly

Product Interfaces

0
No items found.
No items found.

๐Ÿ”’ Get SaaSFrame Pro to see 3 more product intefaces from Greenly

No items found.
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
Greenly Features Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Greenly Testimonial Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Greenly Footer Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Greenly Newsletter Form Section
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Greenly Comparison Calculator Section
Greenly Pricing Section
Greenly FAQ Section

Visual identity

Greenly โ€” design reference

Source: https://greenly.earth/. 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: PangeaSemiBold!important โ€” selector .leadinModal h4
  • font-family: InterRegular!important โ€” selector .leadinModal p
  • font-family: InterBold!important โ€” selector .leadinModal a
  • font-family: var(--inter-medium,ui-sans-serif) โ€” selector .btn
  • font-family: var(--font-inter-semibold) โ€” selector .btn-play--1 .btn_text
  • font-family: var(--inter-regular,ui-sans-serif) โ€” selector .nav-switch>li
  • font-family: var(--font-inter) โ€” selector .[&_a]:p-compact a,.[&_a]:p-tiny a
  • font-size: 28px!important โ€” selector .leadinModal h4
  • font-size: 16px!important โ€” selector .leadinModal p
  • font-size: 22px!important โ€” selector .leadinModal h4
  • font-size: 14px!important โ€” selector .leadinModal a
  • font-size: 14px โ€” selector .btn,.link
  • font-size: var(--text-sm)!important โ€” selector .!text-sm
  • font-weight: 400 โ€” selector b,em,h1,h2,h3,h4,h5,h6,i
  • font-weight: 500 โ€” selector .nav-switch>li
  • line-height: 100%!important โ€” selector .text-em--default em
  • line-height: var(--tw-leading,var(--text-sm--line-height))!important โ€” selector .!text-sm
  • line-height: var(--tw-leading,var(--text-2xl--line-height)) โ€” selector .text-2xl
  • line-height: var(--tw-leading,var(--text-3xl--line-height)) โ€” selector .text-3xl
  • line-height: var(--tw-leading,var(--text-4xl--line-height)) โ€” selector .text-4xl
  • line-height: var(--tw-leading,var(--text-7xl--line-height)) โ€” selector .text-7xl
  • line-height: 1.36 โ€” selector .text-[10.5px]/[1.36]
  • line-height: 136% โ€” selector .text-[12px]/[136%]

Colors and surfaces

  • color: #000!important โ€” selector .leadinModal h4
  • color: #434649!important โ€” selector .leadinModal p
  • color: #fff!important โ€” selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button:hover
  • color: #031f18!important โ€” selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button
  • color: var(--color-primary-2) โ€” selector .btn--1,.btn--1_1
  • color: var(--color-primary-3) โ€” selector .btn--2,.btn--2_1
  • color: var(--color-primary-7) โ€” selector .btn--7:hover .btn_text
  • background-color: #031f18!important โ€” selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button:hover
  • background-color: #2fce65!important โ€” selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button
  • background-color: #0000 โ€” selector button,input,optgroup,select,textarea
  • background-color: var(--color-primary-1) โ€” selector .btn--1,.btn--1_1
  • background-color: var(--color-primary-5) โ€” selector .btn--1:hover,.btn--1_1:hover
  • background-color: var(--color-primary-6) โ€” selector .btn--2,.btn--2_1
  • background-color: var(--color-primary-7) โ€” selector .btn--2:hover,.btn--2_1:hover
  • background-color: #fff โ€” selector .btn-play--1 .btn_text:after

Components and layout

  • border-radius: 12px!important โ€” selector .leadinModal a
  • border-radius: 0 โ€” selector button,input,optgroup,select,textarea
  • border-radius: var(--radius-sm) โ€” selector .btn--sm
  • border-radius: var(--radius-md) โ€” selector .btn--md
  • border-radius: var(--radius-lg) โ€” selector .btn--lg
  • border-radius: 3.40282e+38px โ€” selector .btn--full
  • border-radius: 200px โ€” selector .nav-switch
  • border-radius: 6px โ€” selector .text-em--default em
  • box-shadow: none โ€” selector :-moz-ui-invalid
  • box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important โ€” selector .!shadow-[0_0_0_3px_var(--root-color-error-100,#F8DDDC)]
  • box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) โ€” selector .shadow,.shadow-[0_-1px_0_var(--color-greyscale-2)]
  • max-width: 1216px โ€” selector .container-x
  • max-width: 700px โ€” selector .container
  • max-width: 1200px โ€” selector .container
  • max-width: 40rem โ€” selector .container
  • max-width: 80rem โ€” selector .container
  • max-width: 96rem โ€” selector .container
  • max-width: 1248px โ€” selector .container-x
  • max-width: 1248px!important โ€” selector .container-x!
  • padding: 0 โ€” selector _,body,html
  • padding: 0!important โ€” selector body
  • padding: 0 24px!important โ€” selector .leadinModal a
  • padding: 16px โ€” selector .btn
  • padding: 12px 18px โ€” selector .btn--big,.btn--medium
  • padding: 10px 16px โ€” selector .nav-switch>li
  • padding: 3px 0 โ€” selector .text-em--default em
  • padding: calc(var(--spacing)_0) โ€” selector .[&>section]:p-0>section
  • gap: calc(var(--spacing)_2) โ€” selector .btn
  • gap: calc(var(--spacing)_0)!important โ€” selector .[&>section:last-child_>div]:gap-0!>section:last-child>div
  • gap: calc(var(--spacing)8) โ€” selector .[&>section>div]:gap-8>section>div
  • gap: calc(var(--spacing)16) โ€” selector .[&>section>div]:lg:gap-16>section>div
  • transition: background-color .25s ease,border-color .25s ease!important โ€” selector .leadinModal a
  • transition: transform .5s cubic-bezier(.33,3.2,.515,1) โ€” selector .leadinModal a:hover:before
  • transition: color .25s โ€” selector .btn .btn_text
  • transition: transform .5s โ€” selector .btn .btn_arrow
  • transition: transform .5s cubic-bezier(.355,1.325,.295,1) โ€” selector .btn-play svg
  • transition: transform .2s โ€” selector .btn-play .btn_text:after

Responsive rules

screen and (max-width:1000px)
(min-width:1200px)
(min-width:700px)
(min-width:40rem)
(min-width:80rem)
(min-width:96rem)
not all and (min-width:1200px)
(hover:hover)
(prefers-reduced-motion:reduce)
not all and (min-width:1001px)
not all and (min-width:700px)
(min-width:1001px)
(prefers-reduced-motion:no-preference)
(min-width:1500px)
(hover:hover)]:group-hover:font-inter-medium:is(:where(.group):hover \*)
(hover:hover)]:group-hover:text-primary-11:is(:where(.group):hover \*)
(hover:hover)]:hover:border-l-[1.5px]:hover
(hover:hover)]:hover:border-primary-10:hover
(hover:hover)]:hover:pl-[10.5px]:hover
(hover:none)
(hover:none)]:group-focus-within:bg-[#F1F4F3]:is(:where(.group):focus-within \*)
(hover:none)]:group-focus-within:opacity-0:is(:where(.group):focus-within \*)
(hover:none)]:group-focus-within:opacity-100:is(:where(.group):focus-within \*)
(hover:none)]:group-active:font-inter-medium:is(:where(.group):active \*)
(hover:none)]:group-active:text-primary-11:is(:where(.group):active \*)

Source: https://greenly.earth/. 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://greenly.earth/ โ€” :root

--pangea-bold: PangeaBold;
--pangea-medium: PangeaMedium;
--pangea-regular: PangeaRegular;
--pangea-semibold: PangeaSemiBold;
--inter-regular: InterRegular;
--inter-medium: InterMedium;
--inter-semibold: InterSemiBold;
--inter-bold: InterBold;
--caveat-regular: CaveatRegular;
--caveat-medium: CaveatMedium;
--caveat-bold: CaveatBold;

https://greenly.earth/ โ€” \*,::backdrop,:after,:before

--eco-pilot-angle: 0deg;

https://greenly.earth/ โ€” :host,:root

--font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--color-red-400: oklch(70.4% .191 22.216);
--color-green-50: oklch(98.2% .018 155.826);
--color-green-100: oklch(96.2% .044 156.743);
--color-green-500: oklch(72.3% .219 149.579);
--color-green-600: oklch(62.7% .194 149.214);
--color-green-700: oklch(52.7% .154 150.069);
--color-blue-50: oklch(97% .014 254.604);
--color-purple-600: oklch(55.8% .288 302.321);
--color-gray-200: oklch(92.8% .006 264.531);
--color-gray-500: oklch(55.1% .027 264.364);
--color-gray-700: oklch(37.3% .034 259.733);
--color-neutral-100: oklch(97% 0 0);
--color-neutral-200: oklch(92.2% 0 0);
--color-neutral-300: oklch(87% 0 0);
--color-neutral-500: oklch(55.6% 0 0);
--color-neutral-600: oklch(43.9% 0 0);
--color-neutral-700: oklch(37.1% 0 0);
--color-neutral-900: oklch(20.5% 0 0);
--color-neutral-950: oklch(14.5% 0 0);
--color-black: #000;
--color-white: #fff;
--spacing: .25rem;
--container-xs: 20rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-7xl: 80rem;
--text-xs: .75rem;
--text-xs--line-height: calc(1/.75);
--text-sm: .875rem;
--text-sm--line-height: calc(1.25/.875);
--text-base: 1rem;
--text-base--line-height: calc(1.5/1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75/1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75/1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2/1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25/1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5/2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--text-7xl: 4.5rem;
--text-7xl--line-height: 1;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--tracking-wide: .025em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--drop-shadow-xl: 0 9px 7px #0000001a;
--ease-in: cubic-bezier(.4,0,1,1);
--ease-out: cubic-bezier(0,0,.2,1);
--ease-in-out: cubic-bezier(.4,0,.2,1);
--animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0,0,.2,1)infinite;
--animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
--blur-sm: 8px;
--blur-md: 12px;
--aspect-video: 16/9;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4,0,.2,1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--font-pangea: var(--pangea-regular),sans-serif;
--font-pangea-medium: var(--pangea-medium),sans-serif;
--font-pangea-semibold: var(--pangea-semibold),sans-serif;
--font-pangea-bold: var(--pangea-bold),sans-serif;
--font-inter: var(--inter-regular),ui-sans-serif,system-ui,sans-serif;
--font-inter-medium: var(--inter-medium),ui-sans-serif,system-ui,sans-serif;
--font-inter-semibold: var(--inter-semibold),ui-sans-serif,system-ui,sans-serif;
--font-inter-bold: var(--inter-bold),ui-sans-serif,system-ui,sans-serif;
--font-caveat-bold: var(--caveat-bold),cursive;
--color-primary-1: #2fce65;
--color-primary-2: #031f18;
--color-primary-3: #fff;
--color-primary-4: #07503e;
--color-primary-5: #52d67e;
--color-primary-6: #0e0e0e;
--color-primary-7: #2b3b37;
--color-primary-8: #c7d1ce;
--color-primary-9: #d4ddda;
--color-primary-10: #1e9b48;
--color-primary-11: #192e29;
--color-primary-12: #26a551;
--color-greentint-2: #eafaf0;
--color-greyscale-1: #434649;
--color-greyscale-2: #455451;
--color-greyscale-3: #f4f4f5;
--color-greyscale-4: #f4f6f5;
--color-greyscale-5: #f9fbfa;
--color-greyscale-6: #8b9c99;
--color-greyscale-7: #a7b4b1;
--color-greyscale-8: #5e6e6b;
--color-greyscale-9: #e8edeb;
--color-heliotrope-4: #f3eefd;
--color-error: #ff5a5a;

https://greenly.earth/ โ€” .motion-reduce:[--appear:1]!

--appear: 1!important;

https://greenly.earth/ โ€” .motion-reduce:[--lit-words:999]!

--lit-words: 999!important;

https://greenly.earth/ โ€” .motion-reduce:[--read:1]!

--read: 1!important;

https://greenly.earth/ โ€” .motion-reduce:[--rest:0]!

--rest: 0!important;

https://greenly.earth/ โ€” .motion-reduce:[--settle:0]!

--settle: 0!important;

https://greenly.earth/ โ€” to

--eco-pilot-angle: 360deg;

Source: https://greenly.earth/. 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-familyPangeaSemiBold!important.leadinModal h4
font-familyInterRegular!important.leadinModal p
font-familyInterBold!important.leadinModal a
font-familyvar(--inter-medium,ui-sans-serif).btn
font-familyvar(--font-inter-semibold).btn-play--1 .btn_text
font-familyvar(--inter-regular,ui-sans-serif).nav-switch>li
font-familyvar(--font-inter).[&_a]:p-compact a,.[&_a]:p-tiny a
font-size28px!important.leadinModal h4
font-size16px!important.leadinModal p
font-size22px!important.leadinModal h4
font-size14px!important.leadinModal a
font-size14px.btn,.link
font-sizevar(--text-sm)!important.!text-sm
font-weight400b,em,h1,h2,h3,h4,h5,h6,i
font-weight500.nav-switch>li
line-height100%!important.text-em--default em
line-heightvar(--tw-leading,var(--text-sm--line-height))!important.!text-sm
line-heightvar(--tw-leading,var(--text-2xl--line-height)).text-2xl
line-heightvar(--tw-leading,var(--text-3xl--line-height)).text-3xl
line-heightvar(--tw-leading,var(--text-4xl--line-height)).text-4xl
line-heightvar(--tw-leading,var(--text-7xl--line-height)).text-7xl
line-height1.36.text-[10.5px]/[1.36]
line-height136%.text-[12px]/[136%]
color#000!important.leadinModal h4
color#434649!important.leadinModal p
color#fff!important.leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button:hover
color#031f18!important.leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button
colorvar(--color-primary-2).btn--1,.btn--1_1
colorvar(--color-primary-3).btn--2,.btn--2_1
colorvar(--color-primary-7).btn--7:hover .btn_text
background-color#031f18!important.leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button:hover
background-color#2fce65!important.leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button
background-color#0000button,input,optgroup,select,textarea
background-colorvar(--color-primary-1).btn--1,.btn--1_1
background-colorvar(--color-primary-5).btn--1:hover,.btn--1_1:hover
background-colorvar(--color-primary-6).btn--2,.btn--2_1
background-colorvar(--color-primary-7).btn--2:hover,.btn--2_1:hover
background-color#fff.btn-play--1 .btn_text:after
border-radius12px!important.leadinModal a
border-radius0button,input,optgroup,select,textarea
border-radiusvar(--radius-sm).btn--sm
border-radiusvar(--radius-md).btn--md
border-radiusvar(--radius-lg).btn--lg
border-radius3.40282e+38px.btn--full
border-radius200px.nav-switch
border-radius6px.text-em--default em
box-shadownone:-moz-ui-invalid
box-shadowvar(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important.!shadow-[0_0_0_3px_var(--root-color-error-100,#F8DDDC)]
box-shadowvar(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow).shadow,.shadow-[0_-1px_0_var(--color-greyscale-2)]
max-width1216px.container-x
max-width700px.container
max-width1200px.container
max-width40rem.container
max-width80rem.container
max-width96rem.container
max-width1248px.container-x
max-width1248px!important.container-x!
padding0_,body,html
padding0!importantbody
padding0 24px!important.leadinModal a
padding16px.btn
padding12px 18px.btn--big,.btn--medium
padding10px 16px.nav-switch>li
padding3px 0.text-em--default em
paddingcalc(var(--spacing)_0).[&>section]:p-0>section
gapcalc(var(--spacing)_2).btn
gapcalc(var(--spacing)_0)!important.[&>section:last-child_>div]:gap-0!>section:last-child>div
gapcalc(var(--spacing)8).[&>section>div]:gap-8>section>div
gapcalc(var(--spacing)16).[&>section>div]:lg:gap-16>section>div
transitionbackground-color .25s ease,border-color .25s ease!important.leadinModal a
transitiontransform .5s cubic-bezier(.33,3.2,.515,1).leadinModal a:hover:before
transitioncolor .25s.btn .btn_text
transitiontransform .5s.btn .btn_arrow
transitiontransform .5s cubic-bezier(.355,1.325,.295,1).btn-play svg
transitiontransform .2s.btn-play .btn_text:after

Source: https://greenly.earth/. 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.
  • 134 custom-property declarations found; 1430 relevant property declarations parsed.

Stylesheet sources