Cerne v0.1

Ein komplettes Design System, von Grund auf, ohne externe Abhängigkeiten

Cerne ist ein in sich geschlossenes CSS + JS Framework — keine CDNs, kein jQuery, keine Pflicht-Builds in Produktion. Es wurde entwickelt, um mehrere Domänen mit demselben System aus Tokens und Komponenten zu bedienen: Admin-Dashboards, Lernumgebungen, Verwaltungssysteme, Raumbuchung und Blogs.

ITCSS + CUBE CSS Utility-first + Komponenten Nativer Dark Mode Barrierefrei per Standard Keine Abhängigkeiten

Warum es Cerne gibt

Ein leistungsstarkes Werkzeug für moderne Webentwicklung

Cerne befindet sich in Version 0.1 — ein komplettes Design System, von Grund auf gebaut, mit einem einfachen Zweck: jedem eine schnelle, robuste und kostenlose Grundlage zu geben, um Systeme vom Papier ins Internet zu bringen, ohne CDN-Abhängigkeit, ohne Lizenz, ohne Vendor-Lock-in und ohne Paywall. Open Source, für alle zugänglich, für immer.

Was in v0.1 bereits fertig ist

40+ produktionsreife Komponenten — App Shell, Datatable, Kalender, Diagramme, Chat, Video-Player, Modals, erweiterte Formulare und mehr.
43 vollständige, kopierbereite Beispiele: Dashboards, E-Commerce, Streaming, Webmail, soziales Netzwerk, Nachrichtenportal, LLM-Chat, Smart TV ...
Keine externen Abhängigkeiten — kein jQuery, kein CDN, kein Pflicht-Build in Produktion. Öffnet sich per Doppelklick auf die HTML-Datei.
Nativer Dark Mode, prefers-reduced-motion/prefers-color-scheme werden automatisch respektiert.

Echtes RTL über logische Eigenschaften — kein Spiegelungs-Hack.
WCAG-2.1-AA-Barrierefreiheit standardmäßig in jeder interaktiven Komponente.
Echte Internationalisierung — 168 Beispielseiten übersetzt in CJK, Arabisch, Hindi und Russisch, nicht nur die Oberfläche.
Echtes modernes CSS — Container Queries, Cascade Layers, color-mix(), clamp(), konfigurierbare Dichte via data-density.

Es ist eine v0.1 aus Entscheidung, nicht aus Einschränkung: Der Kern ist bereits solide und im echten Einsatz in den 43 Beispielen oben, aber das Projekt entwickelt sich weiter öffentlich — jede neue Version fügt mehr Primitive, mehr Sprachen, mehr Komponenten hinzu, ohne Bestehendes zu brechen.

RV

Ricardo Cezar Volert Curitiba, Paraná, Brasilien

Schöpfer und Maintainer von Cerne. Das gesamte Framework — Tokens, Komponenten, die 43 Beispiele und die regionalen Varianten — wurde von Ricardo entworfen und in Zusammenarbeit mit KI (Claude von Anthropic) gebaut, mit dem Ziel, ein gutes, offenes und kostenloses Werkzeug für alle zu hinterlassen, die die nächste Generation von Web-Systemen bauen.

Website Instagram GitHub Codeberg Lattes ORCID LinkedIn

Installation

Kopiere die kompilierten Dateien aus dist/ in dein Projekt und referenziere sie direkt. Kein Build-Schritt nötig, um das Framework zu nutzen.

<link rel="stylesheet" href="dist/css/cerne.css">

<!-- Am Ende des body: klassisches Script (nicht type="module"), um window.Cerne bereitzustellen -->
<script src="dist/js/cerne.js"></script>

Um das kurze Aufblitzen des falschen Themes vor dem Laden des JS zu vermeiden, füge diesen Ausschnitt im <head> ein, vor dem CSS:

<script>
  var t = localStorage.getItem('cerne-theme');
  if (t) document.documentElement.setAttribute('data-theme', t);
</script>

Farben

Primitive Paletten mit 11 Farbtönen + semantischer Schicht (--cerne-color-primary, -hover, -active, -subtle...), die automatisch zwischen Hell- und Dunkel-Theme den Wert wechselt. Die untenstehenden Werte werden live aus dem kompilierten CSS gelesen — sie geraten nie außer Sync mit dieser Dokumentation.

