Style Guide – Skelements

Finely crafted Style Guidelines

DESIGN SYSTEM

-Global Colors

Ultramarine

#0F62FE

Serves as the primary color.

-Brand background
-Primary button
-Primary links
-Selected borders
-Active borders
-Focus borders
-Hover borders
-Hover for links

Denim

#0043CE

Serves as the primary alternative color.

-Hover for Primary button
-Active Primary button
-Hover for Primary links

Eerie

#151515

Serves as the secondary color.

-Featured background
-Secondary button
-Secondary links

Jet

#2C2C2C

Serves as the primary heading color.

-All Primary headings
-Hover for seconday button

Davys Gray

#4B4B4B

Serves as the default text & icon color.

-Body text
-Icons

Dim Gray

#6E6E6E

Serves as the substitute text & icon color.

-Sub-body text
-Sub-icons

Light Gray

#CACACA

Serves as the field borders, disabled text & icon color.

-Form borders
-Disabled text
-Disabled icon
-Illustrations

Gainsboro

#E1E1E1

Serves as the widget border color.

-Widget borders
-Container/Section border
-Divider/Spacer color

Alice Blue

#ECF1F6

Serves as the first background layer color.

-Background layer one
-Widget decorative color

Cultured

#F5F5F5

Serves as the base background layer color.

-Background base layer

White

#FFFFFF

Serves as the Second background layer color.

-Background layer two
-Widget decorative color
-Heading/body text on dark layer
-Primary button text
-Secondary button text

Cinnabar

#E93928

Serves as the danger color.

-Error alerts & messages

Mustard

#FFDD43

Serves as the warning color.

-Warning alerts & messages

Green NCS

#09A16A

Serves as the success color.

-Success alerts & messages

Azure

#3684E5

Serves as the Information color.

-Info alerts & messages

Ultramarine Transperent

#1064FE52

Serves as the primary transparent color.

-Overlay decorations
-Inactive dot-navigations

Jet Transperent

#4B4B4B7A

Serves as the dark transparent color.

-Overlay decorations
-Pop-up overlay

Davys Transperent

#EAEAEA7A

Serves as the light transparent color.

-Overlay decorations

-Global Fonts

I'm Huge.

Display heading

I'm special, Play me with your prime needs.

Primary heading

I'm useful, Play me when ever you needed a title. My beauty boosts when 'am short.

Secondary heading

I'm golden mean, Play me and maintain the balance of your design. I look lovely when 'am mate with sub-title.

Tertiary heading

I'm decorative, Play me with component and layout headings.

Sub heading 01

I'm decorative, Play me with component/widget, layout headings and links.

Sub heading 02

I’m your voice not a decorator,

The bread and butter of Web-borne communication. You or the reader will not be wow by me so play me when or where you needed my voice.

Body text

My body is little heavy,

Play me short as a display text.

Body text large

I’m your uvula,

Play me short in any occations as a descriptive text. I’m useful in widget text, lables and form fields.

Body text small

I’m the spotlight,

Play me short in any occations as a emphasized descriptive text. I’m useful in highliting important texts.

Body text emphasized

I'm just the button text

Accent/Button text

I'm your navigation. Play me and show directions to your viewers.

Menu text

THEME STYLE

-Button

Primary Button

DEFAULT STATE

HOVER STATE

Secondary Button

DEFAULT STATE

HOVER STATE

Ghost Button

DEFAULT STATE

HOVER STATE

Link Button

DEFAULT STATE

HOVER STATE

Primary Button

DEFAULT STATE

Type: Accent/Button text
Text/Icon color: White
Icon Space: 20
Background color: Ultramarine
Border color: Ultramarine
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 12px
Left/Right: 24px

HOVER STATE

Type: Accent/Button text
Text/Icon color: White
Icon Space: 20
Background color: Denim
Border color: Denim
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 12px
Left/Right: 24px

Secondary Button

DEFAULT STATE

Type: Accent/Button text
Text/Icon color: White
Icon Space: 20
Background color: Eerie
Border color: Eerie
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 12px
Left/Right: 24px

HOVER STATE

Type: Accent/Button text
Text/Icon color: White
Icon Space: 20
Background color: Jet
Border color: Jet
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 12px
Left/Right: 24px

Ghost Button

DEFAULT STATE

