Tesseract

Design

Tesseract components follow a strict and simple design philosophy.
The aesthetics of the elements are rigid--any element which users can interact with should be easily recognizable--they are determined by the usage of the chosen accent color.
The look and feel of the elements are designed to be less opinionated as possible.

Every component is a derivative of an existing HTML element, thus any Tesseract component can substitute for any HTML element with added capabilities like improved user experience and consistency.
In case of overloaded HTML elements such as <input>, Tesseract dissects the element into multiple components each having a single defined behavior.
Tesseract components gracefully degrade to their native counterparts, allowing user agents without client-side JavaScript to still use the components with minimal loss of functionality.
Tesseract components render Web-compliant HTML and CSS, thus making it resilient to future changes in the HTML/CSS specifications.
Tesseract components are designed to be used with popular JavaScript frameworks like React. Consumption of the components using the framework of choice should be seamless, even with the use of form-handling libraries.
Terminal-based browsers such as Lynx are used to test the components for accessibility and graceful degradation.

Components are made to be accessible according to Web standards (WAI-ARIA).
Focus handling is managed sensibly to facilitate functional keyboard navigation.
In cases where there are improvements in user experience, some elements may have different markup and appearance. Tesseract ensures components are still usable on most assistive technologies given both versions of the user interface.
All components are named in order to depict the purpose, the nature of data being operated, and UX expectations.