digg Web Styleguide
Updated: 3-26-12
Palette
Standard Palette
Body Elements
Background Pattern
Typography
Headlines
Headline 1 24px Georgia
Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas quis sapien nisi nontum.
Headline 2 18px Georgia
Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas quis sapien nisi non elementum.
Headline 3 16px Georgia
Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas quis sapien nisi non elementum.
Headline 4 14px Georgia
Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas quis sapien nisi non elementum.
Body
Body Text 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis sapien nisi, non elementum metus. Quisque pulvinar sem vitae est fermentum eget facilisis est iaculis. Fusce dignissim neque lacus. Mauris et nisl nulla. Donec quis ante id neque imperdiet condimentum. Morbi dolor diam, vulputate in tincidunt nec, tincidunt in tortor. Mauris nibh nibh, suscipit ac vulputate vel, laoreet vitae tellus. Donec ac vestibulum tortor.
Curabitur non lacus tellus, eget eleifend quam. Quisque eu porttitor lacus. Aliquam posuere viverra nunc, nec lobortis nisi ultrices pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Vivamus lorem sem, adipiscing ac fermentum at, venenatis at nisi. Morbi eleifend justo non erat dapibus id pulvinar tortor cursus. Curabitur sem dui, bibendum vel gravida vel, commodo non sapien. Proin odio nunc, accumsan interdum consectetur quis, eleifend in leo.
Specific/Misc. Use
Timestamp 12px Georgia Italic
Promoted 2 minutes ago
Descriptor 10px "Helvetica Neue", Arial, Helvetica, sans-serif
Chosen by digg staff. Learn More
Buttons, CTAs & Forms
General Use
Form Field
digg Button
Construction Details
digg Masthead Detail
digg Masthead Strip Detail
Navigation Element Resize Spec
Navigation Element Sizing
Newsbar
Newsbar Element Details
Follow Nav
Follow Nav Element Details
Example Applications
Story Block @ Max Width 770px
Promoted 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas quis sapien nisi non.
sourcelabel.com - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis sapien nisi, non elementum metus. Quisque pulvinar sem vitae est fermentum eget facilisis est iaculis. Fusce dignissim neque lacus. Mauris et nisl nulla. Donec quis ante id neque imperdiet condimentum. Morbi dolor diam, vulputate in tincidunt nec, tincidunt in tortor. Mauris nibh nibh, suscipit ac vulputate vel, laoreet vitae tellus. Donec ac vestibulum tortor. Curabitur non lacus tellus, eget eleifend quam. Quisque eu porttitor lacus.
Promoted 2 minutes ago
Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas quis sapien nisi non.
sourcelabel.com - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis sapien nisi, non elementum metus. Quisque pulvinar sem vitae est fermentum eget facilisis est iaculis. Fusce dignissim neque lacus. Mauris et nisl nulla. Donec quis ante id neque imperdiet condimentum. Morbi dolor diam, vulputate in tincidunt nec, tincidunt in tortor. Mauris nibh nibh, suscipit ac vulputate vel, laoreet vitae tellus. Donec ac vestibulum tortor. Curabitur non lacus tellus, eget eleifend quam. Quisque eu porttitor lacus.
Right Rail @ Max Width 370px
Hot Stories in all topics
Chosen by digg staff. Learn More
Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas quis sapien nisi non elementum metus.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas quis sapien nisi non elementum metus.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas quis sapien nisi non elementum metus.
Right Rail @ Max Width 370px
Top Users from yesterday
Modal - Log In
Join digg
Log in with Facebook Log in with TwitterOr sign up with your email address
Error Message Lorem ipsum solet dolor sit amet.
By creating an account you agree to the Terms of Service & Privacy Policy
Join