The Heart of Design

This is not a framework or a design system, but a starting point. This is a collection of concepts, SCSS, and Javascript bundled together to make prototyping faster and more efficient.

Its purpose is to speed up prototype building, and sacrifices load speed and efficiency.



If you reuse design processes and UI patterns over and over, why reinvent the wheel? Save yourself time and create a toolbox of reusable components. Every designer should have their own collection. You may use this for your projects, or use this as a starting point for your own.

The idea is to centralize thought, processes and learning from previous projects for the betterment of future projects. Standardizations, conventions, and checklists will reduce the amount of work, deduplicate thought, and reduce for future projects. Surgeons use checklists to save lives, so let's learn from them.


Design Guide

The design guide offers checklists and resources, and acts as a starting point for developing new brands, design systems, and design research. It's a collection of things to think about.

Style Guide

(Cheat Sheet)

The style guide is set up to provide assistance to prototypes and new projects with implementations to common UI patterns with SCSS and JS. Projects can import all of the style guide _stylecoeur, or selectively import certain components, then differentiate on top of the core.


This is a living, growing document. The Notes section denotes all the changes over time, and possible changes to come.


  • Design system
    • The comprehensive set of values, semantics, syntax, and context that form the foundation of a shared design language
  • Style guide
    • The physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it
  • Pattern library
    • An organized set of related, reusable components, often containing code examples, design guidelines, and use cases
  • Component
    • A self-contained and reusable pattern that represents a specific piece of interface or functionality

Refer to other style guides and design to gain useful insight.

Need to categorize further: style guide, design system, css framework, pattern library, standard; what is it?

Source: - UXPin Adele