Colors

Base

$color-primary #a51050
$color-purple #3a3871
$color-cherry #a51050
$color-orange #f57461
$color-red-1 #e63f48
$color-red-2 #de233c
$color-red-3 #cb1c42

Neutral

$color-neutral-grey #73738e
$color-neutral-white #fff
$color-neutral-black #13172e
$color-neutral-greylight #f9f9fb
$color-neutral-purplegrey #deddee

Linear

$color-linear-red linear-gradient(90deg,#f57461,#cb1c42 50.48%,#a51050)
$color-linear-orange linear-gradient(90deg,#a51050,#cb1c42 50.48%,#f57461)

Tint

$color-tint-black #1c2045
$color-tint-white #f1f0fb

Blur

$color-blur-purple #5754aa

Product

$color-product-green #11bea9
$color-product-orange #f57461
$color-product-purple #4e4ed9
$color-product-greenapple #11aa20}body,html{background-color:#f9f9fb}body{color:#13172e}a{color:#a51050

Typeface

PlusJakartaSans

AaBbCcDd

1234567890!?

PlusJakartaSans Light

PlusJakartaSans Light Italic

PlusJakartaSans Regular

PlusJakartaSans Regular Italic

PlusJakartaSans Medium

PlusJakartaSans Medium Italic

PlusJakartaSans SemiBold

PlusJakartaSans SemiBold Italic

PlusJakartaSans Bold

PlusJakartaSans Bold Italic

rajdhani

AaBbCcDd

1234567890!?

rajdhani Regular

rajdhani Regular Italic

Rajdhani

AaBbCcDd

1234567890!?

Rajdhani Regular

Typography

Heading 1 - // Figma : T2

Clever Cloud

Heading 2 - // Figma : T3

Clever Cloud

Heading 3 - // Figma : T4

Clever Cloud

Heading 4

Clever Cloud

Heading 5

Clever Cloud

Heading 6

Clever Cloud

Paragraph - big - // Figma : T6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit venenatis ipsum, ut commodo nibh dignissim at. Nulla facilisi. In sollicitudin, nisl egestas finibus mollis, nisi tortor cursus augue, sit amet rutrum urna est eu erat. Curabitur suscipit nisi nulla. Suspendisse potenti. Suspendisse vitae commodo turpis, at maximus massa. Proin ante elit, posuere quis quam in, tristique egestas risus. Aliquam eu est at magna aliquet tempor.

Paragraph - medium - // Figma : T7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit venenatis ipsum, ut commodo nibh dignissim at. Nulla facilisi. In sollicitudin, nisl egestas finibus mollis, nisi tortor cursus augue, sit amet rutrum urna est eu erat. Curabitur suscipit nisi nulla. Suspendisse potenti. Suspendisse vitae commodo turpis, at maximus massa. Proin ante elit, posuere quis quam in, tristique egestas risus. Aliquam eu est at magna aliquet tempor.

Paragraph - // Figma : T8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit venenatis ipsum, ut commodo nibh dignissim at. Nulla facilisi. In sollicitudin, nisl egestas finibus mollis, nisi tortor cursus augue, sit amet rutrum urna est eu erat. Curabitur suscipit nisi nulla. Suspendisse potenti. Suspendisse vitae commodo turpis, at maximus massa. Proin ante elit, posuere quis quam in, tristique egestas risus. Aliquam eu est at magna aliquet tempor.

Overtitle - // Rajdhani font

Fonctionnalités

Blockquote - Testimonial

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

Said no one, ever.

Inline quotation

This text is a short inline quotation.

Citation

This is a citation.

Strong

Strong is used to indicate strong importance.

Bold

The b element is stylistically different text from normal text, without any special importance.

Emphasis

This text has added emphasis.

Italic

The i element is text that is offset from the normal text.

Underline

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

Deleted

This text is deleted.

Inserted

This text is inserted.

Strikethrough

This text has a strikethrough.

Superscript & Subscript

Superscript®. Subscript for things like H2O.

Small

This text has a strikethrough.

Abbreviation

Abbreviation: HTML

Definition

The dfn element indicates a definition.

Highlight

The mark element indicates a highlight.

Variable

The variable element, such as x = y.

Time

The time element:

Lists

Ordered

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered

  • List Item 1
  • List Item 2
  • List Item 3

Definition

Definition List Title
This is a definition list division.

Icons

.icon__datacenter-bolt
.icon__datacenter-cooling
.icon__datacenter-toggle
.icon__arrow-right
.icon__arrow-down-simple
.icon__burger
.icon__play-circle
.icon__close
.icon__search
.icon__home

Buttons

Buttons

HTML Elements

Forms

Input fields legend
Checkbox
<fieldset>
	<legend>...</legend>
	<div class="checkbox">
		<input type="checkbox" id="..." name="..." value="..."/>
		<label for="...">...</label>
	</div>
</fieldset>

Radio
<fieldset>
	<legend>...</legend>
	<div class="radio">
		<input type="radio" id="..." name="..." value="..."/>
		<label for="...">...</label>
	</div>
</fieldset>

Input buttons

Cards

Card Use Case

Label 1 Label 2

Déployer des architectures scalables 100% managées

Magnis egeét suspendisse orci arcu risus purus nulla sagittis. Etiam venenatis cursus suscipit posuere eu convallis non eget.

Card Avantage

Cloud français

Posuere convallis in ultrices massa nibh nulla in vestibulum viverra. Nec lorem in in phasellus ...

Card Description

Suspendisse nisi, donec sem sagittis ?

Aliquet porta elementum ipsum senectus id arcu. Etiam fermentum neque purus euismod. Et venenatis, condimentum sed cras. Urna sollicitudin enim in amet at erat. Massa pellentesque eu, etiam felis faucibus tellus enim sit ac. Elementum ut elementum a, purus magna vitae feugiat.

Card Product (CPT Product)

Base de données Cloud MongoDB managée

lelele

See more New !

Card Action

Card Podcast

#72

La bienveillance des nombres typés est impossible

Animé par Hubert Sablonnière

Card Article

Clever Cloud achieves ISO 27001 : 2022 certification

We are proud to announce that Clever Cloud has achieved a major milestone in its ongoing commitment to the security and confidentiality of our customers' data: ISO 27001 : 2022 certification.
Company English pll_65f9723b747c7 Press

Card Testimonial

Sur Clever, tout peut être automatisé grâce à leur API. Nous avons considérablement amélioré notre productivité, ainsi que notre expérience de développement.

Card Data Center

Roubaix RBX-5

2 Rue Kellermann, 59100 Roubaix

  • PUE <1.2
  • Alimentation Double alimentation systématique
  • Refroidissement Water Cooling
PCI-330D ISO 27001 HIPPA

Deploy with the
Utmost Tools

Cultivate developer efficiency. Safeguard every stage. Transform the way teams collaborate.
Get in touch with our sales teams or try Clever Cloud today.