Tons of resources to help you build faster. We provide multiple options for downloading Joystick, as well as specific downloads for fonts, presentations and color swatches. Check out this space for templates, themes, tools and more that you can use in your projects!
The Joystick Design Kits contain all the components you’ll find in our UI Framework. You’ll be creating pixel-perfect prototypes in no time at all. The Design Kit comes in two flavors: Sketch (Mac only) or Photoshop (PSD) - both just as powerful and just as consistent.
Sketch Design Kit Photoshop Design Kit
Don't have Sketch or Photoshop? Need something to help you skin or theme a vendor product? Grab the Joystick Theme Kit which includes the PDF version of the Joystick Design Guideline.
A full Joystick Craft Library is now available to make designing in Sketch faster and easier than ever. Craft is a suite of plugins for Sketch to let you design with real data in mind.
Read our guide on using the Joystick Craft Library.
Open Sans is the default font inside Joystick. It is a sans-serif typeface optimized for legibility across print, web, and mobile interfaces. Licensed under Apache License, version 2.0.
You can install the Joystick UI Framework using Bower Package Manager.
bower install --save https://stash.ea.com/scm/xd/joystick-design-system.gitYou must have access to EA's Stash in order to install with Bower.
While we've made the source Sass and compiled CSS files available to download here, we advise that you install in your project with Bower so that you can keep up to date with the latest changes.
Check out the release notes for details on the latest updates.
Joystick's UI Framework is powered by Sass, so if you’d prefer to work with the raw SCSS files, then this is the download for you.
In this package, you'll find:
scss/ directory - this directory contains all the Sass (.scss) files for Joystick. The main file is scss/joystick.scss.If you just want to include the compiled CSS and get to work building your HTML pages, this is the package for you.
In this package, you'll find:
joystick.css - Joystick's compiled CSS.joystick.min.css - Minified version of Joystick's CSS.For more information about the contents of these packages, please review our Installing and Using Joystick guide.
Joystick colors are based on a set of 10 default colors, from which we derive an additional 6 shades of each color. This provides us with a variety of colors while keeping each color in the same color hue family. You can import color swatches for use in design applications like Photoshop and Sketch. Place CLR files in the /Library/Colors/ folder and you're ready to go.
Need a boost with your presentations? We've created templates for PowerPoint and Keynote which include Joystick colors and great guidelines to make those decks stand out.