SKOOT
UI Style Kit

Purchase
$38

Colour Palette

Primary Palette

Fill Colours
Aqua
#00ACE9
Navy
#17263D
Green
#19A758
Yellow
#FFC805
Red
#EB5757

Secondary Palette

Lights and Darks
Aqua-Light
#80D5F4
Aqua-Dark
#0064b0
Red-Light
#FFA8A7
Red-Dark
#BD3030
Yellow-Light
#FEE384
Yellow-Dark
#A44F00
Green-Light
#0064b0
Green-Dark
#FFA8A7

Typograhy Palette

Text
#17263D
Text-light
#8B929E
Text-Diabled
#9496A2
White
#FFFFFF

Typography Styles

Headings

Typography - Rubik

Aa Bb Cc Dd Ee

Headline 1
64px

Aa Bb Cc Dd Ee

Headline 2
64px

Aa Bb Cc Dd Ee

Heading 1
38px

Aa Bb Cc Dd Ee

Heading 2
32px

Aa Bb Cc Dd Ee

Heading 3
24px

Aa Bb Cc Dd Ee

Heading 4
18px
Aa Bb Cc Dd Ee
Heading 5
14px
Aa Bb Cc Dd Ee
Heading 6
12px

Body Copy

Typography - Rubik

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Subtitle
18px

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Body1
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Small
14px

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Overline
14px

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Caption
12px

Large

Medium

Small

Badge

Labels

Quotes

Typography - Rubik
The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block
18px
The ultimate Interface component kit built to create harmony across your products.
Additional Detail Messages
18px

Additional Copy Elements

Typography - Rubik
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters
16px

Additional Copy Elements

Typography - Rubik

This line rendered as bold text.

Bold Text
18px

This line rendered as italicized text.

Italicized Text
18px

This line of text is meant to be treated as deleted text.

Deleted Text
18px

This line of text is meant to be treated as deleted text.

Underline Text
18px

You can use the mark tag to highlight text.

Highlight Text
18px

Elevation & Shadows

Text Link

Elevation and Shadows

Outter Shadow, Inner Shadow
Shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
S1
Shadow
S2
Shadow
S3

Avatars

Avatars

Corner Radius
X Large
96px
Large
40px
Medium
32px
Small
24px
X Small
18px

TB

X Large
96px

TB

Large
40px

T

Medium
32px

T

Small
24px

T

X Small
18px

Buttons

Field Elements

Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alert Bars

Notification

Input Fields
Looks like we're having trouble
Default Alert Error
Looks like we're having trouble
Warning Alert
Looks like we're having trouble
Error Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Default Alert Grey
Your information has been saved.
Confirm Alert

Badges

Pill Badges

200
200
200
200
200

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Danger

Icons