Welcome to the Spark Design System, a product of Quicken Loans. Spark Design System is a system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products. Spark's patterns are separated into two groups:

• Spark-Core

  Spark-Core contains the basic patterns and components that make up the visual and interaction design of the Quicken Loans family of Fintech products. If your application is expected to look and behave like a Quicken Loans application, this package is the starting point. When the Spark-Core Sass and JS setup files are imported into an application you will receive code for all of Spark-Core.

  The following components are in Spark-Core:

  • Accordions
  • Alerts
  • Buttons
  • Dividers
  • Footer
  • Icons
  • Inputs
  • Links
  • Lists
  • Masthead
  • Modals
  • Navigation
  • Pagination
  • Promo
  • Tables
  • Tabbed Navigation
  • Toggle

• Spark-Extras

  Spark-Extras are components that may not be needed by all applications, but are consistent with the style of Spark Core. Spark-Extras Sass and JS are imported into an application on an individual basis. You import the components that you need.

  The following components are available as Spark-Extras:

  • Card
  • Dictionary
  • Highlight Board
  • Awards