Form elements

Constraints & Style — Light Background

Inputs will look differently depending on the background.

Typography

Font Family

pimentaCHAT’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

pimentaCHAT

.display--big {}

pimentaCHAT

.display {}

pimentaCHAT

.display--small {}

Code format

.code.code--light {}

pimentaCHAT

.text {}

pimentaCHAT

.text--small {}

pimentaCHAT

.label {}

pimentaCHAT

.label--small {}

pimentaCHAT

.tag {}

Dark theme

pimentaCHAT

.display--big {}

pimentaCHAT

.display {}

pimentaCHAT

.display--small {}

Code format

.code.code--dark {}

pimentaCHAT

.text {}

pimentaCHAT

.text--small {}

pimentaCHAT

.label {}

pimentaCHAT

.label--small {}

pimentaCHAT

.tag {}

Grey theme

pimentaCHAT

.display--big {}

pimentaCHAT

.display {}

pimentaCHAT

.display--small {}

Code format

.code.code--dark {}

pimentaCHAT

.text {}

pimentaCHAT

.text--small {}

pimentaCHAT

.label {}

pimentaCHAT

.label--small {}

pimentaCHAT

.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

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 pimentaCHAT

For your desktop, mobile or server

Card with grid component

.flex-grid {}