Perlab · Marke und Oberfläche

Einfach durchgleiten.

Perlab kommt von lateinisch perlabor: hindurchgleiten. Ink trägt Text und die Primäraktion. Der Glow aus dem Logo liefert die Farben mit Bedeutung: Rose wählt aus, Orange steht für KI und Upgrade, Sun weist hin. Grün und Rot zeigen nur Zustände. Faustregel: 90 % Ink und Weiß, 8 % eine Farbe mit Bedeutung, 2 % Glow.

Marke

Logo-System

Ein Bogen mit Öffnung: ein Tor, durch das man hindurchgleitet. Bildmarke und Wortmarke (Lexend Deca, als Pfade) sind offiziell und werden nie neu gezeichnet; alle Dateien entstehen aus brand/scripts/build-logo.mjs.

Dateien

Komponente `Logo.svelte`

Inline-SVG aus derselben Geometrie. size ist die Höhe der Kachel bzw. der Bildmarke in px, wordmark blendet die Wortmarke ein, tone färbt Wortmarke und einfarbige Marke. variant: tile (Glow-Kachel mit weißem Bogen), glow (Marke im Verlauf ohne Kachel), mono (einfarbig).

<Logo variant="tile" tone="ink" />

<Logo variant="tile" tone="white" />

<Logo variant="glow" tone="ink" />

<Logo variant="glow" tone="white" />

<Logo variant="mono" tone="ink" />

<Logo variant="mono" tone="white" />

Schutzraum

Rundum die Breite der Bogenöffnung (x = ¼ der Kachel). Im Lockup steht die Wortmarke eine Öffnungsbreite neben der Kachel.

Mindestgrößen

Darunter läuft die Öffnung des Bogens zu. Hier in Originalgröße.

Kachel 16 px

Lockup 20 px Höhe

Wortmarke 12 px Höhe

Nicht

Verlauf umfärben oder drehen
Marke ohne Kachel auf Fotos setzen
Wortmarke in einer anderen Schrift nachsetzen
Schatten, Kontur, Verzerrung

Marke

Farben

Die Marke hat einen Verlauf, den Glow: Rose → Orange → Sun. Weitere Markenfarben gibt es nicht. Grün und Rot sind reine Zustandsfarben, Ink ist die warme Neutralskala. Die Palette liefert Rohwerte; Bausteine greifen nur auf die Rollen darunter zu.

Palette

InkWarme Neutralskala: Text, Primär-Buttons, dunkle Flächen

0 #ffffff ink-0

25 #fbfaf9 ink-25

50 #f6f5f3 ink-50

100 #edebe8 ink-100

200 #e1deda ink-200

300 #cdc8c2 ink-300

400 #a39c95 ink-400

500 #6b645d ink-500

600 #504a44 ink-600

700 #38332f ink-700

800 #262220 ink-800

900 #171514 ink-900

950 #0e0d0c ink-950

RoseAkzent: Auswahl, Fokus, Links, „konvertiert“

50 #fff1f5 rose-50

100 #ffe1ea rose-100

200 #ffc4d4 rose-200

300 #fb9ab6 rose-300

400 #f27398 rose-400

500Logo #e94f7f rose-500

600 #cb2c59 rose-600

700 #a81f47 rose-700

OrangeKI, Automationen, Upgrade; Wärme in Illustrationen

50 #fff5ee orange-50

100 #ffe8d6 orange-100

200 #ffd0ae orange-200

300 #fbb587 orange-300

400Logo #f4996b orange-400

500 #e87a45 orange-500

600 #bc521b orange-600

700 #973f14 orange-700

SunHinweis, Entwurf, neu

50 #fffbeb sun-50

100 #fff3c9 sun-100

200 #fee89a sun-200

300Logo #f6ce60 sun-300

400 #f2be3a sun-400

500 #d99c12 sun-500

600 #ad770b sun-600

700 #855a0c sun-700

GrünNur Zustand: Erfolg, live

50 #eefbf3 green-50

100 #d6f5e2 green-100

200 #adeac7 green-200

300 #74d9a4 green-300

400 #3cc282 green-400

500 #1fa568 green-500

600 #16824f green-600

700 #136a42 green-700

RotNur Zustand: Fehler, Löschen

50 #fff3f0 red-50

100 #ffe2dc red-100

200 #ffc6ba red-200

300 #ff9d8b red-300