Abstände

4px-Skala, verfügbar als --cerne-space-* und als Utilities p-*, m-*, gap-*.

Typografie

Modulare Skala (~1,25), Standardschrift = System-Font-Stack (keine Netzwerkanfragen). Überschreibe --cerne-font-sans, um eine eigene selbst gehostete Schrift zu nutzen.

Radius & Schatten

Elevation mit unterschiedlichen Rezepten für Hell/Dunkel — dunkle Schatten verschwinden nicht auf dunklem Hintergrund.

Radius

Schatten

Grid

Klassisches .row/.col-*-API über CSS Grid, plus Utilities .grid-cols-* / .col-span-* mit responsiven Präfixen md:, lg:.

<div class="row">
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
</div>

App Shell

Das zentrale Primitiv für Dashboards: Sidebar + Topbar + Main via grid-template-areas, mit Kollaps zu Off-Canvas unterhalb von lg. Diese Seite selbst nutzt .app-shell.

<div class="app-shell" id="app-shell">
  <div class="app-shell__backdrop"></div>
  <aside class="app-shell__sidebar">...</aside>
  <header class="app-shell__topbar">...</header>
  <main class="app-shell__main">...</main>
</div>

Buttons

Solide, umrandete und Ghost-Varianten für jede semantische Farbe, plus Größen und Ladezustand.

<button class="btn btn-primary">Primär</button>
<button class="btn btn-outline-primary">Umrandet</button>
<button class="btn btn-ghost-primary">Ghost</button>

Formulare

Gestylte native Controls, Validierung via data-cerne-validate (Constraint Validation API) und per Attribut anpassbare Fehlermeldungen.

<form data-cerne-validate novalidate>
  <div class="form-group">
    <label class="form-label" for="email">E-Mail</label>
    <input class="form-control" type="email" id="email" required
      data-error-required="Bitte E-Mail eingeben.">
    <span class="form-error"></span>
  </div>
</form>

Weitere Formulare

Floating Label, Passwort mit Stärkeanzeige und Sichtbarkeit, OTP-Code, Suche mit Löschen, Slider, Tags, Combobox, auswählbare Cards, Segment-Umschalter, Drag-Upload und Zeichenzähler — für jeden Ablauf, von Login bis Checkout.

Vollständiger Name

Passwort

Stärke: —

Bestätigungscode

Suche

Preisspanne

Cards

Buchungen heute 24 +12% ggü. gestern

Card-Titel

Card-Inhalt mit Beispieltext.

Medien

.carousel (ein Slide zur Zeit, mit Punkten und optionalem Autoplay) und .shelf (horizontal scrollbare Reihe, RTL-fähig) — für den Hero-Bereich eines institutionellen Portals bzw. Streaming-Kataloge.

Karussell (data-cerne-carousel-autoplay)

Folie 1

Folie 2

Folie 3

Regal (Maus darüberbewegen, um Pfeile anzuzeigen)

Illustration von Bergen bei Sonnenuntergang

Illustration von Bergen bei Sonnenuntergang, in Schwarzweiß

<div class="carousel" data-cerne-carousel data-cerne-carousel-autoplay="5000">
  <div class="carousel-track">
    <div class="carousel-slide">...</div>
  </div>
  <button data-cerne-carousel-prev>‹</button>
  <button data-cerne-carousel-next>›</button>
  <div class="carousel-dots"></div>
</div>

<div class="shelf" data-cerne-shelf>
  <button data-cerne-shelf-prev>‹</button>
  <div class="shelf-track">
    <div class="shelf-item"><img src="poster.jpg" alt="..." /></div>
  </div>
  <button data-cerne-shelf-next>›</button>
</div>

Video

Cerne.VideoPlayer — Progressive Enhancement über bestehendem Video-Markup (erzwingt kein eigenes HTML): Play/Pause, Seek per Klick, Lautstärke, Geschwindigkeitsregelung. Läuft mit einer "simulierten Uhr", wenn kein echtes <video> vorhanden ist (wie unten), oder spiegelt ein natives <video> (MP4, HLS via hls.js...), wenn du [data-video-element] übergibst — die tatsächliche adaptive Streaming-Auslieferung liegt in der Verantwortung der implementierenden Person, außerhalb des Umfangs eines CSS/JS-Frameworks.

