Design Guidelines


Design Principles

User needs supercede

Make no assumptions. Only through research and analysis can we truly understand our users. Talk to them. We need to appreciate their needs in order to effectively design for our users.

Design with purpose

Every design element, from the largest to the smallest, must have a purpose, and contribute to the purpose of a larger element that it is a part of. If you can’t explain what an element is for, most likely it shouldn’t be there. Use motion to provide meaning, rather than just for aesthetic value. Why does a thing move the way that it does?

Effortless Usability

Users should be presented with a singular visual priority on any given screen. What do you want the user to do first? They should be able to effortlessly move throughout the app. Remove all obstacles for the user. Interactions should be intuitive and obvious.

Effortless Style

Designs should have a relaxed, uncomplicated aesthetic. Although deeply considered, things like color choices and typography should feel seamless and simple to users.

Build to last

Designs should be unbreakable by the user. Like a children’s toy, make sure it’s designed for exploration and impossible to misuse. Make sure designs can scale as applications grow and evolve over time.

Show some personality

The design should always be approachable. Usability is key, but without some personality injected here it’s going to feel unloved. Illustrations, iconography, motion, and language can all be used to add personality. Applications need to delight users.


Spacing

All spacing is done using an 8px scale. Starting with n-half at 4px and going to n-16 at 128px.


Color

Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.

Primary Palette

The DreamHost palette is primarily derived from blue and white. The secondary palette consists of red, green, orange, and yellow. These colors are used across all web apps at DreamHost. Also included are dedicated background and grayscale classes which are derived from blue.

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Midnight
Hex #071C26
rgb(0,115,236)
Sass $c-b700

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Azure
Hex #0073EC
rgb(0,175,239)
Sass $c-b300

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Prince
Hex #A644E5
rgb(166,68,229)
Sass $c-p300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

White
Hex #FFFFFF
rgb(255,255,255)
Sass $c-w100

Secondary Palette

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Turtle
Hex #00CAAA
rgb(0,202,170)
Sass $c-t300

  • A
    😃
  • A
    😭
  • A
    😃
  • A
    😃

Coral
Hex #FF4A48
rgb(255,74,72)
Sass $c-r300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Tangerine
Hex #F59D00
rgb(206,21,47)
Sass $c-o300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Sunflower
Hex #FFDA00
rgb(255,218,0)
Sass $c-y300

Grayscale

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Metal
Hex #434F58
rgb(67,79,88)
Sass $c-g500

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Galactic
Hex #677983
rgb(103,121,131)
Sass $c-g400

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Cloudy
Hex #AFBFC9
rgb(175,191,201)
Sass $c-g300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Smoke
Hex #E0E4E8
rgb(224,228,232)
Sass $c-g200

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Off White
Hex #F4F6F9
rgb(244,246,249)
Sass $c-g100


Extended Palette

Our extended palette consists of a light and dark shade for each primary color. For convenience, different shades are numbered similarly to font weights, with 100 being lightest. Usage is also indicated by the headings below.

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Royal Blue
Hex #1176A5
rgb(17,118,165)
Sass $c-b500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Baby Blue
Hex #CCEFFF
rgb(204,239,255)
Sass $c-b100

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Marina
Hex #0D8288
rgb(13,130,136)
Sass $c-t500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Ice
Hex #E5FEFF
rgb(229,254,255)
Sass $c-t100

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Autumn
Hex #664200
rgb(102,66,0)
Sass $c-o500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Peach
Hex #FFE0A6
rgb(255,224,166)
Sass $c-o100

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Leather
Hex #6F5F1B
rgb(111,95,27)
Sass $c-y500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Magnolia
Hex #FFF4B6
rgb(255,244,182)
Sass $c-y100

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Rust
Hex #4F0703
rgb(79,7,3)
Sass $c-r500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Rose
Hex #FFCCCE
rgb(255,204,206)
Sass $c-r100

Color Combinations

Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.

Color Usage

Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.


Typography

Type Scale

Lorem Ipsum

Font Usage