Form elements

Constraints & Style — Light Background

Inputs will look differently depending on the background.



Typography

Font Family

Rocket.Chat’s website should always use the system’s native font. The following styleguide will be created using Mac’s system font: San Francisco UI Text & Display.

Font size & Weight

The font scale consists of 7 different sizes & 4 weights: Regular, Medium, Semibold & Bold.

Light theme

Rocket.Chat

.display--big {}

Rocket.Chat

.display {}

Rocket.Chat

.display--small {}

Code format

.code.code--light {}

Rocket.Chat

.text {}

Rocket.Chat

.text--small {}

Rocket.Chat

.label {}

Rocket.Chat

.label--small {}

Rocket.Chat

.tag {}

Dark theme

Rocket.Chat

.display--big {}

Rocket.Chat

.display {}

Rocket.Chat

.display--small {}

Code format

.code.code--dark {}

Rocket.Chat

.text {}

Rocket.Chat

.text--small {}

Rocket.Chat

.label {}

Rocket.Chat

.label--small {}

Rocket.Chat

.tag {}

Grey theme

Rocket.Chat

.display--big {}

Rocket.Chat

.display {}

Rocket.Chat

.display--small {}

Code format

.code.code--dark {}

Rocket.Chat

.text {}

Rocket.Chat

.text--small {}

Rocket.Chat

.label {}

Rocket.Chat

.label--small {}

Rocket.Chat

.tag {}


Helpers

.align--center {}

Occaecat nulla adipisicing pariatur cupidatat quis aliqua ad deserunt. Amet consectetur dolore aute exercitation proident eu aliqua qui nostrud.

.type--nomargin {}

Occaecat nulla adipisicing pariatur cupidatat quis aliqua ad deserunt. Amet consectetur dolore aute exercitation proident eu aliqua qui nostrud.



Buttons

Primary Button — Light Background

One input style by default on light backgrounds.

Link element Link disabled

Primary button with icon

Install Install

Ghost Button — Light Background

One input style by default on light backgrounds.

Link element Link disabled

Text Button — Light Background

One input style by default on light backgrounds.

Link element Link disabled .button--with-arrow {}

Text Link — Light Background

One input style by default on light backgrounds.

Link element

Blank — Light Background

One input style by default on light backgrounds.

Link element Link disabled



Hero component

Install Rocket.Chat

For your desktop, mobile or server



Card with grid component

.flex-grid {}

Card header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.flex-grid.grid--justify-around {}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With mini icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Easy

With icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Brand color with shadow

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Card blog feature



Card blog horizontal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Table

rocket.chat cloud
Critical business impact 1 hour Column
rocket.chat cloud
Column Column
rocket.chat cloud
Critical business impact 1 hour Column
rocket.chat cloud
Column Column


Pagination



Divider



Spacer (Like margins)