400 #f5705a red-400

500 #e5482f red-500

600 #c8321e red-600

700 #a12616 red-700

Rollen: Flächen 32

--pl-bg-canvas Seitenhintergrund der App #f6f5f3ink-50

--pl-bg-surface Karten, Panels, Felder #ffffffink-0

--pl-bg-surface-muted #fbfaf9ink-25

--pl-bg-surface-subtle #f6f5f3ink-50

--pl-bg-surface-strong #edebe8ink-100

--pl-bg-surface-inverse #0e0d0cink-950

--pl-bg-surface-inverse-muted #171514ink-900

--pl-bg-surface-inverse-hover #262220ink-800

--pl-bg-hover rgb(107 100 93 / 0.1)

--pl-bg-pressed rgb(107 100 93 / 0.16)

--pl-bg-overlay rgb(14 13 12 / 0.45)

--pl-bg-on-dark-hover rgb(255 255 255 / 0.1)

--pl-bg-on-dark-active rgb(255 255 255 / 0.16)

--pl-bg-action Primäraktion: Ink #0e0d0cink-950

--pl-bg-action-hover #262220ink-800

--pl-bg-action-disabled #cdc8c2ink-300

--pl-bg-accent Auswahl, Fokus, Links: Rose #cb2c59rose-600

--pl-bg-accent-hover #a81f47rose-700

--pl-bg-accent-muted #ffe1earose-100

--pl-bg-accent-subtle #fff1f5rose-50

--pl-bg-success #16824fgreen-600

--pl-bg-success-subtle #eefbf3green-50

--pl-bg-warning #f2be3asun-400

--pl-bg-warning-subtle #fffbebsun-50

--pl-bg-danger #c8321ered-600

--pl-bg-danger-hover #a12616red-700

--pl-bg-danger-subtle #fff3f0red-50

--pl-bg-premium KI, Automationen, Plan-Upgrades #bc521borange-600

--pl-bg-premium-hover #973f14orange-700

--pl-bg-premium-subtle #fff5eeorange-50

--pl-bg-track Slider, Fortschritt, Toggle aus #e1dedaink-200

--pl-bg-handle Drag-Griffe #a39c95ink-400

Rollen: Text 22

Aa --pl-text-primary #0e0d0cink-950

Aa --pl-text-secondary #38332fink-700

Aa --pl-text-muted #6b645dink-500

Aa --pl-text-subtle #a39c95ink-400

Aa --pl-text-disabled #cdc8c2ink-300

Aa --pl-text-inverse #ffffffink-0

Aa --pl-text-on-fill #ffffffink-0

Aa --pl-text-on-warning #0e0d0cink-950

Aa --pl-text-accent #cb2c59rose-600

Aa --pl-text-accent-hover #a81f47rose-700

Aa --pl-text-accent-icon #e94f7frose-500

Aa --pl-text-success #136a42green-700

Aa --pl-text-success-icon #1fa568green-500

Aa --pl-text-warning #855a0csun-700

Aa --pl-text-warning-icon #d99c12sun-500

Aa --pl-text-danger #c8321ered-600

Aa --pl-text-danger-strong #a12616red-700

Aa --pl-text-danger-icon #f5705ared-400

Aa --pl-text-premium #973f14orange-700

Aa --pl-text-premium-icon #e87a45orange-500

Aa --pl-text-field-error #a12616red-700

Aa --pl-text-field-error-icon #e5482fred-500

Rollen: Linien 16

--pl-border-subtle #edebe8ink-100

--pl-border-default #e1dedaink-200

--pl-border-strong #cdc8c2ink-300

--pl-border-hover #a39c95ink-400

--pl-border-emphasis #0e0d0cink-950

--pl-border-on-dark rgb(255 255 255 / 0.12)

--pl-border-accent #e94f7frose-500

--pl-border-accent-hover #fb9ab6rose-300

--pl-border-accent-muted #ffe1earose-100

--pl-border-danger #e5482fred-500

--pl-border-danger-muted #ffe2dcred-100

--pl-border-success-muted #d6f5e2green-100

--pl-border-warning-muted #fee89asun-200

--pl-border-premium-muted #ffe8d6orange-100

--pl-border-select Auswahlrahmen im Builder #e94f7frose-500

--pl-border-select-halo rgb(233 79 127 / 0.22)

Marke

Verläufe

