Examples (183)

Real life pattern libraries, code standards documents and content style guides.

• Code For America

  • frontend
  • patterns

• Codepen's design patterns

  The design patterns used in Codepen

  • patterns

• Harry Roberts's CSS Guidelines

  By Harry Roberts

  High-level advice and guidelines for writing sane, manageable, scalable CSS

  • code

• Lonely Planet

  • frontend
  • patterns

• Mailchimp's Pattern Library

  • frontend
  • patterns

• Mailchimp's Voice and Tone

  By Mailchimp

  • voiceandtone
  • writing
  • designlanguage

• Mapbox

  An extensive guide featuring HTML and CSS patterns, a writing guide, and tutorials for implementation.

  • frontend
  • code
  • writing
  • patterns

• Mark Brown's Standards Guidelines

  By Mark Brown

  To aid a shared understanding of front-end development best practice at PUP.

  • code
  • frontend

• Max Quattromani

  • frontend
  • patterns

• Salesforce

  • designlanguage
  • frontend
  • patterns

• Sass Style Guide

  By Chris Coyier

  Chris Coyier’s personal style guide for writing Sass

  • code
  • frontend

• South Tees Hospital

  A style guide for an NHS hospital’s website

  • frontend
  • patterns

• Starbucks

  • frontend
  • patterns

• U.S. Design Standards

  Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites

  • frontend
  • patterns
  • code

• Yelp

  • frontend
  • patterns

• 18F Frontend Guides

  • patterns
  • 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

  • frontend
  • patterns

• A List Apart Style Guide

  • writing
  • voiceandtone
  • patterns

• Adobe Brand Guidelines

  • branding

• Airbnb JavaScript Styles

  • javascript
  • css
  • sass
  • ruby

• Alberta Government Brand Identity

  The Alberta Government Corporate Identity Manual.

  • branding

• Anna Debenham's Style Guide (Jekyll)

  Anna Debenham’s Jekyll-based starting point for building a Front-End style guide.

  • frontend
  • jekyll

• Apple OS X Human Interface Guidelines

  By Apple

  Apple provides UI design guidelines, design strategies, and patterns for designing for OS X.

  • designlanguage
  • patterns

• Apple Watch Design Guidelines

  By Apple

  Apple lays out the design language and pattern recommendations for Apple Watch.

  • designlanguage
  • patterns

• Astrum

  Astrum is a lightweight pattern library designed to be included with any web project.

  • frontend
  • patterns

• Atlassian Product Design Guidelines

  • designlanguage
  • frontend
  • patterns

• 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.

  • code
  • patterns
  • designlanguage
  • branding

• BAgel

  British Airways’s Global Experience Language

• BBC GEL

  The GEL (Global Experience Language) guidelines are a reference point for designing BBC services across Web, Mobile, iPTV and Tablet.

  • designlanguage
  • branding
  • frontend
  • patterns

• BBC Programmes Styleguide

  • frontend
  • patterns

• Barnard Levit Style Guide

  Technical reference for all the design elements that make up the Barnard Levit website.

  • frontend
  • patterns

• Barricade Style Guide

  • branding
  • frontend
  • code
  • patterns

• Ben Brignell

  • frontend
  • patterns
  • jekyll

• Blackboard

  Blackboard site intended to catalog and showcase their design work, and offer extensible design elements for use by their partners and developer network.

  • frontend
  • designlanguage
  • patterns

• Bookatable

  • frontend
  • patterns

• Boy Scouts of America Brand Identity

  PDF document for maintaining the Boy Scouts of America brand.

  • branding

• Brand Style Guide Examples

  • roundup

• Bristol City Council Pattern Library

  Pattern library and digital style guide for Bristol City Council.

  • code
  • frontend
  • patterns

• British Railways Corporate Identity Manual

  • branding
  • designlanguage
  • patterns

• Buffer Style Guide

  • frontend
  • patterns

• Buzzfeed style guide

  Writing guidelines for Buzzfeed content

  • writing

• 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.

  • branding
  • frontend
  • code
  • patterns

• CMS.gov UI Components

  Assets Framework of the Centers for Medicare & Medicaid Services

  • frontend
  • code
  • patterns

• Carnegie Mellon Brand Guidelines

  • branding

• Ceasefire Oregon Style Guide

  Pattern library and style guide for Ceasefire Oregon.

  • code
  • frontend
  • patterns

• CenturyLink Cloud Pattern Library

  • frontend
  • patterns
  • code

• Chameleon Living Styleguide

  A collection of front-end components and guidelines used across Pusher.

  • frontend
  • designlanguage
  • code
  • livingstyleguide
  • patterns

• Channel 4 Brand Identity

  Channel 4 Identity Style Guide with visual guidelines.

  • branding
  • voiceandtone

• Charity Water Brand Guidelines

  • branding

