Amnis Design

A react-based design system with an emphasis on clarity, accessibility, and user experience.

Workflows

Example

	URL
	Storybook webpage of Design Componets

Motivation

There's a lot to consider when designing a web application, and even more with accessibility and user experience in mind.

Complying to accessibility standards is complex, redundant, and sometimes confusing for common interfaces. Much like having to manage your memory in some low-level languages, it can be extraordinarily difficult to master proper implementation and catch issues when they inevitably arise.

This design system focuses on delivering modern methods that abstract and bundle accessibility and user experience implementations (provided by the WCAG 2 Guidelines) for desktop and mobile environments: easing the efforts to a better web for all internet users.

This library is inspired by qualities from both the U.S. Web Design System and MUI Core.

This library also aims help with legal compliance of many governmental policies for the public and private sectors. You should always provide your own testing to ensure you meet your specific requirements.

Alpha Stage

This library currently in the alpha stages of development. There are still features to create and refine; however, you can still download and use the package to provide feedback by writing GitHub issues.

Installation

Amnis Design is available as an npm package.

# NPM
npm install @amnis/design

# Yarn
npm add @amnis/design

You can optionally install individual parts of the design system. Useful if you only desire specific features.

# NPM
npm install @amnis/hooks @amnis/style @amnis/icons @amnis/layout @amnis/display @amnis/entry

# Yarn
npm add @amnis/hooks @amnis/style @amnis/icons @amnis/layout @amnis/display @amnis/entry

Getting Started with Amnis

Below is a basic example of rendering a Button component:

import * as React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@amnis/design/Button';

const App = () => {
  return (
    <Button paint="primary" variant="contained">
      Hello Amnis
    </Button>
  );
}

ReactDOM.createRoot(document.querySelector('#app')).render(<App />);

Check it out in an interactive sandbox:

Contributing

This is a growing project that you can add and improve upon! I'm welcoming to new PRs. Contrubuting is not just code eiter. If you identify an improvement/bug, write a new GitHub issue so I'm made aware and can resolve it.

For code contributions, see the contributing documentation.