Die Marke steht in einer Datei.
Farben, Schriftgrößen, Abstände und Bewegungsregeln von Moe's IT kommen aus einer einzigen Quelle. Diese Seite liest daraus — sie kann gar nicht veralten.
- Akzent
- Fahrwasser
- Warmer Neutralton
- Düne
- Schriften
- Zwei, selbst gehostet
- Inhaltsbreite
- 1200 px
Logo und Bildmarke
„M.IT“ in Bitter, dem Schnitt der Überschriften, und darüber eine Welle mit drei Spitzen: die Lübecker Bucht über dem Namen. Die Marke gehört damit zur selben Familie wie die Wortmarke, statt daneben zu stehen. Die Buchstaben sind Konturen aus der Schriftdatei, keine Schrift — die Marke braucht also keinen Font und bleibt ab 24 px lesbar.
Die Buchstaben erben currentColor, die Welle nimmt --c-mark: Petrol, dieselbe Farbe wie der Akzent. Im dunklen Design hellt sie auf Brand-300 auf, damit die Marke ohne Kachel auskommt.
Unter 24 px trägt die Welle allein. Dafür gibt es das Favicon: die Welle in Sand auf einer petrolfarbenen Kachel, ohne Buchstaben, in jedem Design gleich. Das App-Icon steht dazwischen — dieselbe Kachel, aber mit den Buchstaben, weil ab 180 px alles lesbar bleibt.
Prüfansicht
Links die heutige Bildmarke, rechts die Zeichnung, die sie ersetzt hat — ein dünnes M.IT mit fünfzackiger Welle in einem Blau, das in keiner Palette der Marke vorkam.
16 px, Tab
48 px, App-IconDateien
- Logo (hell)Bildmarke und Wortmarke, für helle Flächenlogo.svg
- Logo (dunkel)Für dunkle Flächenlogo-dark.svg
- Bildmarke„M.IT“ als Konturen in currentColor, Welle in --c-markmark.svg
- Wortmarke„Moe's IT“ als Konturen, currentColorwordmark.svg
- Bildmarke auf KachelQuelle der App-Iconsmark-tile.svg
- FaviconNur die Welle, 16 bis 24 pxfavicon.svg
- Apple Touch IconPNG, 180 × 180, ohne Radiusapple-touch-icon.png
- App-Icon 192PNG, 192 × 192icon-192.png
- App-Icon 512PNG, 512 × 512icon-512.png
- Open-Graph-Vorlage1200 × 630og-template.svg
Nicht Teil der Marke, nur als Vorlage abgelegt: Frühere Bildmarke (Raster) reference-legacy-mark.png
Farbe
Das Wasser in der Lübecker Bucht ist bei bedecktem Himmel weder marineblau noch türkis, sondern ein dunkles, entsättigtes Petrol zwischen Grün und Blau. Genau das ist unser Akzent. Er wirkt in kleinen Größen wie Tinte, bleibt dadurch ruhig und ist weit genug vom Standard-Corporate-Blau entfernt, um zu uns zu gehören.
Der warme Neutralton kommt vom Dünensand in Travemünde — graubeige, nicht goldgelb. Er trägt Bänder und ruhige Flächen, nie ganze Seiten.
Die neutrale Rampe hat einen leichten Grünstich, damit Text und Rahmen unter dem Petrol nicht kalt kippen.
Fahrwasser
Akzent — Petrol der Trave
- 50#eef5f5
- 100#d8e9e9
- 200#b2d2d4
- 300#83b5b9
- 400#52939a
- 500#2e767e
- 600#1b5c63
- 700#164a50
- 800#143b40
- 900#122f33
- 950#0a1c1f
Düne
Warmer Neutralton — Sand in Travemünde
- 50#faf7f0
- 100#f3ebdd
- 200#e6d9c1
- 300#d4c09b
- 400#bfa475
- 500#a78a5c
- 600#8b714a
- 700#6d593c
- 800#524432
- 900#3a3126
- 950#221d17
Seenebel
Neutrale Rampe — Text, Rahmen, Flächen
- 50#f6f7f7
- 100#ebeeee
- 200#dbdfdf
- 300#bfc6c6
- 400#97a0a1
- 500#737d7e
- 600#596263
- 700#454d4e
- 800#2f3637
- 900#1c2223
- 950#0e1416
Rollen
Die einzigen Werte, die sich zwischen hell und dunkel ändern.
| Rolle | Verwendung | Hell | Dunkel |
|---|---|---|---|
| --c-bg | Seitenhintergrund | #f6f7f7 | #0e1416 |
| --c-surface | Karten und Panels | #ffffff | #161d1f |
| --c-surface-2 | Warmes Band | #efe6d6 | #27251e |
| --c-fg | Fließtext | #0e1416 | #e7ebeb |
| --c-muted | Sekundärtext | #596263 | #97a0a1 |
| --c-border | Trennlinien | #dbdfdf | #2a3234 |
| --c-border-strong | Betonte Rahmen | #bfc6c6 | #3c4547 |
| --c-input-border | Eingabefelder und sekundäre Buttons (≥ 3:1) | #7a8485 | #737d7e |
| --c-accent | Akzent | #1b5c63 | #83b5b9 |
| --c-accent-hover | Akzent, Hover | #164a50 | #b2d2d4 |
| --c-accent-fg | Text auf Akzent | #ffffff | #0a1c1f |
| --c-accent-soft | Akzent, flächig | #eef5f5 | #122f33 |
| --c-ring | Fokusring | #2e767e | #52939a |
| --c-tag-bg | Badge, Fläche | #f3ebdd | #2b2419 |
| --c-tag-fg | Badge, Text | #524432 | #d4c09b |
| --c-tag-border | Badge, Rahmen | #d4c09b | #524432 |
| --c-mark | Welle der Bildmarke | #1b5c63 | #83b5b9 |
| --c-shadow-weak | Schatten, leicht | rgb(14 20 22 / 0.08) | rgb(0 0 0 / 0.4) |
| --c-shadow-strong | Schatten, kräftig | rgb(14 20 22 / 0.16) | rgb(0 0 0 / 0.6) |
Schrift
- Atkinson Hyperlegible Next
- Fließtext, Navigation, Formulare
- Vom Braille Institute für maximale Unterscheidbarkeit der Buchstaben entworfen. Unsere Leserinnen und Leser sind Geschäftsführungen, keine Design-Community — Lesbarkeit in jeder Größe ist die härteste Anforderung.
- SIL Open Font License 1.1
- Bitter
- Überschriften, Wortmarke
- Eine kontrastarme Slab-Serif für den Bildschirm. Ihre stumpfen Serifen passen zur Backsteingotik der Stadt und zu einem Betrieb, der schon eine Weile existiert.
- SIL Open Font License 1.1
- Systemschrift (monospace)
- Token-Werte, Code
- Kein dritter Webfont. Werte und Code stehen in der Schrift des Systems.
- —
Acht Stufen
- displayDisplay44 → 80 pxline-height 1.04tracking -0.022em
IT, die trägt.
- h1Überschrift 134 → 52 pxline-height 1.1tracking -0.018em
Prozesse, die von allein laufen
- h2Überschrift 226 → 36 pxline-height 1.2tracking -0.012em
Wie wir arbeiten
- h3Überschrift 320 → 24 pxline-height 1.32tracking -0.006em
Prozessautomatisierung
- leadVorspann19 → 22 pxline-height 1.55tracking -0.004em
Wir betreuen Betriebe in Lübeck und Umgebung, remote in ganz Deutschland.
- bodyFließtext17 → 18 pxline-height 1.65tracking 0em
Wir schauen uns an, was heute per Hand passiert, rechnen den Aufwand aus und bauen erst danach.
- smallKleintext14 → 15 pxline-height 1.5tracking 0.004em
Antwort in der Regel innerhalb von 24 Stunden.
- monoMonospace13 → 14 pxline-height 1.6tracking -0.01em
--color-brand-600: #1b5c63;
Raster, Ecken, Tiefe
4 px Basis, 8 px Rhythmus, 1200 px maximale Inhaltsbreite und 68ch Zeilenlänge für Fließtext. Getrennt wird mit Haarlinien und Bändern; Schatten bekommen nur Dinge, die wirklich schweben.
Abstände
- 3xs4 px
- 2xs8 px
- xs12 px
- sm16 px
- md24 px
- lg32 px
- xl48 px
- 2xl64 px
- 3xl96 px
- 4xl128 px
Ecken
- xsEingabefelder, Regeln
- smBadges
- mdButtons
- lgKarten
- xlBento-Kacheln
- fullPillen, Avatare
Tiefe
- raise
Klebende Kopfzeile
- pop
Menü, Dropdown
- overlay
Mobiles Menü
Bewegung
Dauern
- 150ms Hover, Fokus, Farbwechsel
- 250ms Aufklappen, Menü, Seitenwechsel
- 400ms Große Flächen, selten
cubic-bezier(0.2, 0.8, 0.2, 1)
Erlaubt
- Deckkraft (opacity)
- Verschiebung um höchstens 8 px
- Höhe (auffalten, zuklappen)
- Eine Ambiente-Schleife pro Seite: 7 bis 23 s, ease-in-out, Neigung bis 2,2°
- Ein Laufband pro Seite: eine Achse, gleichbleibendes Tempo, linear, pausiert bei Hover und Fokus
Nicht erlaubt
- Skalierung über 1.02
- Rotation über 2,2° — und die nur in der Ambiente-Schleife
- Parallax
- Automatisch startende Animationen außerhalb von Ambiente-Schleife und Laufband
- Laufbänder mit Inhalten, die es nirgendwo sonst gibt
- Animationsbibliotheken (framer-motion, three, recharts)
Bei prefers-reduced-motion wird jede nicht essenzielle Animation auf 1 ms gesetzt; Dauerschleifen werden ganz abgeschaltet, das Laufband wird zur ruhenden, zentrierten Reihe.
So — und so nicht
So
- Die Buchstaben der Bildmarke einfarbig setzen, sie erben currentColor.
- Mindestens die halbe Markenhöhe als Freiraum ringsum lassen.
- Auf farbigen Flächen die helle Logo-Variante verwenden.
- Unter 24 px die Kachel mit der Welle allein nehmen, nicht die freie Marke.
- Den Namen immer „Moe's IT“ schreiben.
Nicht
- Die Marke verzerren, drehen oder mit Effekten hinterlegen.
- Die Marke in einen Farbverlauf setzen.
- Die Welle in einer anderen Farbe als --c-mark oder Sand auf der Kachel setzen.
- Die Welle weglassen oder ihre Spitzen nachzählen — es sind drei.
- Die Kachel mit der Welle allein über 24 px als Bildmarke verwenden.
- Die Buchstaben in einer anderen Schrift als Bitter 600 nachsetzen.
- Das alte durchgestrichene Ø verwenden — die Schreibweise ist „Moe's IT“.
- Die Wortmarke in einer anderen Schrift nachbauen.
- Die Marke auf ein Foto von Menschen legen.