This is an HTML5 Style Guide. Traditionally these are created using a tool like Photoshop, but I think a Style Guide created for the browser is a better experience for clients. Photoshop documents are static and fixed, but an HTML5 document will demonstrate rollover states and responsiveness. And yes, this is responsive.

The components included and styled are a logo, color palette, images, typography, and common user interface elements like an accordion, tabs and form inputs.


Theme Honey
Theme Honey
Theme Honey
Theme Honey

Montserrat

a b c d e f g h i j k l m n o p q r s t u v w x y z

Roboto Slab

a b c d e f g h i j k l m n o p q r s t u v w x y z

Main Headline H13em/48px

Sub Headline H22.5em/40px

Section Header H32em/32px

Sub Section Header H41.5em/24px

Header H51.25em/20px
Header H61em/16px

Body Copy

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Background Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquotes & Testimonials

This is my testimonial. There are many like it, but this one is mine. My testimonial is my best friend. It is my life. I must master it as I must master my life. My testimonial, without me, is useless. Without my testimonial, I am useless. — Said No One, Ever

This is my blockquote. There are many like it, but this one is mine. My blockquote is my best friend. It is my life. I must master it as I must master my life. My blockquote, without me, is useless. Without my blockquote, I am useless. — Said No One, Ever

This is my testimonial. There are many like it, but this one is mine. My testimonial is my best friend. It is my life. I must master it as I must master my life. My testimonial, without me, is useless. Without my testimonial, I am useless. — Said No One, Ever

Buttons

Learn More Read More Buy Now See More Visit Submit Learn More Read More Buy Now See More Visit Submit Learn More Read More Buy Now See More Visit Submit

UI Elements

This little piggy went to market

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

This little piggy stayed home

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

This little piggy had roast beef

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

This little piggy had none

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

This little piggy went wee wee wee all the way home

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
All honeybee information via Wikipedia

A honey bee (or honeybee), in contrast with the stingless honey bee, is any bee that is a member of the genus Apis, primarily distinguished by the production and storage of honey and the construction of perennial, colonial nests from wax.

Males or drones are typically haploid, having only one set of chromosomes. They are produced by the queen if she chooses not to fertilize an egg; or by an unfertilized laying worker.
Workers have two sets of chromosomes. They are produced from an egg that the queen has selectively fertilized from stored sperm. Workers typically develop in 21 days. A typical colony may contain as many as 60,000 worker bees.
Queen honey bees are created at the decision of the worker bees by feeding a larva only royal jelly throughout its development, rather than switching from royal jelly to pollen once the larva grows past a certain size.