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.
This is base of Yoda UI Style with typography and colors.
These examples for typography, including global settings, headings, body text, lists, and more. When more control is needed, check out the textual utility classes.
Header 1 / h1
42 pt
48 pt
Medium
Header 2 / h2
28 pt
42 pt
Medium
Header 3 / h3
24 pt
28 pt
Medium
Header 4 / h4
20 pt
24 pt
Medium
Header 5 / h5
16 pt
24 pt
Medium
Caption
12 pt
18 pt
Medium
P1 / Body
14 pt
21 pt
Regular
P2 / Body
14 pt
21 pt
ExtraLight
Button
14 pt
16 pt
Medium
Placeholder Text
14 pt
16 pt
Light
Input Description
10 pt
12 pt
Medium
Input Label
14 pt
16 pt
Medium
Badge Text
12 pt
12 pt
Medium
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 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
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