OpenTable Style Guide

When OpenTable redesigned their brand in late 2014, it came with a shiny new style guide that focused largely on visual design. In the meantime, our internal web style guide was constantly falling out of date as new product features shifted the guidelines previously set. (Remember: products are living, breathing, growing things.) Developers frequently requested HEX values, and designers turned to recent Sketch files for the latest styles rather than adhering to a broken guide. I architected, organized, and designed a flexible style guide. The guide strives to serve the brand, product, and engineering teams, who all need to access similar assets on a daily basis.


The guide uses OpenTable's current web styles to lay out the information. Each style guide element includes an example and code that's easy for developers to copy and paste as needed.


Since this is a web-specific guide, the page includes a dropdown navigation in the top right corner to easily access the separate brand and mobile-specific style guides.