Cloverly - Development Guidelines

Colors

Brand colors

Green: #072d2d
.bg-green, .bg-primary-inverse‍

Accent: #A0FF75
.bg-accent

Sand: #E1E4D8
.bg-sand, .bg-primary

Gradient End: #E8FFDE
.bg-gradient-end

Gradient End: #1F2322
.bg-gray, .bg-secondary-inverse

White: #FFFFFF
.bg-white

Sand 5 Lighter: #EFF2E6
.bg-sand-5-lighter,.bg-secondary

Sand 15: #CCCFC3
.bg-sand-15

For Background Blur: #072d2d03
.bg-forbackgroundblur

Dark Overlay Medium: #072d2d80
.bg-darkoverlay-medium

Dark Overlay Strong
.bg-darkoverlay-strong

tOKENS

Border Default: #A9ADA2
.bg-color-border

Color Divider: # D3D6CA
.bg-color-divider

Color Border Inverse: #83958A
.bg-color-border-inverse

Gradients

Gradient Sand:
.gradient-sand‍

Gradient Secondary:
.gradient-secondary

Text Colors

Text/Primary

.text-primary: #072d2d

Text/Primary-Inverse

.text-sand: #E1E4D8

Text/muted

.text-muted: #072d2dab

Text/SuperMuted

.text-supermuted: #072d2d8a

Text/Primary-Inverse

.text-muted-inverse: #e1e4d8c7

Text/Accent

.text-accent: #a0ff75

Text/Error

.text-error: #b73300

Text/Error-Inverse

.text-error-inverse: #fe8d50

