Examples (240)
Real life pattern libraries, code standards documents and content style guides.
-
Carbon Design System
Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI.
-
Code For America
-
Codepen's design patterns
Codepen’s old design patterns, now deprecated for fractal.build.
-
Finastra Design System
Design and build the future of finance. From prototype to product, build ready to use financial applications faster and better with our design system.
-
Harry Roberts's CSS Guidelines
High-level advice and guidelines for writing sane, manageable, scalable CSS
-
Lonely Planet
-
Mailchimp's Pattern Library
-
Mailchimp's Voice and Tone
-
Mark Brown's Standards Guidelines
To aid a shared understanding of front-end development best practice at PUP.
-
Max Quattromani
-
Salesforce
-
Sass Style Guide
Chris Coyier’s personal style guide for writing Sass
-
South Tees Hospital
A style guide for an NHS hospital’s website
-
Starbucks
-
U.S. Web Design System
A design system for the U.S. federal government. The U.S. Web Design System makes it easier to build accessible, mobile-friendly government websites for the American public.
-
Yelp
-
-
18F Frontend Guides
-
1982 DC Comics Style Guide
Pages from the highly sought after, but never published for sale, 1982 DC Comics Style Guide. These images were used for marketing and licensing while also serving as reference material for other artists.
-
A List Apart Pattern Library
-
A List Apart Style Guide
-
A11Y Style Guide
-
Adobe Brand Guidelines
-
Airbnb JavaScript Styles
-
Alberta Government Brand Identity
The Alberta Government Corporate Identity Manual.
-
Anna Debenham's Style Guide (Jekyll)
Anna Debenham’s Jekyll-based starting point for building a Front-End style guide.
-
Apple OS X Human Interface Guidelines
Apple provides UI design guidelines, design strategies, and patterns for designing for OS X.
-
Apple Watch Design Guidelines
Apple lays out the design language and pattern recommendations for Apple Watch.
-
Atlassian Design Language
-
Audi Brand Appearance
Digital first: The visual appearance of Audi is no longer a static structure: it’s a living interface that interacts with human beings.
-
Australian Government Design System
Uniting teams that create digital services, through inclusive design, open-source code and shared insights.
-
Auth0
Styleguide holds values, patterns, and specific components that repeat across pages, enabling designers and engineers quickly to reuse them on any product without worrying about markup or CSS.
-
Awesome Design Systems
-
BBC GEL
The GEL (Global Experience Language) guidelines are a reference point for designing BBC services across Web, Mobile, iPTV and Tablet.
-
BBC Programmes Styleguide
-
Backpack
Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
-
Barnard Levit Style Guide
Technical reference for all the design elements that make up the Barnard Levit website.
-
Barricade Style Guide
-
Beeline Design System
A single location for all Beeline product design needs.
-
Ben Brignell
-
Blackboard
Blackboard site intended to catalog and showcase their design work, and offer extensible design elements for use by their partners and developer network.
-
Bonsai Style Guide
-
Bookatable
-
Boy Scouts of America Brand Identity
PDF document for maintaining the Boy Scouts of America brand.
-
Boy Scouts of America Brand Identity
“With new digital-specific guidelines, the BSA brand identity guide contains all the tools you need to craft messages and materials that resonate with today’s families while keeping true to the BSA brand.”
-
Brainly Style Guide
-
Brand Style Guide Examples
-
Bristol City Council Pattern Library
Pattern library and digital style guide for Bristol City Council.
-
British Railways Corporate Identity Manual
-
Buffer Style Guide
-
Buzzfeed style guide
Writing guidelines for Buzzfeed content
-
CFPB Design Manual
The Design Manual of the Consumer Financial Protection Bureau, a U.S. federal government agency, documents their design principles, visual identity standards, and code snippets for common user interface elements.
-
CMS.gov UI Components
Assets Framework of the Centers for Medicare & Medicaid Services
-
Carnegie Mellon Brand Guidelines
-
Ceasefire Oregon Style Guide
Pattern library and style guide for Ceasefire Oregon.
-
CenturyLink Cloud Pattern Library
-
Chameleon Living Styleguide
A collection of front-end components and guidelines used across Pusher.
-
Channel 4 Brand Identity
Channel 4 Identity Style Guide with visual guidelines.
-
Chris Burnell’s Style Guide
-
City of Philadelphia Pattern Portfolio
The official Phila.gov Pattern Portfolio.
-
Clearleft
A basic guide to semantic markup used on Clearleft’s website, including usage examples.
-
CloudFlare UI Framework
cf-ui is an open source set of over 50 UI element packages used to build UIs at CloudFlare
-
Co-op Design Manual
Resources and guidelines to create familiarity across Co-op services.
-
Code Guide by @mdo
Standards for developing flexible, durable, and sustainable HTML and CSS.
-
Dan Eden Style Guide
A demonstration of visual and writing style for a personal website.
-
Data Visualization Style Guide for the Sunlight Foundation
Guidelines for what charts, graphs, and other visualizations should look like
-
Dave Shea's Markup Guide
-
Dell Design Library
Dell’s modular design system used by Dell.com user experience designers and architects, web developers and content strategists, as well as their agency partners.
-
Deque Cauldron
A fully accessible HTML, CSS, and Javascript front-end framework for creating web and mobile applications.
-
Derek Mei Personal Identity Branding and Style Guide
-
DeviantArt Brand Guidelines
DeviantArt unveils its new branding and vision.
-
Disqus Brand and Style Guide
Guidelines for building your own community and discussion applications using the Disqus API.
-
DoSomething.org pattern library
-
Dropbox branding
Branding guidelines for using the Dropbox logo
-
Drupal Content Style Guide
-
Dubizzle
Dubizzle’s beliefs, voice, tone & the way they look
-
Duet
Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences.
-
EPFL Elements styleguide
-
Editorially
-
Envato Market Structure Styleguide
A special breed of living styleguide, designed to document the UI logic and all possible permutations of the UI.
-
EstateSales.NET
Style Guide for the EstateSales.NET website.
-
Eurostar GLU
-
Eurucamp 2014 Living Style Guide
Front-end style guide for the Eurucamp 2014—including complete source code on Github.
-
ExpressionEngine Style Guide
UI style guide for ExpressionEngine
-
FRBSF.org Pattern Library
This pattern library is a UI/UX style guide that provides pattern documentation for designers, developers, and web producers creating assets for the SF Fed’s website at FRBSF.org.
-
Facebook Brand Guidelines
-
Family Search Styleguide
-
Fellowship One Design Patterns and Code Standards
-
Fifty-Three Website Typography
-
Fleet – City of Boston pattern library
Pattern library for the City of Boston. It’s currently a work in progress, but we’re adding to it every day. Currently, it powers much of Boston.gov and all of Boston’s 311 web portal.
-
Fontshop
-
Forma 36
Forma 36 is an open-source design system by Contentful created with the intent to reduce the overhead of creating UI by providing tools and guidance for digital teams.
-
Formstack Brand Manual
-
Frend
A collection of accessible, modern front-end components.
-
Frisbee Fodder
Web styles and comic panel patterns
-
Front End Dev Guidelines
-
Front-end Code Standards & Best Practices
-
Frontify
We use this style guide not only as a daily reference for ourselves or when working with externals, but also as a playground for new features and content blocks of the Frontify Style Guide editor.
-
Frost Finery
-
FutureLearn
-
GOV.UK Design System
A design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done. -
GOV.UK elements
Layout, typography, colour, images, icons, forms, buttons and data
-
GOV.UK's Colour Scheme
The colour swatches used across GOV.UK
-
GOV.UK's Content style guide
Recommendations on writing content on GOV.UK’s sites
-
GitHub Styleguide
Includes links to the Github living CSS styleguide, JavaScript styleguide, and recommendations on how to write Ruby code.
-
Google Android Developers Design Portal
Android Design portal with guidelines for Android Jelly Bean.
-
Google Developer Documentation Style Guide
This style guide provides a set of editorial guidelines for anyone writing developer documentation for Google-related projects.
-
Google HTML/CSS Style Guide
A CSS/HTML style guide rather than pattern portfolio, but still very useful.
-
Google Material Design
Google lays out their design language for Material Design, which aims to unify the design across all their properties.
-
Gravity Department: Field Manuals
Field Manuals are guides for trailblazing the web. They document the principles, standards, and practices that Gravity Department works by.
-
Greenpeace
Includes excellent documentation, principles, and a working prototype.
-
GumGum
GumGum (Computer Vision Company) Component library -
Hailo Web UI
-
Harmony
-
Healthcare.gov Styleguide
The HealthCare.gov Styleguide provides an overview of styles, page layouts, assets, & editorial guidelines for HealthCare.gov.
-
Heroku's Purple UI
A UI kit for all of Heroku’s digital properties.
-
Homify Living Style Guide
Front-end style guide for Homify—an online resource for interior design
-
Honeycomb Redgate's Design System
-
Hudl Design System
-
IBM Design Language
A set of living guidelines for designing experiences and products for the IBM brand.
-
Idiomatic CSS
A living document by Nicolas Gallagher that outlines how he writes his CSS
-
Infor Design System
-
Jobs UI
A living style guide and pattern library for Jobs.cz.
-
Jøkul design system
Jøkul is the design system built and used by Fremtind insurance in Norway.
-
Khan Academy Coding Style Guides
-
Lasse Diercks Pattern Library
Really small Pattern library which holds some colors, single components and even some layout components.
-
Lost My Name
The Design System used throughout the digital design & frontend engineering teams at Lost My Name, complete with design principles and an interactive component library. -
MAIF Design System
Branding, interface, and design elements (French)
-
MYOB Design
-
Mailchimp Brand Assets
-
Mailchimp Writing Style Guide
-
Marrel.css
-
Marvel Styleguide
The Marvel styleguide, a central location where they house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more.
-
Mass.gov style guide
General rules for writing accessible and web-friendly content on mas.gov
-
Matthew Elsom's Jekyll Style Guide
A Jekyll-based tool that you can use to generate and document product or system user interface (UI) patterns in a simple Style Guide. -
Microsoft design language
Design language for creating Microsoft Windows apps.
-
Money Advice Service
The internal Money Advice Service (MAS) HTML, CSS and JavaScript style guide.
-
Montagne UI
Style Guide for Montagne Outdoors
-
Morningstar Design System
-
Mozilla Style Guide
-
Mutual of Omaha Design Guide
-
MyGov.Scot Design Style Guide
A guide outlining design thinking and approach, covering Grid, Typography and Link language, with common element inline examples.
-
NASA Graphics Standards Manual
-
Nachos
Nachos is Trello’s design system (and also our favorite snack).
-
National Geographic Style Manual
The National Geographic Style Manual is a guide to preferred National Geographic Society style and usage.
-
Next
The style guide for Next’s website.
-
Nib Pattern Library
Nib Private Health Insurance pattern library for the web.
-
Nordnet
Here you will find everything related to the Nordnet brand
-
Office UI Fabric
The front-end toolkit that makes your app or add-in blend seamlessly into Office.
-
Opattern Design System
-
OpenTable Brand
A “brand story” with guidelines for language, color, typography and branding.
-
Oracle Alta UI
The Oracle Alta UI is used to design and develop innovative applications for modern browsers, devices and systems, including Oracle Cloud products.
-
Ordnance Survey - Cartographic Design and Development
Cartographic design principles and resources from Ordnance Survey.
-
Origami
Origami is a group of services, modules and tools help build websites for the Financial Times.
-
PageUp Style Guide
-
PatternCSS
A Pattern Library consisting of every UI Component to build a consistent website.
-
Paul Robert Lloyd
-
Pega UX Design System
Pega’s design system is a scalable and complete design system for enterprise applications.
-
Perch UI Pattern Library
Perch CMS’s pattern library
-
Photon
-
Photon Design System
-
Pivotal UI
Everything to start building UI at Pivotal.
-
Pivotal Web Services
Developer console style guide
-
Plasma
-
Pluralsight Design System
The UI building blocks for creating a cohesive design across Pluralsight products.
-
Predix Design System
-
REI Co-op Pattern Library
REI’s pattern library
-
Rackspace
Canon. A style guide for Rackspace products.
-
Relais & Châteaux
Front-end style guide for Relais & Châteaux website.
-
Rivet
Indiana University’s design system for web application development
-
Royal Canin Design Language
Design system for Royal Canin
-
SAP Fiori Design Guidelines
The SAP Fiori Design Guidelines
-
Saskatchewan Government Style Guide
The Saskatchewan Government style guide
-
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass.
-
Sass Website Style Guide
Style guide for the Sass website
-
Scooter
SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox
-
Seeds by Sprout Social
Seeds is Sprout Social’s hub for creative documentation, tools and resources.
-
ServiceNow Design System
-
Setting up a Living Styleguide in Jekyll
How to have a very component-ized approach driven by a style guide in Jekyll.
-
Shopify Polaris
Shopify design system helps work to build a great experience for all of Shopify’s merchants.
-
Simon Owen Style Guide
-
Simon Owen's Style Guide
Simon Owen’s personal branded, Front-End style guide used at https://s10wen.com.
-
Sky Web Toolkit
-
Skype Brand Identity
A guide to the basic elements that make up Skype.
-
Smoothie
A deliciously scalable and adaptable stylesheet methodology
-
Snyk Styleguide and Pattern Library
-
Solid
Solid is BuzzFeed’s CSS style guide and component library.
-
Spark Design System
-
Spotify Brand Identity
The Spotify Identity Manual.
-
Stanford HTML & CSS Style Guide
-
Study Portals Styleguide
-
Studyportals Styleguide
With Studyportals Styleguide, we increase the website consistency and team efficiency by displaying our design principles, brand identity elements and website components. -
Swiss confederation digital guideline
-
TELUS Design System
-
Texas State Style Guide
Texas State University style guide
-
The Guardian Pasteup
-
The Times Style Guide
The Times and Sunday Times digital style guide.
-
ThermoFisher Scientific Style Guide
-
ThinkUp Code style guide
-
Time Warner Cable
Time Warner Cable’s style guide to ensure brand and code consistency.
-
Tourism Whistler Styleguide
-
Tradeshift UI
Tradeshift UI is a framework-agnostic JavaScript library and collection of design principles to help App developers to create cohesive user experiences and to provide reusable UI components.
-
Trello CSS Guide
Trello’s guidelines on writing CSS
-
Tuts Style Guide
A voice, tone, and style guide to be used across Tuts .
-
USPTO UI Design Library
The USPTO’s open source UI style guide, pattern library, and Bootstrap theme.
-
UXcellence Style Guide
-
Uber Brand Guidelines
Brand assets and guidelines for Uber.
-
Ubuntu Design Guidelines
Brand assets and web guidelines for Ubuntu
-
University of Edinburgh Brand Guidelines
Pretty thorough roundup of branding - moving towards practical tools.
-
University of Manchester Brand Guidelines
-
University of Oxford
The University’s style guide has a “Digital” section detailing the building blocks of their site.
-
Ushahidi Platform Pattern Library
The Ushahidi Platform Pattern Library defines their design system, is a central repository for front-end code, and serves as front-end documentation.
-
VMware Clarity Design System
VMware’s Clarity Design System: UX Guidelines, HTML/CSS Framework, and Angular 2 Components. Fully open source.
-
Vanilla Framework
Vanilla is a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.
-
Viljami S. Design's Style Guide
A living style guide that serves as a resource that helps to define a common visual language for the components of viljamisdesign.com.
-
Viljami Salminen’s Style Guide
A living user editable style guide that serves as a resource that helps to define a common visual language for the components of viljamis.com.
-
Walmart
A style guide for Walmart’s website
-
Web Experience Toolkit
Styleguides for the Web Experience Toolkit - an open source code library developed for/by the Government of Canada for use across all Government sites.
-
Weight Watchers
A living cross-platform styleguide with design principles, examples of illustration and tone
-
West Virginia University brand guidelines
-
Westpac GEL
The Global Experience Language (GEL) is our single source of truth for creating consistent, coherent customer experiences across our entire digital landscape.
-
WhatsApp Brand Guidelines
Brand Guidelines for WhatsApp
-
Wikimedia Design Style Guide
Design style guide for Wikipedia and other open-knowledge projects -
Wikimedia Foundation
The UI Style Guide from the folks who gave you Wikipedia and its sister sites. -
Winstrap
The Bootstrap theme for Microsoft design language.
-
WooCommerce
-
WooThemes Style Guide
Brand assets and guidelines.
-
WordPress Brand Guidelines
-
WordPress Coding Standards
A baseline for contributing CSS, HTML, JavaScript, and PHP to WordPress Core
-
WordPress.com Design Handbook
Design language guidelines for all that is WordPress.com branded.
-
Zach Leatherman
-
Zuto Style Guide
-
eBay MIND Patterns
Frontend coding patterns (and anti-patterns) by eBay.
-
edX Pattern Library
The Visual, UI, and Front End styleguide for edX’s applications
-
giffgaff's Design System
-
iOS Design Guidelines
Ivo Mynttinen articulates iOS’s design language and interface patterns.
-
michaeledelstone.com Style Guide
Brief style guide for the personal website and portfolio of a designer named Michael Edelstone.
-
oli.jp style guide
A style guide for Oli Studholme’s personal site
-
olivermak.es (Oliver Pattison)
A Jekyll-based collection of Markdown/HTML responsive patterns for a personal website.
-
uSwitch styleguide (uStyle)
A style guide for uSwitch’s website. Includes brand and design guidelines, and a pattern library.