<div class="player" id="player" data-duration="196">
  <button data-video-toggle>▶</button>
  <div class="player-controls">
    <div class="progress" data-video-seek><div class="progress-bar" data-video-fill></div></div>
    <button data-video-mute-toggle>🔊</button>
    <input type="range" data-video-volume min="0" max="1" step="0.05" value="1">
    <span data-video-time>0:00 / 0:00</span>
    <button data-video-speed="1.5">1.5x</button>
  </div>
</div>

<script>
  new Cerne.VideoPlayer(document.getElementById("player"), { duration: 196 });
</script>

Vollständige Beispiele: Video mit WebVTT-Untertiteln, Streaming mit "nächste Folge", Übertragung live: true und Smart TV mit D-Pad-Navigation.

Tabelas & Datatable

.table für statische Tabellen; [data-cerne-datatable] fügt Sortierung, Suche und clientseitige Paginierung ganz ohne Abhängigkeit hinzu.

Name	Kurs	Fortschritt
Marina Silva	Computernetzwerke	92%
Diego Souza	Datenbanken	78%
Ana Beatriz	Algorithmen	65%
Lucas Pereira	Computernetzwerke	40%
Juliana Melo	Betriebssysteme	88%
Rafael Costa	Datenbanken	55%

Redaktioneller Inhalt

Spalten, Hervorhebungskästen, Textmarkierung mit erklärender Notiz und Lesefortschrittsleiste — für Blog, Nachrichtenportal oder jeden langen Text innerhalb von .prose. Schau übrigens oben auf den Bildschirm: der dünne farbige Balken über dem Menü ist .reading-progress, der den Scroll dieser Dokumentationsseite selbst verfolgt.

Kästen (.callout)

Siehe auch

Ein Link zu einem verwandten Artikel.

Hinweis oder hervorgehobene Korrektur mitten im Text.

Erklärende Notiz zu einem mit <mark> markierten Begriff im Absatz oben — im "Glossar"/"KI erklärt"-Stil von Nachrichtenportalen.

Textmarkierung (<mark data-cerne-reveal="mark">) + Glossar-Kasten — die Hervorhebungsfarbe "malt sich" von links nach rechts (oder umgekehrt bei dir="rtl") ein, sobald der Begriff ins Bild scrollt, statt fertig zu erscheinen.

Der Berichterstatter betonte, dass der neue Regulierungsrahmen das Genehmigungsverfahren im Plenum ändert.

Regulierungsrahmen ist die Gesamtheit der Regeln, die einen bestimmten Sektor regeln, erlassen oder geändert durch Gesetz oder Verordnung.

Textspalten (.columns-2 / .columns-3, innerhalb von .prose)

Erste Spalte: Der Text fließt vertikal und bricht in die nächste Spalte um.

Zweite Spalte: nützlich für kurze Listen mit Highlights, Glossare oder Zitate — kollabiert zu 1 Spalte unterhalb von md.

<p>Der neue <mark data-cerne-reveal="mark">Regulierungsrahmen</mark> ändert das Genehmigungsverfahren.</p>
<div class="callout callout-glossary">
  <svg class="callout-icon"><use href="sprite.svg#icon-search"></use></svg>
  <div class="callout-body"><strong>Regulierungsrahmen</strong> ist...</div>
</div>

<div class="columns-2"><p>...</p><p>...</p></div>

<div class="reading-progress"><div class="reading-progress-bar"></div></div>

Ein vollständiges Beispiel im Kontext siehst du im Blogbeitrag oder im Artikel des Nachrichtenportals.

Modals & Offcanvas

Wird für Filter, Warenkörbe oder schnelle Details verwendet, ohne die Seite zu verlassen.

Alerts & Toasts

Erfolg

Deine Buchung wurde bestätigt.

Achtung

Dieser Zeitslot ist fast ausgebucht.

Navigation

Tabs, Accordion, Breadcrumb, Paginierung und Command Palette (⌘K).

Inhalt des ersten Tabs.

Was ist Cerne?

Ein in sich geschlossenes Design System für mehrere Produktdomänen.

Brauche ich einen Build, um es zu nutzen?

Nein — die Dateien in dist/ sind bereits das Endprodukt.

Command Palette — klicken oder Ctrl/⌘ + K drücken

<button data-cerne-command-palette-open>Suchen...</button>

