Colors
Color styles
Color Schema
Brand Color
#33EFAB
–wp–preset–color–brand
Brand Hover Color
#7AFFCE
–wp–preset–color–brand-hover
Secondary Color
#340FA0
–wp–preset–color–secondary
Card Colors
#FCFCFC
–wp–preset–color–card-base
Content Colors
#F9F9F9
–wp–preset–color–background
Overview
|
Brand Color
–wp–preset–color–brand
|
Main Color. Use in buttons and highlighted elements
|
|
|
Brand Hover Color
–wp–preset–color–brand-hover
|
Color for hover on Brand Color.
|
|
|
Secondary Color
–wp–preset–color–secondary
|
Secondary Color. Use in secondary buttons and as accent for small text
|
|
|
Secondary Hover Color
–wp–preset–color–secondary-hover
|
Secondary Hover Color. Use in secondary buttons and as accent for small text
|
|
|
Text on Brand Color
–wp–preset–color–text-on-brand
|
Color of Text that placed on Brand Color
|
|
|
Text on Brand Hover Color
–wp–preset–color–text-on-brand-hover
|
Color of Text that placed on Brand Hover Color
|
|
|
Text on Secondary Color
–wp–preset–color–text-on-secondary
|
Color of Text that placed on Secondary Color
|
|
|
Text on Secondary Hover Color
–wp–preset–color–text-on-secondary-hover
|
Color of Text that placed on Secondary Hover Color
|
|
|
Card Background
–wp–preset–color–card-base
|
Background color of cards, product cards and grouped content
|
|
|
Card Border
–wp–preset–color–card-border
|
Border for cards
|
|
|
Card Text
–wp–preset–color–card-textcolor
|
Text color for cards and grouped content
|
|
|
Background
–wp–preset–color–background
|
Main Background of site (applied on body tag)
|
|
|
Content Text
–wp–preset–color–card-text
|
Main text color of content (applied on body tag)
|
|
|
Border
–wp–preset–color–border
|
Light transparent Borders. Use for inputs, forms, bordered content
|
|
|
Base
–wp–preset–color–base
|
Dark base color. Use where you need flat dark color
|
|
|
Contrast
–wp–preset–color–contrast
|
White base color. Use where you need flat white color
|
Typography
Text styles
Content Text Sizes
God
clamp(3.5rem, 12vw, 15rem) / clamp(4.2rem, 12.2vw, 20rem)
–wp–preset–font-size–god / –wp–custom–line-height–god
Colossal
clamp(3.4rem, 9vw, 12rem) / clamp(4.1rem, 9.35vw, 17rem)
–wp–preset–font-size–colossal / –wp–custom–line-height–colossal
Giant
clamp(3.2rem, 6.2vw, 6.5rem) / clamp(4.2rem, 6.2vw, 7rem)
–wp–preset–font-size–giant / –wp–custom–line-height–giant
Giga
clamp(3rem, 5vw, 4.5rem) / clamp(4rem, 6vw, 5rem)
–wp–preset–font-size–giga / –wp–custom–line-height–giga
Grand
clamp(2.2rem, 4vw, 2.8rem) / clamp(2.75rem, 4.7vw, 3.5rem)
–wp–preset–font-size–grand / –wp–custom–line-height–grand
High
clamp(1.9rem, 3.2vw, 2.4rem) / clamp(2.5rem, 3.7vw, 3rem)
–wp–preset–font-size–high / –wp–custom–line-height–high
XX Large
clamp(1.75rem, 3vw, 2.2rem) / clamp(2.4rem, 3.55vw, 2.75rem)
–wp–preset–font-size–xxl / –wp–custom–line-height–xxl
X Large
clamp(1.6rem, 2.75vw, 1.9rem) / clamp(2.3rem, 3.45vw, 2.6rem)
–wp–preset–font-size–xl / –wp–custom–line-height–xl
Large
1.55rem / 2.37rem
–wp–preset–font-size–l / –wp–custom–line-height–l
Medium
1.35rem / 2.1rem
–wp–preset–font-size–m / –wp–custom–line-height–m
Regular
1.2rem / 1.9rem
–wp–preset–font-size–r / –wp–custom–line-height–r
Small
1rem / 1.4rem
–wp–preset–font-size–s / –wp–custom–line-height–s
X Small
0.85rem / 1.15rem
–wp–preset–font-size–xs / –wp–custom–line-height–xs
Mini
11px / 14px
–wp–preset–font-size–mini / –wp–custom–line-height–mini
Spacing
Spacing styles
In and Our Spacing
X Small
0.44rem
–wp–preset–spacing–20
Small
0.67rem
–wp–preset–spacing–30
Regular
1rem
–wp–preset–spacing–40
Medium
1.5rem
–wp–preset–spacing–50
Large
2.25rem
–wp–preset–spacing–60
X Large
3.38rem
–wp–preset–spacing–70
XX Large
5.06rem
–wp–preset–spacing–80
High
7.59rem
–wp–preset–spacing–90
Grand
11.39rem
–wp–preset–spacing–100
Huge
17.09rem
–wp–preset–spacing–110
Side space
min(3vw, 20px)
–wp–custom–spacing–side
Size
Size styles
Sized rectangles
Dot
6px
–wp–custom–size–dot
Mini
11px
–wp–custom–size–mini
X Small
17px
–wp–custom–size–xs
Small
26px
–wp–custom–size–small
Regular
40px
–wp–custom–size–r
Medium
56px
–wp–custom–size–m
Large
74px
–wp–custom–size–l
X Large
100px
–wp–custom–size–xl
XX Large
150px
–wp–custom–size–xxl
High
220px
–wp–custom–size–high
Extra Sizes
Grand: var(–wp–custom–size–grand, 300px)
Huge: var(–wp–custom–size–huge, 385px)
Giant: var(–wp–custom–size–giant, 500px)
Colossal: var(–wp–custom–size–colossal, 700px)
God: var(–wp–custom–size–god, 1000px)
Section size: var(–wp–style–global–wide-size, 1200px)
Border Radius
Border styles
Border Radius Presets
Mini
5px
–wp–custom–border-radius–mini
Mini
10px
–wp–custom–border-radius–small
Medium
15px
–wp–custom–border-radius–medium
Large
20px
–wp–custom–border-radius–large
X Large
35px
–wp–custom–border-radius–xlarge
Circle
50%
–wp–custom–border-radius–circle
Shadows
Shadow styles
Shadow Presets
Accent
0px 15px 25px 0px rgba(0, 0, 0, 0.1)
–wp–preset–shadow–accent
Mild
0px 5px 20px 0px rgba(0, 0, 0, 0.03)
–wp–preset–shadow–mild
Soft
0px 15px 30px 0px rgba(119, 123, 146, 0.1)
–wp–preset–shadow–soft
Elegant
0px 5px 23px 0px rgba(188, 207, 219, 0.35)
–wp–preset–shadow–elegant
Focus
0px 2px 4px 0px rgba(0, 0, 0, 0.07)
–wp–preset–shadow–focus
Highlight
0px 32px 48px 0px rgba(0, 0, 0, 0.15)
–wp–preset–shadow–highlight
Transitions
Transition styles
Transition Presets
Ease
all 0.5s ease
–wp–custom–transition–ease
Ease In Out
all 0.3s ease-in-out
–wp–custom–transition–ease-in-out
Creative
all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
–wp–custom–transition–creative
Soft
all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1)
–wp–custom–transition–soft
Mild
all 0.5s cubic-bezier(0.47, 0, 0.07, 1)
–wp–custom–transition–mild
Elegant
all 0.5s cubic-bezier(0.35, 0.11, 0.22, 1.16)
–wp–custom–transition–elegant
Smooth
all 1s cubic-bezier(0.66,0,0.34,1)
–wp–custom–transition–smooth
Accent
all 1s cubic-bezier(0.48,0.04,0.52,0.96)
–wp–custom–transition–accent
Motion
all 1s cubic-bezier(0.84,0,0.16,1)
–wp–custom–transition–motion
Light
all 1s cubic-bezier(0.4,0.8,0.74,1)
–wp–custom–transition–light
Extra
Additional styles
Extra Presets
|
Lightbox Background
–wp–custom–lightbox–background-color
|
Lightbox Background
|
|
|
Lighbox Close Button Background
–wp–custom–lightbox–close-button–background-color
|
Background for lightbox and sliding panel close buton
|
|
|
Lighbox Close button icon color
–wp–custom–close-button–color
|
Lighbox close button color
|
|
|
Sliding panel background
–wp–custom–panel–background-color
|
Sliding panel default background color
|
|
|
Sliding panel text color
–wp–custom–panel–color
|
Sliding panel Text default color
|
|
|
Sliding panel links color
–wp–custom–panel–color-a
|
Sliding panel Links default color
|
Components
Framework Components
Extra Presets
Button Components
They has three variants: Brand Color, Secondary Color, Custom Color
Buttons use existed variables for colors, spacing, border, so they are inheriting variables, but you can also use specific variables special for buttons
–wp–custom–button–background – brand button color
–wp–custom–button–background-hover – brand hover button color
–wp–custom–button–text – button text
–wp–custom–button–text-hover – button text hover
–wp–custom–button–secondary – secondary button color
–wp–custom–button–secondary-hover – secondary hover button color
–wp–custom–button–secondary-text – secondary button text
–wp–custom–button–secondary-text-hover – secondary button text hover
–wp–custom–button–border-radius – button border radius
–wp–custom–button–spacing–horizontal – button horizontal spacing
–wp–custom–button–spacing–vertical – button vertical spacing
Section Element Component
Main and central part of content layout. Use next variables
–wp–custom–spacing–top, 0px
–wp–custom–spacing–side,
min(3vw, 20px)
min(3vw, 20px)
–wp–style–global–wide-size, 1200px
–wp–custom–spacing–side,
min(3vw, 20px)
min(3vw, 20px)
–wp–custom–spacing–bottom, 0px
Card Component
It’s used for query loop cards and info cards
–wp–preset–color–card-base – background color of card
–wp–preset–color–card-border – border color of card
–wp–preset–color–card-text – text color of card
–wp–custom–card–border-radius – border radius for query loop
–wp–custom–card–spacing – spacing in card