Vier Verläufe aus denselben drei Farben: glow ist der Logo-Verlauf und gehört nur auf Markenflächen, line ist das Band für Fortschritt und aktive Markierung, aura der Hauch auf Weiß für Hero und Leerzustände, premium (Rose → Orange) steht für KI und Upgrade. Sie stehen für die Marke, nie für einen Zustand.

--pl-gradient-glowGlow: der Logo-Verlauf (Rose → Orange → Sun). Nur für Markenflächen: Kachel, Hero, Erfolgsmomente.

--pl-gradient-lineLinie: der Verlauf als Band – Fortschritt, aktive Markierung, Unterstreichung.

--pl-gradient-auraAura: der Verlauf als Hauch auf hellem Grund – Hero-Hintergründe, Leerzustände.

--pl-gradient-premiumPremium: KI und Upgrades.

--pl-gradient-premium-fillPremium als Füllung mit weißem Text (dunklere Stufen, mindestens 4,5:1).

Marke

Typografie

Lexend Deca für alles: Display, Überschriften, Oberfläche. Es ist die Schrift der Wortmarke. JetBrains Mono für IDs, Slugs, Events und Token-Namen. Display eng gesetzt, Fließtext normal, Overline versal.

Aa Ää ß 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz äöüß
0123456789 €%&@ · – „“

--pl-font-sansLexend Deca Variable

Aa Ää ß 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz äöüß
0123456789 €%&@ · – „“

--pl-font-monoJetBrains Mono Variable

Rollen 18

font-display-lg Hero im Marketing 52 px / 56 px · 600 · -0.035em

Einfach durchgleiten.

font-display-md Abschnittstitel im Marketing 40 px / 44 px · 600 · -0.03em

Mehr Anfragen. Weniger Umweg.

font-display Große Überschrift, Onboarding 32 px / 38 px · 600 · -0.025em

Funnels ohne Reibung.

font-heading Seitentitel in der App 22 px / 28 px · 600 · -0.015em

Leads der letzten 30 Tage

font-title Dialog- und Bereichstitel 18 px / 26 px · 600 · -0.01em

Adresse und Einwilligung

font-title-sm Kartentitel 15 px / 22 px · 600

Letzte Leads

font-body Fließtext 15 px / 24 px · 400

Jede Antwort wird sofort gespeichert. Bricht jemand ab, bleibt ein Teil-Lead, den du nachfassen kannst.

font-body-sm Standardtext der Oberfläche 14 px / 21 px · 400

Antworten werden nach jedem Schritt gespeichert und stehen im CRM bereit.

font-body-sm-relaxed Mehrzeiliger Erklärtext 14 px / 24 px · 400

Für längere Erklärtexte: gleiche Größe, mehr Zeilenabstand, damit drei und mehr Zeilen ruhig bleiben.

font-label Feldbeschriftung, Buttons klein 13 px / 20 px · 500

E-Mail-Adresse

font-caption Hinweise, Metadaten 12.5 px / 18 px · 400

Zuletzt geändert vor 3 Stunden

font-caption-relaxed Mehrzeilige Hinweise 12.5 px / 21 px · 400

Hinweis unter einem Feld, der über zwei Zeilen laufen darf.

font-overline Tabellenkopf, Rubrik (versal) 11 px / 16 px · 600 · 0.08em

Funktionen

font-micro Zähler, Marker 10 px / 14 px · 600

Neu

font-tool Builder-Panels 13 px / 20 px · 400

Abstand oben

font-tool-title Panel-Titel im Builder 15 px / 20 px · 600

Hintergrund

font-stat Kennzahlen 26 px / 32 px · 600 · -0.02em

69,6 %

font-code IDs, Slugs, Events (Mono) 12.5 px / 20 px · 400

fnl_demo_solar · lead.completed

Gewichte

Einfach durchgleiten.

--pl-weight-regular400

Einfach durchgleiten.

--pl-weight-medium500

Einfach durchgleiten.

--pl-weight-semibold600

Einfach durchgleiten.

--pl-weight-bold700

Zahlen

Zahlen stehen proportional und Spalten rechtsbündig: Lexend Deca ist breit gezeichnet und bringt keine schmalen Tabellenziffern mit. Wo Stellen exakt untereinander stehen müssen, kommt JetBrains Mono zum Einsatz.

proportional · Standard

1.111,10 €
8.888,80 €

