Style Guide
This is base of Yoda UI Style with typography and colors.
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
we had left the ground.
P1 / Body
14 pt
21 pt
Regular
we had left the ground.
P2 / Body
14 pt
21 pt
ExtraLight
we had left the ground.
Button
14 pt
16 pt
Medium
Placeholder Text
14 pt
16 pt
Light
we had left the ground.
Input Description
10 pt
12 pt
Medium
we had left the ground.
Input Label
14 pt
16 pt
Medium
we had left the ground.
Badge Text
12 pt
12 pt
Medium
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