Style Guidelines.

The style guide contains important styles and components that are used throughout the template.

Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Neutral

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

10

#FFFFFF

20

#F7F7F7

30

#E8E8E8

40

#CECECE

50

#B3B3B3

60

#878787

70

#696A6E

80

#404145

90

#303030

100

#010202

Overlay

Overlay colors are an arrangement of transparent colors as a background in a UI element.

White - 15%

#FFFFFF

White - 40%

#FFFFFF

Black - 15%

#000000

Black - 40%

#000000

Typefaces

The main typeface is Uncut Sans. Both using form UNCUT.wtf A tranquil and fresh geometric sans font family for clear text and headlines.

Uncut Sans

UNCUT.wtf

→ Visit Font Website

AaBbCc

012345678

Heading - Desktop

Heading 1

Uncut Sans/ Regular

172px

100%

H1

Heading 2

Uncut Sans/ Regular

136px

100%

H2

Heading 3

Uncut Sans/ Regular

96px

100%

H3

Heading 4

Uncut Sans/ Regular

64px

100%

H4

Heading 5

Uncut Sans/ Regular

56px

100%

H5

Heading 6

Uncut Sans/ Regular

48px

100%

H6

Heading - Mobile

Heading 1

Uncut Sans/ Regular

88px

100%

Heading 1

Heading 2

Uncut Sans/ Regular

64px

100%

Heading 2

Heading 3

Uncut Sans/ Regular

48px

100%

Heading 3

Heading 4

Uncut Sans/ Regular

36px

100%

Heading 4

Heading 5

Uncut Sans/ Regular

32px

100%

Heading 5

Heading 6

Uncut Sans/ Regular

28px

100%

Heading 6

Body

Body Extra-Large Regular

Uncut Sans/ Regular

48px

120%

The quick brown fox

Body Extra-Large SemiBold

Uncut Sans/ Medium

48px

120%

The quick brown fox

Body Extra-Large Bold

Uncut Sans/ SemiBold

48px

120%

The quick brown fox

Body Extra-Large Italic

Uncut Sans/ Regular-Italic

48px

120%

The quick brown fox

Body Extra-Large Hyperlink

Uncut Sans/ Medium

48px

120%

The quick brown fox

Body Large Regular

Uncut Sans/ Regular

32px

120%

The quick brown fox

Body Large SemiBold

Uncut Sans/ Medium

32px

120%

The quick brown fox

Body Large Bold

Uncut Sans/ SemiBold

32px

120%

The quick brown fox

Body Large Italic

Uncut Sans/ Regular-Italic

32px

120%

The quick brown fox

Body Large Hyperlink

Uncut Sans/ Medium

32px

120%

The quick brown fox

Body Medium Regular

Uncut Sans/ Regular

24px

120%

The quick brown fox

Body Medium SemiBold

Uncut Sans/ Medium

24px

120%

The quick brown fox

Body Medium Bold

Uncut Sans/ SemiBold

24px

120%

The quick brown fox

Body Medium Italic

Uncut Sans/ Regular-Italic

24px

150%

The quick brown fox

Body Medium Hyperlink

Uncut Sans/ Medium

24px

120%

The quick brown fox

Body Small Regular

Uncut Sans/ Regular

18px

150%

The quick brown fox

Body Small SemiBold

Uncut Sans/ Medium

18px

150%

The quick brown fox

Body Small Bold

Uncut Sans/ SemiBold

18px

120%

The quick brown fox

Body Small Italic

Uncut Sans/ Regular-Italic

18px

150%

The quick brown fox

Body Small Hyperlink

Uncut Sans/ Medium

18px

150%

The quick brown fox

Body Extra-Small Regular

Uncut Sans/ Regular

16px

150%

The quick brown fox

Body Extra-Small SemiBold

Uncut Sans/ Medium

16px

150%

The quick brown fox

Body Extra-Small Bold

Uncut Sans/ SemiBold

16px

120%

The quick brown fox

Body Extra-Small Italic

Uncut Sans/ Regular-Italic

16px

150%

The quick brown fox

Body Extra-Small Hyperlink

Uncut Sans/ Medium

16px

150%

The quick brown fox

Icons

Icons are visual representations of commands, devices, directories, or common actions. We are using free commercial form Phosphor Icon.

Phosphor Icon

VISIT ICON WEBSITE

ArrowUp

ArrowDown

ArrowLeft

ArrowRight

ArrowUpLeft

ArrowUpRight

ArrowDownLeft

ArrowDownRight

PencilSimple

Check

Menu

TrendUp

TrendDown

CaretDown

Lock

Eye

Notification

BellSimple

CalendarCheck

UserCircle

ChartBar

SunDim

CaretLeft

CaretRight

Laptop

Lightbulp

Moon

SunHorizon

UserList

SignOut

Nut

ImageSquare

Camera

Coffee

Buildings

GameController

Lamp

Clock

MagnifyingGlass

Non-Premium

Books

EnvelopeSimple

Plus

CaretUp

HouseSimple

Premium

Pointer

Close

How to use?

We're using embedded SVG code for the icon.
Please update the SVG default color to "currentColor" so that the color of the icon will follow the current text color. We're using embedded SVG code for the icon.
Please update the dimensions to 100% so that the icon can fill the parent size.
Add our custom class "SVG Icon" to the embedded code.
Additionally, please add a subclass for the size of the icon, such as "16" or "32".

Grids

How the spacing roles relate to the hierarchy of user interface elements.

2 column grid

3 column grid

4 column grid

2 : 1 grid

1 : 2 grid

Spacings

How the spacing roles relate to the hierarchy of user interface elements.

4px

8px

12px

16px

24px

32px

40px

48px

56px

64px

72px

80px

Components

Some components that are used throughout the template.

Buttons

Button used in this website as a CTA, with various style variations.

GET IN TOUCH

Branding Design Branding Design Branding Design Branding Design

Scroll Scroll

Forms

Default form field styles for all forms used on the site.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text

Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.

Text Regular

Lorem ipsum dolor sit amet consectetur

Text Bold

Lorem ipsum dolor sit amet consectetur

Text Italic

Lorem ipsum dolor sit amet consectetur

Text Link

Lorem ipsum dolor sit amet consectetur

Bullet List

Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Senectus et netus et malesuada fames ac turpis egestas

Numbered List

Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Senectus et netus et malesuada fames ac turpis egestas

Bullet DARK

Reconciliation of Settlement Accounts, and the servicing of receipts and payments;
Daily and month-end book-keeping;
Assist with documentation completion such as surveys, statements, etc;
Cost/revenue control supervision and assessment;
Assist with the stock-take for auditing purposes;
Assist with debt chasing;
Recording and filing of documents;
Perform ad-hoc tasks and projects.

‍

Figure Image & Caption

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

11
22
33

Style Guidelines.

Colors

Typefaces

H1

H2

H3

H4

H5

H6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Icons

Grids

Spacings

Components

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Say hello!