Skip to content

Latest commit

 

History

History
70 lines (42 loc) · 3.21 KB

DESIGN_GUIDELINES.md

File metadata and controls

70 lines (42 loc) · 3.21 KB

Answer Overflow Design Guidelines

These guidelines briefly showcase how to design nice interfaces for Answer Overflow.

Note We are currently undertaking a complete revamp of the answer overflow design. Colors, logos, guidelines, and other items are likely to be added, removed, and changed.

Fonts

We use Montserrat for headings and Source Sans Pro for body text.

Colors

Answer overflow uses several predefined colors to ensure consistency. These colors are used throughout the site and should be used in designs as well.

  • Neutrals
    • #F5F8FF #F5F8FF - Answer Overflow Zircon - <style>-ao-white in tailwind
    • #141619 #141619 - Answer Overflow Charcoal - <style>-ao-black in tailwind
  • Accents (use sparingly)
    • #396FF8 #396FF8 - Answer Overflow Ultramarine Blue - <style>-ao-blue in tailwind
  • Others
    • #4BB543 #4BB543 - Answer Overflow Success Green - <style>-ao-green in tailwind
    • #DECB33 #DECB33 - Answer Overflow Caution - <style>-ao-yellow in tailwind
    • #DE3D33 #DE3D33 - Answer Overflow Danger Red - <style>-ao-red in tailwind

Color Systems

We recommend using the HSB color system for colors. This is because it is easier to find a color that is similar to another color, as well as many other advantages!

Logos

The following logos are available for use in your designs.

Accessibility

All designs must be accessible to everyone. This includes:

  • Contrast ratios complying with at least WCAG 2.0 AA
  • Suitable scale and spacing around text and elements

Styles

We have a few set component styles that we use throughout the site. (Buttons, inputs, etc.)

You can view these styles in the Answer Overflow Base Figma file.

Ease of use

When designing, keep in mind that the user should be able to use the interface with ease. This includes:

  • Clear and concise text
  • Good contrasts
  • Easy to recall and understand flows
  • Responsiveness to different screen sizes
  • Good use of whitespace and neutrals

Icons

We recommend using hero icons primarily for icons, and boostrap icons if you cannot find a suitable icon within hero icons.

Recommendations

For quick mockups, excalidraw is a great tool. It's free, open-source, and has a great community.

However, for higher fidelity designs and prototyping, figma is more suitable.