Typography

Text should be sentence case, minus names && tags?? maybe.
color: #212124;

Headings

font-weight: 200 /* ProximaNova-Light */;

font-size: 36px; 
line-height: 44px;

font-size: 30px; 
line-height: 38px;

font-size: 24px; 
line-height: 30px;

font-size: 20px; 
line-height: 26px;

font-size: 18px; 
line-height: 24px;

font-size: 16px; 
line-height: 24px; 
font-weight: 400 /* ProximaNova-Regular */;

Secondary text

font-size: 14px;
line-height: 20px;

color: #898989;

List

• bullet list item one
• bullet list item two
• bullet list item three
• bullet list item four

Links & tags

Tags

color: #212124;
background-color: #cfd6d9;
height: 24px;
line-height: 24px;
border-radius: 3px;
transition: color 150ms ease-in-out, background-color 150ms ease-in-out;

Tags:hover

color: #fff;
background-color: #868d91;

Links

color: #006dac;

Links:hover

text-decoration: underline;

Titles that are links ( people, albums, groups & galleries )

font-weight: 500; /* ProximaNova-Semibold */ 

Input fields

Input

height: 32px;
border-radius: 3px; 
background: #fff;
text-indent: 10px;
box-shadow: inset 0 0 0 1px #9ea4a7;

Input:focus

box-shadow: inset 0 0 0 1px #128fdc;

padding-left: 40px;
text-indent: 0;

Not implemented

height: 40px;
font-size: 16px;
text-indent: 15px;

font-size: 16px;

font-size: 14px;

Buttons

height: 32px;
text-align: center;
min-width: 80px;
padding: 0 20px;padding-left:20px;padding-right:20px;
background-color: #128fdc;
color: #fff;
border-radius: 3px;
border: none;
cursor: pointer;
font-weight: 500  /* ProximaNova-Semibold */;
font-size: 16px;
line-height: 32px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
transition: background-color 150ms ease-in-out;

Button states

background-color: #128fdc;

background-color: #1c9be9;

background-color: #1781c2;

box-shadow:inset 0 0 0 2px rgba(0,0,50,.4);

Secondary button states

background-color: #979ea2;

background-color: #a4acb0;

background-color: #868d91;

box-shadow:inset 0 0 0 2px rgba(0,0,0,.4);

Red button states

background-color: #E2292B;

background-color: #EF2B2D;

background-color: #C82426;

box-shadow:inset 0 0 0 2px rgba(50,0,0,.4);

height: 32px; 
min-width: 80px;

height: 36px; 
min-width: 100px;

height: 40px; 
min-width: 120px;

min-width: 300px; 
height: 36px;

height: 75px; 
min-width: 600px;
font-size:40px;

Toggles, radio buttons & checkboxes

Toggles

Radio buttons

Checkboxes

Avatars

80px

60px

48px

32px

Thumbnails

Comments

font-size: 14px;
line-height: 18px; 

icons { opacity: .5; }
icons:hover { opacity: 1; }

 reply icon
 trash icon
 permalink icon
 edit icon

Notifications

Subnav

Dropdowns

• You
  Menu item one

  Menu item two

  Menu item three

  Menu item four

• Communities
  Menu item one

  Menu item two

  Menu item three

  Menu item four

• Explore
  Menu item one

  Menu item two

  Menu item three

  Menu item four

:hover { background: #e6eaec; }

Modals

Scrollable modal

Share widget

Not sure if using <select> or a custom control

Pagination

Tables

Hackish, is there a better way?

new { font-weight: 500 /* semibold */ }
visited/old { font-weight: 200; /* light */ }

row:first-child, row:last-child { border-color: #ccc; }

table { font-size: 16px; }
th { color: #898989; font-weight: 400; }

avatars {width: 32px; height: 32px; margin: 6px 10px 6px 0;}

Using div's

Text only

text only { line-height: 34px; + border-bottom: 1px; = height: 35px }

With avatars

with avatar { line-height: 44px; + border-bottom: 1px; = height: 45px; }

Actual table

row height:35px;

Monetization

Empty state

Loader