


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.
font-family: PangeaSemiBold!important โ selector .leadinModal h4font-family: InterRegular!important โ selector .leadinModal pfont-family: InterBold!important โ selector .leadinModal afont-family: var(--inter-medium,ui-sans-serif) โ selector .btnfont-family: var(--font-inter-semibold) โ selector .btn-play--1 .btn_textfont-family: var(--inter-regular,ui-sans-serif) โ selector .nav-switch>lifont-family: var(--font-inter) โ selector .[&_a]:p-compact a,.[&_a]:p-tiny afont-size: 28px!important โ selector .leadinModal h4font-size: 16px!important โ selector .leadinModal pfont-size: 22px!important โ selector .leadinModal h4font-size: 14px!important โ selector .leadinModal afont-size: 14px โ selector .btn,.linkfont-size: var(--text-sm)!important โ selector .!text-smfont-weight: 400 โ selector b,em,h1,h2,h3,h4,h5,h6,ifont-weight: 500 โ selector .nav-switch>liline-height: 100%!important โ selector .text-em--default emline-height: var(--tw-leading,var(--text-sm--line-height))!important โ selector .!text-smline-height: var(--tw-leading,var(--text-2xl--line-height)) โ selector .text-2xlline-height: var(--tw-leading,var(--text-3xl--line-height)) โ selector .text-3xlline-height: var(--tw-leading,var(--text-4xl--line-height)) โ selector .text-4xlline-height: var(--tw-leading,var(--text-7xl--line-height)) โ selector .text-7xlline-height: 1.36 โ selector .text-[10.5px]/[1.36]line-height: 136% โ selector .text-[12px]/[136%]color: #000!important โ selector .leadinModal h4color: #434649!important โ selector .leadinModal pcolor: #fff!important โ selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button:hovercolor: #031f18!important โ selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-buttoncolor: var(--color-primary-2) โ selector .btn--1,.btn--1_1color: var(--color-primary-3) โ selector .btn--2,.btn--2_1color: var(--color-primary-7) โ selector .btn--7:hover .btn_textbackground-color: #031f18!important โ selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button:hoverbackground-color: #2fce65!important โ selector .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-buttonbackground-color: #0000 โ selector button,input,optgroup,select,textareabackground-color: var(--color-primary-1) โ selector .btn--1,.btn--1_1background-color: var(--color-primary-5) โ selector .btn--1:hover,.btn--1_1:hoverbackground-color: var(--color-primary-6) โ selector .btn--2,.btn--2_1background-color: var(--color-primary-7) โ selector .btn--2:hover,.btn--2_1:hoverbackground-color: #fff โ selector .btn-play--1 .btn_text:afterborder-radius: 12px!important โ selector .leadinModal aborder-radius: 0 โ selector button,input,optgroup,select,textareaborder-radius: var(--radius-sm) โ selector .btn--smborder-radius: var(--radius-md) โ selector .btn--mdborder-radius: var(--radius-lg) โ selector .btn--lgborder-radius: 3.40282e+38px โ selector .btn--fullborder-radius: 200px โ selector .nav-switchborder-radius: 6px โ selector .text-em--default embox-shadow: none โ selector :-moz-ui-invalidbox-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-xmax-width: 700px โ selector .containermax-width: 1200px โ selector .containermax-width: 40rem โ selector .containermax-width: 80rem โ selector .containermax-width: 96rem โ selector .containermax-width: 1248px โ selector .container-xmax-width: 1248px!important โ selector .container-x!padding: 0 โ selector _,body,htmlpadding: 0!important โ selector bodypadding: 0 24px!important โ selector .leadinModal apadding: 16px โ selector .btnpadding: 12px 18px โ selector .btn--big,.btn--mediumpadding: 10px 16px โ selector .nav-switch>lipadding: 3px 0 โ selector .text-em--default empadding: calc(var(--spacing)_0) โ selector .[&>section]:p-0>sectiongap: calc(var(--spacing)_2) โ selector .btngap: calc(var(--spacing)_0)!important โ selector .[&>section:last-child_>div]:gap-0!>section:last-child>divgap: calc(var(--spacing)8) โ selector .[&>section>div]:gap-8>section>divgap: calc(var(--spacing)16) โ selector .[&>section>div]:lg:gap-16>section>divtransition: background-color .25s ease,border-color .25s ease!important โ selector .leadinModal atransition: transform .5s cubic-bezier(.33,3.2,.515,1) โ selector .leadinModal a:hover:beforetransition: color .25s โ selector .btn .btn_texttransition: transform .5s โ selector .btn .btn_arrowtransition: transform .5s cubic-bezier(.355,1.325,.295,1) โ selector .btn-play svgtransition: transform .2s โ selector .btn-play .btn_text:afterscreen 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.
| Property | Declared value | Selector |
|---|---|---|
| font-family | PangeaSemiBold!important | .leadinModal h4 |
| font-family | InterRegular!important | .leadinModal p |
| font-family | InterBold!important | .leadinModal a |
| font-family | var(--inter-medium,ui-sans-serif) | .btn |
| font-family | var(--font-inter-semibold) | .btn-play--1 .btn_text |
| font-family | var(--inter-regular,ui-sans-serif) | .nav-switch>li |
| font-family | var(--font-inter) | .[&_a]:p-compact a,.[&_a]:p-tiny a |
| font-size | 28px!important | .leadinModal h4 |
| font-size | 16px!important | .leadinModal p |
| font-size | 22px!important | .leadinModal h4 |
| font-size | 14px!important | .leadinModal a |
| font-size | 14px | .btn,.link |
| font-size | var(--text-sm)!important | .!text-sm |
| font-weight | 400 | b,em,h1,h2,h3,h4,h5,h6,i |
| font-weight | 500 | .nav-switch>li |
| line-height | 100%!important | .text-em--default em |
| line-height | var(--tw-leading,var(--text-sm--line-height))!important | .!text-sm |
| line-height | var(--tw-leading,var(--text-2xl--line-height)) | .text-2xl |
| line-height | var(--tw-leading,var(--text-3xl--line-height)) | .text-3xl |
| line-height | var(--tw-leading,var(--text-4xl--line-height)) | .text-4xl |
| line-height | var(--tw-leading,var(--text-7xl--line-height)) | .text-7xl |
| line-height | 1.36 | .text-[10.5px]/[1.36] |
| line-height | 136% | .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 |
| color | var(--color-primary-2) | .btn--1,.btn--1_1 |
| color | var(--color-primary-3) | .btn--2,.btn--2_1 |
| color | var(--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 | #0000 | button,input,optgroup,select,textarea |
| background-color | var(--color-primary-1) | .btn--1,.btn--1_1 |
| background-color | var(--color-primary-5) | .btn--1:hover,.btn--1_1:hover |
| background-color | var(--color-primary-6) | .btn--2,.btn--2_1 |
| background-color | var(--color-primary-7) | .btn--2:hover,.btn--2_1:hover |
| background-color | #fff | .btn-play--1 .btn_text:after |
| border-radius | 12px!important | .leadinModal a |
| border-radius | 0 | button,input,optgroup,select,textarea |
| border-radius | var(--radius-sm) | .btn--sm |
| border-radius | var(--radius-md) | .btn--md |
| border-radius | var(--radius-lg) | .btn--lg |
| border-radius | 3.40282e+38px | .btn--full |
| border-radius | 200px | .nav-switch |
| border-radius | 6px | .text-em--default em |
| box-shadow | none | :-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 | .!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) | .shadow,.shadow-[0_-1px_0_var(--color-greyscale-2)] |
| max-width | 1216px | .container-x |
| max-width | 700px | .container |
| max-width | 1200px | .container |
| max-width | 40rem | .container |
| max-width | 80rem | .container |
| max-width | 96rem | .container |
| max-width | 1248px | .container-x |
| max-width | 1248px!important | .container-x! |
| padding | 0 | _,body,html |
| padding | 0!important | body |
| padding | 0 24px!important | .leadinModal a |
| padding | 16px | .btn |
| padding | 12px 18px | .btn--big,.btn--medium |
| padding | 10px 16px | .nav-switch>li |
| padding | 3px 0 | .text-em--default em |
| padding | calc(var(--spacing)_0) | .[&>section]:p-0>section |
| gap | calc(var(--spacing)_2) | .btn |
| gap | calc(var(--spacing)_0)!important | .[&>section:last-child_>div]:gap-0!>section:last-child>div |
| gap | calc(var(--spacing)8) | .[&>section>div]:gap-8>section>div |
| gap | calc(var(--spacing)16) | .[&>section>div]:lg:gap-16>section>div |
| transition | background-color .25s ease,border-color .25s ease!important | .leadinModal a |
| transition | transform .5s cubic-bezier(.33,3.2,.515,1) | .leadinModal a:hover:before |
| transition | color .25s | .btn .btn_text |
| transition | transform .5s | .btn .btn_arrow |
| transition | transform .5s cubic-bezier(.355,1.325,.295,1) | .btn-play svg |
| transition | transform .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.