<div class="command-palette" data-cerne-command-palette hidden>
  <div class="command-palette-dialog" role="dialog" aria-modal="true">
    <div class="command-palette-search">
      <input type="text" placeholder="Befehl eingeben...">
    </div>
    <div class="command-palette-results">
      <div class="command-palette-group">
        <button class="command-palette-item" data-href="pagina.html">...</button>
      </div>
    </div>
  </div>
</div>

Kalender & Buchung

Wochenraster für Raumbuchungen — siehe das vollständige Beispiel unter Raumbuchung.

Bestätigt Ausstehend Meine Buchung

Diagramme

Kleine, abhängigkeitsfreie SVG-Diagramme (Cerne.Chart.bar/line/donut).

Weitere Komponenten

List Group, Spinner, Rating, Hero und Pricing — für Shops, institutionelle Portale, Marketing-Seiten und Kataloge.

Übersicht Einstellungen Benachrichtigungen

4.2 (128)

Beliebt

Pro

49 €/Monat

Unbegrenzte Nutzer
Priorisierter Support

<div class="rating">
  <svg class="is-filled"><use href="sprite.svg#icon-star"></use></svg>
  <!-- ... -->
  <span class="rating-count">4.2 (128)</span>
</div>

Bilder

Zuschnitt (object-fit/aspect-ratio), CSS-Filter (grayscale, blur-*, brightness-*...) und Behandlungsrezepte (Hover-Zoom, Scrim für Bildunterschrift, Duotone, organischer Zuschnitt) — alles reines CSS, ohne Bildverarbeitungsbibliothek. Die Fotos auf dieser Seite sind selbst erstellte SVG-Illustrationen, damit die Doku zu 100 % in sich geschlossen bleibt.

Zuschnitt & Seitenverhältnis

.aspect-video/.aspect-square/.aspect-portrait fixieren das Seitenverhältnis des Containers; .object-cover füllt ihn ohne Verzerrung.

aspect-video

aspect-square

aspect-portrait

<img class="aspect-video object-cover rounded-md" src="foto.jpg" alt="..." />

Filter

Atomare, kombinierbare Klassen (class="grayscale contrast-125") — jede steuert eine einzelne filter-Eigenschaft.

kein Filter

grayscale

sepia

blur-sm

brightness-50

brightness-150

contrast-150

saturate-0

saturate-200

hue-rotate-90

invert

Kombinierte Filter grayscale und contrast-125

grayscale contrast-125

<img class="grayscale" src="foto.jpg" alt="..." />
<img class="sepia" src="foto.jpg" alt="..." />
<img class="blur-sm" src="foto.jpg" alt="..." />
<img class="brightness-150 contrast-125" src="foto.jpg" alt="..." />

Behandlungen

Rezept-Klassen (mehrere Eigenschaften je Klasse, wie .bg-aurora) für gängige Foto-Card-Muster.

<div class="img-hover-zoom rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
</div>

<div class="img-scrim rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
  <div class="img-scrim-caption"><strong>Talpfad</strong></div>
</div>

<div class="img-duotone aspect-square"><img src="foto.jpg" alt="..." /></div>
<div class="img-blob aspect-square"><img src="foto.jpg" alt="..." /></div>

Moderne Trends

Bento grid, spotlight card, borda em gradiente, glow, grão/ruído, aurora, marquee, FAB e barra de progresso de leitura — técnicas visuais atuais, prontas para qualquer aplicação.

Bento-Grid Asymmetrisches Raster im Apple-Stil, mit Spotlight bei Hover.

Einfaches Element

Gradient-Rand

Card mit Gradient-Rand

Marquee (Pause bei Hover)

Design System Barrierefreiheit Dark mode RTL Design System Barrierefreiheit Dark mode RTL

Dieser Block nutzt data-cerne-reveal — scrolle die Seite, um die Animation zu sehen.

<div class="bento-grid">
  <div class="bento-item bento-span-2 card-spotlight">...</div>
  <div class="bento-item">...</div>
</div>

<div data-cerne-reveal="up">Erscheint beim Scrollen</div>
<span data-cerne-count-up="1284" data-cerne-count-up-format>0</span>

Variantes de utilitário & adaptação regional