rechtsbündig · in Tabellenspalten

1.111,10 €
88.888,80 €

Mono · für exakte Spalten

1.111,10 €
8.888,80 €

Form

Radien

Bedienelemente 10 px, Karten 14 px, große Flächen 20 bis 28 px, Logo-Kachel 22 %.

--pl-radius-tiny3px

--pl-radius-small6px

--pl-radius-medium8px

--pl-radius-control10px

--pl-radius-control-lg12px

--pl-radius-card14px

--pl-radius-card-lg20px

--pl-radius-sheet28px

--pl-radius-full999px

--pl-radius-tile22.2%Logo-Kachel: 24/108

Form

Schatten

Flach: Haarlinien statt Schatten. Schatten trägt nur, was schwebt – Menü, Dialog, Toast.

--pl-shadow-hairline0 0 0 1px rgb(14 13 12 / 0.07)

--pl-shadow-subtle0 1px 2px rgb(14 13 12 / 0.05)

--pl-shadow-soft0 1px 3px rgb(14 13 12 / 0.08), 0 1px 2px -1px rgb(14 13 12 / 0.06)

--pl-shadow-raised0 1px 2px rgb(14 13 12 / 0.06), 0 0 0 1px rgb(14 13 12 / 0.06)

--pl-shadow-card0 1px 1px rgb(14 13 12 / 0.03), 0 2px 4px rgb(14 13 12 / 0.03)

--pl-shadow-floating0 10px 18px -4px rgb(14 13 12 / 0.1), 0 4px 6px -4px rgb(14 13 12 / 0.08)

--pl-shadow-menu0 14px 28px -8px rgb(14 13 12 / 0.16), 0 2px 6px rgb(14 13 12 / 0.06)

--pl-shadow-overlay0 8px 24px -6px rgb(14 13 12 / 0.14), 0 1px 2px rgb(14 13 12 / 0.06)

--pl-shadow-modal0 24px 56px -16px rgb(14 13 12 / 0.28), 0 6px 18px rgb(14 13 12 / 0.08)

Fokusring

--pl-ring-focusrgb(233 79 127 / 0.32)

--pl-ring-dangerrgb(229 72 47 / 0.28)

--pl-ring-width3px

Form

Bedienhöhen

Fünf Höhen für alles, was man anklickt oder ausfüllt. Buttons, Felder und Menüzeilen in einer Reihe sind gleich hoch.

24 px--pl-control-xs1.5rem

32 px--pl-control-sm2rem

36 px--pl-control-md2.25rem

44 px--pl-control-lg2.75rem

56 px--pl-control-xl3.5rem

Form

Abstände

4-px-Raster. Die Tailwind-Abstände der App rechnen mit derselben Einheit (--spacing = --pl-space-1).

--pl-space-10.25rem · 4 px

--pl-space-20.5rem · 8 px

--pl-space-30.75rem · 12 px

--pl-space-41rem · 16 px

--pl-space-51.25rem · 20 px

--pl-space-61.5rem · 24 px

--pl-space-82rem · 32 px

--pl-space-102.5rem · 40 px

--pl-space-123rem · 48 px

--pl-space-164rem · 64 px

Ebenen

--pl-z-sticky20

--pl-z-dropdown40

--pl-z-overlay60

--pl-z-modal80

--pl-z-toast100

Form

Bewegung

150 ms für Zustände, 220 ms für Ein- und Ausblenden, 600 ms gestaffelt für Seiteneinblendung. Bei „Bewegung reduzieren“ entfällt die Animation.

--pl-duration-instant100ms

--pl-duration-fast150ms

--pl-duration-base220ms

--pl-duration-slow320ms

--pl-duration-reveal600ms

--pl-ease-standardcubic-bezier(0.2, 0.7, 0.2, 1)

--pl-ease-outcubic-bezier(0.2, 0.8, 0.2, 1)

--pl-ease-springcubic-bezier(0.34, 1.4, 0.64, 1)

Bausteine

Buttons

Pro Ansicht eine Primäraktion in Ink. Alles Weitere ist sekundär oder Ghost. Farbe nur mit Bedeutung.

Varianten

.btn-primaryInk · die eine Hauptaktion

.btn-secondaryFläche mit Haarlinie

.btn-ghostWerkzeugleisten, Tabellen

.btn-accentRose · Auswahl bestätigen