• Chris Burnell’s Style Guide

  • frontend
  • jekyll

• 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.

  • frontend
  • patterns

• CloudFlare UI Framework

  cf-ui is an open source set of over 50 UI element packages used to build UIs at CloudFlare

  • backend
  • designlanguage
  • code
  • patterns

• Co-op Design Manual

  Resources and guidelines to create familiarity across Co-op services.

  • frontend
  • voiceandtone
  • writing
  • designlanguage
  • patterns

• Code Guide by @mdo

  By Mark Otto

  Standards for developing flexible, durable, and sustainable HTML and CSS.

  • code
  • frontend

• Dan Eden Style Guide

  A demonstration of visual and writing style for a personal website.

  • patterns
  • voiceandtone
  • writing

• Data Visualization Style Guide for the Sunlight Foundation

  By Amy Cesal/ Sunlight Foundation

  Guidelines for what charts, graphs, and other visualizations should look like

  • branding
  • designlanguage

• Dave Shea's Markup Guide

  • patterns

• 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.

  • frontend
  • patterns

• DeviantArt Brand Guidelines

  By Apple

  DeviantArt unveils its new branding and vision.

  • branding
  • voiceandtone
  • designlanguage

• Disqus Brand and Style Guide

  By Disqus

  Guidelines for building your own community and discussion applications using the Disqus API.

  • branding
  • frontend

• DoSomething.org pattern library

  • patterns

• Dough by Money Advice Service

  An accessible, fully tested and extensible component library from the Money Advice Service.

  • frontend
  • patterns

• Dropbox branding

  Branding guidelines for using the Dropbox logo

  • branding

• Drupal Content Style Guide

  By Drupal

  • code
  • frontend
  • branding
  • writing

• Dubizzle

  Dubizzle’s beliefs, voice, tone & the way they look

  • branding
  • frontend
  • voiceandtone
  • writing
  • designlanguage
  • patterns

• Editorially

  • frontend
  • patterns

• Ellucian Style Guide

  A resource for creating a consistent visual language for Ellucian Applications. Documentation and resource site for the Ellucian Design System.

  • frontend
  • code
  • patterns
  • designlanguage

• Envato Market Structure Styleguide

  By Envato

  A special breed of living styleguide, designed to document the UI logic and all possible permutations of the UI.

  • frontend

• EstateSales.NET

  By Vintage Software

  Style Guide for the EstateSales.NET website.

  • frontend
  • patterns
  • code

• Eurucamp 2014 Living Style Guide

  By Nico Hagenburger

  Front-end style guide for the Eurucamp 2014—including complete source code on Github.

  • branding
  • frontend
  • code
  • patterns

• 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.

  • frontend
  • javascript
  • css
  • code
  • components
  • templates
  • patterns

• Facebook Brand Guidelines

  • brand

• Family Search Styleguide

  • frontend
  • patterns

• Fellowship One Design Patterns and Code Standards

  • frontend
  • code
  • patterns

• Fifty-Three Website Typography

  • patterns

• Fontshop

  • patterns

• Frend

  A collection of accessible, modern front-end components.

  • code
  • frontend
  • patterns

• Frisbee Fodder

  By Ben Brignell

  Web styles and comic panel patterns

  • jekyll
  • writing
  • frontend
  • patterns

• Front End Dev Guidelines

  By Ashley Nolan & Zander Martineau

  • code

• Front-end Code Standards & Best Practices

  By Isobar

  • code
  • frontend

• 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.

  • branding
  • frontend
  • patterns
  • writing

• Frost Finery

  • frontend
  • patterns

• FutureLearn

  • patterns

• GOV.UK elements

  Layout, typography, colour, images, icons, forms, buttons and data

  • patterns

• GOV.UK's Colour Scheme

  The colour swatches used across GOV.UK

  • patterns

• GOV.UK's Content style guide

  By GOV.UK

  Recommendations on writing content on GOV.UK’s sites

  • voiceandtone
  • writing
  • designlanguage

• GitHub Styleguide

  Includes links to the Github living CSS styleguide, JavaScript styleguide, and recommendations on how to write Ruby code.

  • code
  • patterns

• Google Android Developers Design Portal

  Android Design portal with guidelines for Android Jelly Bean.

  • designlanguage
  • patterns

• Google HTML/CSS Style Guide

  By Google

  A CSS/HTML style guide rather than pattern portfolio, but still very useful.

  • code

• Google Material Design

  By Google

  Google lays out their design language for Material Design, which aims to unify the design across all their properties.

  • designlanguage
  • patterns

• Gravity Department: Field Manuals

  Field Manuals are guides for trailblazing the web. They document the principles, standards, and practices that Gravity Department works by.

  • code
  • frontend
  • backend

• Greenpeace

  Includes excellent documentation, principles, and a working prototype.

  • patterns

