Alia Web Theme

Style Guide

Color Headers Text Size Text Format Text Alignment Containers Width Spacing Flex Boxes Grid System Form Elements Effects Animations
⇡ ⚑

Color Palette

Brand Colors
Main
Secondary
Dark
Light
Status Colors
Primary
Success
Info
Warning
Danger
Basic Colors
Black
Brown
Grey
Blue
Purple
Green
Red
Orange
Yellow
Cyan
White

Text Color

Main
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Secondary
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Grayscale
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Basic color
Brown
Green
Blue
Yellow
Red
Purple
Cyan
Status color
Primary
Success
Info
Warning
Danger
Contrast
Light
Dark

Background Color

Main
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Secondary
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Grayscale
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Basic color
Brown
Green
Blue
Yellow
Red
Purple
Cyan
Status color
Primary
Success
Info
Warning
Danger
Contrast
Light
Dark

Border Color

Main
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Secondary
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Grayscale
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Basic color
Brown
Green
Blue
Yellow
Red
Purple
Cyan
Status color
Primary
Success
Info
Warning
Danger
Contrast
Light
Dark

On Hover Color

Mouse over on every item to view effect using the Main color. All other palettes and colors are usable.
Text
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Background
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Border
Lightest
Lighter
Light
Base
Dark
Darker
Darkest

Headers and Titles

Displays

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6

Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Text Size

Hugest
Huger
Huge
Highest
Higer
High
Biggest
Bigger
Big
Regular
Small
Smaller
Tiny

Text Format

(Nunito) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique mvitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Poppins) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Bold) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Italic) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Uppercase) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Truncate) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(No selectable) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

Text with currency symbol (Euro): 185.25

Text with currency symbol (Dollar): 185.25

Text between parenthesis: Luctus odio vehicula sed pellentesque tristique sagittis.

Text between keys: Luctus odio vehicula sed pellentesque tristique sagittis.

Unordered List

Ordered List

  1. Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
  2. Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
  3. Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.
  1. Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
  2. Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
  3. Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.
  1. Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
  2. Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
  3. Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

Quotes

Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.
Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.
Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

Links

Link Main style
Link Decoration style
Link Secondary style
Link Light style
Link Dark style

Block Decorators

Header with underline decorator

Header with square decorator

Header with pipe decorator

Text Aligment

(Left) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

(Center) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

(Right) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

(Justify) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

Containers

container
container fluid (Always 100%)

Width

Relative (%)

5%
10%
15%
20%
25%
50%
65%
75%
90%
100%

Fixed (rem)

5 rem
10 rem
20 rem
33 rem
42 rem
50 rem

Spacing

Margin

m-a-[0-20]
m-t-[0-20]
m-r-[0-20]
m-b-[0-20]
m-l-[0-20]
m-x-[0-20]
m-y-[0-20]

Padding

p-a-[0-20]
p-t-[0-20]
p-r-[0-20]
p-b-[0-20]
p-l-[0-20]
p-x-[0-20]
p-y-[0-20]

Flex Boxes

Flex Direction

Column
Item 1
Item 2
Item 3
Item 4
Column Reverse
Item 1
Item 2
Item 3
Item 4
Row
Item 1
Item 2
Item 3
Item 4
Row Reverse
Item 1
Item 2
Item 3
Item 4

Justify Content

Start
Item 1
Item 2
Item 3
Item 4
Center
Item 1
Item 2
Item 3
Item 4
End
Item 1
Item 2
Item 3
Item 4
Space Between
Item 1
Item 2
Item 3
Item 4
Space Evenly
Item 1
Item 2
Item 3
Item 4
Space Around
Item 1
Item 2
Item 3
Item 4

Align Items

Start
Item 1
Item 2
Item 3
Item 4
Center
Item 1
Item 2
Item 3
Item 4
End
Item 1
Item 2
Item 3
Item 4

Wrap Items

Wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
No Wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Wrap Reverse
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Grid System

Basic

col-3
col-3
col-3
col-3

Offset

col-3 col-offset-2
col-7

Responsive

col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3

No Gutters

col-3
col-3
col-3
col-3

Cols and Rows

col-12 row-1
col-6 row-2
col-6 row-1
col-4 row-1
col-4 row-2
col-4 row-1
col-3 row-1
col-3 row-1
col-3 row-2
col-3 row-1

Form Elements

Input

Size

Color

Brand Colors
Status Colors
Basic Colors

States

Select

Size

Color

Brand Colors
Status Colors
Basic Colors

States

Textarea

Size

Color

Brand Colors
Status Colors
Basic Colors

States

Checkbox

Size

Color

Brand Colors
Status Colors
Basic Colors

States

Radio

Size

Color

Brand Colors
Status Colors
Basic Colors

States

Buttons

Size

Small
Normal
Large

Color

Brand Colors
Main
Secondary
Light
Dark
Main Outline
Secondary Outline
Light Outline
Dark Outline
Status Colors
Primary
Success
Info
Warning
Danger
Primary Outline
Success Outline
Info Outline
Warning Outline
Danger Outline
Basic Colors
White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan
White Outline
Black Outline
Grey Outline
Brown Outline
Green Outline
Blue Outline
Yellow Outline
Red Outline
Purple Outline
Orange Outline
Cyan Outline

States

Rounded
Disabled
Block Button

Effects

Grayscale

Blur

Drop Shadow

Box Shadow

Tint White

Border Solid

Border Dotted

Border Dashed

Border Round

Remove Border

Animations

Click on every item to view animation

Appears

Appears no move
Appears to top
Appears to right
Appears to bottom
Appears to left

Disappears

Disappears no move
Disappears to top
Disappears to right
Disappears to bottom
Disappears to left

Reveals

Reveals to top
Reveals to right
Reveals to bottom
Reveals to left

Un-reveals

Un-reveals to top
Un-reveals to right
Un-reveals to bottom
Un-reveals to left

Spin

Spin animation
Spin reverse animation
Spin loop
Spin loop reverse

Other animations

Zoom animation
Blur animation
Unblur animation
Click animation
Blink animation
Floating animation