How to Use

Should I use this?

This design system is intended to be implemented in different ways depending on the type of project.

• Prototypes and Internal-Facing Projects (such as the Strategies Internal Site or the Image Geolocator) will implement this design system and all of its components directly; they should be fully Sasaki-branded.
• Products (such as CoMap) will use this design system as a starting point to develop their own distinct brand that is visually related but not exactly the same.
• External Websites (such as Understanding Homelessness or MLK) will embody the design vision principles shown below, but otherwise will develop a distinct brand that may or may not be visually similar to this design system.

If you're unsure, please contact Gretchen or Brad with any questions about which approach is most appropriate for your project.

Get Up and Running

There are three stylesheets that comprise the Strategies design system: _core, _fonts, and _styles. The CORE file contains only mixins and variables and the FONTS file contains only font imports, while the STYLES file includes all applied definitions. To use the full design system, include all three files in your project; this is best when starting a new project. When retrofitting an existing project, start with only CORE and FONTS.

To install / update in your project, use NPM:

• Run npm login using sasaki-dev credentials to access private package
• Run npm i @sasaki-dev/design-system to install

To reference in your project:

• With a Webpack (e.g., React) @import '~/@sasaki-dev/design-system/styles/styles';
• With SCSS (without webpack) @import 'node_modules/@sasaki-dev/design-system/styles/styles';

You can also download the latest directly here: CORE, FONTS, and STYLES. Or check out the repo in Bitbucket > design_system > package.

Design Vision

“We believe data, design, and technology, used together, define the future of place.”
— Sasaki Strategies

This mission statement of the Strategies team reflects broader aspirations from Sasaki’s brand: optimism, idealism, and commitment; shifting focus from the spatial to the human; shaping experiences through physical environments. The Strategies team is responsible for manifesting these brand concepts in digital environments. This design system provides the digital building blocks to use while creating those digital environments.

The following concepts are founding principles that drive how our brand is expressed digitally. Sasaki Strategies interfaces should:

Each of the components and styles shown below have been designed with these concepts in mind. The colors and typography styles pulled directly from Sasaki’s brand already reflect these ideas, while new additions not already specified in Sasaki’s brand guidelines (buttons, hover states, shadows, form inputs, etc.) seek to replicate the tone of Sasaki’s brand -- through design decisions like slightly rounded corners, clean and simple icons, and subtle shadow effects.

Read more about the full brand guidelines and the spirit of Sasaki’s vision here: R:\_Brand Resources\00_Brand Guidelines\Sasaki_BrandGuidelines.pdf

Layout

CSS Grid

It is recommended to use CSS Grid to more easily make our tools mobile-friendly / responsive to different screen sizes. Familiarize yourself with it, as well as its browser limitations and workarounds. See this article for more info.

Responsive Screen Sizes

This design system is built mobile-first. Standard media queries are included in the design system as Sass mixins, so you can use them as follows:

// MEDIA QUERIES

// Extra small devices (portrait phones, less than 576px)

// Small devices (landscape phones, 576px and up)
@mixin sm {
  @media (min-width: 576px) { @content; };
}

// Medium devices (tablets, 768px and up)
@mixin md {
  @media (min-width: 768px) { @content; };
}

// Large devices (desktops, 992px and up)
@mixin lg {
  @media (min-width: 992px) { @content; };
}

// Extra large devices (large desktops, 1200px and up)
@mixin xl {
  @media (min-width: 1200px) { @content; };
}
      

Colors

Use each color by using the Sass variables shown below (i.e., "color: $primary;").

UI Colors

These are the primary colors to be used for interface components; data visualization colors may expand beyond this palette.

Alert Colors

These colors are only to be used for interface success, warning, and error messages.

Typography

Typefaces

All webfonts are pre-loaded into the design system (fonts.scss) using an @import link -- just target the font using the $ selector as follows below!

Text Styles

Sizes can be adjusted to fit your project, but please use rem units (not px, pt, or em). Please also note that the white space around each header style is almost as important as the text itself; if you adjust sizes, be sure that breathing room is maintained proportionately.

Tables

Styles for React Table are included in this design system; you can view a Codesandbox live preview below.

Icons

We use the Retina Icons iconset, a purchased library with thousands of icons to choose from.

The icons can be loaded in three ways, depending on the implementation.

Option #1: Icon objects with classnames

Recommended for most uses

Each icon has been assigned a classname and corresponding style. Look up the classname in the reference app, then code an icon object and assign the appropriate classname. An example is shown below:

<i class="retina-winter-2995"></i>

Option #2: CSS Content Variables

Style-first solution

To add the icon using only CSS, look up the icon's webfont unicode in the reference app and enter it as a content tag in the stylesheet, including the $Retina font family. An example is shown below:

<span class="unicode-test"></span>

.unicode-test:before {
    font-family: $Retina;
    content: "\f1b6";
}

Option #3: Direct Image Assets

Not recommended; managing assets is cumbersome and increases load times

If the above two methods aren't applicable, find the icon file on the network (L:\sa_strategies\Retina Icons), upload the asset, and embed as an image. There are a number of file formats available for every icon, including png, svg, eps, and more.

Most Common Icons

While there are thousands of icons to choose from in the Retina iconset, we most often use the icons shown below. Classnames and unicodes included for reference.

