Card
Karten & InhalteGemeinsame Flächen, Abschnitte und Kennzahlen.
Das Baubiber Designsystem
Baubiber verbindet Waldgrün und Bauorange mit klarer Schrift und weicher Tiefe. Hier findest du die Komponenten und Muster unserer Oberflächen.
Projekt im Überblick
Budget
Ausgegeben
Beispielhafte Projektdaten · Apr.–Sep. 2026
Diagramme
Klare Skalen, benannte Datenreihen und lesbare Werte. Unsere Diagramme nutzen dieselben Farbrollen, Schriften und Flächen wie der Rest der Oberfläche.
22.400 €
EUR
58
erledigte Arbeitspunkte
25
Projekte
Beispielhafte Projektdaten · Apr.–Sep. 2026
Komponenten
121 von 121 Komponenten
Interaktive Beispiele verwenden erfundene Projektdaten. Sie ändern kein Konto.
Gemeinsame Flächen, Abschnitte und Kennzahlen.
Gemeinsame Flächen, Abschnitte und Kennzahlen.
Ein Projekt mit Ort, Status und optionalem Bild.
Aktionen mit klarer visueller Hierarchie.
Aktionen mit klarer visueller Hierarchie.
Projekt, Fortschritt und wartende Aufgaben.
Lokale Daten suchen, filtern und sortieren.
Datum und Zeiträume im Kontext.
Textfelder mit Labels und Validierung.
Eine Auswahl: Radio, Karte oder Segment.
Feste Zeichenfläche mit Zoom am Mauszeiger, freiem Verschieben und Tastatursteuerung.
Personen und Unternehmen.
Kurze Labels für Status und Metadaten.
Informationen, Hinweise und Fehlerbehebung.
Unabhängige Auswahl mit verbundenem Label.
Durchsuchbare Aktionen und Ziele.
Die Konsequenz vor der Bestätigung.
Kontextaktionen für einen Eintrag.
Tastatureingabe und Kalenderauswahl.
Konzentrierte Aufgaben im aktuellen Kontext.
Ein kompaktes Menü verwandter Aktionen.
Kompakte Filterkopfzeile mit Popovers und aktiven Filtern.
Suche, einzelne und mehrere Filter.
Namen mit optionalem Identitätsbild.
Sichtbare Namen, verbunden mit dem Feld.
Einstellungen und Ziele in gruppierten Zeilen.
Ein gemeinsamer Rahmen für Medien.
Ergänzende Inhalte neben dem Auslöser.
Barrierefreie Interaktion ohne eigene Optik.
Einen Wert aus einer Liste wählen.
Eine ruhige Trennung innerhalb einer Gruppe.
Laden, das die Form des Inhalts erhält.
Einstellungen, die sofort gelten.
Regeln für eine gezielte Datenansicht.
Verzögerte Suche mit lokalem Entwurf.
Sortieren mit Richtung und zugänglichem Zustand.
Strukturierte Einträge mit ausgerichteten Zahlen.
Ansichten im gleichen Kontext wechseln.
Längere Notizen mit optionalem Zeichenzähler.
Helle, dunkle und Systemdarstellung.
24-Stunden-Zeit mit Tastaturschritten.
Kurze Erklärungen bei Hover und Fokus.
Die Konsequenz vor der Bestätigung.
Ein kompaktes Menü verwandter Aktionen.
So wird dein eingegebener Betrag gelesen.
Zeilen erscheinen mit ruhiger, gestaffelter Bewegung.
Ein fester Bildausschnitt für wechselnde Medien.
Personen und Unternehmen.
Kurze Labels für Status und Metadaten.
Ein nativer Dialog vom unteren Bildschirmrand mit Titel und Aktionen.
Unabhängige Auswahl mit verbundenem Label.
Eine Auswahl: Radio, Karte oder Segment.
Eine kurze Feier nach einem erreichten Schritt.
Tastatureingabe und Kalenderauswahl.
Tastatureingabe und Kalenderauswahl.
Text direkt dort ändern, wo du ihn liest.
Die nächsten Schritte am unteren Formularrand.
Ein verständlicher Ladezustand für die ganze Ansicht.
Symbole in passenden Größen und semantischen Farben.
Die gemeinsam verwendeten Symbole der App.
Namen mit optionalem Identitätsbild.
Textfelder mit Labels und Validierung.
Sichtbare Namen, verbunden mit dem Feld.
Einstellungen und Ziele in gruppierten Zeilen.
Laden, das die Form des Inhalts erhält.
Ein gemeinsamer Rahmen für Medien.
Konzentrierte Aufgaben im aktuellen Kontext.
Bewegung auf dem Gerät mit ruhiger Browserdarstellung.
Ergänzende Inhalte neben dem Auslöser.
Barrierefreie Interaktion ohne eigene Optik.
Barrierefreie Interaktion ohne eigene Optik.
Überschriften, Absätze und verständliche Listen.
Seitentitel, Erklärung und passende Aktionen.
Zusammengehörige Inhalte mit Platz für lange Listen.
Ein alphabetischer Schnellzugriff für lange Listen.
Eine Auswahl: Radio, Karte oder Segment.
Eine ruhige Trennung innerhalb einer Gruppe.
Laden, das die Form des Inhalts erhält.
Einen Wert innerhalb eines Bereichs anpassen.
Kurze Einführungen mit klarer Reihenfolge.
Einstellungen, die sofort gelten.
Die sieben nativen Schriftrollen mit Outfit und DM Sans.
Beginn und Ende gemeinsam auswählen.
Zwischen verwandten Zielen wechseln.
Eine kompakte Suche neben den Filtern.
Durchsuchbare Optionen mit ausgewähltem Wert.
Eine Auswahl als beschriftete Karten.
Suchen und Aktionen aus einem Dialog starten.
Verwandte native Aktionen als Gruppe.
Eine Kennzahl mit Kontext und optionalem Symbol.
Ein betitelter Abschnitt mit Inhalt und Aktionen.
Ein klares Ziel mit Beschreibung und nächstem Schritt.
Zusammengehörige Aktionen in einer Gruppe.
Projektanfragen im öffentlichen Marktplatz.
Öffentliche Firmenprofile mit Leistungen und Verifizierung.
Auftraggeber, Referenz und aufklappbare Details.
Arbeitsumfang, Schritte und Sicherheitshinweise.
Was fehlt und wie es weitergeht.
Ein verständlicher Fehler mit Wiederholen-Aktion.
Seitentitel, Erklärung und passende Aktionen.
Ungelesene und wartende Einträge, bis 99+.
Einträge mit Details durchsuchen und auswählen.
Bestätigte Identität mit Text oder kompaktem Symbol.
Bobos Zuhören, Denken und Sprechen.
Ein ehrlicher Hinweis bei ungeprüften KI-Vorschlägen.
Eigene und eingehende Nachrichten mit Zeit und Absender.
Bilder mit Beschriftung und gemeinsamem Medienrahmen.
Ein Bild groß öffnen und durch die Sammlung blättern.
Einführung und nächste Aktion im öffentlichen Bereich.
Die Projektillustration, wenn noch kein Foto da ist.
Native Kennzahl mit Kontext.
Ein nativer Abschnitt mit Titel und Inhalt.
Ein natives Ziel mit Symbol und Beschreibung.
Ein Feld mit verbundenem Symbol oder Zusatz.
Personenbilder, Namenschips und Avatargruppen.
Budget, Ausgaben und Verbrauch auf einen Blick.
Offene, überfällige und noch nicht berechnete Beträge.
Die Schritte des Projekts und der aktuelle Stand.
Bobos Status und Unterhaltung als eigene Ansicht.
Lokalisierte Geldbeträge mit ausgerichteten Ziffern.
Die native Projektillustration ohne Foto.
Marke & Grundlagen
Eine praktische, warme Marke für echte Arbeit. Waldgrün führt, Orange hebt hervor – und dein Projekt bekommt Raum.
Verwende die Originaldatei, behalte die Proportionen bei und lass rundherum Platz.


--primary--brand-orange--card--foregroundKombiniere jede Statusfarbe mit ihrer vorgesehenen Fläche. Ergänze immer Text oder ein Symbol.
Abgeschlossen
--successBraucht Aufmerksamkeit
--warningInformation
--infoFehler
--destructiveMarketing
Gute Arbeit beginnt mit Klarheit.
Syne / Wix Madefor Text
Web & Admin
Gute Arbeit beginnt mit Klarheit.
Inter
Native App
Gute Arbeit beginnt mit Klarheit.
Outfit für Titel und Zahlen. DM Sans für Fließtext. Schriftstärke 400.
Der native Rhythmus: 20pt Seitenrand, 16pt Kartenabstand innen, 12pt zwischen gleichrangigen Karten und 24–32pt zwischen Abschnitten.
481216243248Karten, angehobene Flächen und Overlays haben Schatten aus dem gemeinsamen Theme. Die Komponente wählt die Stufe; der Bildschirm ordnet sie an.