UI Kit MAKER SHARE version 6 - 05.11.17
Style
to advance to individual pages
Buttons
Badges + Icons
Rubberband Button
24
Badges
31
Icons
31
Logos
1
Project Card
Colors
2
Large
14
Simple Button-Large
25
Colors
3
Medium
15
Simple Button-Small
26
Typography
4
Small
16
Vote Button
27
Desktop Grid
5
Interactions
16
Grey Button
28
Advance Button
29
Structure
CLICK ON PAGE TITLES
Cards
Tablet Grid
6
Mobile Grid
7
Desktop Nav
Mission Card
Functions Tabs
32
Large
17
Expand + Close Buttons
30
Alert Bar
33
Medium
18
Share Button
30
Filtering
34
Small
19
Expand Button
30
Close Button
30
Share Button
30
Learn Card Large
20
8
Medium
21
Tablet Nav
9
Small
21
Mobile Nav
10
Home Layout - Desktop
11
Showcase Card
Home Layout - Tablet Home Layout - Mobile
Medium
22
12
Small
22
13
Maker Card Medium
23
Small
23
Logos Details
• All logos have a transparent background
Logo Assets Favicon
Nav Logo
Footer - Logo Lock-Up
BETA
Width: 120px
BETA
15px
Beta Text: Font: Messina Sans Size: 0.8em / 10pt Color: #00AEEF
UI Kit
Style MAKER SHARE version 6 - 05.11.17
1
Colors
Backgrounds
Site and Text
Site Background
Mission Card
Learn Card
White
#F2F2F2
#333333
#DCDCDC
#FFFFFF
Red
Medium Blue
Showcase Card
#ED1C24
#00AEEF
#D4EFFC
Dark Grey
Medium Grey
Light Grey
White
Red
#4F4F4F
#828282
#BDBDBD
#FFFFFF
#ED1C24
Accent Colors
Text
UI Kit
Style MAKER SHARE version 6 - 05.11.17
2
Colors
Buttons
Buttons, Icons and Validation
Dark Grey
Medium Grey
Light Grey
Medium Blue
Red
#4F4F4F
#828282
#BDBDBD
#00AEEF
#ED1C24
Dark Grey
Red
Medium Blue
#4F4F4F
#ED1C24
#00AEEF
Dark Grey
Medium Blue
Yellow
#4F4F4F
#00AEEF
#F2C94C
Icons
Validation
UI Kit
Style MAKER SHARE version 6 - 05.11.17
3
Large
Large Heading, 64pt
.large { font: Messina Modern Regular; font-size: 5.35em; color: #4f4f4f; }
Typography Site Fonts
• Messina Modern
h1
Heading 1, 48pt, 4em
h1 { font: Messina Modern Regular; font-size: 4em; color: #4f4f4f; }
h2
Heading 2, 32pt, 2.6em
h2 { font: Messina Modern Regular; font-size: 2.6em; Font-weight: 500; }
h3
Heading 3, 24pt, 2em
h3 { font: Messina Modern Regular; font-size: 2em; font-weight: 500; }
h4
Heading 4, 20pt, 1.6em
h4 { font: Messina Modern Regular; font-size: 1.6em; font-weight: 500; }
h5
Heading 5, 18pt, 1.5em
h5 { font: Messina Modern Regular; font-size: 1.5em; font-weight: 500; }
h6
HEADING 6, 16PTS, 1.3EM
h6 { font: Messina Sans Regular; font-size: 1.3em; font-weight: 500; text-transform: uppercase; }
Body and Paragraph text, 11pts, 0.9em
body { font: Messina Sans Regular; font-size: .9em; line-height: 1.5em; }
body <p>
â&#x20AC;˘ Messina Sans
Font Files
UI Kit
Style MAKER SHARE version 6 - 05.11.17
4
Desktop Grid Details
• 1,140px total width with 22.5px gutters
View-port: Wide Desktop @ 1366px x 768px
• 1,140px wide, 3 columns @ 345px, 30px gutters
22.5px
Column Width: 345px
30px
Site Width: 1140px
UI Kit
Structure MAKER SHARE version 6 - 05.11.17
5
View-port: Tablet @ 768px x 1080px
Tablet Grid Details
• 765px total width with 24px margins • 720px wide, 2 columns @ 345px, 24px gutters 24px
Column Width: 345px
30px
UI Kit
Structure MAKER SHARE version 6 - 05.11.17
Width: 720px
6
Mobile Grid Details View-port: Mobile @ 375px x 667px
• 375px total width with 15px margins • 345px wide, 1 column @ 345px
15px
Column Width: 345px
Site Width: 345px
UI Kit
Structure MAKER SHARE version 6 - 05.11.17
7
Desktop Nav
View-port: Wide Desktop @ 1280px Wide
Details • Padding: 30px between most elements • Margin Top: 30px • Margin Bottom: 50px form the baseline of the Beta Logo
Logo • Width: 120px
Nav Menu Text • Font: Messina Sans • Color: #4f4f4f • Font-size: 1.3em / 15pt
Width: 120px
Nav Menu Text
Width: 266px
Nav PSD
UI Kit
Structure MAKER SHARE version 6 - 05.11.17
8
View-port: Tablet @ 768px Wide
Tablet Nav Details • Disable: Add Project Button, Projects, Showcases, Missions and Learning • Include disabled Nav items in Hamburger Menu
Logo (Same as Desktop) • Width: 120px
Width: 120px
Width: 266px
Nav PSD
UI Kit
Structure MAKER SHARE version 6 - 05.11.17
9
Mobile Nav View-port: Mobile @ 375px Wide
Width: 266px
Details • Include all disabled Nav items in Hamburger Menu
Logo • Width: 90px
Width: 90px
Nav PSD
UI Kit
Structure MAKER SHARE version 6 - 05.11.17
10
Nav
Home Layout - Desktop Home Page Layout
Header
Card
Card - Large
Card - Large
Card
Card
â&#x20AC;¢ Scale = 50%
Card
Card
Card
Card - Large UI Kit
Structure MAKER SHARE version 6 - 05.11.17
11
Nav
Home Layout - Tablet Home Page Layout
Header
Card
â&#x20AC;¢ Scale = 50%
Card
Card - Large
Card
Card
Card - Large UI Kit
Structure MAKER SHARE version 6 - 05.11.17
12
Nav
Home Layout - Mobile Home Page Layout
Header
â&#x20AC;¢ Scale = 50%
Card
Card
Card
Card UI Kit
Structure MAKER SHARE version 6 - 05.11.17
13
Project Card - Large
Width: 720px
Uses
Card Flag:
• Profile - Expanded View (Desktop)
1
• color: #4F4F4F • Flag SVG files here.
1
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500;
2
Height: 460px
Project Image
• 16x9 ratio
2
Maker Name: body
3
Tags: body
Style = body color: #00AEEF
Style = body color: #FFFFFF;
Card: • 720px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD; • background-color: #FFFFFF; Project Photo: • 16x9 ratio
PSD File
3
Project Title:
Text:
font: Messina Modern Regular; font-size: 1.8em / 22pt Font-weight: 500; color: #4F4F4F;
Style = body color: #BDBDBD
Hover
Card with Multiple Makers Color Overlay:
• color: rgba(0,174,239,.55); • transition: .5s ease;
Text Overlay:
• font: body / 1.5 em / 18pts • color: #FFFFFF; • text-align: center; • vertical-align: middle; UI Kit
Cards MAKER SHARE version 6 - 05.11.17
14
Project Card - Medium Uses Width: 345px
Project Card:
• 345px wide x 460px tall • box-shadow: 2px 2px 8px #bdbdbd;
Card Flag:
• color: #00AEEF • Flag SVG files here.
Project Photo:
• 5x4 ratio • 345px wide x 275px tall
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500;
• Home Page (All Devices) • Portfolio - Grid View • Search Results (Desktop) Card • 345px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD;
Click for PSD file.
Height: 460px
PSD File
Badges:
• highest z index of all elements on card • box-shadow: 2px 2px 8px #bdbdbd; • Flag SVG files here.
1
Title:
2
Maker Name:
1
Maker Photo: • 1x1 ratio • 82px x 82px
2
Likes icon
Views icon
font: Messina Modern Regular; font-size: 1.8em / 22pt Font-weight: 500; color: #4F4F4F;
Style = body color: #00AEEF *ACTIVE LINK TO PROFILE
Text:
font: Messina Sans font-size: 1em / 12pts line-height: 100%; color: #BDBDBD
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
15
Project Card - Interactions Hover
Uses
Click / Tap
• Home Page (All Devices) • Portfolio - Grid View • Search Results (Desktop)
Color Overlay:
Style:
• color: rgba(0,174,239,.55); • transition: .5s ease;
•Same as hover
Text Overlay:
• font: body / 1.5 em / 18pts • color: #FFFFFF; • text-align: center; • vertical-align: middle;
Width: 345px
Badges:
• Move to upper right-hand corner
Card Flag:
1
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500; • text-transform: uppercase
Project Photo • 1x1 ratio
1
Project Title:
2
Maker Name:
Style = h5
2
Likes icon
Views icon
Text:
Style = body color: #BDBDBD
Uses
• Search Results (Tablet and Mobile)
Height: 175px
• color: #00AEEF • Flag SVG files here.
Project Card - Small
font: Messina Sans font-size: 1.2em / 14pts font-weight: 500; line-height: 100%; color: #00AEEF
Card
• 345px wide x 175px tall • box-shadow: 2px 2px 8px #bdbdbd;
PSD File
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
16
Mission Card - Large
Width: 720px
Card Flag:
• color: #4F4F4F • Flag SVG files here.
Uses
1
• Home Page (Desktop and Tablet)
2 1
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500;
Sponsored by:
Style = body color: #BDBDBD
2
Title:
3
Text: body
3
font: Messina Modern Regular; font-size: 1.8em / 22pt Font-weight: 500; color: #4F4F4F;
Style = body color: #FFFFFF
Card: • 720px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD; • background-color: #333333; Mission Photo: • 4x5 ratio • box-shadow: 2px 2px 8px #191919;
PSD File
Height: 460px
Text:
Style = body color: #BDBDBD
Sample with Long Title:
• Body copy moves down maintaining the same margin between the header and body.
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
17
Mission Card - Medium Uses
• Home Page (Mobile) Card • 345px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD;
Width: 345px
1
Mission Photo:
2
Sponsored by:
3
Title:
4
Text: body
2
1
Height: 460px
3 4
• 16x9 ratio
Mission Photo • 16x9 ratio • box-shadow: 2px 2px 8px #191919;
Style = body color: #BDBDBD
font: Messina Modern Regular; font-size: 1.8em / 22pt Font-weight: 500; color: #4F4F4F;
PSD File
Style = body color: #FFFFFF
Text:
Style = body color: #BDBDBD
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
18
Mission Card - Small Uses
• Search Results (Tablet and Mobile)
Card
• 345px wide x 175px tall • box-shadow: 2px 2px 8px #bdbdbd;
Width: 345px
Text:
Style = body color: #BDBDBD
Height: 175px
1 2
Card Flag:
1
Title:
2
Button:
• color: #4F4F4F • Flag SVG files here.
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500; • text-transform: uppercase
Text:
Style = body color: #BDBDBD
Card:
background-color: #333333;
h4 { font: Messina Modern; font-size: 1.6em; font-weight: 500; line-height: 110%; color: #FFFFFF; }
PSD File
• Move to lower right corner.
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
19
Learn Card - Large Uses
• Home Page (Desktop and Tablet) Card: • 720px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD; • background-color: #DCDCDC;
Width: 720px
1
Card Flag:
• color: #4F4F4F • Flag SVG files here.
2 1
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500;
3
Sponsored by:
Style = body color: #828282;
2
Title:
3
Text: body
font: Messina Modern Regular; font-size: 1.8em / 22pt Font-weight: 500; color: #4F4F4F;
Mission Photo: • 4x5 ratio • box-shadow: 2px 2px 8px #191919;
PSD File
Style = body color: #4F4F4F;
Height: 460px
Text:
Style = body color: #828282
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
20
Learn Card - Medium
Width: 345px
1
1 2
2
3
Photo:
Uses
Sponsored by:
Card • 345px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD;
• 16x9 ratio
Style = body color: #FFFFFF; text-shadow: 1px 1px 5px #333333;
Title:
font: Messina Modern Regular; font-size: 1.8em / 22pt Font-weight: 500; color: #4F4F4F;
3 4
4
• Home Page (Mobile)
Mission Photo • 16x9 ratio • box-shadow: 2px 2px 8px #191919;
Text: body
Style = body color: #4F4F4F;
PSD File
Height: 460px
Text:
Style = body color: #828282
Learn Card - Small Width: 345px
Text:
Style = body color: #BDBDBD
2
Text:
Style = body color: #BDBDBD
Card:
background-color: #DCDCDC;
• Search Results (Tablet and Mobile)
Card
Height: 175px
1
Uses
1
2
• 345px wide x 175px tall • box-shadow: 2px 2px 8px #bdbdbd;
Title:
h4 { font: Messina Modern; font-size: 1.6em; font-weight: 500; line-height: 110%; color: #FFFFFF; }
Button:
• Move to lower right corner.
PSD File
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
21
Active
Showcase Card - Medium
Hover Width: 345px
Uses
1 1 Text:
2
• color: #00AEEF; • font-size: 1 em / 12pts; • font-weight: 500; • text-transform: uppercase
Title: h2
h2 { font: Messina Modern; font-size: 2.6em; Font-weight: 500; line-height: 110%; color: #4F4F4F; }
• Home Page (All Devices) • Search Results (Desktop) Card • 345px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD;
Text: body
body { font: Messina Sans font-size: 1em; font-weight: 300; line-height: 110%; color: #4F4F4F; }
PSD File
Card Background
2
color: #D4EFFC
Hover Dark Background Medium Blue color: #00AEEF
Height: 460px
Likes icon
Views icon
Text:
Showcase Card - Small
font: Messina Sans font-size: 1em / 12pts line-height: 100%; color: #BDBDBD
Uses
• Search Results (Tablet and Mobile)
Width: 345px
Card Height: 175px
1
1
Title:
h2 { font: Messina Modern; font-size: 2.6em; Font-weight: 500; line-height: 110%; color: #4f4f4f; }
• 345px wide x 175px tall • box-shadow: 2px 2px 8px #bdbdbd;
PSD File
UI Kit
Cards MAKER SHARE version 6 - 05.11.17
22
Active
Maker Card - Medium
Hover Width: 345px
Uses
1
1
Card Flag:
2
• color: #4F4F4F • Flag SVG files here.
Flag Text:
• color: #FFFFFF; • font-size: 1 em / 12pts; • font-weight: 500; • text-transform: uppercase
Hover Color Overlay:
• color: rgba(0,174,239,.55); • transition: .5s ease; • Display main photo from most recent project. If not projects, display Maker photo.
• Home Page (All Devices) • Search Results (Desktop) Card • 345px wide x 460px tall • box-shadow: 2px 2px 8px #BDBDBD; • main image ratio: 5x4
Maker Name:
color: #00AEEF; font: Messina Modern Regular; font-size: 1.4em / 16pt
PSD File
Nickname:
Style = body color: #BDBDBD;
Location:
font-size: .8em / 10pt color: #4F4F4F;
2 3
Quote:
3
Height: 460px
Likes icon
Views icon
Text:
Style = body color: #BDBDBD
color: #4F4F4F; font: Messina Modern font-size: 1em / 12pt
Badges:
Maker Card - Small
• highest z index of all elements on card • box-shadow: 2px 2px 8px #bdbdbd; • Flag SVG files here.
Uses
• Search Results (Tablet and Mobile)
Width: 345px
Card
1 2
Maker Photo: • 1x1 ratio • 82px x 82px
1
2
Maker Name:
color: #00AEEF; font: Messina Modern font-size: 1.4em / 16pts
Nickname:
Height: 175px
color: #BDBDBD; font: Messina Sans font-size: 1.125em / 14pt
Location:
color: #4F4F4F; font: Messina Sans font-size: 1em / 12pt
Quote:
• 345px wide x 175px tall • box-shadow: 2px 2px 8px #bdbdbd;
PSD File
color: #4F4F4F; font: Messina Modern font-size: 1em / 12pt UI Kit
Cards MAKER SHARE version 6 - 05.11.17
23
Rubberband Button
Styling
Details
â&#x20AC;˘ Can be Red, Medium Grey or Dark Grey
Plus Icon:
Use Button Font: Messina Sans Regular;
Button Font:
font: Messina Sans Regular; font-size: 12pt / 0.9em; color: #ffffff; text-align: center; vertically-aligned: middle;
Height: 50px
Rubber-band:
color: #ED1C24 (same as button background) border style: solid; border-width: 3px;
Width: 140px
Interactivity Active
Hover: Darken 20%
Click:
Button Background Colors
Medium Blue
Medium Grey
Red
#00AEEF
#828282
#ED1C24 UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
24
Simple Button-Large
Styling
Details
â&#x20AC;˘ Available in two sizes, large and medium
Width: 180px
ACTIVE
HOVER + CLICK + TAP
Button Font:
Button Font:
Border:
Border:
font: Messina Sans Regular; font-size: 1.3em / 15pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Height: 50px
0.5px solid #4F4F4F;
Uses
â&#x20AC;˘ Load More Button
font: Messina Sans Regular; font-size: 1.3em / 15pt; color: #ffffff; text-align: center; vertically-aligned: middle;
None
Background:
background-color: #4F4F4F;
Interactivity Active
Hover:
background- color: #4F4F4F;
Click:
same as hover
Button Colors
Medium Grey
#4F4F4F UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
25
Simple Button-Small
Styling
Details
â&#x20AC;˘ Available in two sizes, large and medium
Width: 100px
ACTIVE
HOVER + CLICK + TAP
Button Font:
Button Font:
Border:
Border:
font: Messina Sans Regular; font-size: 1em / 12pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Height: 35px
0.5px solid #4F4F4F;
Uses
â&#x20AC;˘ Choose File Button
font: Messina Sans Regular; font-size: 1em / 12pt; color: #ffffff; text-align: center; vertically-aligned: middle;
None
Background:
background-color: #4F4F4F;
Interactivity Active
Hover:
background- color: #4F4F4F;
Click / Tapped: same as hover
Button Colors
Medium Grey
#4F4F4F UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
26
Vote Button
Styling
Uses
â&#x20AC;˘ Mission Page
Width: 180px
ACTIVE
HOVER
CLICKED/TAPPED
Button Font:
Button Font:
Button Font:
Border:
Background:
Background:
font: Messina Sans Regular; font-size: 1.3em / 15pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Height: 50px
0.5px solid #4F4F4F;
font: Messina Sans Regular; font-size: 1.3em / 15pt; color: #ffffff; text-align: center; vertically-aligned: middle;
background-color: #ED1C24;
font: Messina Sans Regular; font-size: 1.3em / 15pt; color: #ffffff; text-align: center; vertically-aligned: middle;
background-color: #ED1C24;
Checkmark Icon: color: #ffffff; font awseome: fa-check font-size: 1.3em / 15pt;
Interactivity Active
Hover:
Click / Tapped:
Background Color
Red
#ED1C24 UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
27
Grey Button
Styling
Uses
• All editors and form pages.
Width: 80px
ACTIVE
HOVER + CLICK
DISABLED
Button Font:
Button Font:
Button Font:
Background:
Background:
Background:
font: Messina Sans Regular; font-size: 1.2em / 14pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Height: 50px
background-color: #DCDCDC;
font: Messina Sans Regular; font-size: 1.2em / 14pt; color: #ffffff; text-align: center; vertically-aligned: middle;
background-color: #4F4F4F;
Pages In Use
• Project Editor - Save and Publish • Profile Editor - Save
font: Messina Sans Regular; font-size: 1.2em / 14pt; color: #BDBDBD; text-align: center; vertically-aligned: middle;
none;
Border:
0.5px solid #DCDCDC;
Interactivity Active
Hover:
background- color: #4F4F4F;
Click:
same as hover
Button Colors
LIght Grey
Medium Grey
#DCDCDC
#4F4F4F UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
28
Advance Button
Styling
Uses
• Editors, form pages and anytime the user has the option to advance forward or backward through pages.
Width: 50px
30px
ACTIVE
HOVER
Right and Left Icon:
Right and Left Icon:
Border:
Border:
Background:
Background:
font: Linearicons; right icon: lnr-chevron-right left icon: lnr-chevron-left font-size: 2.45em / 30pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Height: 50px
0.5px solid #4F4F4F;
none
font: Linearicons; right icon: lnr-chevron-right left icon: lnr-chevron-left font-size: 2.45em / 30pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Pages In Use • Project Editor • Profile Editor
0.5px solid #4F4F4F;
background-color: #FFFFFF;
Interactivity Active
Hover:
Color
Dark Grey
#4F4F4F UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
29
Expand Button
Expand + Close Buttons Styling
Uses • Serves as the executable button for the user. Width: 26px
Close Button
Height: 26px
Uses • Serves as the executable button for the user. Expand Button
ACTIVE
HOVER + CLICK
Expand and Close Icon:
Color:
font: Linearicons; expand: lnr-chevron-down close: lnr-cross font-size: 1.4em / 16pt;
Close Button
darken 20%
colors: can be #4F4F4F or #00AEEF text-align: center; vertically-aligned: middle;
Share Button
Share Button
Behavior • Allows users to share their profiles and other users profiles via social channels. Prompts pop-up modal for user to select which social channel they would like the share on.
Styling
Width: 26px Height: 26px
ACTIVE
HOVER + CLICK
Share Icon:
Color:
font: Font Awesome; share: fa-share font-size: 1.4em / 16pt;
darken 20%
color: #00AEEF
Share Button
text-align: center; vertically-aligned: middle;
UI Kit
Buttons MAKER SHARE version 6 - 05.11.17
30
Badges
Icons Width: 30px
Badges
Notifiers
Hamburger
Notifications Like - Not Selected
Height: 36px
Search
Liked - Selected Views
PROJECT
Maker Faire Grid View
Social
Blue Ribbon Challenge Winner
Width: 36px Message Maker
Height: 36px
Community Engagement
Size • 345px wide x 460px tall
Function
• Visual cue • Does not ac.t as a link.
Icons
Challenge Lover Productivity
• Indicates achievements for Makers and Projects. • Maker and Project Cards (All Devices)
Z Index • Maker and Project Cards: The badges float on the highest Z index of the element it exists on. The badges are element specific; if two Maker Cards where to be layered ontop eachother their badges would remain contained at the upper most “layer” of its card.
Expanded View MAKER
Uses
Details
Play Video ACTIVE
HOVER / CLICK
• color: #4F4F4F; • line-weight: 1px • hover / click: darken 20%;
Pause Video
Role Model Founding Member
Edit
Vector Files
Linearicons: lnr-pencil
Community Manager
UI Kit
Badges + Icons MAKER SHARE version 6 - 05.11.17
31
Tabs
Styling TABS - DESKTOP
BLUE BAR
TAB FONT
Width: 115px
Width: max 1100px
Font - Selected:
font: Messina Sans Regular; font-size: 1.4em / 16pt; color: #4F4F4F; text-align: center;
Height: 35px
Font - Not Selected: Lighten font 30%
BLUE LINE
GREY LINE
Bottom-border:
Bottom-border:
5px solid #00AEEF;
0.5px solid #DCDCDC;
Interactivity Selected
Not Selected
Hover:
display text full opacity #4F4F4F
Colors
LIght Grey
Medium Blue
Medium Grey
#DCDCDC
#00AEEF
#4F4F4F UI Kit
Functions MAKER SHARE version 6 - 05.11.17
32
Styling
25px
Alert Bar Uses
• Sucess indicator • Warning indicator
Width: Full Width (correpsonding to device page is viewed on.)
Size
Font:
font: Messina Sans Regular; font-size: 1.5em / 18pt; color: #FFFFFF; text-align: center;
Height: 45px
• Device width x 45px tall
Close “X”:
font: Linearicons entity: &#xe870; html: <span class=”lnr lnr-cross”></span> font-size: 1.5em / 18pt; color: #FFFFFF; active: lighten 25%
Interactivity
Display:
Based upon pre-determined conditionals
Animates in from the top of the page - ease in. Is sticky and remains open until user selects “X”.
Close X:
color: #FFFFFF; hover: display at full opacity
Background Colors
Success
Alert
Medium Blue
Medium Grey
#00AEEF
#4F4F4F UI Kit
Functions MAKER SHARE version 6 - 05.11.17
33
RED TEXT
Styling
Filtering
H6 font: Messina Sans Regular; font-size: 1.3em; font-weight: 500; text-transform: uppercase;
30px
Details
• Projects Gallery - Filtering and Section options
20px
20px TEXT
Breadcrumb
Indicates parent child categories selected by the user
All Projects
Clears out Parent and Child selections and displays all projects
Category Styling Width: 130px
ACTIVE
HOVER +SELECTED
Button Font:
Button Font:
Border:
Background + Border:
font: Messina Sans Regular; font-size: 1.3em / 14pt; color: #4F4F4F - lighten 30%; text-align: center; vertically-aligned: middle;
Height: 45px
1px solid #4F4F4F;
Sort Dropdown Menu options: • Most Recent • Oldest • Title A-Z • Title Z-A • Most Liked • Most Viewed
Styling
font: Messina Sans Regular; font-size: 1.3em; font-weight: 300; color: #4F4F4F;
font: Messina Sans Regular; font-size: 1.3em / 15pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
border: 1px solid #ED1C24;
Sub-Category Styling Width: 100px Height: 35px
ACTIVE
HOVER + SELECTED
Button Font:
Button Font:
font: Messina Sans Regular; font-size: 1em / 12pt; color: #4F4F4F - lighten 30%; text-align: center; vertically-aligned: middle;
Border:
1px solid #4F4F4F;
font: Messina Sans Regular; font-size: 1em / 12pt; color: #4F4F4F; text-align: center; vertically-aligned: middle;
Border:
1px solid #ED1C24;
UI Kit
Functions MAKER SHARE version 6 - 05.11.17
34