import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Design Principles" />

# Design Principles

## Consistency

Users learn faster how to use the product.\
Consistency eliminates confusion.\
Should be visual and functional.

## Accessibility

### Contrast

The color of 1 element and its background should be a contrast color ratio of 4.5:1 at least.
That could be checked through various tools, such as [Webaim Contrast Checker](https://webaim.org/resources/contrastchecker/).\
*$$$ screenshot placeholder*

### Color usage

The color should not be the only way of displaying information or action.

### Keyboard user

The content and fields should be accessible through keyboard controls.

For forms, the Tab-key navigation should allow the user to submit the full form.