hover:, focus:, focus-visible:, active:, disabled:, focus-within: und dark: vor jeder Farb-/Schatten-/Opazitäts-Utility, plus group-hover:/peer-checked: in reinem CSS (ohne JS — .group/.peer sind nur Marker), Container Queries (.cq + cq-md:) und die Primitive, die das Framework an UI-Muster jeder Region anpassbar machen — nicht nur westliche.

Bewege die Maus über diese Card

Der Button daneben nutzt group-hover:opacity-100 — erscheint erst, wenn das Eltern-Element (.group) im Hover ist.

data-density="compact" am <html> multipliziert die gesamte Abstandsskala auf einmal — nähert sich dem Muster hoher Informationsdichte an, das in ostasiatischen Portalen/E-Commerce üblich ist. .break-keep und .write-vertical decken Textumbruch und vertikale Schrift in CJK ab; --cerne-line-height-base wird automatisch großzügiger bei :lang(ar|he|hi|bn|ta|te|th). Siehe die 9 Beispielseiten (Shop/Nachrichten/Dashboard × CJK/RTL/Südasien) unter Beispiele ansehen.

<div class="group card">
  <button class="opacity-25 group-hover:opacity-100 hover:bg-primary">...</button>
</div>

<div class="cq">
  <div class="flex-col cq-md:flex-row">...</div> <!-- reage ao espaço do .cq, não do viewport -->
</div>

<html data-density="compact"> <!-- ou "spacious" -->

Icons

87 selbst erstellte Icons in einem einzigen SVG-Sprite (dist/icons/sprite.svg), referenziert via <use>.

Barrierefreiheit

Das Ziel ist WCAG 2.1 Stufe AA — der internationale Standard, unabhängig von Land oder Sprache — kein Tool oder Siegel einer bestimmten Jurisdiktion.

Jede interaktive Komponente hat einen sichtbaren :focus-visible-Zustand und Tastaturnavigation (Pfeile bei Tabs/Menüs, Esc zum Schließen, gefangener Tab in Modals, Roving Tabindex bei Tabs).
prefers-reduced-motion und prefers-color-scheme werden automatisch respektiert, ohne zusätzliche Konfiguration.
Textfarben auf soliden Hintergründen wurden für AA gewählt — besonders bei warning/info, die dunklen statt weißen Text verwenden, weil weiß nicht genug Kontrast erreicht.
Formulare verknüpfen Label (for/id), Fehler und aria-invalid; der Fehlerzustand hängt nie nur von Farbe ab.
Aktive Navigationslinks erhalten aria-current="page"; Landmarks (main, nav, aside) und ein einziges <h1> je Seite strukturieren das Dokument für Screenreader.
Beschreibender Alt-Text für Bilder/Grafiken liegt in der Verantwortung der Person, die das Framework nutzt — Cerne kann das nicht automatisch für dich erzeugen. Die brasilianische Konvention #PraCegoVer (das Bild in der eigenen Bildunterschrift/im Alt-Text beschreiben) ist eine gute Angewohnheit, aber die eigentlich wichtige Praxis — einen alt-Text schreiben, der das Bild beschreibt, nicht das Offensichtliche wiederholt — gilt in jeder Sprache.
Zu VLibras und Gebärdensprache-Übersetzungstools: Sie sind absichtlich nicht eingebettet, da sie von einem externen Script (Drittanbieter-CDN) abhängen und sprach-/länderspezifisch sind — das würde sowohl "keine externen Abhängigkeiten" als auch "internationales Framework" widersprechen. Die korrekte und universelle Grundlage ist gut gemachtes semantisches HTML + ARIA, das jede assistive Technologie der Welt bereits interpretieren kann; ein spezifisches Übersetzungs-Widget kann projektweise darüber gelegt werden, wenn es sinnvoll ist.
Echtes RTL: Die Komponenten nutzen logische Eigenschaften (inset-inline-start, margin-inline-end, text-align: start...) statt fixem left/right, sodass dir="rtl" am <html> genügt, um Sidebar, Dropdown, Tabs, Formulare und Navigation zu spiegeln — ohne zusätzliches CSS. Live ansehen:

Card mit seitlichem Akzent

Der Rand folgt dem Textanfang, nicht einer festen Seite.

E-Mail-Benachrichtigungen

<html lang="ar" dir="rtl">
  <!-- Sidebar, Dropdown, Tabs, Formulare... alles spiegelt sich automatisch -->