• Hailo Web UI

  • frontend
  • patterns

• Harmony

  By Intuit

  • voiceandtone
  • patterns
  • frontend
  • designlanguage

• Healthcare.gov Styleguide

  The HealthCare.gov Styleguide provides an overview of styles, page layouts, assets, & editorial guidelines for HealthCare.gov.

  • frontend
  • patterns

• Heroku's Purple UI

  A UI kit for all of Heroku’s digital properties.

  • frontend
  • code
  • patterns

• Homify Living Style Guide

  By Nico Hagenburger

  Front-end style guide for Homify—an online resource for interior design

  • frontend
  • code
  • patterns

• IBM Design Language

  A set of living guidelines for designing experiences and products for the IBM brand.

  • designlanguage
  • frontend
  • patterns

• Idiomatic CSS

  By Nicolas Gallagher

  A living document by Nicolas Gallagher that outlines how he writes his CSS

  • code
  • frontend

• Import.io Style

  The Import.io styleguide and component library, built on top of bootstrap.

  • frontend
  • patterns

• Jobs UI

  A living style guide and pattern library for Jobs.cz.

  • frontend
  • patterns

• Khan Academy Coding Style Guides

  • coding

• Lasse Diercks Pattern Library

  Really small Pattern library which holds some colors, single components and even some layout components.

  • patterns
  • frontend

• MYOB Design

  • frontend
  • patterns
  • branding

• Mailchimp Brand Assets

  • branding
  • patterns

• Mailchimp Writing Style Guide

  • writing
  • voiceandtone

• Marrel.css

  • frontend
  • code
  • patterns

• 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.

  • branding
  • frontend
  • backend
  • designlanguage
  • code
  • patterns

• Microsoft design language

  Design language for creating Microsoft Windows apps.

  • designlanguage
  • frontend
  • patterns

• Money Advice Service

  The internal Money Advice Service (MAS) HTML, CSS and JavaScript style guide.

  • code
  • frontend
  • patterns

• Mozilla Style Guide

  By Mozilla

  • branding

• MyGov.Scot Design Style Guide

  A guide outlining design thinking and approach, covering Grid, Typography and Link language, with common element inline examples.

  • patterns

• NASA Graphics Standards Manual

  By NASA

• National Geographic Style Manual

  The National Geographic Style Manual is a guide to preferred National Geographic Society style and usage.

  • voiceandtone
  • writing

• Netshoes

  A style guide for Netshoes website

  • frontend
  • scm
  • best-pratices

• Next

  The style guide for Next’s website.

  • frontend
  • patterns

• Nib Pattern Library

  Nib Private Health Insurance pattern library for the web.

  • branding
  • frontend
  • web

• Nordnet

  Here you will find everything related to the Nordnet brand

  • frontend
  • patterns

• Office UI Fabric

  The front-end toolkit that makes your app or add-in blend seamlessly into Office.

  • frontend
  • patterns
  • code

• OpenTable Brand

  A “brand story” with guidelines for language, color, typography and branding.

  • branding
  • designlanguage
  • patterns
  • writing

• 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.

  • frontend
  • patterns
  • branding

• Ordnance Survey - Cartographic Design and Development

  Cartographic design principles and resources from Ordnance Survey.

  • branding
  • voiceandtone
  • designlanguage
  • patterns

• Origami

  Origami is a group of services, modules and tools help build websites for the Financial Times.

  • code
  • frontend
  • patterns

• Paul Robert Lloyd

  • frontend
  • patterns

• Pivotal UI

  Everything to start building UI at Pivotal.

  • frontend
  • patterns

• Pivotal Web Services

  Developer console style guide

  • frontend
  • patterns

• REI Co-op Pattern Library

  By Michael Hewson

  REI’s pattern library

  • frontend
  • patterns

• Rackspace

  Canon. A style guide for Rackspace products.

  • code
  • frontend
  • patterns

• Relais & Châteaux

  Front-end style guide for Relais & Châteaux website.

  • frontend
  • designlanguage
  • code
  • patterns

• SAP Fiori Design Guidelines

  The SAP Fiori Design Guidelines

  • code
  • frontend

• Sass Guidelines

  By Hugo Giraudel

  An opinionated styleguide for writing sane, maintainable and scalable Sass.

  • code
  • frontend

• Sass Website Style Guide

  By Team Sass

  Style guide for the Sass website

  • code
  • frontend

• Scooter

  By Dropbox

  SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox

  • frontend
  • patterns

• Setting up a Living Styleguide in Jekyll

  How to have a very component-ized approach driven by a style guide in Jekyll.

  • frontend
  • patterns

• Sipgate Style Guide

  • branding
  • frontend
  • patterns

• Sky Web Toolkit

  • frontend
  • patterns

• Skype Brand Identity

  A guide to the basic elements that make up Skype.

  • branding

