Designleitfaden von papatto

papatto ist eine Sammlung von Werkzeugen, mit denen kleine Aufgaben schnell erledigt sind. Diese Seite fasst die Regeln zusammen, die Bildschirme und Texte einheitlich halten – mit genau den Werten, die die Website verwendet. Das Logo kannst du unter „Logo“ herunterladen.

Inhalt

Grundregeln

Jeder Bildschirm von papatto baut auf diesen Versprechen auf. Nichts wird so gebaut, dass es sie bricht.

Keine Werbung
Keine Banner, keine Videoanzeigen. Nichts auf dem Bildschirm stört bei der Aufgabe.
Kein Upload
Bilder, Dateien und Text werden nur auf dem Gerät der Person verarbeitet, die sie nutzt. Schriften und Bibliotheken sind mitgeliefert, deshalb wird während der Nutzung nichts von fremden Servern geladen.
Keine Anmeldung
Kein Konto, keine Installation. Öffnen und loslegen.
Schnell erledigt
Jedes Werkzeug macht eine Sache. Was fast alle brauchen, ist dabei; selten genutzte Extras bleiben draußen.

Markenaufbau

papatto ist eines der Werke von Hoshimado. Name und Farben gehören papatto und werden nicht in den Farben von Hoshimado umgefärbt.

Die Signatur „by Hoshimado“ steht ganz rechts in der untersten Zeile der Fußzeile, in der zurückhaltenden Textfarbe (muted).
Vorschaubilder zum Teilen tragen dieselbe Signatur unten links, in einer zurückhaltenden Farbe.
Die Signatur steht nie in der Kopfzeile und erscheint nur einmal pro Bildschirm. Sie ist nie größer als das papatto-Logo.
In andere Websites eingebettete Werkzeuge zeigen keine Signatur; die Leiste „In papatto öffnen“ ist der einzige Hinweis.

Die Signatur ist 16 px hoch. Der Copyright-Text daneben hat 12 px – nach der Hoshimado-Regel „die Schrifthöhe der Signatur an den Copyright-Text daneben anpassen (etwa 16–20 px)“ nimmt papatto das untere Ende (Regeln zu by Hoshimado).

Bezug zum Hoshimado-Leitfaden

papatto folgt den Kapiteln „Sprache“ und „Barrierefreiheit“ des Hoshimado-Leitfadens, mit eigenen Farben, eigenem Namen und eigenem Logo.

Die eigenen Regeln von Hoshimado stehen im Designleitfaden von Hoshimado.

Sprache

Wir schreiben in einfachen Worten, die alle verstehen.

Kurze, freundliche Sätze. Ein Gedanke pro Satz.
Kein Fachjargon und keine ungewohnten Begriffe – lieber Alltagssprache.
Schaltflächen nennen ihre Aktion mit einem Verb („Datei auswählen“, „PDF herunterladen“). Optionen in Tabs und Umschaltern bleiben Substantive („PNG“, „Hochformat“).
Anleitungen verwenden genau die Wörter auf dem Bildschirm. Namen der Schaltflächen und Anleitungen stimmen Wort für Wort überein.
Fehlermeldungen sagen, was passiert ist und was jetzt zu tun ist („Dieses Datum gibt es nicht. Prüfe Jahr, Monat und Tag.“).
Keine Ausrufezeichen und keine Emojis in Texten der Oberfläche.
Sag ehrlich, was ein Werkzeug nicht kann. Schreib Fakten wie „es wird nichts gesendet“ statt unbelegter Superlative („am schnellsten“, „das beste“) oder beruhigender Slogans.
Alle Texte gibt es in 10 Sprachen, Japanisch ist das Original. Übersetzungen klingen natürlich, nicht wörtlich.

So	Nicht so
Datei auswählen	Hochladen
In PNG umwandeln	PNG-Formatkonvertierung durchführen
Gespeichert	Der Vorgang wurde erfolgreich abgeschlossen!
Die Datei ließ sich nicht öffnen. Wähle eine andere Datei aus.	Ein Fehler ist aufgetreten
Deine Zahlen werden nirgendwohin gesendet	Modernste Sicherheit für Ihr gutes Gefühl

Logo

Das Logo besteht aus dem Zeichen links (ein oranger Kreis mit drei Strichen) und dem Namen. Japanische Seiten verwenden „ぱぱっと“, alle anderen Sprachen „papatto“.

Auf hellem Hintergrund

Auf dunklem Hintergrund

