Road Map

This style guide is a living document, a Work In Progress, and we want you to get involved! Share your comments in Slack »

This list looks intimidatingly wordy, but it's for keeping tabs on what's missing. The final version will be more reader-friendly :)

Phase 1 - Forms Elements:

[STATUS: In progress]

• Label︎
• Label Alignment Rules
• Tool-tips (Help Text Or Instructions)
• Text Input
  • Text Input With Nested Icon Label
  • Text Input With Nested Icon Button
  • Text Input Lengths ¹
  • Text Input Sizes (large, medium, small, extra small) ²
  • ︎Text Input Interaction States (Default, Focus, Disabled)
  • Text Input Validation States
• ︎ Textarea
  • ︎Textarea Error State
• ︎Checkboxes
  • ︎Checkbox Interaction States
  • ︎Checkbox Error State
• ︎Radios︎
  • ︎Radio Button Interaction States
  • ︎Radio Button Error State
• ︎Multi-Select (Selects Multiple Items)
  • ︎Multi-Select Interaction States
  • ︎Multi-Select Error State
• ︎Drop-Down (Selects Only One Item)
  • ︎Drop-Down Interaction States
  • ︎Drop-Down Error State
• Switch/Toggle
  • Switch/Toggle Error States
• ︎Buttons (primary, secondary, high-risk, chiclet)
  • Buttons Sizes (large, medium, small, extra small)
  • Button order and alignment at the end of forms
  • Inline form validation rules
• Notifications aka Feedback Messages
• Modals Layout

Footnotes:

¹. I want to find out about the grid system the app is using before I define these. Are we using one? How many columns does it have? What size each? How much is the gutter? ↩

². TBD - I'm not sure we need this in our app at this point. Do we? ↩

Phase 2 - App Communication Elements:

[STATUS: Not yet started]

• Badges
• Loading Behavior
• UX Enhancing Micro Animations (? - TBD)
• Accessibility

Phase 3 - Content Elements:

[STATUS: Not yet started]

• Typography
• Text Links
• Text Links States (e.g. on hover, on click, visited, on focus)
• Headings Hierarchy
• Running Text Hierarchy (lead copy, large copy, base copy, meta copy, micro copy)
• Pagination
• Tables
• Text Lists
• Icons
• Images
• Avatars
• No-Data Blocks

Phase 4 - Layout:

[STATUS: Not yet started]

• Grid System
• Layout Options

Phase 5 - Others:

[STATUS: Not yet started]

• Style Guide “Principles”
• App's General “Tone And Voice”
• Accessibility Good Practices
• Date Formats: m DD, YYYY at hh:MM meridian