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
License Icon
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?
  1. We're using embedded SVG code for the icon.
  2. 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.
  3. Please update the dimensions to 100% so that the icon can fill the parent size.
  4. Add our custom class "SVG Icon" to the embedded code.
  5. 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
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH
Branding DesignBranding DesignBranding DesignBranding Design
ScrollScroll
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
  1. Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Senectus et netus et malesuada fames ac turpis egestas
Figure Image & Caption
Style Guide Figure - Kreativy
Caption here
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."

Let’s chat.

Our focus is helping businesses grow with powerful digital marketing strategies tailored to their success.
GET IN TOUCH
AboutContactProjectsBlogsServicesCareers
InstagramFacebookLinkedInYoutubeTikTok
info@royaldigitalagency.com+1 (818) 423-9524
©Designed by Royal Digtial Agency.