Verwende die Farben unverändert: die Version mit fast schwarzer Schrift auf hellem und die mit fast weißer Schrift auf dunklem Hintergrund.
Auf der Website zeichnet der Baustein Logo das Logo. Seine Farben kommen aus den Tokens, deshalb wechselt es automatisch zwischen hell und dunkel.

Bitte nicht

Farben ändern oder Verläufe hinzufügen
Verzerren, drehen oder Schatten hinzufügen
Abstand oder Reihenfolge von Zeichen und Name ändern
Auf Fotos oder Mustern platzieren, wo es schwer lesbar ist

Downloads

Farbe

Ruhige, warme Neutraltöne mit einer einzigen Akzentfarbe: Orange. Jede Farbe hat einen hellen und einen dunklen Wert und folgt der Farbeinstellung.

--bgSeitenhintergrundHell#fffcf6Dunkel#17140f
--surfaceKarten, Eingabefelder, SchrittkästenHell#ffffffDunkel#201c16
--surface-hoverBeim Darüberfahren, ruhige FlächenHell#fff6e6Dunkel#2a241b
--fgFließtext und ÜberschriftenHell#26211bDunkel#f3eee6
--mutedErgänzender Text, HinweiseHell#6b6157Dunkel#aaa093
--lineLinien und KartenrahmenHell#ece4d6Dunkel#342e25
--controlUmrisse von Eingabefeldern, Umschaltern, umrandeten Schaltflächen und FarbkreisenHell#998c7eDunkel#776d5f
--sliderRegler: Griff und SpurHell#c97a00Dunkel#f7b13c
--accentHauptschaltflächen, ausgewählte und erledigte ZuständeHell#f5a524Dunkel#f7b13c
--accent-strongFokusrahmen, Links, Text eingeschalteter ZuständeHell#9c5e00Dunkel#f7b13c
--accent-fgText auf OrangeHell#2b1a00Dunkel#2b1a00
--gainPositiver SaldoHell#2e7d32Dunkel#74d27a
--lossNegativer Saldo, Fehlermeldungen (text-danger)Hell#c0392bDunkel#f4806f

Kontrast

Verhältnis einer Farbe zu ihrem Hintergrund. Textfarben zielen auf 4,5:1 oder mehr, Umrisse von Bedienelementen (control) auf 3:1 oder mehr; beide Themen erreichen das.

	Ziel	Hell	Dunkel
`fg / bg`	4.5:1	15.6:1	15.9:1
`muted / bg`	4.5:1	5.9:1	7.1:1
`muted / surface`	4.5:1	6.0:1	6.6:1
`accent-strong / bg`	4.5:1	5.1:1	9.9:1
`accent-fg / accent`	4.5:1	8.2:1	9.0:1
`gain / surface`	4.5:1	5.1:1	9.1:1
`loss / surface`	4.5:1	5.4:1	6.6:1
`control / bg`	3:1	3.2:1	3.6:1
`control / surface`	3:1	3.3:1	3.3:1

Orange Flächen (accent) gibt es für Hauptschaltflächen, eingeschaltete Schalter, Schrittnummern und die Markierung ausgewählter Elemente – nie als Dekoration.
Das kräftige Orange (accent-strong) steht für Fokusrahmen, Links wie „Alle ansehen“ in der Fußzeile und den Text eingeschalteter Markierungen – nie für Fehler.
Fehlermeldungen sind rot (text-danger, dieselbe Farbe wie ein negativer Saldo).
Umrisse von Eingabefeldern, Umschaltern, umrandeten Schaltflächen und Farbkreisen nutzen control; Karten und Trennlinien nutzen line.
Nur Regler nutzen die Farbe slider (mit accent-strong läge die noch nicht gefüllte Seite der Spur unter 3:1 zum Hintergrund).
Eine orange gefüllte Hauptschaltfläche pro Schritt.
Farben werden als CSS-Tokens geschrieben und wirken so in Hell und Dunkel.

Schrift

Überschriften verwenden eine abgerundete Schrift, Fließtext eine klare Grotesk. Die Schriften kommen von der Website selbst, nie von fremden Servern.

M PLUS Rounded 1cÜberschriften (Japanisch sowie Sprachen mit lateinischer und kyrillischer Schrift)
Noto Sans JPFließtext (Japanisch sowie Sprachen mit lateinischer und kyrillischer Schrift)
Noto Sans KR・SC・ArabicÜberschriften und Fließtext auf Koreanisch, Chinesisch und Arabisch

Größen

