UnternehmenswebsiteLive
neptay.com
Unsere Unternehmenswebsite – Medien, Technologie und Leistungen für Kunden in einem System, in zehn Sprachen und zwei Farbmodi.
Im Detail
Ein Blick auf das System.
Die Startseite im hellen und dunklen Modus, die Markenpalette, die Schriftskala und die zehn Sprachen der Website.
Überblick
Unsere Website ist das Erste, was Kunden und Partner von uns sehen. Sie präsentiert jeden Bereich von Neptay mit demselben Anspruch, den wir an unsere Kundenprojekte stellen.
Das Briefing
- Problem
- Ein Medien- und Technologieunternehmen – zwei Bereiche und die Leistungen für Kunden – als eine klare, glaubwürdige Marke präsentieren.
- Vorgabe
- Zehn Sprachen, eine davon von rechts nach links, und zwei Farbmodi.
- Lösung
- Ein tokenbasiertes Designsystem: eine Palette, große Schrift, graue Flächen und ein einziger gelber Marker.
Neptay Media & Technology Services ist ein Medien- und Technologieunternehmen. Die Website präsentiert zwei Bereiche und die Leistungen für Kunden als eine klare Marke.
Das Designsystem basiert auf der Markenpalette: zwei helle Neutraltöne, zwei dunkle Töne und ein einziger gelber Akzent. Ein gemeinsamer Satz Tokens steuert den hellen Standardmodus und den dunklen Modus, und jede Oberfläche der Website ist in Code gezeichnet – so bleibt sie stets im Einklang mit dem Produkt.
Die Website erscheint aus einer einzigen Inhaltsebene in zehn Sprachen, darunter Japanisch und Arabisch von rechts nach links. Die Layouts nutzen logische CSS-Eigenschaften und spiegeln sich deshalb sauber; Routing, Metadaten, hreflang und strukturierte Daten richten sich auf jeder Seite nach der Sprache.
Ansatz
Drei Prinzipien, konsequent durchgezogen.
Die Schrift macht die Arbeit
Große, eng gesetzte Überschriften und ruhige, zurückgenommene Einleitungen. Eine Überschrift in zwei Tönen trägt die Idee und ihren Kontext. Kein Icon übernimmt eine Aufgabe, die Schrift erledigen kann.
Ein Akzent, gezielt als Marker
Das Markengelb markiert Aktionen und Betonungen – einen Button, eine hervorgehobene Wendung, ein kleines Quadrat. Alles andere bleibt Text, graue Flächen und Haarlinien, im hellen wie im dunklen Modus.
Bewegung bestätigt, statt zu inszenieren
Inhalte gleiten beim ersten Erscheinen an ihren Platz, Kacheln heben sich beim Überfahren, und jede Animation stoppt, wenn Besucher reduzierte Bewegung bevorzugen.
Ergebnisse
Was die Website leistet.
Lokalisierung
10Sprachen
Englisch, Türkisch, Deutsch, Spanisch, Französisch, Portugiesisch, Russisch, Arabisch, Japanisch und Chinesisch – mit hreflang auf jeder Seite.
Layout
Links nach rechts und rechts nach links
Arabisch spiegelt das gesamte Layout über logische CSS-Eigenschaften, nicht über ein eigenes Stylesheet.
Farbe
Eine Palette, zwei Modi
Fünf Markenfarben, als Tokens angewendet: ein heller Standardmodus und ein dunkler Modus, auf jeder Seite umschaltbar.
System
Ein gemeinsamer Token-Satz
Jede Seite, beide Farbmodi und alle zehn Sprachen teilen sich einen Satz Design-Tokens.
Stack
- Next.js 15
- React 19
- TypeScript
- CSS-Design-Tokens
- Geist
- Vercel