.btn-dangerRot · unumkehrbar

.btn-premiumRose → Orange · KI, Plan

Größen

.btn .btn-xs24 px

.btn .btn-sm32 px

.btn36 px

.btn .btn-lg44 px

.btn .btn-xl56 px

Mit Icon

Zustände

	Normal	Hover	Fokus	Deaktiviert	Lädt
`.btn-primary`
`.btn-secondary`
`.btn-ghost`
`.btn-danger`

Bausteine

Eingaben

Feld, Auswahlliste, Textfeld, Checkbox und Radio. Fokus und Auswahl sind Rose, Fehler Rot. Fehlermeldungen erscheinen erst, wenn sie helfen.

Name

E-Mail

Platzhalter in Text-subtle.

Fokus

Rand Rose, Ring --pl-ring-focus.

Fehler

Bitte eine gültige E-Mail-Adresse eingeben.

Deaktiviert

Slug (Mono)

Auswahlliste

Auswahlliste, Fehler

Bitte einen Workspace wählen.

Textfeld

Bausteine

Badges

Die Farbe trägt die Bedeutung, der Text sagt sie aus. Nie mehr als eine Farbe mit Bedeutung pro Zeile.

EntwurfEntwurf.badge-grayNeutral

LiveLive.badge-greenGrün · Erfolg

Teil-LeadTeil-Lead.badge-amberSun · Hinweis

FehlerFehler.badge-redRot · Fehler

KonvertiertKonvertiert.badge-blueRose · Auswahl, Info

KIKI.badge-violetOrange · Premium

Status aus `StatusBadge.svelte`

EntwurfLiveOfflineTeil-LeadKonvertiertAbgeschlossenGewonnenVerlorenFehlerTestphase

Bausteine

Karte und Tabelle

Karten sind flach: Haarlinie, Radius 14 px, kaum Schatten. Tabellen stehen in Karten, Zahlen rechtsbündig und proportional.

Karte mit Kopf

Inhalt mit 20 px Innenabstand. Die Kopfzeile trennt eine Haarlinie.

.skeleton für Ladezustände

Karte ohne Kopf

Für Formulare und kurze Hinweise. Klickbare Karten heben beim Überfahren nur die Linie an, nicht die Fläche.

Funnels2 live

Name	Status	Sessions	Leads	Rate
Nachsendeauftrag/nachsendeauftrag	Live	1.284	311	24,2 %
Abo kündigen/abo-kuendigen	Live	902	187	20,7 %
Vorsorgevollmacht/vollmacht	Entwurf	0	0	–
Patientenverfügung/patientenverfuegung	Offline	76	11	14,5 %

Bausteine

Toast und Dialog

Toasts bestätigen kurz und verschwinden nach vier Sekunden. Dialoge unterbrechen nur für Entscheidungen, die sich nicht rückgängig machen lassen.

Funnel veröffentlicht.

Speichern fehlgeschlagen. Bitte erneut versuchen.

DNS-Prüfung läuft, das dauert bis zu fünf Minuten.

Funnel löschen?

„Nachsendeauftrag“ und 311 Leads werden entfernt. Das lässt sich nicht rückgängig machen.

Bausteine

Leerzustand

Der Ghost zeigt sich, wenn eine ganze Seite leer ist: ein Satz, was fehlt, ein Satz, wie es weitergeht, höchstens eine Aktion. Wo es passt, in einer Pose (schläft: nichts zu tun, Lupe: nichts gefunden). Nebenflächen bleiben schlicht.

Noch kein Funnel

Starte mit einer Vorlage. Texte, Fragen und Farben passt du im Builder an.

.empty .empty-ghost + Ghost.svelte

Noch keine Leads

Sobald jemand den Kontakt-Schritt ausfüllt, erscheint er hier.

.empty

Bausteine

Kennzahl

Eine Zahl, ein Etikett, höchstens ein Vergleich. Verlauf in Rose, Erfolg in Grün, Offenes in Orange.

Besucher-Sessions

2.262

+12,4 % zur Vorperiode

Konvertiert

509

Kontakt und Einwilligung

Conversion-Rate

22,5 %

498 vollständig abgeschlossen

Teil-Leads

3 älter als 7 Tage

Bildwelt

Icons

24er-Raster, Strich 1,75 px, Linienenden rund. 76 Icons aus Icon.svelte, hier in 20 px.

