Skip to main content

Illinois State's Design System

A design system is a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital products. What makes Illinois State's system unique from others is how we choose to create, capture, share, and use the patterns. The goal is to create a common user experience across the entire University web presence.

If you are familiar with a style guide laying out branding guidelines for printed materials, this website acts in much of the same way for the University's digital products.

Getting Started

  • Foundation: Encapsulates what a website or digital product should look and feel like.
  • Guidelines: Our system's purpose and principles.
  • Pattern Library: All currently available web patterns with guidelines and code.
  • Contribute: Help the team expand our pattern offerings.
  • Contact: Report bugs or get implementation assistance.
  • Resources: Learn more about design systems.

Common Patterns and Guidelines

Latest Releases

  • 2.0.1 August 31, 2020
    • Cleaned up content in Foundation section
    • Updated intro text for several patterns
    • Added several additional utility patterns
    • Cleaned up a typos and other discrepancies in the code
  • 2.0.0 July 8, 2020
    • Major launch to PROD
  • 2.0.0-beta.3 Early July, 2020
    • Sections and content added
  • 2.0.0-beta.2 Late June, 2020
    • Sass rendering added back to the design system
    • Ported and updated patterns from previous design system framework
    • Added several additional patterns
  • 2.0.0-beta.1 June 18, 2020
  • 2.0.0-beta Early June, 2020
    • Theo based design tokens from previous work added back
    • Initial chrome created
    • Created CI for deploying to DEV / PROD
    • Left nav change from global to section based scope
  • 2.0.0-alpha April 2020
    • Abandoned Pattern Lab due to instability and lack of updates and support
    • Initial release of custom built framework, code name: Cardinal Design System
    • Utilizes CLI and Node.js packages for building the design system and automating tasks
    • Main packages include: sassdoc, node-sass, theo, and nunjucks
  • 1.2.0 January 2020
    • Button partials created and pattern updated
    • Cleaned up and updated the web fonts
    • Added Open Sans Condensed Light font face
    • Updated image aspect ratios
  • 1.1.0 August 2019
    • Added photography standards
    • Added web logo page
    • Simplified spacing information
    • Created partials for all icons
    • Added link to homepage on each style guide page
    • Updated cards pattern
  • 1.0.0 July 2019