CINXE.COM
Atomic Design by Brad Frost
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width initial-scale=1"> <title>Atomic Design by Brad Frost</title> <meta name="description" content="Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before. "> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/prism.css"> <link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet"> <!-- Schema.org markup for Google+ --> <meta itemprop="name" content="Atomic Design by Brad Frost"> <meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/social-card.jpg"> <meta itemprop="description" content="Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before. "> <!-- Twitter Card data --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Atomic Design by Brad Frost"> <meta name="twitter:description" content="Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before. "> <meta name="twitter:creator" content="@brad_frost"> <!-- Twitter summary card with large image must be at least 280x150px --> <meta name="twitter:image:src" content="http://atomicdesign.bradfrost.com/images/social-card.jpg"> <!-- Open Graph data --> <meta property="og:title" content="Atomic Design by Brad Frost" /> <meta property="og:url" content="http://atomicdesign.bradfrost.com/" /> <meta property="og:image" content="http://atomicdesign.bradfrost.com/images/social-card.jpg" /> <meta property="og:description" content="Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before. " /> </head> <body class="title"> <img src="/images/book-cover.svg" alt="Atomic Design by Brad Frost" /> <div class="title-col-2"> <h1><cite>Atomic Design</cite> by <a href="http://bradfrost.com" rel="me">Brad Frost</a></h1> <p>We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help.</p> <p><em>Atomic Design</em> details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team's design and development workflow.</p> <div class="btn-group"> <a href="http://shop.bradfrost.com" class="btn">Order the e-book</a> <a href="/table-of-contents" class="btn">Read Now</a> </div> </div> </body> </html>