Type: Accent/Button text
Text/Icon color: Ultramarine
Icon Space: 20
Background color: Nil
Border color: Ultramarine
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 12px
Left/Right: 24px

HOVER STATE

Type: Accent/Button text
Text/Icon color: White
Icon Space: 20
Background color: Ultramarine
Border color: Ultramarine
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 12px
Left/Right: 24px

Link Button

DEFAULT STATE

HOVER STATE

Type: Accent/Button text
Text/Icon color: Ultramarine
Icon Space: 10
Background color: Nil
Border color: Ultramarine
Border width:
Bottom: 2px
Top/Left/Roght: 0px
Border radius: 0px
Padding: 0px

Primary Button

DEFAULT STATE

Type: Accent/Button text
Icon color: White
Icon Space: 0
Background color: Ultramarine
Border color: Ultramarine
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 10px
Left/Right: 14px

HOVER STATE

Secondary Button

DEFAULT STATE

HOVER STATE

Ghost Button

DEFAULT STATE

Type: Accent/Button text
Icon color: Ultramarine
Icon Space: 0
Background color: Nil
Border color: Ultramarine
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 10px
Left/Right: 14px

HOVER STATE

Type: Accent/Button text
Icon color: White
Icon Space: 0
Background color: Ultramarine
Border color: Ultramarine
Border width: 1px
Border radius: 3px
Padding:
Top/Bottom: 10px
Left/Right: 14px

Link Button

DEFAULT STATE

HOVER STATE

Type: Accent/Button text
Icon color: Ultramarine
Icon Space: 0
Background color: Nil
Border color: Ultramarine
Border width: 0px
Border radius: 0px
Padding:
Top/Bottom: 10px
Left/Right: 14px

-Form Fields

DEFAULT STATE

FOCUS STATE

SETTINGS

-Layout

-Base Container Strcture

CONTAINER DESKTOP

CONTAINER TABLET

CONTAINER MOBILE

Note! The above specs are for the main container. Any widget/elements must be placed in their own container to maintain the design consistency. Each inner container maintains its default space as 10px on all sides. Left/Right paddings are fixed across all screen types. Top/Bottom padding may alter as needed.

-Inner Container Strcture

A layout is the core foundation of any given block or page. It creates the responsive framework for single-conatiner and multi-container design.

Skelements grid system uses a series of containers to layout and align content. It’s built with Elementor flexbox and is 100% fluid and fully responsive. Our inner containers are the bare bones of the structure and controls how the layout behaves.

BREAKPOINTS

LIGHTBOX

Image Lightbox: Yes
Counter: Yes
Fullscreen: Yes
Zoom: Yes
Share: Yes
Background color: Alice Blue
UI color: Jet
UI color hover: Ultramarine
Text color: Jet
Toolbar icons size: 22px
Toolbar Icons size: 20px

PAGE TRANSITIONS

Background color: Davys Transparent
Entrance animation: None
Exit animation: None
Animation speed (ms): Nil
Preloader:
Type: Icon
Animation: Spinning
Animation speed (ms): 1500
Preloader delay (ms): 0
Style:
Color: White
Size: 32

Note! Page transitions may alter for your design needs

-WooCommerce

ERROR NOTICES

MESSAGE NOTICES

Typography: Accent/Button text
Text color: White
Background Color: Green NCS
Box shadow: None
Border type: Solid
Border width: 1px
Border color: Green NCS
Border radius: 3px
Padding
Top/Bottom: 8px
Left/Right: 24px

Typography: Accent/Button text
Text color: Green NCS
Background Color: Transparent
Box shadow: None
Border type: Solid
Border width: 1px
Border color: Green NCS
Border radius: 3px
Padding
Top/Bottom: 8px
Left/Right: 24px

INFO NOTICES

Typography: Accent/Button text
Text color: White
Background Color: Azure
Box shadow: None
Border type: Solid
Border width: 1px
Border color: Azure
Border radius: 3px
Padding
Top/Bottom: 8px
Left/Right: 24px

Typography: Accent/Button text
Text color: Azure
Background Color: Transparent
Box shadow: None
Border type: Solid
Border width: 1px
Border color: Azure
Border radius: 3px
Padding
Top/Bottom: 8px
Left/Right: 24px

Note! WooCommerce notice background color share its default color.