• Snyk Styleguide and Pattern Library

  • frontend
  • code
  • patterns

• Solid

  Solid is BuzzFeed’s CSS style guide and component library.

  • code
  • patterns
  • branding

• Spotify Brand Identity

  The Spotify Identity Manual.

  • branding
  • voiceandtone

• Stanford HTML & CSS Style Guide

  • frontend
  • patterns

• Swiss confederation digital guideline

  • frontend
  • code
  • patterns

• Texas State Style Guide

  Texas State University style guide

  • branding
  • patterns
  • frontend
  • voiceandtone

• The Guardian Pasteup

  • frontend
  • code
  • patterns

• The Times Style Guide

  The Times and Sunday Times digital style guide.

  • frontend
  • code
  • patterns

• ThinkUp Code style guide

  By Gina Trapani

  • code
  • frontend

• Time Warner Cable

  Time Warner Cable’s style guide to ensure brand and code consistency.

  • frontend
  • patterns
  • branding

• Tourism Whistler Styleguide

  • frontend
  • patterns

• 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.

  • designlanguage
  • frontend
  • code
  • patterns

• Trello CSS Guide

  Trello’s guidelines on writing CSS

  • code

• Tuts+ Style Guide

  A voice, tone, and style guide to be used across Tuts+.

  • writing
  • voiceandtone

• USPTO UI Design Library

  The USPTO’s open source UI style guide, pattern library, and Bootstrap theme.

  • frontend
  • patterns

• UXcellence Style Guide

  • branding
  • designlanguage
  • frontend
  • patterns

• Uber Brand Guidelines

  By Uber

  Brand assets and guidelines for Uber.

  • branding

• Ubuntu Design Guidelines

  By Ubuntu

  Brand assets and web guidelines for Ubuntu

  • branding
  • frontend

• Ubuntu Vanilla Framework

  By Ubuntu

  Pattern library for Ubuntu

  • patterns
  • frontend

• University of Edinburgh Brand Guidelines

  Pretty thorough roundup of branding - moving towards practical tools.

  • branding

• University of Manchester Brand Guidelines

  • branding

• University of Oxford

  The University’s style guide has a “Digital” section detailing the building blocks of their site.

  • branding
  • frontend
  • code
  • patterns

• 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.

  • frontend
  • patterns

• VMware Clarity Design System

  VMware’s Clarity Design System: UX Guidelines, HTML/CSS Framework, and Angular 2 Components. Fully open source.

  • frontend
  • backend
  • designlanguage
  • code

• 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.

  • typography
  • frontend
  • branding

• Walmart

  A style guide for Walmart’s website

  • frontend
  • patterns

• 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.

  • writing
  • frontend

• West Virginia University brand guidelines

  • branding
  • patterns

• Westpac GEL

  The Global Experience Language (GEL) is our single source of truth for creating consistent, coherent customer experiences across our entire digital landscape.

  • branding
  • frontend
  • designlanguage
  • code
  • patterns

• WhatsApp Brand Guidelines

  Brand Guidelines for WhatsApp

  • frontend
  • code
  • patterns

• Winstrap

  The Bootstrap theme for Microsoft design language.

  • branding
  • frontend
  • designlanguage
  • code
  • patterns

• WooCommerce

  • branding
  • frontend
  • patterns

• WooThemes Style Guide

  Brand assets and guidelines.

  • branding
  • designlanguage

• WordPress Brand Guidelines

  • branding

• WordPress Coding Standards

  A baseline for contributing CSS, HTML, JavaScript, and PHP to WordPress Core

  • code
  • frontend

• WordPress Design Handbook

  Design language guidelines for all that is WordPress.com branded.

  • frontend
  • patterns
  • branding

• eBay MIND Patterns

  Frontend coding patterns (and anti-patterns) by eBay.

  • html
  • css
  • javascript

• edX Pattern Library

  The Visual, UI, and Front End styleguide for edX’s applications

  • code
  • frontend
  • patterns

• englishextra

  A UI style guide for a static web resource englishextra.github.io.

  • frontend
  • colors
  • typography

• iOS Design Guidelines

  By Ivo Mynttinen

  Ivo Mynttinen articulates iOS’s design language and interface patterns.

  • designlanguage
  • patterns

• michaeledelstone.com Style Guide

  Brief style guide for the personal website and portfolio of a designer named Michael Edelstone.

  • patterns
  • designlanguage
  • branding

• oli.jp style guide

  A style guide for Oli Studholme’s personal site

  • frontend
  • code
  • patterns

• olivermak.es (Oliver Pattison)

  A Jekyll-based collection of Markdown/HTML responsive patterns for a personal website.

  • code
  • frontend
  • patterns

• uSwitch styleguide (uStyle)

  A style guide for uSwitch’s website. Includes brand and design guidelines, and a pattern library.

  • frontend
  • design