nandrian_ux.
Let’s Talk
Style guide & components
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.
0
#FFFFFF
10
#F9FAFB
20
#E5E7EB
30
#D1D5DB
40
#AEB2BA
50
#6B7280
60
#4B5563
70
#374151
80
#1F2937
90
#111827
100
#030712
Typography
The main typeface is Inter Tight. Both using form Goole Font A tranquil and fresh geometric sans font family for clear text and headlines.
Inter Tight
Bold
SemiBold
Medium
Regular
Aa
Heading - Desktop
Heading 1
Inter Tight/ Bold
104px
100%
Heading 1
Heading 2
Inter Tight/ SemiBold
72px
100%
Heading 2
Heading 3
Inter Tight/ SemiBold
64px
100%
Heading 3
Heading 4
Inter Tight/ SemiBold
56px
100%
Heading 4
Heading 5
Inter Tight/ SemiBold
40px
100%
Heading 5
Heading 6
Inter Tight/ SemiBold
32px
100%
Heading 6
Heading - Mobile
Heading 1
Inter Tight/ Bold
64px
100%
Heading 1
Heading 2
Inter Tight/ SemiBold
56px
100%
Heading 2
Heading 3
Inter Tight/ SemiBold
48px
100%
Heading 3
Heading 4
Inter Tight/ SemiBold
40px
100%
Heading 4
Heading 5
Inter Tight/ SemiBold
32px
100%
Heading 5
Body
Body Extra-Large Bold
Inter Tight/ SemiBold
28px
120%
The quick brown fox
Body Extra-Large Medium
Inter Tight/ Medium
28px
120%
The quick brown fox
Body Extra-Large Regular
Inter Tight/ Regular
28px
120%
The quick brown fox
Body Large Bold
Inter Tight/ SemiBold
20px
130%
The quick brown fox
Body Large Medium
Inter Tight/ Medium
20px
130%
The quick brown fox
Body Large Regular
Inter Tight/ Regular
20px
130%
The quick brown fox
Body Large Bold
Inter Tight/ SemiBold
18px
150%
The quick brown fox
Body Large Medium
Inter Tight/ Medium
18px
150%
The quick brown fox
Body Large Regular
Inter Tight/ Regular
18px
150%
The quick brown fox
Body Semi-Large Bold
Inter Tight/ SemiBold
16px
150%
The quick brown fox
Body Semi-Large Medium
Inter Tight/ Medium
16px
150%
The quick brown fox
Body Semi-Large Regular
Inter Tight/ Regular
16px
150%
The quick brown fox
Body Small Bold
Inter Tight/ SemiBold
14px
150%
The quick brown fox
Body Small Medium
Inter Tight/ Medium
14px
150%
The quick brown fox
Body Small Regular
Inter Tight/ Regular
14px
150%
The quick brown fox
Caption Bold
Inter Tight/ SemiBold
12px
150%
The quick brown fox
Caption Medium
Inter Tight/ Medium
12px
150%
The quick brown fox
Caption Regular
Inter Tight/ Regular
12px
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.
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
Basketball
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.
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 "16x16" or "32x32".
Buttons
Button used in this website as a CTA, with various style variations
CTA Button
View All Works
View All Works
Let’s Talk
Let’s Talk
Let’s Talk
Let’s Talk
View All Works
Selection Button
Mobile App
Website Design
Form Fields
Default form field styles for all forms used on the site.
Text Field
Name*
Hello...
Text Area
Email*
Where can I reply?
Grid
How the spacing roles relate to the hierarchy of user interface elements.
2 column grid
3 column grid
4 column grid
2 : 1 grid
2 : 1 grid
Spacing
How the spacing roles relate to the hierarchy of user interface elements.
4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
72px
80px
Rich Text
Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.
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
Figure Image & Caption
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."
A stunning digital designer portfolio website template for you.
Behance
Dribbble
Page List
Home v1
Home v2
Home v3
About v1
About v2
About v3
Works v1
Works v2
Works v3
Insights
Contacts
Stay connected w/ me.
Enter your email
©2023 All Rights Reserved. Designed with 🤍