Design System

This Design System page contains styles and components used through the UI Kit. You can change any style from this page and it will be updated throughout the template.

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

h1

The all in one solution

h2

The all in one solution

h3

The all in one solution

h4

The all in one solution

h5
The all in one solution
h6
The all in one solution
Paragraph

Dawn is the time that marks the beginning of twilight before sunrise. It is recognized by the appearance of indirect sunlight being scattered in Earth's atmosphere, when the centre of the Sun's disc has reached 18° below the observer's horizon.

This morning twilight period will last until sunrise (when the Sun's upper limb breaks the horizon), when direct sunlight outshines the diffused light.

Small Paragraph

Dawn is the time that marks the beginning of twilight before sunrise. It is recognized by the appearance of indirect sunlight being scattered in Earth's atmosphere, when the centre of the Sun's disc has reached 18° below the observer's horizon.

Bold

This morning twilight period will last until sunrise.

Italics

This morning twilight period will last until sunrise.

Quote
Dawn is the time that marks the beginning of twilight before sunrise. It is recognized by the appearance of indirect sunlight being scattered in Earth's atmosphere.
List
  • Dawn is the time that marks the beginning of twilight before sunrise
  • It is recognized by the appearance of indirect sunlight being scattered in Earth's atmosphere
  • This morning twilight period will last until sunrise, when direct sunlight outshines the diffused light
Numbered List
  • Dawn is the time that marks the beginning of twilight before sunrise
  • It is recognized by the appearance of indirect sunlight being scattered in Earth's atmosphere
  • This morning twilight period will last until sunrise, when direct sunlight outshines the diffused light
Figure with caption
An image with caption

Rich Text

The all in one solution

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Here is another title example.

  • Lorem ipsum
  • Lorem ipsum

More about Dawn

An image with caption

Colors

The different weights of greys and colours used throughout the website.

Black
#0f2c41
Dark Grey
#223a5a
Grey
#385074
Light Grey
#6f839c
Soft Grey
#c1cbd5
Silver
#dfe3eb
Back Grey
#f4f8fa
White
#ffffff
Hard Blue
#0736b2
Dark Blue
#0b42d5
Blue
#245fff
Light Blue
#5a86ff
Soft Blue
#9ec0ff
Pale Blue
#deeaff

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Primary
Sign Up
Secondary
Learn more
Disabled
Current Plan
Module Button
Cancel
Module Add
+
Module Dropdown
Module Cancel
Cancel

Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Forms

The styling of forms used throughout the dashboard.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Layouts

Align modules to different layouts to get unique customisable designs on different pages.

4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
2.5-1 Grid
1-2.5 Grid

Module Blocks

Different building blocks that can be used across the different dashboard pages

Info Block

New Customers

12
Info Block

New Tickets

No new
tickets
Schedule Block

Schedule

9 AM
Task Review
10 AM
Prepare Orders
11 AM
Tasks Block

Tasks

Link styles have the wrong colours on mobile, titles…

there is a filtering issue on the customers page

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Email Block

Latest Emails

See All
AudioHunt

New music is out!

The playlist made just for you, every Friday

Kanban Block

To Do

Provide new lunch options

Get new watercooler

+ Add a card
Settings Block

Account Settings

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.
Calendar Block

February 2021

Sun

Mon

Tue

Wed

Thu

Fri

Sat

31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
List Block
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Customer

Email

Number

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reiciendis
Jarred_Crona@hotmail.com
+1 187 932 767
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Veniam Eum
Bobbie77@hotmail.com
+1 133 776 097
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alias Reiciend
Noelia83@hotmail.com
+1 104 161 327
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alias Laudantium
Mauricio.Lynch@gmail.com
+1 145 237 350
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Corrupti
Isaias_Crona83@hotmail.com
+1 111 571 958
Tab List Block
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ticket #

Date

Customer

Status

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
68
12/30/21
Reiciendis
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
200
9/21/21
Veniam Eum
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
292
8/13/21
Alias Reiciend
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
36
7/26/21
Alias Laudantium
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
187
6/11/21
Corrupti
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ticket #

Date

Customer

Status

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
53
2/20/21
Aut Ipsa Except
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
39
2/15/21
Perspici Volupt
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
71
1/6/21
Et Amet Repu
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
173
10/25/20
Voluptatem Conse
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
156
10/9/20
Quod
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
25
2/15/20
Sequi
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ticket #

Date

Customer

Status

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
68
12/30/21
Reiciendis
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
292
8/13/21
Alias Reiciend
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
187
6/11/21
Corrupti
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
243
2/22/21
Eaque
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
219
2/2/21
Hic Rem
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ticket #

Date

Customer

Status

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
200
9/21/21
Veniam Eum
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
36
7/26/21
Alias Laudantium
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
44
4/20/21
Unde Asperna
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
242
9/8/20
Aut Dignissimos
New
Open
Issues
Closed
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
#
172
6/27/20
Inventore Unde
New
Open
Issues
Closed

Spacers

Spacer elements using the 8-pt grid to give sections more room to breathe.

16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX