Lukas Licher

Arc Design System

Die Grundlage aller UNEOS Apps

Rolle: Lead DesignerTeam: UNEOS Design Team

Color System

Roles & Scheme

Das Farbsystem ist den Color Roles und Schemes von Google Material Design nachempfunden. Es ist zum einen leicht Verständlich und ermöglicht unterschiedliche Farbmodi.

Color Roles im Dark Mode
Color Roles im Light Mode

Variables

Ein großes Netzwerk

Das Design System hat über 2000 Variables. Angefangen bei Primitives, über semantische Tokens, bis hin zu Component Variables. So entsteht ein großes und einfach wartbares System und globale UI-Anpassungen sind ohne Dev Aufwand möglich.

Preview of tokens in figma

Atome

Die basic Komponenten

Das Design System umfasst alle nötigen Atoms. Hier ein kleiner Auszug.

1 / 2

Der Button in drei einfachen Varianten. Insgesamt hat das Design System 720 Varianten von diesem Button.

Preview of one input state

Moleküle

Die erweiterten Komponenten

Eine Kombination aus mehreren einzelnen Atomen. Auch hier alles mit eigenen Variables versehen.

1 / 2

Das Formular besteht aus Text-Input, Label und Assistive- bzw. Error-Text.

Preview of a simple form with error state
Hinweis zum Urheberrecht