About
Atoms
Molecules
Organisms
Overview
👋 Welcome to the Rise Vision Style Guide.

First things first

🚀 Mission & Purpose

This Style Guide exists so that we as Developers, Designers and PMs can be better aligned, more efficient, our development process can be shortened, and that we (as a whole) can present a consistent, holistic experience to our users (very important!).

⁉️ How this style guide is organized.

Much like our own natural universe, this style guide organizes design components as follows:

  • Atoms. Atoms are the basic, indivisible building blocks of this style guide. Examples of atoms are colors, grids, typography, etc.
  • Molecules. Atoms join together to form molecules. Think of molecules as reusable components that are functional. Examples of molecules are notifications, forms, navigational elements, etc.
  • Organisms. Atoms and molecules join together to form organisms. Organisms are slightly more complex, bigger chunks of the product. Examples of organisms are modals, headers, footers, etc.
  • Pages. Atoms, molecules, and organisms join together to form pages. Pages are complete, functional designs. Examples of pages are “the home page” and “the settings page.”

🤗 Collaboration

This is a living, collaborative style guide. It welcomes updates, edits, criticisms and recommendations. Also, if this Style Guide doesn’t address a particular design situation that you find yourself in, send Jason a message and let’s talk it through. Although … the purpose of this Style Guide is to make that conversation less and less necessary. Also, please keep in mind that this Style Guide isn’t meant to be an exhaustive resource nor is it meant to enumerate every possible design scenario. That would defeat the purpose of having a guide, right? 😉

🎨 Designers!

This Style Guide also lives as a master Sketch file in Abstract. Use it (or recommendation changes!) when working on designs for the Rise Vision Web App.

Other Stuff

Requirements

We decided that the requirements for this living guide are as follows:

  • Use only Jekyll as a pre-requisit
  • Use HMTL/CSS/JS to build atoms, molecules, organisms and pages. (we called these ‘design components’)
  • Track the ‘maturity’ of a design component - i.e. is it ready to use, or not?
  • Automatically add all design components to a ‘Roadmap’
  • Enable simple documentation for developers, designers and product owners to use
  • Provide a style guide container or ‘shell’ that is unobtrusive and easy to visually customize

🆘 Help

To get started using this tool check out these useful pages:

Colophon

This Style Guide was built using Jekyll, it’s design principle is based on the US Design Standards, and the css architecture is based on the Simple SCSS Playbook.

View License File

A few parts of this project are not in the public domain:

  • HK Grotesk font files included in the styleguide/fonts directory were extracted from Hanken, copyright Alfredo Marco Pradil and Stefan Peev.
  • jQuery [jquery-2.1.4.min.js] was extracted from jQuery, copyright The jQuery Foundation.
  • Roboto font files in fonts/roboto were extracted from Google Fonts, copyright Christian Robertson.
  • Normalize [_normalize.scss] was extrcted from Normalize.css, copyright Nicolas Gallagher and Jonathan Neal.

Please check with the respective rights holders for license details.