Buttons

Sizes

Buttons are shown in block (max 250px width) and standard sizes.

<button type="button" class="ss-button nl">Standard</button>
<button type="button" class="ss-button block nl">Block</button>
      

Hierarchy

When using buttons of various sizes or colors, keep in mind the hierarchy of what you're asking the user to do -- for example, if you want to encourage them to click "yes," use a bright color for "yes" and a grey-tone for "no."

<button type="button" class="ss-button primary">Primary</button>
<button type="button" class="ss-button secondary">Secondary</button>
<button type="button" class="ss-button nl">Secondary</button>
<button type="button" class="ss-button nd">Secondary</button>
    

Icon Buttons

These small, square buttons can be used for individual button treatments or in combination with each other to create toolbars.

Individual

<button type="button" class="ss-button sq"></button>
      

Icon-Based Toolbars

Toolbar combinations can be created by creating square icon buttons within a horizontal toolbar (hz-tb) or vertical toolbar (vt-tb), as follows:

<div class="hz-tb">
     <button type="button" class="ss-button sq"><i class="retina-filetypecontent-1074"></i></button>
     <button type="button" class="ss-button sq"><i class="retina-theessentials-2541"></i></button>
     <button type="button" class="ss-button sq"><i class="retina-theessentials-2592"></i></button>
     <button type="button" class="ss-button sq"><i class="retina-theessentials-2538"></i></button>
</div>
      

<div class="vt-tb">
     <button type="button" class="ss-button sq"><i class="retina-design-0719"></i></button>
     <button type="button" class="ss-button sq"><i class="retina-design-0722"></i></button>
     <button type="button" class="ss-button sq"><i class="retina-design-0797"></i></button>
     <button type="button" class="ss-button sq"><i class="retina-theessentials-2576"></i></button>
</div>
      

Navigation

<button type="button" class="ss-button nl back">Back</button>
<button type="button" class="ss-button primary next">Next</button>
      

<button type="button" class="ss-button nl back nt"></button>
<button type="button" class="ss-button nl next nt"></button>
      

<ul class="pagination">
    <li class="ss-button nl back nt"></li>
    <li class="ss-button nl active">1</li>
    <li class="ss-button nl">2</li>
    <li class="ss-button nl">3</li>
    <li class="ss-button nl next nt"></li>
</ul>
      

Sliders

<div id="slidecontainer">
  <input type="range" class="ss-slider">
</div>
      

Form Inputs

<p class="form-prompt">What is the radio button state?</p>
<div>
  <input id="radio-1" class="radio" name="radio-group" type="radio">
  <label for="radio-1" class="radio-label">Radio is off</label>
</div>
<div>
  <input id="radio-2" class="radio" name="radio-group" type="radio" checked>
  <label for="radio-2" class="radio-label">Radio is on</label>
</div>
<div>
  <input id="radio-3" class="radio" name="radio-group-2" type="radio" disabled>
  <label for="radio-3" class="radio-label">Disabled radio is off</label>
</div>
<div>
  <input id="radio-4" class="radio" name="radio-group-2" type="radio" disabled checked>
  <label for="radio-4" class="radio-label">Disabled radio is on</label>
</div>
      

<p class="form-prompt">What is the checkbox state?</p>
<div>
  <input id="checkbox-1" class="checkbox" name="checkbox-group" type="checkbox">
  <label for="checkbox-1" class="checkbox-label">Unchecked</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox" name="checkbox-group" type="checkbox" checked>
  <label for="checkbox-2" class="checkbox-label">Checked</label>
</div>
<div>
  <input id="checkbox-3" class="checkbox" name="checkbox-group-2" type="checkbox" disabled>
  <label for="checkbox-3" class="checkbox-label">Disabled unchecked</label>
</div>
<div>
  <input id="checkbox-4" class="checkbox" name="checkbox-group-2" type="checkbox" disabled checked>
  <label for="checkbox-4" class="checkbox-label">Disabled checked</label>
</div>
      

<p class="form-prompt">How do you feel today?</p>
<select class="dropdown">
  <optgroup label="Positive">
    <option value="fantastic">Fantastic</option>
    <option value="great">Great</option>
    <option value="pretty good">Pretty Good</option>
    <option value="just ok">Just OK</option>
  </optgroup>
  <optgroup label="Negative">
    <option value="meh">Meh</option>
    <option value="pretty bad">Pretty Bad</option>
    <option value="terrible">Terrible</option>
    <option value="worst">Worst Ever</option>
  </optgroup>
</select>
      

<div class="text-input">
  <label>Your Name</label>
  <input type="text" placeholder="Type here">
</div>
      

<div class="text-input">
  <input type="text" class="success" placeholder="Type here"><i class="retina-theessentials-2679"></i>
</div>
      

<div class="text-input">
  <input type="text" class="warning" placeholder="Type here"><i class="retina-theessentials-2681"></i>
</div>
      

<div class="text-input">
  <input type="text" class="error" placeholder="Type here"><i class="retina-theessentials-2680"></i>
</div>
      

<div class="text-area">
  <label>What do you think?</label>
  <textarea rows="3" cols="50" placeholder="Type here"></textarea>
</div>
      

<input type="submit" class="ss-button primary">