Datenschutz & Einwilligung

Generisches Cookie-/Consent-Banner — dasselbe "essenziell / analyse / marketing"-Muster, das von GDPR (EU), LGPD (Brasilien) und CCPA (Kalifornien) verwendet wird, ohne Abhängigkeit von einer Drittanbieter-Plattform für Consent-Management.

<div class="consent-banner" data-cerne-consent hidden role="region" aria-label="Cookie-Hinweis">
  <p class="consent-banner-text">Wir verwenden essenzielle Cookies...</p>
  <div class="consent-banner-actions">
    <button data-cerne-consent-customize
      data-cerne-toggle="modal" data-cerne-target="#consent-preferences">Anpassen</button>
    <button data-cerne-consent-reject>Nicht-essenzielle ablehnen</button>
    <button data-cerne-consent-accept>Alle akzeptieren</button>
  </div>
</div>

<!-- Cerne.Consent.get() / .set({analytics, marketing}) / .reset() -->

Die Wahl wird in localStorage gespeichert (Schlüssel cerne-consent), nie in einem Drittanbieter-Cookie, und nie irgendwohin gesendet — was dein Backend mit Cerne.Consent.get() macht, ist deine Entscheidung. Das Banner erscheint nur automatisch, wenn die Seite ein [data-cerne-consent]-Element enthält; in dieser Dokumentation wurde es absichtlich weggelassen, um nicht aufdringlich zu sein — sieh dir das vollständige Beispiel im Blog, im Shop oder im institutionellen Portal an.

Vollständige Beispiele

42 vollständig mit Cerne gebaute Seiten, die Admin-Dashboard, Lernen, Verwaltung, Buchung, Inhalte, Nachrichtenportal, E-Commerce, institutionelle Websites, Video, soziales Netzwerk, Streaming, Chat-Assistent und Portfolio abdecken — jede mit einer eigenen CJK-, RTL-, Südasien- und Russland-Variante, mit vollständiger Übersetzung der Oberfläche (168 regionale Seiten, ~210 insgesamt), erreichbar über die Leiste "Regionale Variante" oben in jedem Beispiel.

Regionale Varianten (CJK, RTL, Südasien, Russland)

Jede Seite jedes obigen Beispiels hat eine CJK-, RTL-, Südasien- und Russland-Variante — 168 regionale Seiten insgesamt — öffne eine beliebige und nutze die Leiste "Regionale Variante" oben, um zwischen ihnen zu navigieren. CJK, RTL und Südasien nutzen die unter Varianten & Regional beschriebenen Primitive — data-density, .break-keep/.write-vertical, dir="rtl" und --cerne-line-height-base je Sprache; die Russland-Variante nutzt lang="ru" mit russischem Text über derselben LTR-Struktur des Originalbeispiels (ohne zusätzliche logische Eigenschaften, da sich Russisch in dieser Hinsicht wie Portugiesisch verhält). Die 168 Seiten haben eine vollständige Übersetzung — nicht nur die Oberfläche (Navigation, Buttons, Formulare, Beschriftungen, Leerzustände), sondern auch dynamische Inhalte: Produktnamen und -beschreibungen, Beispiel-E-Mails (Betreff und Text), Suchergebnisse, Video-/Serientitel und -beschreibungen, das Beispielgespräch des Assistenten und der Text langer Artikel/Beiträge, jede Domain mit einer eigenen Kopie der Beispieldaten je Sprache (z. B. store-data.cjk.browser.js / store-data.ru.browser.js). Auch das Cookie-Banner wurde übersetzt; nur kleine Fußnoten, die die Variante selbst beschreiben (und Eigennamen von Personen), bleiben auf Portugiesisch, da es sich um Dokumentationstext für Personen handelt, die den Quellcode lesen, nicht um App-Inhalt.

