WPD/Design
Tutorials
Site
Static Pages
Landing Page
- Landing v2, Sept 14, 2012
- Landing, Sept 4, 2012
Site Components
- Components, Aug 31, 2012
- Flags
Site design considerations:
- Mock-Up Stage 2, May 31, 2012
- Mock-Up Stage 1, May 6, 2012
- Style Tiles, initial ideas
- Checklist of Design Elements
- Inspiration
Logo
- See the Web Platform logo page for details on the logo and its usage, the logo color palette, and sample logo badges and an interactive logo builder.
- File:Web-Platform-Style-Guide-05.03.2012.pdf
Icons
Colors
Logo colors
| Description | Hex | HSL | Preview |
|---|---|---|---|
| Orange | #F89C20 | hsl(34, 94%, 55%) | |
| Red | #E54E26 | hsl(13, 78%, 52%) | |
| Purple | #694D9F | hsl(260, 35%, 46%) | |
| Teal | #2EB3C4 | hsl(187, 63%, 47%) | |
| Orange-red joint | #D02E27 | hsl(2, 69%, 48%) | |
| Red-purple joint | #7F1333 | hsl(342, 73%, 29%) | |
| Purple-teal joint | #263C81 | hsl(225, 54%, 33%) | |
| Teal-orange joint (not in logo) | #1f9374 | hsl(164, 65%, 35%) | |
| Orange-purple joint (not in logo) | #d75f1e | hsl(21, 75%, 48%) |
Website colors
| Description | Hex | HSL | Preview |
|---|---|---|---|
| Page background | #f9f7f3 | hsl(40, 29%, 96%) | |
| Body background | #ece5d7 | hsl(40, 34%, 88%) | |
| Text color | #3C3C3C | hsl(0, 0%, 24%) | |
| Link color | #256a84 | hsl(196, 56%, 33%) | |
| Hover link color | #2dafbc | hsl(185, 61%, 46%) |