Clever Cloud Style Guide

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.

Link

This is a text link.

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 H₂O.

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: 2 weeks ago

Lists

Ordered

List Item 1
List Item 2
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

Button Button Button Button Button Button

HTML Elements

Links

Forms

Input fields legend

Text Input

Disabled Input

Password input

Web Address - URL input

Email Address

Phone Number input

Search input

Number Input

Date Input

Month Input

Week Input

Datetime Local Input

Text area

Select

Checkbox

Option 1 Option 2 Option 3

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

Radio

Option 1 Option 2 Option 3

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

Range inout

Upload File

Color input

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

See more New !

Card Action

Comment choisir ?

Card Podcast

La bienveillance des nombres typés est impossible

Animé par Hubert Sablonnière

Card Article

16 April 2024

MateriaDB KV, Functions: discover the future of Clever Cloud at Devoxx Paris 2024

Clever Cloud is proud to present its new range of serverless products: Materia!

Company Engineering English Features pll_661d6752d35a2

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