This page contains the style guide for your application: the colors, typography, and common widget styles. The guide's structure and organization borrows heavily from the Twitter bootstrap.
The color palette for the application and a description of each color's usage.
Name | Hex code | Usage/notes | |
---|---|---|---|
Eggplant purple | #4a1a2b | Visited link | |
Teal | #207861 | Subheading | |
Leaf green | #9fad00 | Success feedback | |
Bright yellow | #ffcc00 | Warning feedback | |
Orange | #ff8400 | Buttons | |
Blue | #1673a1 | Link | |
Red | #e53b19 | Error feedback | |
Charcoal | #444444 | Body text | |
Grey | #808080 | Secondary text | |
Silver | #c0c0c0 | Disabled text, disabled buttons | |
Greyish white | #f0f0f0 | Accent background |
Styles for textual content: headings, paragraphs, lists, etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie, erat quis posuere vestibulum, ipsum erat hendrerit enim, id hendrerit eros orci quis augue. Maecenas vehicula molestie lectus. Aliquam a nisi tellus. Suspendisse pharetra pharetra mauris, vel accumsan orci consectetur non.
Curabitur at urna mauris. Donec varius, est sit amet vulputate tristique, orci lectus pulvinar libero, vel venenatis ligula est at arcu. Sed in dui vitae mauris ultrices iaculis.
Curabitur bibendum eros sit amet elit lacinia imperdiet. Sed venenatis dictum interdum. Praesent sit amet vehicula ligula. Aliquam erat volutpat. Suspendisse velit dolor, ullamcorper at gravida at, congue tincidunt mi.
Item | Quantity | Price |
---|---|---|
Total | $47.02 | |
Widget | 1 | $15.02 |
Thingamabob | 5 | $3.00 |
Whatchamacallit | 2 | $8.50 |
We commonly use tables to lay out forms with left- or right-aligned labels. This is the recommended method for desktop applications.
Note how destructive actions like deletion are marked with a class of "destructive"
and highlighted visually.
Top-aligned form labels tend to reduce form-completion times the most and are best used when the data being requested is well-known to the user and requires minimum thought. Top-aligned labels should also be used for mobile applications.
Pagination styles should ensure that individual links are well spaced and large enough to be suitable touch targets.
Styles for alerts and messages. The icons are provided by famfamfam.