Klarheit
Wir machen komplexe Möglichkeiten verständlich und zeigen konkrete nächste Schritte.
Die elovait Markenwelt
Was uns verbindet.
Wie wir es zeigen.
Klar im Ausdruck. Menschlich im Gefühl.
Unsere gemeinsame Basis für alles, was wir gestalten.
Ocean & Forest · Version 3.0 · 26.10.2026
01 / Die Marke
Menschen. Unternehmen.
Digitale Möglichkeiten.
Wir entwickeln Websites, Software und KI-Lösungen für Schweizer KMU. Unternehmerisches Verständnis und technologische Expertise kommen zusammen – sichtbar in einer Marke, die verbindet.
Partnerschaft
Wir hören zu, denken mit und entwickeln gemeinsam, was zum Unternehmen passt.
Wirkung
Wir sprechen über Kundennutzen, weniger Handarbeit und bessere Entscheidungen.
Unsere Stimme
Direkt. Verständlich.
Zugewandt.
Wir sprechen mit «du» und schreiben schweizerisch. Aktive Verben, klare Aussagen und nachvollziehbare Vorteile. Produktnamen und technische Details erklären wir dort, wo sie beim Entscheiden helfen.
Diese Ausgabe bildet die neue Homepage ab und ersetzt die violette Markenwelt aus Brandbook 2.0. Ocean und Forest führen den Auftritt gemeinsam.
02 / Logo & Signet
Eine Signatur.
Die Verbindung bleibt.
Die originale Wortmarke mit ihrem charakteristischen VA bleibt unverändert in der Form. Auf der Homepage steht sie weiss auf dunklem Grund. Auf hellen Flächen verwenden wir die einfarbige Ink-Variante.
WeissSVG ↓
Primär auf dunklen Markenflächen.
InkSVG ↓
Monochrom auf hellen Flächen.
OceanSVG ↓
Farbige Anwendung auf hellem Grund.
SchwarzSVG ↓
Einfarbige Produktion und Stempel.
½ HRaum für Wiedererkennung.
Die Vektordateien sind knapp beschnitten. Den Schutzraum im Layout hinzufügen. Die Wortmarke steht ohne Zusatzzeile und wird nie aus einer Schrift nachgebaut.
- Digital
- ab 120 px Breite
- Druck
- ab 28 mm Breite
- VA-Signet
- ab 24 px Breite
Das VA ist ein kompaktes Zeichen für Favicon und kleine Markenflächen. Beim ersten Kontakt hat die vollständige Wortmarke Vorrang.
Form erhalten.Nicht strecken, drehen, trennen oder Buchstaben neu setzen.
Flach und klar.Keine Verläufe, Konturen oder Schatten innerhalb der Wortmarke.
Kontrast schaffen.Auf ruhigen Flächen platzieren. Die Bildwelt darf räumlich sein, das Logo bleibt präzise.
03 / Farbwelt
Ocean bringt Tiefe.
Forest bringt Wärme.
Blau und Grün fliessen ineinander. Dunkle Kapitel geben Ruhe, helle Flächen schaffen Orientierung. Die Farbe folgt dem Inhalt – ohne starre Zuordnung zu einzelnen Angeboten.
HEX-Wert durch Anklicken kopieren.
Die ruhige Basis.
Neutrale Töne tragen Inhalt, Kontrast und Struktur.
Zwei Verläufe.
Ein Zusammenhang.
Die Farbflächen der Homepage. Jeweils 118°; alle Stopps sind im Token-Manifest hinterlegt.
Lesbarkeit gehört zur Marke.
Diese Vollton-Paare erreichen mindestens 4.5 : 1 für normalen Text. Bei Verläufen zählt der schwächste Kontrast im Textbereich.
Aa
Weiss auf Chapter black19.1 : 1
Aa
Weiss auf Ocean deep6.8 : 1
Aa
Ink auf Paper12.2 : 1
Aa
Forest ink auf Forest light11.4 : 1
Ocean und Forest als helle Akzentfarben brauchen dunklen Text. Weiss darauf ist für Fliesstext zu schwach. HEX/RGB sind digitale Masterwerte; Druckfarben mit dem vereinbarten ICC-Profil und einem Proof abstimmen.
04 / Typografie
Montserrat.
Klar in jedem Massstab.
Eine Schrift für den gesamten Auftritt. Mittlere Gewichte geben den Headlines Präsenz, ruhiger Fliesstext macht Inhalte zugänglich. Die Wortmarke und «elovait now» bleiben eigenständiges Vektor-Artwork.
Wir verbinden
digitale Möglichkeiten.
Aa
400 Fliesstext
Aa
500 Headlines
Aa
550 Gezielte Abstufung
Aa
600 Betonung
Display
Verbindungen schaffen.
36–60 px · 500 · 1.16 · −0.045 emSection
Gemeinsam weiterdenken.
32–56 px · 500–550 · 1.12Body
Wir entwickeln digitale Lösungen, die zum Unternehmen passen und im Alltag einen Unterschied machen.
16 px · 400 · 1.75Label
Dein nächster Schritt
12 px · 500 · +0.08 emResponsive Ausgangswerte für neue Anwendungen. Auf kleinen Screens Headlines bei Bedarf auf 28 px reduzieren. Lokal hosten; Fallback: Montserrat, Arial, sans-serif. Latin, Latin Extended und SIL Open Font License sind im Kit enthalten.
05 / Anwendung
Präzise im Aufbau.
Lebendig in der Fläche.
Feines Korn, weiches Licht und zwei verbundene Formen geben der Marke Tiefe. Die Inhalte bleiben ruhig und gut lesbar. Die dunklen und hellen Kapitel schaffen einen klaren Rhythmus.
Ocean & Forest · Verbundene FormenMaterial.Das originale Korn als 192-px-Kachel hinter den Inhalt legen. Nie Text oder Logo mit Rauschen überlagern.
Bildwelt.Menschen, Produkte und nachvollziehbare Ergebnisse. Abstrakte Räume und Illustrationen klar als Bildwelt einsetzen.
Bewegung.Korn in 20 s um eine Kachel versetzen; Formen langsam bewegen. Reduzierte Bewegung respektieren und eine Pause anbieten.
Der nächste Schritt
Ein klarer Impuls.
«elovait now» als fertige Vektorkombination. Eine kurze Beschreibung nennt die Aktion. Das Logo allein erklärt noch nicht, was passiert.
Projekt besprechen
Projekt besprechenBedienelemente.6 px Radius. Haupt-CTA 60 px hoch, mobil 56 px, Navigation 48 px. Mindestens 44 px Bedienhöhe.
Interaktion.180–350 ms für Zustandswechsel. Sichtbarer 2-px-Fokus mit 5 px Abstand. Eingabeschrift ab 16 px.
Abstände.4-px-Basis: 8–24 px innerhalb von Gruppen, 32–64 px zwischen Modulen, 96–128 px für Kapitel.
05 / Design Tokens
Gleiche Werte.
Überall wiedererkennbar.
Farben, Verläufe, Schrift und Interaktion als gemeinsame Grundlage. Die Downloads und dieses Brandbook werden aus demselben versionierten System erstellt.
Raum mit System.
1280 px als Inhaltsmaximum für neue Anwendungen. Seitliche Abstände von 6 % auf Desktop und 7 % mobil übernehmen den Rhythmus der Homepage.
Inhaltsmaximum, Abstandsserie, Schutzraum und Mindestgrössen sind Gestaltungsregeln dieser Ausgabe. Die Herkunft der Homepage-Werte steht im JSON-Manifest.
Alle Werte als JSONCSS / Einstieg
@import "./fonts.css";
@import "./elovait-tokens.css";
body {
font-family: var(--elovait-font);
color: var(--elovait-ink);
background: var(--elovait-paper);
}06 / Downloads
Bereit für deinen
nächsten Entwurf.
Die aktuelle Markenbasis als SVG, WOFF2, CSS und JSON. Das vollständige Kit enthält zusätzlich Anwendungshinweise, Schriftlizenz und Prüfsummen.
Brand Kit 3.0 herunterladenSVGWortmarke · WeissSVGWortmarke · InkSVGWortmarke · OceanSVGWortmarke · SchwarzSVGVA · OceanSVGVA · WeissSVGVA · InkSVGFavicon · OceanSVGelovait now · WeissSVGelovait now · InkCSSDesign TokensJSONToken-ManifestWOFF2Montserrat · LatinWOFF2Montserrat · Latin ExtendedCSSSchrifteinbindungTXTMontserrat · LizenzSVGColour grainSVGOcean & Forest · Formen
Version 3.0 · 26. Oktober 2026 · Anwendungshinweise · Dateimanifest