Papier, Tinte und Signal
Das Design System von Neoservice AI und Neoffice: Farbe, Typografie, Logos und Bewegungen für unsere Oberflächen, unsere Websites und unsere Dokumente.
Ein Haus, ein Produkt
Neoservice AI ist das Haus, Neoffice sein Produkt: das Schweizer All-in-one-ERP. Die Branchen leiten sich davon ab: „neo“, gefolgt von der Branche.
Die Marke ist schweizerisch, präzise und beruhigend, mit der Wärme und Ruhe eines sorgfältigen Produkts, nie dem kalten Blau der Unternehmenssoftware.
Der Ton
Die Sprache
Zuerst Schweizer Französisch. Beträge in Schweizer Franken: CHF 149.–, CHF 48 250.
Die Anrede
Immer „Sie“. Wir sprechen mit der Kundschaft über ihr Unternehmen: „Steuern Sie Ihr Unternehmen.“
Der Ton
Zuversichtlich, pragmatisch, gelassen: ohne Überraschungen, ohne Verpflichtung, 100 % Schweizer, alles in einem.
Schreibweise
Sätze in Kleinschreibung, Dachzeilen in gesperrten Grossbuchstaben, keine Emojis in der Oberfläche.
Drei Logos, eine einzige Tinte
Die Logos sind vektorisiert und immer in Tinte. Ihre Linien werden nie nachbearbeitet, und sie werden mit allen ihren Formen gezeichnet.
Auf Hell
neoffice
„neo“ voll, „ffice“ als Kontur. Das Produkt: der Schweizer All-in-one-ERP.
Auf Hell
neoservice
„neo“ voll, durch einen hellen Halo abgesetzt; „service“, ein helles Inneres in einer Tintenkontur. Das Haus.
Auf Hell
Neoservice AI
Das AI kommt aus dem Wort: das umgedrehte v wird zum Λ, der Balken des i wird zum I. Es steht rechts, in der Grösse des Wortes.
Die Regeln
- Immer in Tinte, das AI eingeschlossen. Farbe erscheint nur in der Bewegung.
- Das AI rechts, in der Grösse des Wortes: nie kleiner, nie tiefer gesetzt.
- Alle Formen der Datei: ohne ihren Halo wird „neo“ zu einem Block.
- Auf Dunkel wird die Tinte zu Papier, und die hellen Teile nehmen die Farbe des Hintergrunds an.
Ruhig und schweizerisch: kein Nachfedern
Kurze Übergänge, 120 bis 320 ms, auf sanften Kurven. Einträge erscheinen überblendet, mit einem kurzen Gleiten. Jede Bewegung respektiert die Einstellung „Animationen reduzieren“: Dann wird der Endzustand gezeigt.
Motion 9 · zurückhaltend
Gemeinsam, dann der Salto
- Das v und der Balken des i füllen sich in ihrer Kontur mit Tinte.
- Sie gleiten gemeinsam hinter das Wortende, das ganz bleibt.
- Nur das v macht einen Rückwärtssalto und wird zum Λ.
- Der Balken rückt näher und legt sich daneben.
Einmal beim Laden abgespielt, bleibt es beim vollständigen Logo stehen.
Motion 4
Der Kopfbereich, der sich einfaltet
Beim Scrollen faltet sich das Logo Buchstabe für Buchstabe vom Wortende her ein, bis nur noch „AI“ bleibt. Es folgt dem Lesen und läuft nie von allein ab.
Motion 3
Die Familie
„neo“ bleibt, die Branche wechselt alle zwei Sekunden.
Die Kurven
--ease-standardDie meisten Übergänge. cubic-bezier(0.2, 0, 0, 1)--ease-emphasizedEine Geste, die einsetzt. cubic-bezier(0.3, 0, 0, 1)
Hover und Klick
Beim Überfahren ein leichter Wechsel von Hintergrund oder Rahmen. Beim Klick etwas dunkler, und Buttons schrumpfen auf 98 %.
Das Signal lebt auf dem Hintergrund
Das Papier trägt die Seite, die Tinte trägt das Gewicht, und das Signal ist der einzige Akzent: eine Fläche, ein Farbton, ein aktiver Zustand, die Geste einer Bewegung.
#FAF3EA#FFFFFFDas Papier
Ein warmes Crème für die Seite, Weiss für Karten. Nie eine reinweisse Seite, nie ein reines Schwarz als Hintergrund.
#141414Die Tinte
Der Text, die Logos und alle Aktionen: der volle Button ist schwarz. Auf Dunkel wird er zu Papier.
#F55D1ADas Signal
Eine Fläche, ein Farbton, ein Punkt, ein aktiver Zustand, ein Fortschrittsbalken. Was darauf steht, ist in Tinte.
Die Skala des Signals
- 50
#FFEAE2Farbton - 100
#FFD1C1Punkt - 200
#FFB599 - 300
#FF8D64 - 400
#F55D1Adas Signal - 500
#D54600trägt nichts - 600
#AA3700Text auf Papier - 700
#81300F
Tinte auf dem Signal
Die Tinte liest sich darauf mit 5,7:1.
Kein heller Text auf dem Signal
Weiss liest sich darauf nur mit 3,3:1: nicht zulässig.
Das Signal als Text, in seiner tiefen Stufe
Auf Papier, für einen Preis, einen Link, den Vornamen in der Anrede: 5,9:1.
Aktionen sind in Tinte
Nie ein Button im Signal, auch nicht der Anruf-Button der Website.
clay-500 · #C2723FTerrakotta, das Material
Es bleibt der zweite Ton der Icons und das Material der Illustrationen, einschliesslich des Maskottchens Nora.
Status
Erdige Töne, immer mit einem Wort oder einem Punkt, nie Farbe allein. Blau ist keine Markenfarbe: ein dezentes Schiefergrau, nur für Informationen.
Keine Farbe pro Produkt
Die Branchen unterscheiden sich durch ihren Namen. Farben, die sich nur im Farbton unterscheiden, verschwimmen für farbenblinde Leserinnen und Leser.
Forum für die Stimme, Karla für den Rest
Zwei Familien. Die Hierarchie entsteht durch die Grösse, nicht durch die Strichstärke.
Forum
--font-displaySteuern Sie Ihr Unternehmen
CHF 48 250
Eine ausgestellte Serifenschrift, in einer einzigen Strichstärke. Die Titel, die Anrede, die Panelköpfe und die grossen Zahlen.
Karla
--font-sansIhre gesamte Schweizer Fakturierung in einem einzigen Tool.
- Aa 1'027400
- Aa 1'027500
- Aa 1'027600
- Aa 1'027700
Dachzeile
Eine humanistische Grotesk, mit tabellarischen Ziffern. Die Oberfläche, der Fliesstext, die Beschriftungen und die Daten. Die Dachzeilen: Karla, in gesperrten Grossbuchstaben.
Die Skala
text-6xl · 84pxIhr Schweizer Cloud-ERPtext-5xl · 64pxIhr Schweizer Cloud-ERPtext-4xl · 48pxIhr Schweizer Cloud-ERPtext-3xl · 36pxIhr Schweizer Cloud-ERPtext-2xl · 28pxIhr Schweizer Cloud-ERPtext-xl · 22pxIhr Schweizer Cloud-ERPtext-lg · 18pxIhr Schweizer Cloud-ERPtext-md · 16pxIhr Schweizer Cloud-ERPtext-base · 15pxIhr Schweizer Cloud-ERPtext-sm · 14pxIhr Schweizer Cloud-ERPtext-xs · 12pxIhr Schweizer Cloud-ERPtext-2xs · 11pxIhr Schweizer Cloud-ERP
Cal Sans dient nur den Logos, die vektorisiert sind. Die Systemschrift in Monospace dient den Kennungen, IBAN und QR-Zeichenketten.
Ein Raster von 4 px
Container bis 1280 px. Feine, warme Rahmen vor den Schatten, und zurückhaltende, braun getönte Schatten.
Der Abstand
Die Radien
- Steuerelemente
10px - Karten
14px - Panels
20px - Kopfflächen
28px - Pillen und Avatare
999px
Die Schatten
shadow-xsshadow-smshadow-mdshadow-lgshadow-xl
Der Fokus
Ein Ring in der Farbe des Signals um das aktive Feld.
Die Wärme kommt vom Papier
Keine blau-violetten Verläufe, keine Bilder aus Bildarchiven.
Das Verlaufspapier
Crème, mit einem Schimmer des Signals oben rechts: der Standardhintergrund.
Die Spaltenlinien
Ein Papier mit feinen vertikalen Linien, hinter dem Inhalt.
Das Raster
Quadrate von 8,5 rem, die unter den Kopfzeilen verblassen.
Die Auroren
Zwei weiche Schimmer: das Signal links, Salbei rechts.
Der Titelverlauf
Von Tinte zum Signal, dann wieder zurück zur Tinte.
Der Espresso
Das warme Dunkel, für Nora und Nachtansichten.
Icons, von Hand gezeichnet
Streamline Freehand Duotone: der Hauptstrich folgt der Textfarbe, der zweite Ton ist Terrakotta, im Dateiformat festgelegt. Sie werden nie umgefärbt.
archive-box
arrow-left
arrow-right
arrow-up-right
bell
book
box
brain
briefcase
building
calendar
chart-up
chat-bubble
check-circle
check
chevron-down
chevron-left
chevron-right
clipboard
clock
close
code
coins
credit-card
document
envelope
facebook
fire
gear
globe
graduation
handshake
lightbulb
linkedin
location
lock
map-pin
medal
menu
microphone
minus
monitor
moon
pause
phone
play
plus
question
rocket
scan-document
search
send
shield
smartphone
smile
sun
target
twitter
user
users
wave
website
wifi
wrench
Nora
Das Maskottchen der Assistentin ist eine Illustration, kein Icon: nie umgefärbt, nie unter 40 px, nie in einer Reihe von Icons.
Vier isometrische Szenen
Eine Szene pro Branche, für die Website.
Tokens, hell und dunkel
Jeder Wert stammt aus dem Design System, in zwei Schichten: die Skalen, dann die Rollen, die sich darauf beziehen.
Die Skalen
Signal
- signal-50
#FFEAE2 - signal-100
#FFD1C1 - signal-200
#FFB599 - signal-300
#FF8D64 - signal-400
#F55D1A - signal-500
#D54600 - signal-600
#AA3700 - signal-700
#81300F
Tinte und Sand
- white
#FFFFFF - sand-25
#FBFAF7 - sand-50
#F6F3ED - sand-100
#ECE7DE - sand-200
#DCD4C7 - sand-300
#BFB5A4 - sand-400
#968C7C - sand-500
#6F665A - sand-600
#524B41 - sand-700
#3A342C - sand-800
#232020 - sand-900
#1A1817 - sand-950
#141414 - black
#000000
Papier
- paper-bright
#FFFDF8 - paper-cream
#FAF3EA
Terrakotta
- clay-50
#FAEFE6 - clay-100
#F3DECC - clay-200
#E9C5A4 - clay-300
#DDA479 - clay-400
#D68A59 - clay-500
#C2723F - clay-600
#A15A2E - clay-700
#7E4523
Erfolg
- green-50
#E9F7EE - green-100
#CBEDD7 - green-500
#1F9D57 - green-600
#178347 - green-700
#11663A
Achtung
- amber-50
#FCF2DD - amber-100
#F8E2B4 - amber-500
#E0980F - amber-600
#BC7D0B - amber-700
#92610C
Gefahr
- red-50
#FBEBE7 - red-100
#F6D2C9 - red-500
#DC4A3D - red-600
#C1372C - red-700
#9C2920
Information
- blue-50
#EEF2F6 - blue-100
#DCE4EC - blue-500
#4A6B8F - blue-600
#3A5572 - blue-700
#2C4156
Die Rollen
Für jeden Text sein Kontrast auf der Seite.
| Rolle | Hell | Dunkel |
|---|---|---|
--color-bg | #FAF3EA | #141414 |
--surface-card | #FFFFFF | #1B1611 |
--surface-raised | #FFFFFF | #221C16 |
--surface-sunken | #F6F3ED | #100E0D |
--surface-subtle | #FBFAF7 | #161413 |
--surface-inverse | #141414 | #FFFDF8 |
--surface-overlay | rgba(24, 20, 16, 0.55) | rgba(0, 0, 0, 0.66) |
--text-primary | #14141416,7:1 | #FFFDF818,1:1 |
--text-secondary | #524B417,8:1 | #BFB5A49,1:1 |
--text-tertiary | #968C7C3:1 | #968C7C5,6:1 |
--text-disabled | #BFB5A41,8:1 | #524B412,1:1 |
--text-inverse | #FFFDF8 | #141414 |
--text-brand | #AA37005,9:1 | #FF8D648,1:1 |
--text-link | #81300F8,1:1 | #FF8D648,1:1 |
--border-subtle | #ECE7DE | rgba(255, 251, 245, 0.08) |
--border-default | #DCD4C7 | rgba(255, 251, 245, 0.14) |
--border-strong | #BFB5A4 | rgba(255, 251, 245, 0.24) |
--border-focus | #F55D1A | #F55D1A |
--color-primary | #141414 | #FFFDF8 |
--color-primary-hover | #232020 | #ECE7DE |
--color-primary-active | #000000 | #DCD4C7 |
--color-primary-fg | #FFFDF8 | #141414 |
--color-primary-soft | #ECE7DE | rgba(255, 251, 245, 0.10) |
--color-primary-soft-fg | #1A1817 | #FFFDF8 |
--color-accent | #F55D1A | #F55D1A |
--color-accent-hover | #D54600 | #D54600 |
--color-accent-active | #AA3700 | #AA3700 |
--color-accent-strong | #AA3700 | #AA3700 |
--color-accent-fg | #141414 | #141414 |
--color-accent-soft | #FFEAE2 | rgba(245, 93, 26, 0.16) |
--color-accent-soft-fg | #81300F | #FFB599 |
--color-info | #4A6B8F | #4A6B8F |
--color-info-soft | #EEF2F6 | #EEF2F6 |
--color-info-fg | #2C4156 | #2C4156 |
--color-success | #1F9D57 | #1F9D57 |
--color-success-soft | #E9F7EE | #E9F7EE |
--color-success-fg | #11663A | #11663A |
--color-warning | #E0980F | #E0980F |
--color-warning-soft | #FCF2DD | #FCF2DD |
--color-warning-fg | #92610C | #92610C |
--color-danger | #DC4A3D | #DC4A3D |
--color-danger-soft | #FBEBE7 | #FBEBE7 |
--color-danger-fg | #9C2920 | #9C2920 |
Typografie
- Familien
--font-display'Forum', 'Times New Roman', serif--font-sans'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif--font-monoui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace
- Skala
--text-2xs0.6875rem--text-xs0.75rem--text-sm0.875rem--text-base0.9375rem--text-md1rem--text-lg1.125rem--text-xl1.375rem--text-2xl1.75rem--text-3xl2.25rem--text-4xl3rem--text-5xl4rem--text-6xl5.25rem
- Schnitte
--fw-light300--fw-regular400--fw-medium500--fw-semibold600--fw-bold700--fw-extrabold800
- Zeilenabstände
--leading-none1--leading-tight1.15--leading-snug1.3--leading-normal1.5--leading-relaxed1.65
- Laufweiten
--tracking-tighter-0.03em--tracking-tight-0.015em--tracking-normal0--tracking-wide0.02em--tracking-wider0.08em--tracking-caps0.14em
Raum, Radien, Schatten und Bewegung
- Abstand
--space-10.25rem--space-1-50.375rem--space-20.5rem--space-2-50.625rem--space-30.75rem--space-41rem--space-51.25rem--space-61.5rem--space-71.75rem--space-82rem--space-102.5rem--space-123rem--space-164rem--space-205rem--space-246rem--space-328rem
- Radien
--radius-xs4px--radius-sm6px--radius-md10px--radius-lg14px--radius-xl20px--radius-2xl28px--radius-pill999px
- Schatten
--shadow-xs0 1px 2px rgba(40, 28, 18, 0.05)--shadow-sm0 1px 2px rgba(40, 28, 18, 0.05), 0 1px 3px rgba(40, 28, 18, 0.07)--shadow-md0 2px 4px rgba(40, 28, 18, 0.04), 0 6px 16px rgba(40, 28, 18, 0.08)--shadow-lg0 6px 12px rgba(40, 28, 18, 0.06), 0 16px 36px rgba(40, 28, 18, 0.10)--shadow-xl0 12px 24px rgba(40, 28, 18, 0.08), 0 32px 64px rgba(40, 28, 18, 0.16)
- Kurven
--ease-standardcubic-bezier(0.2, 0, 0, 1)--ease-emphasizedcubic-bezier(0.3, 0, 0, 1)--ease-outcubic-bezier(0, 0, 0.2, 1)--ease-incubic-bezier(0.4, 0, 1, 1)
- Dauern
--duration-fast120ms--duration-base200ms--duration-slow320ms--duration-slower480ms
Eine Frage zur Marke?
Wenn Sie unsere Logos verwenden möchten oder mit uns zusammenarbeiten wollen, schreiben Sie uns.
Schreiben Sie uns