design-spec-example.md

Application Colors

• $black: #000000
• $white: #ffffff
• $hootie-red: #ee2d24
• $hootie-light-grey: #999999
• $hootie-dark-grey: #4c4c4c
• $hootie-navbar: #cccccc

Application Text Styles

• $hootie-tweet-name: Helvetica Light Condensed / 12pt / $black
• $hootie-tweet-handle: Helvetica Light Condensed / 12pt / $hootie-light-grey
• $hootie-tweet-body: Helvetica Light / 16pt / $hootie-dark-grey
• $hootie-big-white: Helvetica Light / 16pt / $white
• $hootie-condensed-light: Helvetica Light Condensed / 12pt / $white

Shared Design Stories

• app bg: hootie-bg.png
• navbar:
  • background: $hootie-navbar

1. Sidebar

Mockup

1.Sidebar 1.Sidebar+REDLINE

Design Stories

• background: sidebar-bg.png
• cell backgrounds: sidebar-div.png
  • pressed: $hootie-red
• badge inset (sidebar_badge.png): (3pt, 2pt, 5pt, 2pt)

2. Following

Mockup

2.Following 2.Following+REDLINES

Design Stories

• tweet-bg: $white