Headers
Table of contents
Evaluation
#1 - Main Website
Screenshot
Elements
- Image
- Lists
- Anchor
- Input
Typography
- Font-family:
Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial, Source Sans Pro
Colors
- Background:
#4a86cf
- Border:
#3968a1
- Text:
#fff
Hover
- color:
#8ed5ff
- background:
#4a86cf
Active
- color:
#ffffff
- fill-color:
#6797ce
- background:
#4a86cf
Spacing
- Padding menu items:
15px
- Header margin:
160px
- font-size:
18px
Media (smaller screens)
- Menu icon (button)
#2 - Extensions
Screenshot
Elements
- Image and locker icon
- Lists
- Anchor
- Buttons
Typography
- Font-family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
Colors
- Background:
#4a86cf
- Border:
#3968a1
- Text:
#fff
Spacing
- Margin left logo:
7px
- Padding logo:
6px
- Padding menu items:
15px
Media (smaller screens)
- Menu icon (button)
- User icon (anchor)
#3 - Events Portal
Screenshots
Event view
Elements
- Image and locker icon
- Lists
- Anchor
- Buttons
Typography
- Font-family (menu items):
"Roboto Light"
- Font-size (menu items):
14px
- Font-family (buttons):
"Roboto"
- Font-size (buttons):
13px
Colors
- Background:
#4a86cf
- Text:
#fff
Spacing
- Margin logo:
6px 6px 0 40px
- Margin buttons container:
0.5em 0.5em 0 0
- Padding global menu:
3px 20px 0 20px
#4 - Planet
Screenshot
Elements
- Image and locker icon
- List
- Anchor
- Button
- Link
Typography
- Font-family:
Source Sans Pro, Cantarell, Droid Sans, Ubuntu,DejaVu Sans, Arial
- Font-size:
15px
Colors
- Background:
#4a86cf
- Background (donation banner):
#4cae4c
- Text:
#fff
Spacing
- Padding logo:
6px
- Padding items:
15px
Media (smaller screens)
- Menu button
- Padding (menu icon):
9px 10px
#5 - Discourse
Screenshots
Elements
- Image and user avatar
- Svg
- User icon
- Search icon
- Menu icon
- Lists
- Anchor
- Input
Typography
- Font-family:
Source Sans Pro, Cantarell, Droid Sans, Ubuntu,DejaVu Sans, Arial
- Font-size:
15px
Colors
- Background:
#111111
- Text:
#dddddd
Hover: button
- color:
#222222
- background:
#14aeea
Hover: icon
- color:
#ffffff
- background:
#909090
Spacing
- Padding (menu items):
6px 10px
- Padding (dropdown menu items):
3.75px 7.5px
#6 - Developer Center
Subheader Screenshot
Elements
- Image
- Paragraph
Typography
- Font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- Header2 Font-size:
27px
- Paragraph Font-size:
18px
- font-weight:
400
Colors
- Background:
#241f31
- Text:
#deddda
Spacing
- width:
85%
- margin:
0 auto
- max-width:
900px
- padding:
3rem 0
- line-height:
1.6
#7 - Wiki
Screenshot
Elements
- Anchor
- Image
- List
Typography
- Font-family:
"Source Sans Pro"
- Font-size:
0.9em
Colors
- Background:
#4a86cf
- Text:
#fff
Spacing
- Padding:
16px 4px
(anchors inside lists)
#8 - Apps
Screenshot
Elements
- Anchor
- Image
- List
Typography
- Font-family:
"Cantarell", sans-serif
- Font-size:
17px
Colors
- Background:
#241f31
- Text:
#deddda
On Hover
- Background:
#3d3846
Spacing
- Header margin:
210px
- Header padding:
30px
- Header-height:
65px
- Element padding:
17px 17px 11px 11px
- font-size:
17px
Subheader Screenshot
Elements
- Image
Typography
- Font-family:
Cantarell, sans-serif
- Header1 Font-size:
45px
- Font-size:
17px
Colors
- Background:
#241f31
- Text:
#deddda
Spacing
- padding:
90px 10px 60px
- grid-template-columns:
0.85fr 1fr
- column-gap:
60px
- row-gap:
35px
- max-width:
900px
- margin:
auto
#9 - Forty
None
#10 - Os
None
#11 - Circle
Screenshot
Elements
- Image
Spacing
- margin:
0
- display:
block
- width:
150px
- height:
auto
Subheader Screenshot
Elements
- Image
- Paragraph
Typography
- Font-family:
"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif
- Header2 Font-size:
27px
- Font-size:
18px
- font-weight:
800
Colors
- Background:
linear-gradient(90deg, #26a269 0%, #2ec27e 100%)
- Text:
#f6f5f4
Spacing
- width:
700px
- display:
block
- max-width:
30em
- margin:
1.5rem auto 3rem
- padding:
3rem 0
- line-height:
1.6
- letter-spacing:
-0.01em
- word-spacing:
-0.01em
#12 - Release
None
Mockups
Edited by Pooja Patel