Das Potabo Markenpaket, fertig zum Herunterladen.
Diese Seite ist für alle, die über Potabo schreiben, uns in einem Vortrag zeigen oder eine Integration bauen. Jede Datei hier wird aus demselben Logo erzeugt, das auch die Website trägt, und jede Farbe steht so im Stylesheet. Sie brauchen uns nicht zu fragen, bevor Sie etwas davon verwenden.
Fragen zur Verwendung beantworten wir gern. Die Adresse steht weiter unten.
Was Sie über uns schreiben können.
Drei Längen, damit Sie nicht umschreiben müssen. Kopieren Sie die, die in Ihren Text passt.
Ein Satz
Potabo bildet Ihr Kartoffellager digital ab. Ihr Team verwaltet Kisten, Big Bags und lose Ware direkt per App. Sie behalten vom Schreibtisch aus den Überblick
Kurzfassung, rund 50 Wörter
Potabo bildet das Kartoffellager digital ab. Wer im Lager etwas bewegt, erfasst es direkt per App, und der Bestand im Büro ist im selben Moment aktuell. Kisten, Big Bags und lose Ware liegen in einem System, zusammen mit Aufträgen und Zahlen. Die Zettelwirtschaft zwischen Halle und Schreibtisch entfällt.
Langfassung, rund 100 Wörter
Potabo ist eine Lagerverwaltung für Kartoffelbetriebe. Sie bildet ab, was tatsächlich im Lager steht: jede Kiste, jeden Big Bag, jede Charge lose Ware, mit Sorte, Herkunft und Zustand. Erfasst wird dort, wo die Ware bewegt wird, per App und ohne Umweg über einen Zettel. Im Büro ist der Bestand damit im selben Moment aktuell, und Aufträge, Ein- und Auslagerungen und die Zahlen dazu liegen in einem System statt in vier. Potabo kommt aus der Kartoffelbranche und wird mit Betrieben entwickelt, die selbst lagern. Das Unternehmen sitzt in Deutschland.
- Name
- Potabo
- Schreibweise
- Potabo, mit großem P. Nie POTABO, nie potabo im Fließtext.
- Was es ist
- Lagerverwaltung für Kartoffelbetriebe
- Sitz
- Deutschland
- Website
- potabo.de
Logo und Wortmarke.
Die Wortmarke ist die Standardform. Nehmen Sie sie überall, wo Platz für sie ist. Schalten Sie die Vorschau auf Dunkel, um zu sehen, wie die freigestellten Dateien auf Ihrem Hintergrund wirken.
Logo Schwarz freigestellt
Die Standardform. Auf Weiß und auf jeder hellen Fläche.
Logo Weiß freigestellt
Für dunkle Flächen und über Fotos, die hinter der Marke dunkel bleiben.
Logo Weiß auf Potabo Red
Die Signaturform. Nehmen Sie sie, wenn das Logo die ganze Grafik ist.
Logo Schwarz auf Weiß
Eine fertige Kachel für den Druck und überall dort, wo eine freigestellte Datei unpraktisch ist.
Logo Weiß auf Potabo Black
Eine fertige Kachel für dunkle Folien, sie bringt ihren Rand schon mit.
SVG ist immer die richtige Wahl, solange nichts dagegen spricht. Es bleibt in jeder Größe scharf und ist die kleinste der drei Dateien.
Das Symbol allein.
Überall dort, wo die Wortmarke zu breit wird: als Profilbild, als Favicon, als Marker auf einer Karte. Das Symbol steht nie neben der Wortmarke, es ersetzt sie.
Symbol Schwarz freigestellt
Das Symbol allein, für helle Flächen, auf denen der Schriftzug nicht mehr passt.
Symbol Weiß freigestellt
Das Symbol allein, für dunkle Flächen.
Symbol Rot freigestellt
Nur dort, wo der Untergrund neutral genug ist, dass das Rot noch trägt.
Symbol Weiß auf Potabo Red
Die Profilbildversion. Diese Datei gehört auf einen Social-Account.
Symbol Weiß auf Potabo Black
Eine quadratische Kachel für ein dunkles Layout.
Symbol Schwarz auf Weiß
Eine quadratische Kachel für ein helles Layout.
App-Icon und Favicon.
Zwei Dateien, die fast gleich aussehen und es nicht sind. Das App-Icon hat Luft um das Symbol, weil ein Home-Bildschirm sie braucht. Das Favicon hat fast keine, weil ein Browser-Tab es auf 16 Pixel zusammenzieht.
App-Icon
Das Icon so, wie die App-Stores es zeigen. 1024px, für macOS bereits abgerundet. iOS und Android runden das Quadrat selbst, denen geben Sie die Datei unverändert.
App-Icon, schwarz
Die Alternative, für einen Startbildschirm oder eine Doku-Leiste, auf der das Rot zu laut wäre.
Favicon
Was ein Browser-Tab zeigt. Absichtlich viel knapper beschnitten als das App-Icon: bei 16px ist jeder Pixel Rand ein Pixel, den die Kontur verliert.
Die Palette.
Jeder Wert hier steht genauso im Stylesheet der Website. Ein Klick auf den Hex-Wert kopiert ihn.
Markenfarben
Das Rot ist die Identität und nie eine Bedienfarbe. Das Blau ist die einzige bunte Farbe in der Oberfläche. Das Amber erscheint nur im Farbverlauf, zusammen mit dem Rot.
Potabo Red
Die Identitätsfarbe. Sie trägt das Logo, den Farbverlauf hinter einer Signatursektion und den Balken unter der Share-Karte. Sie ist nie eine Buttonfläche und nie Hintergrund für Fließtext.
- Token
- --potabored
Potabo Accent
Die einzige bunte Farbe in der Oberfläche: der Akzent-Button, Fokusringe, Links im Fließtext, Sektionslabels. Im dunklen Modus wird sie aufgehellt, damit der Kontrast bleibt.
- Token
- --brand
- Dark
- #628af8
Grundfarben
Schwarz und Weiß tauschen zwischen hellem und dunklem Modus die Rollen. Das Grau dazwischen trägt alles, was unter der Überschrift steht.
Potabo Black
Fließtext und Überschriften auf hellem Grund, und im dunklen Modus der Grund selbst. Außerdem die Fläche des Standard-Buttons, mit umgekehrter Schriftfarbe.
- Token
- --foreground
- Dark
- #fafafa
Potabo White
Der Seitengrund im hellen Modus, und die Schriftfarbe auf dem schwarzen.
- Token
- --background
- Dark
- #0a0a0a
Muted Foreground
Einleitungen, Bildunterschriften, Metazeilen. Alles, was unter der Überschrift steht.
- Token
- --muted-foreground
- Dark
- #a1a1a1
Flächen und Linien
Secondary Surface
Das dezente Grau, auf das eine Sektion wechselt, damit zwei benachbarte Bänder auseinandergehen, und die Fläche des sekundären Buttons.
- Token
- --secondary
- Dark
- #262626
Border
Kartenumrisse, Trennlinien und Eingabefelder. Im dunklen Modus Weiß mit zehn Prozent Deckkraft statt eines Graus, damit die Linie über jeder Fläche darunter gleich bleibt.
- Token
- --border
- Dark
- rgba(255, 255, 255, 0.1)
Signalfarben
Diese drei sagen etwas aus und werden nie dekorativ eingesetzt. Das Signalrot ist bewusst nicht das Potabo Rot: eine Warnung, die aussieht wie das Logo, bringt Leuten bei, beide zu übersehen.
Destructive
Fehler und Aktionen, die sich nicht rückgängig machen lassen, sonst nichts. Bewusst nicht das Potabo Rot: eine Warnung, die aussieht wie das Logo, bringt Leuten bei, beide zu übersehen.
- Token
- --destructive
- Dark
- #ff6669
Success
Eine bestätigte Aktion oder ein Zustand, der in Ordnung ist.
- Token
- --success
Warning
Etwas steht aus, oder ein Zustand will Aufmerksamkeit, ohne schon falsch zu sein.
- Token
- --warning
Diagrammfarben
Fünf Reihen, im hellen und im dunklen Modus unterschiedlich gewählt, damit jede Reihe auf ihrem Untergrund genug Kontrast behält.
Chart 1
Erste Reihe in einem Diagramm.
- Token
- --chart-1
- Dark
- #1447e6
Chart 2
Zweite Reihe.
- Token
- --chart-2
- Dark
- #00bd7d
Chart 3
Dritte Reihe.
- Token
- --chart-3
- Dark
- #ff9b00
Chart 4
Vierte Reihe.
- Token
- --chart-4
- Dark
- #ad47ff
Chart 5
Fünfte Reihe.
- Token
- --chart-5
- Dark
- #ff1f56
Eine Schrift, acht Stufen.
Die Website setzt alles in einer einzigen Familie. Die Stufen unten sind genau die, die im Stylesheet stehen, und sie sind hier in ihrer eigenen Größe gesetzt.
- Inter 400Fließtext
- Inter 500Labels, Buttons
- Inter 600Überschriften
Inter 36 / 48 / 60 px
Die eine h1, mit der eine Seite öffnet. Eng gesetzt, und im Umbruch ausgeglichen, damit nie eine kurze letzte Zeile stehen bleibt.
Inter 30 / 36 px
Die h2, mit der eine Sektion öffnet.
Inter 18 px
Die h3 auf einer Karte im Raster.
Inter 18 px
Der Absatz unter einer Sektionsüberschrift, in der gedämpften Schriftfarbe.
Inter 16 px
Laufender Text in einem Artikel oder einem längeren Block.
Inter 14 px
Text auf Karten, Listenpunkte, Hilfetexte in Formularen.
Inter 12 px
Das Label über einer Überschrift, in der Akzentfarbe. Es ist der Name der Sektion, und die Navigation sagt dasselbe Wort.
Inter 14 px
Zahlen, die untereinander stehen müssen, Codes, und alles Technische.
Wie rund eine Ecke ist.
Eine Grundgröße, aus der drei Stufen abgeleitet sind. Die beiden Enden der Skala sind Standardwerte und wandern nicht mit, wenn die Grundgröße sich ändert.
Randlose Medien, und alles, was bis an den Rand des Fensters läuft.
Buttons und Eingabefelder. Ein Tailwind-Standardwert, er bleibt bei 4px, was auch immer aus --radius wird.
Badges und Pillen im Text. Abgeleitet: calc(var(--radius) minus 4px).
Icon-Kacheln und kleinere Flächen innerhalb einer Karte. Abgeleitet: calc(var(--radius) minus 2px).
Der Grundwert, var(--radius) selbst. Dropdowns, Dialoge, Panels.
Karten und die größeren Flächen, aus denen eine Sektion gebaut ist. Ebenfalls ein Tailwind-Standardwert.
Profilbilder, Statuspunkte und runde Icon-Buttons.
Sieben Varianten, eine Rangfolge.
Die wichtigste Aktion ist neutral und dunkel, nicht bunt. Farbe ist reserviert für die seltene Aktion, die alles um sich herum überholen muss, und für die, die man nicht rückgängig machen kann.
Die Hauptaktion an dieser Stelle. Neutral und kontraststark, damit Farbe eine Bedeutung behält.
Betonung auf Ansage, für die seltene Aktion, die eine neutrale Hauptaktion überholen muss.
Die zweite Aktion neben einer Hauptaktion. Abbrechen, Ansehen, Exportieren.
Nachrangige Aktionen mit weniger Kontrast, und gruppierte Bedienelemente.
Aktionen im Kontext und Icon-Buttons, die erst beim Überfahren wie ein Button aussehen sollen.
Nur für etwas, das sich nicht rückgängig machen lässt.
Eine Aktion, die sich wie Navigation anfühlt, ganz ohne Button-Optik.
Der Farbverlauf.
Auf der Website bewegt sich dieses Feld langsam. Hier ist es ein Standbild derselben Komposition, gerechnet aus derselben Vorlage. Weiße Schrift steht direkt darauf, sonst nichts.
Farbverlauf
Der Markenhintergrund, als einzelnes Standbild. Auf der Website fließt er und reagiert auf den Zeiger. Weiße Schrift steht direkt darauf, sonst nichts.
Farbverlauf, quadratisch
Dieselbe Komposition quadratisch beschnitten, für einen Social-Post oder ein Profilbanner.
JPG ist hier die kleinere Datei. Das Bildrauschen gehört zum Bild und lässt sich in PNG kaum komprimieren.
Produktbilder.
Screenshots im Rahmen, für Artikel und Vorträge. Der Rahmen wird gezeichnet, nicht mitfotografiert, damit er immer zur aktuellen Oberfläche passt.
Lagerplan im Browser
Der Blick vom Schreibtisch: welche Bay belegt ist und was darin liegt.
potabo-lagerplan-1.webp
Kistenerfassung am Telefon
Was im Lager passiert, wird dort erfasst, wo es passiert.
potabo-idee-3.webp
Chargenübersicht
Sorte, Herkunft und Zustand je Charge, über das ganze Lager hinweg.
potabo-lagerplan-3.webp
Was Sie tun dürfen, und was nicht.
Kurz gesagt: Verwenden Sie die Dateien so, wie sie hier liegen. Alles, was Sie am Logo ändern würden, ist der Teil, den wir Sie bitten zu lassen.
Ungefragt verwenden
In Artikeln, Vorträgen, Vergleichen und Integrationen. Sie brauchen keine Freigabe von uns.
Luft lassen
Halten Sie ringsum mindestens die Höhe des Symbols frei. Die Dateien mit Hintergrund bringen diesen Abstand schon mit.
Nicht umfärben
Das Logo gibt es in Schwarz, in Weiß und im Potabo Rot. Eine vierte Farbe ist kein Potabo Logo mehr.
Nicht verzerren oder nachbauen
Nicht in die Breite ziehen, nicht drehen, nicht mit Schatten versehen und nicht neu nachzeichnen. Skalieren Sie die SVG-Datei, dann stimmt alles.
Unsicher, ob Ihr Fall dazugehört? Schreiben Sie uns kurz, wir antworten schnell.
Etwas gefunden, das fehlt?
Wenn Sie eine Datei, ein Format oder eine Zahl brauchen, die hier nicht steht, sagen Sie Bescheid. Wir legen sie dann hier ab, damit die nächste Person sie gleich findet.