Atomic Design Memo

Style Guide Benefits

Promote consistency and cohesion across the entire experience (myriad of screen sizes, devices, browsers, and environments)
Speed up your team’s workflow, saving time and money.
Establish a more collaborative workflow between all disciplines involved in a project.
Establish a shared vocabulary between everyone in an organization, including outside vendors.
Provide helpful documentation to help educate stakeholders, colleagues, and even third parties.
Make cross-browser/device, performance, and accessibility testing easier.
Serve as a future-friendly foundation for teams to modify, extend, and improve on over time.

Brand identity guidelines: logos, typography, color palettes, messaging, illustrations...
Design language guidelines: general design direction, philosophy, and approach to specific projects or products.
Voice & tone style guide: how the company’s voice and tone should shift across a variety of scenarios.
Writing style guide: some guidelines and guardrails for contributing content.
Code style guide: conventions, patterns, and examples to write legible, scalable, maintainable code
Pattern Libraries: front-end style guides / UI libraries / component libraries

Atoms: basic html elements (ex: form labels, inputs, buttons, h1...)
Molecules: groups of UI elements functioning together as a unit (ex: form label + search input + button)
Organisms: complex UI components composed of groups of molecules, atoms & other organisms. These organisms form distinct sections of an interface (ex: a header)
Templates: component layout and content structure (generic content)
Pages: real content into templates and variations, to demonstrate the final UI and test the resilience of the design system.

Global elements: headers, footers, and other elements that are shared across the experience.
Navigation: primary navigation, footer navigation, pagination, breadcrumbs and anything that’s used to navigate.
Image types: logos, hero images, avatars, thumbnails, backgrounds...
Icons: every interface icons & their meanings.
Forms: inputs, text areas, select menus, checkboxes, switches, radio buttons, sliders...
Buttons: primary, secondary, big, small, disabled, active, loading, even text links.
Headings: h1, h2, h3, h4, h5, h6 and variations of typographic headings.
Blocks: callouts, summaries, ads, or hero units, blocks are collections of typographic headings and/or images and/or summary text.
Lists: unordered, ordered, definition, bulleted, numbered, lined, striped...
Interactive components: accordions, tabs, carousels, and modules with moving parts.
Media: video players, audio players and other rich media elements.
Third-party components: widgets, iframes, stock tickers, social buttons, invisible tracking scripts...
Advertising: all ad formats and dimensions.
Messaging: alerts, success, errors, warnings, validation, loaders, popups, tooltips, and so on.
Colors: all unique colors presented in the interface.
Animations: UI element that moves, fades, shakes, transitions, or shimmies across the screen.

Make a thing: start now and improve it.
Make it official: establish a design system team ; makers (visual, product, ux, frontend, qa) & users
Make it adaptable: count on change and establishing a clear governance plan.
Make it maintainable: easy to deploy & communicate about it (change logs, roadmap, success stories, tips and tricks...)
Make it approachable: create an easy-to-use style guide (documentation, logical naming, use case...) & educate (pair sessions, workshops, webinars, tutorials, onboarding...)
Make it a global project (issue tracker, chat, forum, suggestions, requests for feedback, surveys...)
Make it visible: make it public
Make it bigger: include brand, voice and tone, code, design principles, and writing guidelines.
Make it last by laying a solid foundation

BACK