Kleine Aufgaben, schnell erledigt.30px · text-3xl Seitentitel (Desktop)
Kleine Aufgaben, schnell erledigt.24px · text-2xl Seitentitel (Handy), große Abschnittsüberschriften
Kleine Aufgaben, schnell erledigt.18px · text-lg Überschriften der Schrittkästen
Kleine Aufgaben, schnell erledigt.16px · text-base Fließtext, Eingabefelder am Handy
Kleine Aufgaben, schnell erledigt.14px · text-sm Ergänzender Text, Eingabefelder am Desktop
Kleine Aufgaben, schnell erledigt.12px · text-xs Hinweise, Fußzeile

Zahlen stehen in Tabellen und Zählern bündig untereinander (Tabellenziffern).
Eingabefelder verwenden am Handy 16-px-Text, damit das iPhone nicht bei jeder Eingabe hineinzoomt.

Layout, Abstände und Ecken

Zuerst fürs Handy gestaltet, am Desktop dann breiter. Abstände gibt es in 4-px-Einheiten, mit wenigen Stufen.

Abstandsstufen

4・8px · gap-1・gap-2Innerhalb eines Bausteins (Symbol und Beschriftung, Überschrift und Hinweis)
8px · gap-2Elemente in einer Reihe (kleine Schaltflächen, Tags)
16px · gap-4Nahe Elemente (gestapelte Schaltflächen, Kartenreihen)
32px · gap-8Gruppen (Schrittkästen, Spalten am Desktop)
48px+ · gap-12・gap-16・gap-24Seitenabschnitte (die Versprechen und die Werkzeugliste)
16 / 24・32px · p-4・sm:p-6・sm:p-8Innenabstand eines Kastens (16 px am Handy, 24 oder 32 px am Desktop)

Eckenradius

rounded-fullSchaltflächen, Umschalter, Tags
rounded-xlEingabefelder, kleine Flächen
rounded-2xlKarten, Schrittkästen
rounded-3xlGroße Hinweiskästen

Die Stufen 4, 8, 16, 24, 32 und 48 px gelten für den Abstand zwischen Elementen und den Innenabstand von Kästen. Im Zweifel: nah = 16, Gruppe = 32.
Kleine Innenabstände in Bausteinen (über und unter einem Etikett, seitlich in einer Schaltfläche) sind eine Ausnahme und nutzen auch Werte außerhalb der Stufen wie 2, 6, 10 und 12 px.
Seiten sind höchstens 1152 px breit, Lesetext bricht bei 672 px um. Der Seitenrand beträgt am Handy 16 px.
Bei 360 px (am besten 320 px) Breite läuft nichts seitlich über.

Bewegung

Bewegung erklärt nur, was gerade passiert ist. Kurz und ohne Federn.

Beim Seitenwechsel gleitet der Inhalt leicht von der Seite herein (0,2–0,3 s), beim Zurückgehen von der anderen Seite.
Beim Wechsel des Farbthemas werden alter und neuer Bildschirm in 0,3 s überblendet.
Der Hinweis „Gespeichert“ steigt von unten auf und verschwindet wieder nach unten.
Anleitungsvideos laufen nur, solange sie sichtbar sind, und pausieren außerhalb des Bildschirms.
Mit „Bewegung reduzieren“ stoppt die Animation und Ergebnisse erscheinen sofort.

Bausteine

Schaltflächen, Umschalter und Eingabefelder kommen aus gemeinsamen Bausteinen; Werkzeuge gestalten sie nie selbst. Gleiche Aufgaben sehen überall gleich aus.

PrimaryButtonDie wichtigste Aktion eines Schritts. Nur eine orange Schaltfläche pro Schritt
SecondaryButtonUmrandete Schaltfläche unter der Hauptschaltfläche
SmallButtonKleine Aktionen daneben (kopieren, rückgängig)
IconButtonRunde Schaltfläche nur mit Symbol. Immer mit Namen für Screenreader
SegmentedControlEine von 2–4 Optionen wählen
Format
SwitchEine Ein/Aus-Einstellung, die sofort wirkt
Originalgröße behalten
ToggleButtonEin/Aus-Optionen in einer schmalen Leiste. Eingeschaltet mit orangem Rahmen und Haken
TextFieldEinzeiliges Eingabefeld mit Beschriftung darüber
Name
ColorSwatchesKreise für häufige Farben und ein Regenbogenkreis für jede andere Farbe
Farbe
Andere Farbe#e53935
CardButton・CardLinkKleine Karte, die als Ganzes anklickbar ist
BadgeKleines, nicht anklickbares Etikett für einen kurzen Zustand
GültigAbgelaufen

Zustände

Ein Eingabefeld mit einem Fehler bekommt einen roten Rahmen (aria-invalid) und darunter eine rote Meldung, wie es sich beheben lässt. Mit Fokus wird der Rahmen eines Eingabefelds kräftig orange.
Umschaltbare Schaltflächen (ToggleButton und IconButton mit aria-pressed) zeigen eingeschaltet einen orangen Rahmen und eine hellorange Fläche. Text und gesprochener Name bleiben gleich.
Farbkreise haben 32 px Durchmesser und 8 px Abstand. Jeder Kreis hat einen 1-px-Umriss (control); der ausgewählte bekommt einen 2-px-Ring mit 2 px Abstand.
Farbkreise bilden eine Radiogruppe und lassen sich mit den Pfeiltasten wählen. Screenreader sagen den Farbnamen an, etwa „Rot (#E53935)“.

Größenstufen

Schaltflächen und andere antippbare Teile haben feste Höhenstufen. Die Namen folgen dem Kapitel „Schaltflächen“ des Hoshimado-Leitfadens.

Stufe	Höhe	Bausteine	Einsatz
`xl`	56px	`PrimaryButton xl・SecondaryButton xl / stage`	Die wichtigste Aktion auf der Bühne eines Werkzeugs (drehen, starten)
`lg`	48px	`PrimaryButton lg`	Die letzte Hauptschaltfläche eines Schritts (herunterladen, speichern)
`md`	44px	`PrimaryButton md・SecondaryButton・ChangeFileButton・TextField・Select`	Standard. Gleiche Höhe wie Eingabe- und Auswahlfelder; auch die umrandete Schaltfläche unter der Hauptschaltfläche und Schaltflächen, mit denen man erneut eine Datei wählt
`sm`	36px	`PrimaryButton sm・SmallButton・ToggleButton・LinkButton inline・TextField sm`	Kleine Aktionen daneben (kopieren, rückgängig) und Ein/Aus-Umschalter, auch „Speichern“ oben im Handy-Editor
`icon`	44px	`IconButton lg`	Nur Symbol, an oft getippten Stellen (Zeile löschen, Vollbild schließen)
`icon-sm`	36px	`IconButton`	Nur Symbol, etwa Kopieren neben einem Ergebnis
`icon-xs`	32px	`ColorField (×)・Thumbnails / ImageStrip (×)`	Das × im Eingabefeld oder auf einem Vorschaubild
`swatch`	32px	`ColorSwatches`	Kreise zur Farbauswahl

Anordnung

Zwischen Aktionen einer Gruppe 8 px Abstand lassen.
Wenn es nicht passt, in die nächste Zeile umbrechen. Ein SegmentedControl, das nicht passt, stapelt seine Optionen untereinander.
Die Hauptschaltfläche steht am Ende des Schritts.

Symbole und Anleitungsvideos

Symbole sind Strichzeichnungen; Anleitungen zeigen den echten Bildschirm im Video.

Werkzeugsymbole sind Strichzeichnungen in einem abgerundeten Quadrat, in der Textfarbe. Kein Orange, damit Symbolreihen ruhig bleiben.
Konverter zeigen das Zielformat (etwa PNG) klein im Symbol.
Anleitungen zeigen zu jedem Schritt ein kurzes Video des echten Bildschirms: Desktop im Browserrahmen, Handy im Handyrahmen.
Der berührte Bereich ist orange umrandet.
Der Schritttext verwendet die Wörter vom Bildschirm und sagt, wo man tippt und was dann passiert.

Vor der Veröffentlichung

Prüfe das, bevor ein neuer Bildschirm online geht.

Keine Werbung, kein Upload und keine Anfragen an fremde Server
Auf Desktop und Handy, hell und dunkel, auf Japanisch, Englisch und Arabisch geprüft, kein seitliches Scrollen bei 360 px
Nur eine orange Hauptschaltfläche pro Schritt
Abstände zwischen Elementen und in Kästen folgen den festgelegten Stufen, Bausteine sind die gemeinsamen
Schaltflächen nennen ihre Aktion, ohne Ausrufezeichen und Emojis; Fehlermeldungen sind rot und sagen, was zu tun ist
Alle 10 Sprachen vollständig, Schaltflächennamen passen zu den Anleitungen
Die Anleitungsschritte sind beim ersten Lesen verständlich