Dieses Handbuch definiert den visuellen und sprachlichen Auftritt von Seedfinity. Es dient als Referenz für Design, Marketing, Produkt und externe Partner:innen.
Dieser Brand Guide stellt sicher, dass Seedfinity über alle Touchpoints hinweg konsistent wirkt: Shop, Embeds, Network, Print, Social Media und mehr.
Der Markenkern definiert, wofür Seedfinity steht – Vision, Mission, Werte und Positionierung.
Seedfinity ist die beste Plattform für Cannabis-Sorten-Information und -Kauf. 15+ Jahre Planung und Erfahrung treffen auf moderne Technologie.
Wir schaffen digitale Erlebnisse, die sich natürlich anfühlen und Cannabis-Wissen für alle zugänglich machen – von Einsteigern bis Experten.
Technologie meets Know-How & Natur. Wir verbinden fundiertes Cannabis-Wissen mit moderner UX zu einer einzigartigen Shopping-Erfahrung.
Seedfinity wirkt premium, modern und unkompliziert. Technisch versiert, aber nie überheblich – immer auf Augenhöhe.
Die führende Plattform für Cannabis-Sorten in Europa. Premium-Qualität, maximale Convenience, nahezu keine Konkurrenz auf diesem Niveau.
Das Seedfinity Logo ist das zentrale Erkennungsmerkmal der Marke. Hier finden sich alle Varianten, Schutzzonen und Anwendungsregeln.
Das Primärlogo wird auf dunklen Hintergründen verwendet – dem Standard im Seedfinity Dark Mode Design.
Für kleine Flächen, App-Icons oder Favicons kann das Symbol oder das Seed-Icon allein verwendet werden.
Um die Lesbarkeit und Wirkung des Logos zu gewährleisten, muss um das Logo herum eine Schutzzone freibleiben. Diese entspricht mindestens der Höhe des Seed-Symbols.
In dieser Zone dürfen keine anderen grafischen Elemente, Texte oder Kanten liegen.
Das komplette Seedfinity Farbsystem – automatisch generiert aus sf.css.
Alle Farben sind als CSS Custom Properties verfügbar.
Primär- und Sekundärfarben mit Varianten für Hover, Light und Alpha-Stufen.
Statusfarben für Feedback: Success, Danger, Warning, Info.
Cannabis-Genetik Kategorien: Indica, Sativa, Hybrid, CBD, THC-High.
Samen-Kategorien: Feminized, Regular, Autoflower, Fast Version.
⚠️ Source of Truth: storage/devDatabase/flavors.json +
assets/js/embeds/demo-4.js
Diese Farben sind radial harmonisiert und bereits abgestimmt. Hunderte Stunden Arbeit
stecken darin!
Produkt-Badges: Bestseller, Preorder, Limited, Exclusive, New.
13-stufige Grauabstufung optimiert für Dark Mode.
💡 Klicke auf ein Farbfeld, um den HEX-Wert in die Zwischenablage zu kopieren.
Die Typografie sorgt für klare Hierarchie, gute Lesbarkeit und einen eigenständigen Charakter der Marke.
Gotham ist unsere primäre UI- und Fließtext-Schrift. Modern, gut lesbar und perfekt für Dark Mode optimiert.
Gotham, Helvetica Neue, -apple-system, sans-serif--sfb-font-size-base)--sfb-line-height-normal)| Ebene | Beispiel | Größe / Gewicht |
|---|---|---|
| H1 | Brand Headline | 32px / 700 |
| H2 | Sektionstitel | 24px / 600 |
| H3 | Kartentitel | 18px / 600 |
| Body | Fließtext | 16px / 400 |
| Caption | Meta-Info | 12–13px / 400 |
Layout-Regeln sorgen für Struktur und ein konsistentes Erscheinungsbild über alle Medien hinweg.
Wir verwenden ein 4px-Spacingsystem (4–8–12–16–24–32–48–64px) für Abstände, Padding und Margins. Dadurch bleiben Layouts visuell konsistent.
Layouts sind mobile-first und passen sich an unterschiedliche Bildschirmgrößen an.
Bilder, Illustrationen und Icons prägen den Charakter der Marke. Hier sind Richtlinien für konsistente Visuals.
Die Sprache von Seedfinity ist Teil der Marke – informativ, zugänglich und niemals belehrend.
“Fehler 500. Etwas ist schiefgelaufen.”
“Da ist etwas schiefgelaufen. Bitte lade die Seite neu oder versuche es später erneut.”
Grundbausteine für alle digitalen Produkte im Seedfinity Ökosystem.
Alle Klassen verwenden das Präfix .sfb-.
<button class="sfb-btn sfb-btn-primary">Primary</button>
<button class="sfb-btn sfb-btn-secondary">Secondary</button>
<button class="sfb-btn sfb-btn-outline">Outline</button><!-- Toggle -->
<label class="sfb-toggle">
<input type="checkbox">
<span class="sfb-toggle-label">Label</span>
</label>
<!-- Button Group -->
<div class="sfb-button-group">
<input type="radio" name="view" id="list" checked>
<label for="list">Liste</label>
<input type="radio" name="view" id="grid">
<label for="grid">Raster</label>
</div>Logos, Icons und weitere CI-Assets zum Download.
Für Fragen zur Marke, Sonderfälle oder Freigaben von Kampagnen kontaktiere bitte das Brand-/Design-Team.
Freigabepflichtig sind insbesondere:
