Style Guide
This is base of Yoda UI Style with typography and colors.
Do you know the latest update of 2022? Our roadmap is alive for future updates.
Notifications
4 New
Debi Cakar commented on Ecosystem and conservation
1m ago
Edward Adams invite you to Prototyping
9h ago
Richard Charles mentioned you in UX Basics Field
13h agoYou swapped exactly 0.230000 ETH for 28,031.99
17h ago
Typography
These examples for typography, including global settings, headings, body text, lists, and more. When more control is needed, check out the textual utility classes.
STYLE TITLE
FONT SIZE
LINE HEIGHT
WEIGHT
SAMPLE
Header 1 / h1
42 pt
48 pt
Medium
Almost before we knew it,
we had left the ground.
Header 2 / h2
28 pt
42 pt
Medium
Almost before we knew it,
we had left the ground.
Header 3 / h3
24 pt
28 pt
Medium
Almost before we knew it,
we had left the ground.
Header 4 / h4
20 pt
24 pt
Medium
Almost before we knew it,
we had left the ground.
Header 5 / h5
16 pt
24 pt
Medium
Almost before we knew it,
we had left the ground.
Caption
12 pt
18 pt
Medium
Almost before we knew it,
we had left the ground.
we had left the ground.
P1 / Body
14 pt
21 pt
Regular
Almost before we knew it,
we had left the ground.
we had left the ground.
P2 / Body
14 pt
21 pt
ExtraLight
Almost before we knew it,
we had left the ground.
we had left the ground.
Button
14 pt
16 pt
Medium
Placeholder Text
14 pt
16 pt
Light
Almost before we knew it,
we had left the ground.
we had left the ground.
Input Description
10 pt
12 pt
Medium
Almost before we knew it,
we had left the ground.
we had left the ground.
Input Label
14 pt
16 pt
Medium
Almost before we knew it,
we had left the ground.
we had left the ground.
Badge Text
12 pt
12 pt
Medium
Almost before we knew it,
we had left the ground.
we had left the ground.
Color Guide
We used dynamic colors to clearly convey the actions, situation and direction within the interface. They serve to make things simple to understand.
Theme Colors
Theme colors can be use with class .{css-property}-primary-1. It's available for text, background-color, background and border.
Primary Color
Secondary Color
Danger Color
Success Color
Warning Color
Info Color
Blacks & Gradients
Black tags can be use with class .hp-{css-property}-black-dark-bg, Gradients can be used with class .hp-{css-property}-primary-gradient. Gradients is used for background instead of backgroun-color.
Dark-Bg
B-100
B-80
B-60
B-40
B-20
B-10
B-0
Primary Gradient
Secondary Gradient
Danger Gradient
Info Gradient
Success Gradient
Warning Gradient