Design System for Landings

Color System

Color names include a numeric value. Much like font weights, these numbers help us distinguish the relative lightness between values more easily than with names alone.

ct-1

ct-2

ct-3

ct-white

Type

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Heading 1

Heading sizes may overlap with body text sizes

Heading 2

Heading sizes may overlap with body text sizes

Heading 3

Heading sizes may overlap with body text sizes

Heading 4

Heading sizes may overlap with body text sizes

Heading 5

Heading sizes may overlap with body text sizes

Heading 6

Heading sizes may overlap with body text sizes

Text Ultra Large - t-xl

This is a block of text.

Text Large - t-l

This is a block of text. Double-click this text to edit it.

Text Normal

This is a block of text. Double-click this text to edit it.

Text Small - t-s

This is a block of text. Double-click this text to edit it.

Spacing

mb-0

mi-0

pb-0

pi-0

mb-auto

mi-auto

mis-1

mis-2

mbs-1

mbs-2

mbs-3

mbs-4

pi-1

pi-2

pi-3

pi-4

pb-1

pb-2

pb-3

pb-4

gap-1

gap-2

gap-3

gap-4

stack-1

stack-2

stack-3

w-1

w-2

w-3

w-4

Borders Radious | Shadows | Hover | Icons

bdr-1

bdr-2

shd-1

shd-2

ho-1

ho-2

Buttons

Button N
Secondary Button
Button S
Button L

Cards

Double-click this headline to edit.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Aditional Elements

This is a blockquote of text. Double-click this text to edit it.

Excepteur sint occaecat cupidatat
Ut enim ad minim veniam
Lorem ipsum dolor sit amet
Ut enim ad minim veniam

Is the app available in all countries?

This is a block of text. Double-click this text to edit it.

Share this Design System

Utilities

Center

Grid

Queries

Tablet

qm-flex-wrap

qm-none

qt-order-2

qm-mi-auto

qm-t-center

qt-none

Mobile

qt-t-center

qt-flex-wrap

qm-order-1

qm-order-2

qm-order-4

qm-order-5

qm-order-3

qt-mi-auto

qt-order-1