PROJECT_04 // DIALECT_UI

EINE KOMPONENTE.
ELF STIMMEN.

Dialect ist eine Bibliothek voller Stimmen.

Dialect UI ist eine Vue-3-Komponentenbibliothek, in der jede Komponente mit 11 kompletten visuellen Implementierungen kommt: von editorialer Eleganz über brutalistische Wucht bis zu Y2K-Nostalgie. Gleiche API, komplett anderer Look.

#Vue3#DesignSystem#CSS#11Themes
01

CARD_SHOWCASE

Unten siehst du dieselbe <DCard> gleichzeitig in allen Dialekten gerendert. Keine Config-Änderungen, keine CSS-Overrides, einfach eine andere Stimme.

Kultivierte Zurückhaltung

editorial

Klare Geometrie, Serifen-Autorität und bewusster Weißraum. Die Zeitungstitelseite als Interface.

Systematische Klarheit

swiss

Rasterfeste Präzision, funktionale Typografie und rationale Farbe. Design als Informationsarchitektur.

Rohe Wucht

brutal

Harte Kontraste, schwere Rahmen und kompromissloses Gewicht. Jedes Element fordert Aufmerksamkeit.

Sterile Präzision

clinical

Gedämpfte Flächen, hauchdünne Trennlinien und chirurgische Abstände. Das Interface verschwindet hinter den Daten.

Weiche Dimension

clay

Runde Formen, warme Schatten und fühlbare Tiefe. Komponenten, die du am liebsten anfassen willst.

Extrudiertes Licht

neumorph

Sanft erhabene Flächen und eingelassene Mulden. Der Bildschirm wird zum modellierten Material.

Handgezeichnete Wärme

sketch

Wacklige Rahmen, unperfekte Linien und Notizbuch-Charme. Digitales UI mit analoger Seele.

Retrodigitales Leuchten

y2k

Glanz, Verläufe und Chrome. Die optimistische Zukunft, die Interfaces der frühen 2000er versprochen haben.

Verspielter Zucker

candy

Kräftige Pastelltöne, blubbrige Formen und fröhliche Bewegung. UI, das sich selbst nicht ernst nimmt.

Schillernde Fantasie

unicorn

Holografische Übergänge, Aurora-Verläufe und ätherisches Leuchten. Interface als Tagtraum.

Terminalgrün

phosphor

Monospace-Raster, Scanline-Flimmern und CRT-Wärme. Die Hacker-Ästhetik, umgesetzt in Komponenten.

02

HOW_IT_WORKS

EINE API

Jede Komponente hat eine einzige, stabile API. Props, Slots und Events bleiben gleich. Nur die visuelle Implementierung ändert sich pro Dialekt.

CSS-TOKENS

Jedes Theme definiert seine eigenen Design-Tokens wie Farben, Radien, Schatten, Typografie und Motion. Komponenten referenzieren Tokens, keine hartkodierten Werte.

DIALECT PROVIDER

Umschließe einen beliebigen Teilbaum mit <DDialectProvider> und überschreibe damit das aktive Theme lokal. Mehrere Dialekte existieren gleichzeitig auf einer Seite.

40+ KOMPONENTEN

Buttons, Cards, Inputs, Modals, Charts, Navigation, alles komplett gethemed. Jede Komponente, jeder Dialekt, jeweils in Light und Dark Mode.

03

TECH_STACK

Vue 3 // Composition API
TypeScript // Volle Typsicherheit
CSS Custom Properties // Design Tokens
Vite // Build Tool
0 Dependencies // Nur Vue + CSS
04

BY_THE_NUMBERS

11Dialekte
40+Komponenten
0Dependencies
22Farbmodi
05

STATUS

Dialect UI befindet sich gerade in aktiver Entwicklung. Die Kernarchitektur, das Token-System und alle 11 Theme-Implementierungen stehen. Die Komponentenabdeckung wächst. Mehr Details und Dokumentation folgen, sobald das Projekt reifer wird.