Styleguide

Every design decision is based on four core design frameworks: color, type, spacing and elevation. UI components found across this site are powered and informed by these design frameworks.

Color

Dynamic colors based on the HSL color system. Base Hue is set for each color family, and a ramp of colors are generated by dynamically adjusting the Saturation and Lightness to create a pleasing range of color.

Platform Color

Non-themable colors used for visual treatments of UI that are neither actionable nor navigational.

  • Platform Gray
    25

  • Platform Gray
    50

  • Platform Gray
    100

  • Platform Gray
    200

  • Platform Gray
    300

  • Platform Gray
    400

  • Platform Gray
    500

  • Platform Gray
    600

  • Platform Gray
    700

  • Platform Gray
    800

  • Platform Gray
    900

Guidance Color

Colors used to provide wayfinding and navigational cues for the viewer.

  • Guidance
    25

  • Guidance
    50

  • Guidance
    100

  • Guidance
    200

  • Guidance
    300

  • Guidance
    400

  • Guidance
    500

  • Guidance
    600

  • Guidance
    700

  • Guidance
    800

  • Guidance
    900

Affordance Color

Colors used to provide affordances for actionable UI elements.

  • Affordance
    25

  • Affordance
    50

  • Affordance
    100

  • Affordance
    200

  • Affordance
    300

  • Affordance
    400

  • Affordance
    500

  • Affordance
    600

  • Affordance
    700

  • Affordance
    800

  • Affordance
    900

Type

The carefully crafted type scale includes both headings and body styles that work together to create scannable hierarchy and contrast.

Headings

Type used to create hierarchy and wayfinding.

Display: The quick brown fox jumps over the lazy dog.

Large Heading: The quick brown fox jumps over the lazy dog.

Medium Heading: The quick brown fox jumps over the lazy dog.

Small Heading: The quick brown fox jumps over the lazy dog.

Body Copy

Type used for copy throughout the experience.

Subtitle 1: The quick brown fox jumps over the lazy dog.

Subtitle 2: The quick brown fox jumps over the lazy dog.

Body 1: The quick brown fox jumps over the lazy dog.

Body 2: The quick brown fox jumps over the lazy dog.

Caption: The quick brown fox jumps over the lazy dog.

Overline: The quick brown fox jumps over the lazy dog.

Spacing

Most modern spacing frameworks are based on the golden ratio and the Fibonacci Sequence, starting with the number 8. This scales nicely across screen resolutions without the need for complicated math and sub-pixels.

Sizing

Visual Example Reference Size
Nano 4
Base 8
XSmall-Alt 12
XSmall 16
Small 24
Medium Alt 32
Medium 40
Large Alt 52
Large 64
XLarge 104
XXLarge 168
XXXLarge 272
XXXXLarge 440

Layout

layout6-left

layout6-right

layout3-left

layout9-right

layout9-left

layout3-right

layout4-left

layout8-right

layout2-left

layout8-center

layout2-right

layout4-left

layout4-center

layout4-right

Elevation

The digital world can be loosely associated with the physical world. Surfaces resting without a shadow indicate a non-interactive element; while elevated surfaces practically beg to be pressed.

Components

UI is the tip of the iceburg, and make up what the viewer sees; however, the foundation powering each UI component is informed and controlled by the design frameworks above.

Quick Action Buttons

Small QAB

Medium-Alt QAB

Medium QAB

Feature Blocks

Title

Excerpt content here. Copy that wraps to no more than four lines.

Contact Blurb

Let's talk

See if I can help take your experience to the next level.

Contact Greg

Input Fields

Let's talk

See if I can help take your experience to the next level.

Contact Greg