CSCI 185: Fall 2022

Introduction to Programming for the Web

CSCI 185: Fall 2022

Fish by @akeatk

CSS Resources > 10. Style Guides

Style guides help developers to create useable, well-designed pages. They specify the rules that developers must follow (colors, textures, fonts, icons, etc.) when they implement web pages. Some examples of style guides include:

Organization Name of Design Brand
Salesforce Lightning Design System
Lonely Planet Style Guide
Alibaba Ant Design
Atlassian Design Guidelines
Firefox Photon Design
IBM Carbon Design
Intuit Harmony Design
Shopify Polaris
US Federal Government Web Design Standards
Accessibility Resources Web Accessibility

Most style guides include colors, textures, fonts, alignment, samples for a variety of common user interface elements, such as forms, images, headings, paragraphs, etc. As an activity, use this style guide template (also shown below) to select the colors, textures, and styles that instantiate your site’s look and feel. Try and make a few of them to experiment: