Design Walkthrough See Also:
(Floe) UI Options user testing results (November 2012)
(Floe) UI Options user testing report (November 2012)
(Floe) UI Options user testing protocol (September 2012) On-pageClosed panel
Open panel
Size
Contrast
SimplifyOption 1: Responsive layout slider
Option 2: Article-only with table of contents
Panel slid
Captions
Text to speech
Keyboard Shortcuts
Browser extension
Mobile
 
 
 
    
Style Font | - #433F3D Open Sans or Helvetica, Arial, sans-serif
- preference headings: 16pt Semibold
- descriptions/check-boxes/drop-downs: 14pt Regular
- on/off toggle: 14pt Semibold
| Form element outline | 989898 | Icon grey | 8D8681 | Highlight background | E8EABE | Blue Link | 3172AE |  | 1 = Outline 009966
2 = Inset border ABD078
3 = Light gradient 97C93C
4 = Dark gradient 22A755 | Options top gradient | 000000, 15% opacity | Options bottom gradient | E7E6E6 |
Margins, Padding, and Sizes |