Ushahidi Platform Pattern Library
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
- 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
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
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
Radio Button
Select
Toggle Switch
Images
Avatar
Containers
Sheet
Card
Card
Bugs
Default
With subtext
With badge
Progress Bar
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.
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.""