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.

FONT FAMILY Manrope - Bold
FONT FAMILY Manrope - SemiBold

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.

P1 / Body

14 pt

21 pt

Regular

Almost before we knew it,
we had left the ground.

P2 / Body

14 pt

21 pt

ExtraLight

Almost before we knew it,
we had left the ground.

Button

14 pt

16 pt

Medium

Almost before we knew it,
we had left the ground.

Placeholder Text

14 pt

16 pt

Light

Almost before we knew it,
we had left the ground.

Input Description

10 pt

12 pt

Medium

Almost before we knew it,
we had left the ground.

Input Label

14 pt

16 pt

Medium

Almost before we knew it,
we had left the ground.

Badge Text

12 pt

12 pt

Medium

Almost before we knew it,
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

Customise your YODA Preview in Real Time
THEME Dark & Light
CONTENT WIDTH FULL Width & Boxed