alert

arrow-left

arrow-right

award

bar-chart

bell

building

calendar

check

check-circle

chevron-down

chevron-right

chevron-up

circle-dot

clock

copy

credit-card

download

external-link

eye

eye-off

file-text

filter

folder

globe

grip-vertical

hash

help-circle

home

image

inbox

info

key

layers

layout-template

link

list-checks

log-out

mail

map-pin

message-square

minimize

minus

monitor

moon

more-horizontal

more-vertical

palette

pencil

phone

plug

plus

refresh-cw

rocket

send

settings

shield

sliders

smartphone

sparkles

square-check

star

sun

toggle-left

trash

trending-up

type

upload

user

users

video

wand

zap

Größen und Farbe

Bildwelt

Marken-Icons

46 zweifarbige Icons für Funktionen und Kategorien: Linie in Ink, genau eine Akzentfläche mit 40 % Deckkraft. Nie mehr als eine Akzentfarbe pro Icon.

Funnelfunnel

Landingpagelandingpage

Kontaktkontakt

Adresseadresse

Einwilligungeinwilligung

Zusammenfassungzusammenfassung

Dankedanke

Leadlead

Teil-Leadteil-lead

CRMcrm

Domaindomain

Brandingbranding

Vorlagevorlage

Sektionsektion

Blockblock

Integrationintegration

Webhookwebhook

Auswertungauswertung

A/B-Testab-test

Veröffentlichenveroeffentlichen

Vorschauvorschau

Mobilmobil

Desktopdesktop

Teamteam

Workspaceworkspace

API-Schlüsselapi-schluessel

Abrechnungabrechnung

DSGVOdsgvo

Kündigungkuendigung

Nachsendeauftragnachsendeauftrag

Umzugumzug

Testamenttestament

Vollmachtvollmacht

Kalenderkalender

Uhruhr

Benachrichtigungbenachrichtigung

Suchesuche

KIki

Uploadupload

Bildbild

Videovideo

Zitatzitat

Sternstern

E-Maile-mail

Anzeigeanzeige

FAQfaq

Komponente `BrandIcon.svelte`

name wählt das Icon, size die Kantenlänge in px. accent nimmt eine CSS-Farbe oder auto: dann gilt die Farbe, die zur Bedeutung des Icons gehört. Die Akzentfläche ist Rose, Orange oder Sun; ohne Angabe ist sie Rose.

Rose

Orange

Sun

auto

auf Ink: Linie weiß, Fläche bleibt

Sektions-Symbole 10

Für die Kategorien der Builder-Bibliothek: Balken im 20er-Raster, eine Fläche in Rose. Quelle: SECTION_GLYPHS in brand-icons.ts.

Herohero

Produktproduct

Call-to-Actioncta

Über unsabout

Quizquiz

Teamteam

Kundenstimmentestimonials

Vertrauentrust

Basisblöckebasic

Interaktive Blöckeinteractive

Bildwelt

Der Ghost

Das Maskottchen ist ein runder 3D-Geist und liegt ausschließlich als Bild vor; er wird nie gezeichnet oder als Vektor nachgebaut. Er gleitet wie der Besucher durch den Funnel und sorgt dafür, dass kein Lead spurlos verschwindet. 17 Dateien als WebP mit transparentem Grund, jede steht auf hellem wie auf dunklem Grund.

ghost-master-256.webpRuhezustand: Leerzustände und überall, wo keine Pose passt · 256 px für kleine Darstellung

ghost-master.webpRuhezustand: Leerzustände und überall, wo keine Pose passt

ghost-kopf.webpKopf allein: Avatar, kleine Flächen

ghost-gleitet.webpSchlüsselbild: der Ghost gleitet. Hero, Markenflächen

ghost-hallo.webpWinkt: Begrüßung, Onboarding

ghost-feiert.webpFeiert: veröffentlicht, erster Lead, Danke

ghost-brief.webpBrief: Nachsendeauftrag, Post, E-Mail

ghost-schere.webpSchere: Abo-Kündigung

ghost-dokument.webpDokument: Testament, Vollmacht

ghost-karton.webpUmzugskarton: Umzug, Ummeldung

ghost-laptop.webpAm Laptop: Builder, Einrichtung

ghost-lupe.webpSucht: nichts gefunden, 404

ghost-schild.webpSchild: DSGVO, Einwilligung

