Ushahidi Logo Ushahidi Platform Pattern Library

Tested with

Colors

Read our guidelines on how to create and name new color variables.

Foundation

  • $color-primary

    #373E46

  • $color-secondary

    #FFC334

  • $color-tertiary

    #C7CCD4

Dark spectrum

  • $color-dark-alpha

    #222222

  • $color-dark-beta

    #444444

  • $color-dark-gamma

    #666666

  • $color-dark-delta

    #888888

Light spectrum

  • $color-light-alpha

    #959595

  • $color-light-beta

    #D6D5D2

  • $color-light-gamma

    #EEEEEE

  • $color-light-delta

    #FAFAFA

Primary spectrum

  • $color-primary-alpha

    #1E232A

  • $color-primary-beta

    #2B323A

  • $color-primary-gamma

    #40444A

  • $color-primary-delta

    #60646B

  • $color-primary-epsilon

    #8E9297

  • $color-primary-zeta

    #F1F1F4

Miscellaneous

  • $white

    #FFFFFF

  • $blue

    #2274b4

  • $red

    #de0000

  • $green

    #4fab2f

Typography

The Ushahidi Platform uses Lato, which is an open source font, hosted by Google. Information on how to change or install the font declaration can be found here. This design uses the Normal & Black weights.

Alpha typographic style [34px (20px)]


Beta typographic style [20px]


Gamma typographic style [16px]


Base typographic style [14px]

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, text that needs some emphasis nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Ordered List

  1. This is the first item Neque porro quisquam est, qui dolorem ipsum quia doloramet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunlabore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima ven
  2. And this is the second
  3. A third item on the list
  4. Comes before the fourth
  5. Don't forget the fifth

Unordered List

  • This is the first item Neque porro quisquam est, qui dolorem ipsum quia doloramet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunlabore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima ven
  • And this is the second
  • A third item on the list
  • Comes before the fourth
  • Don't forget the fifth

Blockquote

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Icons

Icons are part of the "Open Iconic" library, and are served up by an SVG sprite. This allows us to display all icons in the set with a single request.

Buttons

Default

Disabled

Alpha

Beta

Gamma

Full width

Full width + beta

Example using full-width + another button-color

Button, located to the right

Flat

Deemphasize a button by making it look like a link while maintaining button behavior. The example below is a flattened "gamma" button, but any button style can be flattened using the class name "button-flat."

Destructive

Buttons that delete data should use the "destructive" treatment.

Forms

Label

Input

Input, disabled

Text Area

Checkbox

Checkbox, large

Radio Button

Select

Select, with disabled options

Toggle Switch

Dates

Standard

March 22, 2017 7:39 PM

w/ Tooltip

3 months ago March 22, 2017

Images

Avatar

Author Avatar

Containers

Sheet

 

Card

 

Card

 

Bugs

Default

Bug message

With subtext

Account Settingsfor Aaliyah Williams

With badge

Alerts2

With badge, multi-line, for HDX-tags and attributes

#Item+reported +threathened+abducted +refugees+displaced +injuredx

Circle Icons

Progress

Default, indeterminate

Used in a specific context, like communicating that an image is uploading.

Default, determinate

Used in a specific context, like communicating that an image is uploading.

Progress: 60%

Page load

Used generally to offer feedback to the user that their request is being processed. This pattern can be used as a child of the document body, main, or "form sheet.

Loading...