Specifications for look and feel by various tech companies, also providing secure UI libraries
Major organizations creating websites create a “Design System” publication which specifies the UX (User Experience) and provides tools for website designers to achieve a common UI (User Interface).
NOTE: Content here are my personal opinions, and not intended to represent any employer (past or present). “PROTIP:” here highlight information I haven’t seen elsewhere on the internet because it is hard-won, little-know but significant facts based on my personal research and experience.
UX includes more than colors, fonts (typography), icons (iconography), Design Tokens, line height, and other aspects of styling websites and Andriod/iOS mobile apps. Design Systems provide Guidelines on Voice and Tone, Animation, Accessibility, Layout, Navigation, Search, Messaging, Data Visualization, Localization, etc. Component blueprints provide examples to code components such as Accordion, Checkbox, etc. in the form of
- Bootstrap theme file
- Custom font files
- Sketch core library specifying fonts
- Sketch icon library
- Sketch Grid library
- Sketch illustration library
- Sample code to use the Design System components to build a website
To create design systems, many use the Tailwind CSS compiler. It’s called an “atomic/utility-first” CSS framework (UI-kit). It’s best installed via npm. For better performance, Tailwind removes unused CSS using PurgeCSS, which can be incorporated into Jekyll and themes.
https://github.com/alexpate/awesome-design-systems - a curated list of design systems, highlighting those with components, voice & tone, designers kit.
Salesforce has their Salesforce Lightning Design System (SLDS) at lightningdesignsystem.com
SAP Fiori at experience.sap.com/fiori-design announced in 2015.
Shopify’s “Polaris” Design System shows Ecommerce giant
Apple developer.apple.com/design for “Human Interface Guidelines” Apple hands out awards for those who designed apps using their system. Videos The sans-serif “San Francisco” is Apple’s system font across macOS, iOS, watchOS, and tvOS.
Google Material Design
https://helios.hashicorp.design is the Design System for constructing HashiCorp.com.
Many provide their Design System as a plugin for the Sketch graphic program on macOS.
Salesforce provides a SLDS Validator for VS Code at https://www.lightningdesignsystem.com/tools/validator/ which scans your markup, validates it against a database of guidelines/tips/gotchas/etc. extracted from the SLDS documentation, and offers suggestions on how to improve your code.
* Salesforce articles https://www.lightningdesignsystem.com/resources/articles/
Same with Figma
“think of a design token as a key that unlocks a specific value.”
Tokens are like nicknames for colors, opacity, shadows, etc. See VIDEO “What are Design Tokens”. Alias tokens are diverged Global Tokens made for context-specific purpose, to separate concerns.
The Future of Design Systems | Hayley Hughes | Airbnb | Awwwards Conf San Fran
Tokens are specified in SASS files, not token values.
A Measure of Line Height
USDS defines the “measure” token to standardize line heights:
- 1 = 44ex
- 2 = 60ex
- 3 = 64ex
- 4 = 68ex
- 5 = 72ex
- 6 = 88ex
- ‘none’ = no max width
The Red Dot Design Award (at red-dot.org) is a German international design prize awarded by Red Dot GmbH & Co. It is one of the most prestigious design awards worldwide and honors innovation, concepts and visions.
More on front-end styling
This is one of several topics:
- UI Design Systems
- Text Editors
- Markdown text for GitHub from HTML
- gRPC (g___ Remote Procedure Call)
- Front-end UI creation options
- Docusaurus static website generator
- Static websites
- JAM Stack Website Project Plan
- Jekyll Site Development
- Website styles
- Website Styling
- Email from website
- Search within Hyde format Jekyll websites
- Data Visualization using Tableau