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

<Meta title="Introduction" />

<style>{`
  .sbdocs-content h2 { margin-top: 5rem; }
  .sbdocs-content h3 { margin-top: 3rem; }
`}</style>

# Core UI

Core UI is a reusable component library designed to help teams (including Scality) build consistent UIs faster. The source is available on [GitHub](https://github.com/scality/core-ui).



## Design Principles

These principles share a common conviction: when a user makes a mistake, it's the interface that failed. A well-designed UI does not rely on the user being right.

### Feedback

For clarity's sake, every action should produce a visible response (not for emotional effect). The user should never wonder whether something happened, succeeded or failed. 

This applies to different levels, such as clicks, form submissions, background operations, and destructive actions alike.

### Affordance

Every element must clearly signal whether it is interactive, clickable or static. There is no room for ambiguity.

### Findability

In complex systems, the measure of good information architecture is not the number of clicks but how easily a user can locate what they need. Structure, labeling, and hierarchy should make navigation feel obvious. Good UX goes unnoticed.

### Trust and transparency

Interfaces must be trustworthy and explainable. The user should always be able to understand what happened, why it happened, and what will happen next. 

The user should always be able to supervise, override, or understand the system's intent.

### Observability

The interface is a mirror of the system it represents. Status, health, ongoing actions, and failure states should be surfaced clearly and consistently. A user who cannot see the state of the system cannot trust it. If the system's state is opaque, the interface is incomplete.

### Simplicity

Complex tasks should be achievable through interfaces that feel simple. This is not about reducing features, it is about offering the right level of abstraction. The interface should absorb complexity so the user does not have to.

### Predictability

Rely on recognized patterns and proven conventions. Consistent use across contexts builds user confidence. Deviate only when the use case genuinely requires it.

### Consistency

Use the same component for the same pattern. The same problem or action should not be solved by different solutions. It creates confusion for users who learn one interaction and encounter a different one elsewhere.
Consistency applies both visually (how things look) and behaviorally (how they respond to interaction).

### Accessibility

#### Contrast

The color of an interactive or readable element and its background should have a contrast ratio significant enough. There is a value for it: at least 4.5:1. 
This can be checked with the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) or with Chrome DevTools.

#### Color usage

Color should not be the only way of conveying information or indicating an action. Color perception varies across screens, contexts, cultures, and individual conditions.

#### Keyboard navigation

All content and fields should be accessible through keyboard controls. Focus must always be visible, and tab order must follow the visual flow of the page.