ghost-schlaeft.webpSchläft: keine Daten, nichts zu tun

ghost-hinweis.webpHinweis: etwas braucht Aufmerksamkeit

ghost-fehler.webpFehler: etwas ist schiefgegangen

ghost-erfolg.webpErfolg: erledigt, gespeichert, live

Komponente `Ghost.svelte`

pose wählt das Bild, size die Kantenlänge in px (in Leerzuständen 72 bis 88). Fehlt die Datei einer Pose, steht der Ruhezustand da; fehlt auch der, bleibt die Stelle leer. Einsatz: Leerzustände, Onboarding, Danke und Erfolg, 404, Ladezustände, ab 96 px auch im Marketing. Der Ghost zeigt, wartet, feiert, sucht und spricht nicht in Sprechblasen. Nie verzerren, umfärben oder beschneiden.

Bildwelt

Objekte

Weiches 3D wie mattes Keramik-Spielzeug: Grundkörper Weiß oder Ink, eine Fläche im Glow-Verlauf (Rose → Orange → Sun), Licht von links oben, transparenter Grund. Ein Objekt pro Fläche, mindestens 64 px. Objekte mit Ink-Körper brauchen hellen Grund.

blitz.webp

briefkasten.webp

briefumschlag.webp

diagramm.webp

dokument-siegel.webp

fueller.webp

glocke.webp

kalender.webp

magnet.webp

papierflieger.webp

schere.webp

schild-haken.webp

schloss.webp

schluessel.webp

smartphone-formular.webp

sprechblase.webp

trichter.webp

uhr.webp

umzugskarton.webp

zielscheibe.webp

Bildwelt

Beispielbilder

Echt, hell, aufgeräumt: Tageslicht von der Seite, ein Gegenstand in Rose, Orange oder Sun pro Bild, kein lesbarer Text.

Platzhalter-Logos 8

Erfundene Marken für die Logoleiste in Vorlagen. Sie stehen für „Ihr Logo“ und sind keine Kunden.

logos/logo-01.svg

logos/logo-02.svg

logos/logo-03.svg

logos/logo-04.svg

logos/logo-05.svg

logos/logo-06.svg

logos/logo-07.svg

logos/logo-08.svg

Funnels

Builder-Kacheln

Die Kacheln der Bibliothek „Sektion hinzufügen“. Zeichenfläche 160 × 112, Ink für das Hauptelement, genau eine Markenfarbe pro Kachel. Komponente: BlockThumb.svelte.

Basis 10

TextAbsatz mit Formatierungtext

ÜberschriftTitel in vier Größenheading

ButtonWeiter, Link oder Scrollenbutton

BildFoto oder Illustrationimage

ListePunkte mit Iconlist

TrennerLinie oder Abstanddivider

LogoleistePartner und Siegellogos

BewertungSterne mit Textrating

AbstandLeerraum in fünf Stufenspacer

RechtstextKleingedruckteslegal

Medien 2

VideoDatei, YouTube oder Vimeovideo

KundenstimmeZitat mit Name und Sternentestimonial

Information 4

FAQAufklappbare Fragenfaq

VorteileKarten mit Icon in 2–3 Spaltenbenefits

VertrauenKurze Garantien als Pillstrust

SpaltenZwei bis vier Spaltencolumns

Fragen 7

EinfachauswahlEine Antwort aus Kartenchoice

MehrfachauswahlMehrere Antwortenmulti

BildauswahlAntworten mit Bildimage_choice

Ja / NeinZwei große Kachelnyes_no

DropdownAuswahllisteselect

SchiebereglerZahl in einem Bereichslider

BewertungSterne vergebenstars

Formular 9

TextfeldEinzeilige Eingabeinput

NachrichtMehrzeiliger Texttextarea

E-MailMit Tippfehler-Prüfungemail

TelefonMit Ländervorwahlphone

ZahlMit Minimum und Maximumnumber

DatumKalenderauswahldate

GeburtsdatumMit Mindestalterbirthday

Datei-UploadPDF oder Bilderupload

CheckboxEinwilligung mit Langtextcheckbox

Funnels

Funnel-Themes

36 Themes für die Funnels der Nutzer, nicht für die Admin-App. Ein Theme setzt Primärfarbe, Hintergrund, Schrift und Radius; alles Weitere leitet die Runtime ab. Quelle: packages/templates/theme-presets.json.