Primitives Sand (#e1e4d8 rgba(225, 228, 216,1))

Sand 05/Lighter
.bg-sand-05
#eff2e6

Sand / Sand 10 .bg-sand
#eff2d8

Sand 78 .bg-sand-78
#eff2d8c7

Sand 64 .bg-sand-64
#e1e4d8a3

Sand 20 .bg-sand-20
#e1e4d833

Sand 15
.bg-sand-15
#cccfc3

Sand 20 .bg-sand-20
#b2b2db1

Sand 25 .bg-sand-25
#a9ada2

Sand 30 .bg-sand-30
#901297

Sand 70 .bg-sand-70
#2c2f28

Typography

Heading 1

H1, .h1 Desktop - 96px. Mobile/tablet 68px, Line height 90% Letter Spacing -2%

Heading 2 Alt

H2-alt, .h2-alt Desktop - 72px. Mobile/tablet 48px, Line height 90% Letter Spacing -1%

Heading 2

H2, .h2 Desktop - 48px. Mobile/tablet 42px, Line height 100% Letter Spacing -1%

Heading 3

H3, .h3 Desktop/Tablet/Mobile - 34px Line height 105% Letter Spacing -1%

Heading 4

H4, .h4 Desktop/Tablet/Mobile - 24px Line height 110% Letter Spacing -1%

Heading 5

H5, .h5 Desktop/Tablet/Mobile - 20px Line height 115% Letter Spacing -1%

Heading 6/ Text Regular

H6, .h6, .text-regular Desktop/Tablet/Mobile - 17px Line height 130%

Text Large

.text-large Desktop - 24px. Mobile/tablet 20px, Line height 130%

Text Regular

H6, .h6, .text-regular Desktop/Tablet/Mobile - 17px Line height 130%

Text Small

.text-small Desktop/Tablet/Mobile - 14px Line height 130%

Text Eyebrow

.text-eyebrow Desktop/Tablet/Mobile - 13px Line height 100%

Text Button Large

.text-button-large Desktop/Tablet/Mobile Line height 100%

Text Button Regular

.text-button-small Desktop/Tablet/Mobile - 17px Line height 100%

Buttons

Primary Buttons Large

Use the button with class .btn

Get Started

Use the button with class .btn, .btn-primary, .text-button-large

Get Started

Use the button with class .btn, .btn-primary,.text-button-large, .btn-with-arrow

Get Started

Primary Buttons Small

Use the button with class .btn

Get Started

Use the button with class .btn, .btn-primary, .text-button-small, .btn-small

Get Started

Use the button with class .btn, .btn-primary, .text-button-small, .btn-with-arrow, .btn-small

Get Started

Button Secondary

Use the button with class .btn, .btn-secondary

Learn More

Use the button with class .btn, .btn-secondary, text-button-large, .btn-with-arrow

Get Started

Use the button with class .btn, .btn-secondary, .btn-with-arrow, .btn-small, .text-button-small

Get Started

Button Secondary Inverse

Use the button with class .btn, .btn-secondary, .btn-secondary-inverse

Learn More

Use the button with class .btn, .btn-secondary, text-button-large, .btn-with-arrow

Get Started

Use the button with class .btn, .btn-secondary, .btn-with-arrow, .btn-small, .text-button-small

Get Started

Button Primary Inverse

Use the button with class .btn, .btn-secondary, .btn-secondary-inverse

Learn More

Use the button with class .btn, .btn-secondary, text-button-large, .btn-with-arrow

Get Started

Use the button with class .btn, .btn-secondary, .btn-with-arrow, .btn-small, .text-button-small

Get Started

Button without border

Use the button with class .btn, .btn-secondary, .btn-with-arrow, .btn-small, .text-button-small

Get Started

Use the button with class .btn, .btn-secondary, .btn-with-arrow, .btn-small, .text-button-small,.btn-without-border

Get Started

Giant Button

Use the button with class .btn, .btn-giant, .btn-with-arrow

Headine

Subheadline

CTA

Border Radius

Border small = 4px class .border-small

Border small = 10px class .border-medium

Border small = 24px class .border-large

Spacing

Spacing Large = 24px class .spacing-small

Spacing Large = 96px Desktop, 64 Mobile class .spacing-medium

Spacing Large = 144px class .spacing-large

Aspect Ratio

Aspect Ratio 1x1 class = .ratio .ratio-1x1

Aspect Ratio 16x9 class = .ratio .ratio-16x9

Aspect Ratio 712x361 class = .ratio .ratio-712x361

Aspect Ratio 21x9 class = .ratio .ratio-21x9

Map Assets

Map Marker

Map Texture

lINE cLAMP

Two Line Clamp

class = .cl-line-clamp .cl-line-clamp-2

Cloverly Announces $19M Series A Funding Round And Validation Of The New Voluntary Carbon Market Supplier Platform

Three Line Clamp

class = .cl-line-clamp .cl-line-clamp-3

Cloverly Announces $19M Series A Funding Round And Validation Of The New Voluntary Carbon Market Supplier Platform

Desktop only Line Clamp

class = .cl-line-clamp .cl-line-clamp-2 .cl-line-clamp-desktop

Cloverly Announces $19M Series A Funding Round And Validation Of The New Voluntary Carbon Market Supplier Platform

Icons

.icon-empty

.icon-marker

.icon-sharp

.icon-up

.icon-down

.icon-right

.icon-add

.icon-search

.icon-user

.icon-alert

.icon-checkbox-checked

.icon-xmark

.icon-menu-burger

.icon-arrow-right

checkmark

.icon-union

.icon-union-inverse

Twitter

Youtube

.chat-launcher

.chat-launcher, .chat-launcher-light

.chat-launcher, .chat-launcher-dark

Webflow Form

Thank you for reaching out!

We’ll review your information and get back to you shortly.

Oops! Something went wrong while submitting the form.

Iframe Form

Accordion

Cloverly Empowers Businesses to Rapidly Scale Climate Action

Trust

Ease

Access

Trust

We drive large-scale impact through powerful technology, data, and an ability to rapidly scale and innovate through a single partner.

Ease

We drive large-scale impact through powerful technology, data, and an ability to rapidly scale and innovate through a single partner.

Access

We drive large-scale impact through powerful technology, data, and an ability to rapidly scale and innovate through a single partner.

Project Verticals Accordion

How do I start selling clothes online?

You can start selling clothes online by launching an ecommerce store with a platform like Shopify. Determine which clothes you will sell, add the products to your website, and set up your payment portal so customers can make and pay for purchases. Then you have to fulfill the orders or enlist a third party to handle fulfillment for you.

How do I start selling clothes online?

Cloverly - Container/ Grid Guidlines

cloverly Container .cl-container

Max-width: 1440px

Container .container

Max-width: 1272
Paddding-inline: 30

Row .row

Paddding-inline: 30

col .col

col-1 to col-12

Reusable Modules

Cloverly Empowers Suppliers

By providing distribution and software solutions designed to help carbon credit suppliers manage operations, Cloverly delivers the support suppliers need to scale.

Learn More

A scenic view of mountains at dusk with a golden sky and open fields.

Title of the Content

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Get Started

Title of the Content

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Get Started

Title of the Content

Hover fixed here

Get Started

Scale Your Business with Catalyst

Cloverly Catalyst is the hub for your carbon credit business. Manage the entire lifecycle of your credits through inventory management, omnichannel distribution, insightful reporting and more.

Learn More

“We need to track what we are pre-selling and to be able to manage that inventory and plan the delivery dates - basically our commitments and delivery. Working with Cloverly, we're able to do this as well as map out our projections of what credits will be online when, or our forecasted capacity.”

Octavia Carbon
Direct Air Capture and Storage in Africa

Octavia Carbon Direct Air Capture and Storage in Africa

Heading

Watch the Webinar Replay

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item A
Item B
Item C

This is some text inside of a div block.

No items found.

500,000

monthly shipments

1.2M

tons CO2 offset

78%

participation

Cloverly empowers project developers and suppliers with access to mission-critical commercialization software to scale their operations.

Scale

Grow your sales by accessing multiple marketplaces via a single partner.

Manage

Leverage the most advanced digital infrastructure in the VCM to manage your omnichannel operations.

Elevate

We are an extension of your team, providing critical support, reach, and expertise.

Get Started

Thank you for reaching out!

We’ll review your information and get back to you shortly.

Oops! Something went wrong while submitting the form.

Our climate experts are ready to help

If you prefer, feel free to contact us directly via the emails listed below.

Get a Demo
of Catalyst

If you prefer, feel free to contact us directly via the emails listed below.

General Inquiries

hello@cloverly.com

Project Listing

suppliers@cloverly.com

Sales

sales@cloverly.com

Support

support@cloverly.com

Need Technical Product Help?

Get Tech Help

“Cloverly's platform has helped us to be settled as a more professional project developer. We prefer to focus our time on the cause and the platform helps us to keep track on the preconditions of selling carbon removals.”

Mart de Bruijn 
Co-Founder, Carboneers

A certified C-Sink Manager, working with a local on-ground partner and rural farmer communities in the global South

Page not found!

You can return to our front page, or drop us a line if you can't find what you're looking for.

Insights and Guides on the Carbon Markets

11 May 2023

Cloverly Announces $19M Series A Funding Round And Validation Of The New Voluntary Carbon Market Supplier Platform

28 May 2024

Unpacking Carbon Credits: The Power of Enhanced Rock Weathering

28 May 2024

Carbon Removal In The Voluntary Carbon Market: Scaling Climate Action

Manage the Full Lifecycle of Your Credits.

All in One Place.

Overview dashboard displaying carbon inventory details and a bar chart by project

E-Carbon Pricing Management interface for controlling carbon credit prices across channels.

Delivery Planning along with Payment and invoice interface with a table of deals and a pop-up to confirm delivery details.

Purpose-Built Credit Management

Leverage a unified dashboard for all your historical and projected inventory. Plan and account for spot, forward and long-term offtakes.

Inventory Planning and Controls

Manage credits through forecast, measure, verified and issued stages.

Content Management

Manage project content across all your sales channels from one single source of truth.

Delivery Management

Manage all of the information needed to plan and track your credit deliveries.

Get a Demo

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Cloverly - Development Guidelines

Colors

Brand colors

tOKENS

Gradients

Text Colors

Primitives Sand (#e1e4d8 rgba(225, 228, 216,1))

Typography

Heading 1

Heading 2 Alt

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6/ Text Regular

Buttons

Primary Buttons Large

Primary Buttons Small

Button Secondary

Button Secondary Inverse

Button Primary Inverse

Button without border

Giant Button

Headine

Border Radius

Spacing

Aspect Ratio

Map Assets

lINE cLAMP

Icons

Form

Webflow Form

Thank you for reaching out!

Iframe Form

Accordion

Cloverly Empowers Businesses to Rapidly Scale Climate Action

Trust

Ease

Access

Trust

Ease

Access

Project Verticals Accordion

How do I start selling clothes online?

How do I start selling clothes online?

How do I start selling clothes online?

Popup

Get free resources delivered to your email.

Thank you for reaching out!

Cloverly - Container/ Grid Guidlines

cloverly Container .cl-container

Container .container

Row .row

col .col

Reusable Modules

Cloverly Empowers Suppliers

Title of the Content

Title of the Content

Title of the Content

Scale Your Business with Catalyst

Heading

Heading 1

Sign Up

Related Articles

500,000

1.2M

78%

Everything you need from a single partner

Scale

Manage

Elevate

Thank you for reaching out!

Start scaling your impact today

General Inquiries

Project Listing

Sales

Support

Need Technical Product Help?

Software for Suppliers

Thank you for reaching out!