Beispiel	CJK	RTL	Südasien	Russland
Admin-Dashboard	Öffnen	Öffnen	Öffnen	Öffnen
Lernumgebung	Öffnen	Öffnen	Öffnen	Öffnen
Dozentenseite	Öffnen	Öffnen	Öffnen	Öffnen
Verwaltung / CRUD	Öffnen	Öffnen	Öffnen	Öffnen
Raumbuchung	Öffnen	Öffnen	Öffnen	Öffnen
Blog	Öffnen	Öffnen	Öffnen	Öffnen
Blog — Beitrag	Öffnen	Öffnen	Öffnen	Öffnen
Nachrichtenportal	Öffnen	Öffnen	Öffnen	Öffnen
Nachrichtenportal — Artikel	Öffnen	Öffnen	Öffnen	Öffnen
E-Commerce-Shop	Öffnen	Öffnen	Öffnen	Öffnen
E-Commerce-Shop — Produkt	Öffnen	Öffnen	Öffnen	Öffnen
Laborwebsite	Öffnen	Öffnen	Öffnen	Öffnen
Institutionelles Portal	Öffnen	Öffnen	Öffnen	Öffnen
Website einer Forschungsgruppe	Öffnen	Öffnen	Öffnen	Öffnen
Authentifizierung — Login	Öffnen	Öffnen	Öffnen	Öffnen
Authentifizierung — Registrierung	Öffnen	Öffnen	Öffnen	Öffnen
Authentifizierung — OTP-Verifizierung	Öffnen	Öffnen	Öffnen	Öffnen
Fehler 404	Öffnen	Öffnen	Öffnen	Öffnen
Fehler 500	Öffnen	Öffnen	Öffnen	Öffnen
Videoplattform	Öffnen	Öffnen	Öffnen	Öffnen
Videos — Ansehen	Öffnen	Öffnen	Öffnen	Öffnen
Videos — Playlist	Öffnen	Öffnen	Öffnen	Öffnen
Soziales Netzwerk (Feed)	Öffnen	Öffnen	Öffnen	Öffnen
Soziales Netzwerk (Profil)	Öffnen	Öffnen	Öffnen	Öffnen
Streaming — Login	Öffnen	Öffnen	Öffnen	Öffnen
Streaming — Profile	Öffnen	Öffnen	Öffnen	Öffnen
Video-Streaming	Öffnen	Öffnen	Öffnen	Öffnen
Streaming — Titel	Öffnen	Öffnen	Öffnen	Öffnen
Streaming — Ansehen	Öffnen	Öffnen	Öffnen	Öffnen
Streaming — Entdecken	Öffnen	Öffnen	Öffnen	Öffnen
Streaming — Live	Öffnen	Öffnen	Öffnen	Öffnen
Chat-Assistent (LLM)	Öffnen	Öffnen	Öffnen	Öffnen
Portfolio (Bento-Grid)	Öffnen	Öffnen	Öffnen	Öffnen
Analytics-Dashboard	Öffnen	Öffnen	Öffnen	Öffnen
Webmail (Gmail-Stil)	Öffnen	Öffnen	Öffnen	Öffnen
Webmail (Outlook-Stil)	Öffnen	Öffnen	Öffnen	Öffnen
Suche (minimalistisch)	Öffnen	Öffnen	Öffnen	Öffnen
Suche (minimalistisch) — Ergebnisse	Öffnen	Öffnen	Öffnen	Öffnen
Suche (dichter Portal-Stil)	Öffnen	Öffnen	Öffnen	Öffnen
Suche (dichter Portal-Stil) — Ergebnisse	Öffnen	Öffnen	Öffnen	Öffnen
Smart-TV-Interface	Öffnen	Öffnen	Öffnen	Öffnen
Smart TV — Player	Öffnen	Öffnen	Öffnen	Öffnen
Adaptive internationale Registrierung (passt sich bereits per JS an das Land an — keine statischen Varianten)	—	—	—	—

Ein komplettes Design System, von Grund auf, ohne externe Abhängigkeiten

Ein leistungsstarkes Werkzeug für moderne Webentwicklung

Was in v0.1 bereits fertig ist

Installation

Farben

Abstände

Typografie

Radius & Schatten

Radius

Schatten

Grid

App Shell

Buttons

Formulare

Weitere Formulare

Cards

Medien

Video

Tabelas & Datatable

Redaktioneller Inhalt

Modals & Offcanvas

Seitenpanel

Alerts & Toasts

Navigation

Kalender & Buchung

Diagramme

Weitere Komponenten

Bilder

Zuschnitt & Seitenverhältnis

Filter

Behandlungen

Moderne Trends

Variantes de utilitário & adaptação regional

Icons

Barrierefreiheit

Datenschutz & Einwilligung

Vollständige Beispiele

Regionale Varianten (CJK, RTL, Südasien, Russland)