Start
F

EIM Design System

Die zentrale UI-Grundlage für EIM und neue Projekte: Design-Tokens, 14 Theme-Varianten (Hell/Dunkel), barrierearme Komponenten (React · Tailwind · Radix) und App-Vorlagen — alles im selben App-Design wie EIM.

14 Themes

Subtil, Neutral, Charakter — je Hell & Dunkel, live umschaltbar.

Komponenten

Primitives bis Datentabellen & App-Shell — token-basiert.

Wiederverwendbar

Paket im Monorepo, per Plugin/Skill in neue Projekte klonbar.

Getting Started

1. Abhängigkeit

"@eim/design-system": "*"   // Workspace oder Klon

2. Tailwind-Preset

import preset from '@eim/design-system/preset'
export default { presets: [preset], content: ['./src/**/*.{ts,tsx}'] }

3. Theme-CSS + Init (main.tsx)

import '@eim/design-system/styles/globals.theme.css'
import { initTheme } from '@eim/design-system'
initTheme()

4. Nutzung

import { Button, ThemeSwitcher, cn } from '@eim/design-system'

Foundations

Farb-Tokens

Typografie

IBM Plex Sans · Überschriften font-heading

IBM Plex Sans · Fließtext font-sans

IBM Plex Mono · Code / IDs font-mono

Radius & Schatten

rounded-sm
rounded-md
rounded-lg
shadow-subtle
shadow-card

Icons (lucide-react)

Theming

14 Varianten in drei Gruppen, je Hell/Dunkel. Klick wendet das Theme live auf die ganze Plattform an. Vorschaufarben werden live aus globals.theme.css gelesen.

Icons

Komplette lucide-Bibliothek nach Kategorie. Tippen filtert, Klick kopiert den Namen (z. B. data-lucide="search").

Kategorien
…

Theme-Generator

Eigenes Theme bauen: Farben (Hell/Dunkel), moderne Schriftpaarung, Radius — live auf der ganzen Plattform, inkl. Kontrast-Check und fertigem CSS-Export.

Schriftpaarung (moderne Kombinationen)

Farben — Hell
Farben — Dunkel

Live-Vorschau

Aa — Überschrift

Fließtext zeigt Lesbarkeit der Body-Schrift und den Farbkontrast im aktuellen Theme.

Badge 
const theme = "{{name}}"

Export

kopiert!

        
CSS-Block in globals.theme.css einfügen, Namen in THEME_VARIANTS/THEME_GROUPS registrieren; Schrift-<link> + Tailwind-fontFamily wie im Export übernehmen.

      


      
      

        
Komponenten

        
Links filtern & wählen, rechts die vollständige Doku: Varianten, Zustände, Props, Barrierefreiheit und Code.

        

          

            

              

                
              

            

            

            

          

          

        

      


      
      

        
App-Beispiele

        
Vollständige Screens — nur aus Design-System-Komponenten + Mock-Daten, im EIM-Look.


        
Dashboard

        

          

            
Entities
801
+12 heute

            
Offene Aufgaben
37
5 fällig

            
Vorgänge
14
3 in Prüfung

            
Facets
79
Katalog

          

          

            
Aktivität

              

            

            
Zuletzt
  • Kickoff-Notiz
  • Architektur-Skizze
  • Review planen

          

        


        
Entity-Explorer (Facet-Navigation)

        

          

            

              
Facets

              Note248
              Image78
              Task37
              Person12
            

            

              Kickoff-Notiz
              Meeting 12.06.
              Ideen Q3
            

            
Kickoff-Notiz
Note · aktiv
Erstellt: heute
Tags: projekt, mvp

          

        


        
Kanban-Board

        

          

            
Inbox · 2

              
Docker-Setup
Meili testen

            
Aktiv · 1

              
Facet-Explorer-Fix
hoch

            
Erledigt · 1

              
Seed idempotent

          

        


        
Kalender & Kontakte

        

          
Juni 2026

            

          

            
FT
Frank T.
frank@example.com

            
AB
Anna B.
anna@example.com

          

        

      


      
      

        
Richtlinien (FRONTEND.md)

        
Verbindlich für UI-Arbeit. Auszug — vollständig in FRONTEND.md / Plugin.

        

          
Do
  • Nur semantische Tokens (kein Hex).
  • Primitives aus @eim/design-system.
  • cn() + cva für Varianten.
  • Server-State via Query/tRPC.
  • Radix für A11y, sichtbarer Fokus.

          
Don't
  • Farb-Literale in Komponenten.
  • Dark-Mode manuell nachbauen.
  • fetch in Komponenten.
  • Mega-Dateien, Logik im JSX.
  • Listen nur aus Daten statt Katalog.