# Introduction to Animax Design

(Animax logo banner here)

## What is Animax Design?

Animax Design is a design system that is built to be different. Unlike other design systems, which cover a very limited set of use cases, Animax Design aims to be a near-universal design language to bring any application to life. Instead of being just another design system, Animax Design pushes free and open-source design to new limits - making innovative experiences simple and hassle-free.

## What makes Animax Design unique?

Animax Design isn't intended to be trendy. Animax Design isn't supposed to be "cool". It doesn't appeal to a specific user group. Rather, it is a framework-agnostic design system that

## Keystones of Animax Design

- **Professionalism:** Made with a quality-first process, with strict standards and extensive reviews
- **Longevity**: Built to last, based on universal design principles
- **Usability**: Workable out-of-the-box, with clear and intuitive UI elements
- **Minimalist**: No bloat and no feature creep - just the things users need - with visually lightweight components
- **Well-designed**: Designed with users in mind and made specifically to let users feel at home
- **Freedom-respecting**: Not tied to a corporate sponsor, not infringing upon user privacy, and staying out of users' way
- **Inclusive & Accesible**: Accomadating a wide range of users, being sensitive to cultural differences, and working with an international community

## How can such an unconventional design system work?

Not convinced that these goals could be possibly achievable? Think again when you see these UI mockups below:

[UI mockup here]


## Sounds great. How do I get started with Animax Design?

Glad you asked! If you just want to read about Animax Design, no problem; read on through Animax's documentation.

If you're a designer, Animax provides pages of design documentation on Animax Design. An [interactive UI design web application](#) for working with Animax Design is currently being worked on as well.

If you're an app developer, Animax provides ready-to-use UI components and guides for the frameworks you already know and love:

- Qt Widgets 5.15 & above
- A plugin for Qt Designer + Creator to visually build Qt UIs with Animax
- Qt QML 2.0 & above
- CSS framework (Web/Pure CSS)
- WebComponents (Web/Vanilla JavaScript)
- Simple Direct Media Layer (SDL2)
- GTK
- Flutter (mobile, web, and desktop)
- React Native (iOS, Android, Windows) & React

### AnimaxUI

Additionally, Animax Design is also implemented as a cross-platform no-dependencies C++ UI framework called `AnimaxUI`, inspired by [Nuklear](https://github.com/Immediate-Mode-UI/Nuklear). AnimaxUI offers the same consistent look-and-feel and design but is faster and more lightweight than the component libraries for Qt/WebComponents/SDL2. There are:

* Native bindings for C/C++
* Python bindings
* Java bindings
* Deno/NodeJS bindings
* Rust bindings

## Documentation

- [Introduction]()
- [Core concepts]()
- [Open-source development]()
- [Release notes]()
- [Assets]()
- [Learning]()
- [Animax Ecosystem]()
- [Get involved]()
- [Design](/9h_9LswzTT-15EkJVrXoFw)
- [Principles]()
- [Guidelines]()
- [Components Library](/N_RwNyP2SJi3q0ijJDB2yg)
- [Develop]()
- [Overview]()
- [Frameworks]()
- [Tutorials]()
- [Configuration]()
- [Developer resoures]()
- [Add-ons]()
- [Case studies]()
- [Helios]() (Minimal image viewer build with Animax Design)
- [Mo++]()
- [Pocket Code]() (A neovim-based editor with a friendlier interface)
- [Mercury]() (A minimalist LaTeX editor built with Animax Design)
- [Norvus]() (A wireless file sharing app)

## Integrations

This is a list of all platforms that are in progress of being supported or considered to be supported:

- Qt Framework 5.15 & above
- Qt Widgets
- Qt Quick (QML)
- Qt Webassembly
- WxWidgets
- FLTK
- Web
- Web Components
- React/Vue/Angular
- Vanilla JS-based framework
- Pure CSS framework (like [Spectrum CSS](https://opensource.adobe.com/spectrum-css/))
- ElectronJS
- GTK 4.0 & above
- OpenGL (GLUI)
- OpenGL (ImGUI)
- Flutter
- Juce
- XAML
- Uno Framework
- Avalonia Framework
- JavaFX
- Tkinter
- Kivy
- Blazor

(References and inspiration for Animax Design are below)

- https://shoelace.style/