Style Guide

These are notes for a style guide in the near future. We want to make sure to document any inconsistencies and make uniform decisions as we develop these best practices. For each section we may want to include a mini description or reason behind some of these design decisions. It would be nice to use findings and quotes from usability tests.

Feel free to edit these.

Brand - Typography (Typeface, Type setting – Alignment, line length, Spacing) - Color - Logo - Thread Image - No Images Note: thinking of putting this is content section

Navigation - Breadcrumbs - Cards - piano keys - side nav

Page Elements - Buttons Links in button should look like this: - It highlights contrast - Easy way to quickly find something without having to scan a page - Callout Box - announcement/ Alerts & Notifications (log-in, GI Bill schools) - Lists (Process list) - Definition Block - Tables - Links – color and styling, (specify what each type of link does i.e. download, go to new page) Search - Results (Vets.gov and VEC) - Search Bar

Templates - Content templates - Form templates (see 18F) - Grid components - Footer

Forms & Tools - Text input (see 18F form controls) - Dropdown - Font sizings - Alerts

The anatomy of a section

• Thing (i.e. Color)
  • subthings (i.e. palatte and combination)
• snippet
• accessibility information