zahnwerk-logo.svg · hell
zahnwerk-logo-white.svg · dunkel
zahn.svg · hell
zahn-weiss.svg · dunkel
zahn-silber.svg · auf Silber
Foto: Prophylaxe
Professionelle Zahnreinigung
Gründliche Reinigung, Politur und Fluoridierung — für gesundes Zahnfleisch und länger erhaltene Zähne.
Mehr erfahren01 Farben
Taupe ist der Akzent, Grau die ruhige Ergänzung, Silber das Metall. Gold und Grün gehören nicht mehr zum CI der Praxis.
Aa
Taupe — Akzent
#807571
Aa
Taupe deep — Schrift
#5A5250
Aa
Taupe light — Fläche
#F5F0EF
Aa
Grau mittel
#6B6560
Aa
Grau hell
#E8E5E1
Aa
Warm
#FAF4EF
Aa
Text
#1D1D1B
Drei Rollen, klar getrennt
Taupe — der Akzent
Flächen: Knöpfe, Bänder, Klammern, Linien, Menü-Hover. Weiß darauf 4,47:1.
Als Schrift auf hellem Grund nimmt man #5A5250 (7,62:1).
Grau — die Ergänzung
Akzentuierte Texte, Funktionen, Beschriftungen, ruhige Knöpfe.
#6B6560 trägt Weiß mit 5,74:1, #E8E5E1 ist die neutrale Fläche.
Silber — das Metall
Kanten und Übergänge auf dunklem Grund, Rahmen, Metallflächen, Schrift auf Silber. Trägt Tinte mit 9,19:1 — aber keine kleinen Texte auf Weiß (2,17:1).
Das Band — Kontaktleiste und Fußzeile
Kontaktleiste und Fußzeile tragen dieselbe Farbe. Hell ist das der Original-Taupe #807571 des Kunden, dunkel das Espresso #363031 — beide Bänder umschließen die Seite oben und unten. Auf dem Band steht ausschließlich reines Weiß: Taupe trägt Weiß mit 4,47:1, jeder Transparenzgrad darunter fällt heraus. Das frühere Gold wurde dort nie verwendet (1,5:1) und ist ersatzlos entfallen.
Aa
Band hell — Taupe
#807571
Aa
Band dunkel — Espresso
#363031
Warum Espresso statt des früheren Blauschwarz: Das alte Blauschwarz hatte den Farbton 210° und
trennte sich mit 1,01:1 kaum vom Seitengrund — die Fußzeile war praktisch unsichtbar. Espresso ist
warm (Farbton 350° bei nur 11,1 % Sättigung, fast der Wert des Taupe), trägt Weiß mit 12,9:1 und
setzt sich mit 1,46:1 sichtbar ab.
Silber — die Metallskala
Ihr Vorschlag #b9c0c8 ist geprüft und trägt — aber in anderen Rollen als eine Akzentfarbe.
Ein einzelnes Silber reicht nicht: es braucht die Skala, damit Flächen, Ränder und Schrift zusammen
funktionieren. Silber ist Metall, keine Schriftfarbe auf Weiß.
Aa
Silber hell — Fläche
#C8CDD4
Aa
Silber — Haupt
#b9c0c8
Aa
Silber Rand
#A9B1BB
Aa
Silber tief
#98A2AE
Aa
Schrift auf Silber
#3A4149
Gemessen:
#C8CDD4 trägt Tinte mit 10,56:1 (AAA), #b9c0c8 mit
9,19:1 (AAA), #A9B1BB mit 7,79:1, #98A2AE mit 6,52:1.
Auf dem dunklen Grund ist Silber die helle Kante: #b9c0c8 auf #14110B ergibt
10,26:1. Als Schrift auf Weiß liegt Silber bei 2,17:1 — dafür wird es nicht verwendet.
Dunkelmodus — dieselbe Marke, andere Aufgabe
Das Taupe dreht seine Rolle: #6E6459 wird zur Fläche (helle Schrift darauf), #C9BEB0 zur Schrift und zum kleinen Akzent. Silber bleibt hell und wird zur Kante — dieselbe Aufgabe wie auf hellem Grund. Der Untergrund bleibt warm.
Aa
Taupe dunkel — Fläche
#6E6459
Aa
Taupe hell — Schrift
#C9BEB0
Aa
Silber — Kante
#b9c0c8
Aa
Grund
#14110B
Aa
Fläche
#1E1A13
Aa
Text
#F0EBE3
Gemessen, nicht geschätzt:
#C9BEB0 trägt auf dem dunklen Grund 10,29:1 als
Schrift. Die dunkle Taupefläche #6E6459 trägt Weiß mit 5,78:1. Das tiefe Taupe
#5A5250 liegt auf Weiß bei 7,62:1. Silber #b9c0c8 auf Grund:
10,26:1. Nie weiße Schrift auf hellem Silber — das ergäbe 1,9:1.
Schriftgrößen der Wortmarke
Wortmarke in der Menüleiste 36 px hoch (Telefon 24 px), in der Fußzeile 39 px hoch. Seitenverhältnis 788 × 140, also immer proportional skalieren.
02 Logo & Bildmarke
Es gibt genau ein Logo und genau eine Bildmarke, und beide sind aus der Kundendatei übernommen — nicht nachgebaut. Das Logo wird nie in Einzelteilen neu gesetzt, die Bildmarke nie durch ein fremdes Icon ersetzt.
Das Logo
Aufbau
[zahn_werk] in Klammern gesetzt. Das „w" von „werk" ist ein Zahn —
Krone oben, zwei Wurzeln unten. Das Zeichen ist also Buchstabe und Bildmarke zugleich.
Farben im Original
Wortmarke und Klammern #1D1D1B, die Zahnkrone #7f7470.
Die weiße Fassung arbeitet mit #FFFFFF und rgba(255,255,255,.6).
Diese Werte nicht verändern — das Logo ist gesetzt.
Die Bildmarke
Der Zahn aus dem Logo, freigestellt als eigene Datei. Grundfläche 108 × 108 Einheiten.
Zweifarbig für Dokumente und große Anwendungen, einfarbig über currentColor als Icon.
Dateien zum Herunterladen
Alle Dateien des CI-Kits in einem Paket: Wortmarke (SVG, weiß und PNG), Bildmarke (zweifarbig,
weiß, silber), Favicon und ein LIESMICH.txt mit den Anwendungsregeln. Die einzelnen
Dateien laden Sie über das kleine Symbol direkt unter dem jeweiligen Bild.
Der Zahn als Icon
Als Icon wird der Zahn einfarbig über currentColor gesetzt und folgt so
automatisch der Textfarbe — hell, dunkel und auf Silber. Zweifarbig in kleiner Größe kippt die
Wirkung zum Buchstaben „W"; einfarbig bleibt die Zahnform in jeder Größe lesbar.
Einbau
Größe über CSS steuern, Farbe über color. Das Zeichen ist quadratisch, es braucht
kein festes Seitenverhältnis im Markup.
<svg class="zahn-ico" viewBox="413.25 6.63 116 116" fill="currentColor" aria-hidden="true">
<path d="… Krone …"/><path d="… Wurzeln …"/>
</svg>
Regeln
✓ Do
- Nur
zahnwerk-logo.svgundzahnwerk-logo-white.svg - Dunkle Fassung auf hellem, weiße auf dunklem Grund
- Seitenverhältnis des Logos erhalten
- Zahn als Bildmarke aus
zahn.svg - Zahn als Icon einfarbig über
currentColor - Schutzraum: mindestens die halbe Zahnbreite
- Mindestbreite Logo: 140 px
✗ Don't
- Logo nachbauen (Schrift + Icon zusammensetzen)
- Weißes Logo mit CSS-Filter umfärben
- Fremdes Zahn-Icon verwenden
- Zahn verzerren, drehen oder mit Schatten versehen
- Bildmarke in einer anderen Farbe als geregelt
- Logo auf unruhigem Bild ohne Fläche
- Zahn im Logo durch ein anderes Zeichen ersetzen
03 Typografie
Display — DM Serif Display
Willkommen bei Zahnwerk
Heading — Roboto Condensed 700
Unsere Leistungen für Ihr Lächeln
Body — Roboto 400
Die Zahnarztpraxis Zahnwerk in Hennef steht für moderne Zahnmedizin in freundlicher Atmosphäre. Wir nehmen uns Zeit für Sie und Ihre Zähne.
04 Neumorphism — Soft UI
Sanfte, gewölbte Elemente mit subtilen Schatten. Warm und einladend.
Cards
Zahnheilkunde
Moderne Behandlungen
Ästhetik
Ihr perfektes Lächeln
Prophylaxe
Vorsorge & Schutz
Familie
Für Groß und Klein
Buttons (Neumorphic)
/* Neumorphism Token */
--shadow-soft: 6px 6px 14px rgba(0,0,0,0.06), -6px -6px 14px rgba(255,255,255,0.8);
--shadow-pressed: inset 4px 4px 8px rgba(0,0,0,0.06), inset -4px -4px 8px rgba(255,255,255,0.8);
--shadow-soft: 6px 6px 14px rgba(0,0,0,0.06), -6px -6px 14px rgba(255,255,255,0.8);
--shadow-pressed: inset 4px 4px 8px rgba(0,0,0,0.06), inset -4px -4px 8px rgba(255,255,255,0.8);
05 Icons — Phosphor Regular
Phosphor Icons in Regular Weight — warm und weich. Für Oberflächen, Navigation und Aktionen. Ausnahme: Der Zahn ist kein Phosphor-Icon, sondern immer die Bildmarke aus Abschnitt 02.
Navigation & Aktionen
house
phone
clock
calendar
map-pin
envelope
users
star
arrow-right
list
x
gear
Dental & Gesundheit
smiley
heart
shield
first-aid
pulse
pill
thermometer
Kommunikation & Social
instagram
facebook
globe
link
share
chat
Anwendungsbeispiel
Zahnwerk
Die Bildmarke ist der Zahn aus dem Logo — kein nachgebautes Zeichen
07 Badges
Empfohlen
Premium
Silber
Neu
Terminfrei
08 Shapes
6px
12px
18px
9999px
09 Do's & Don'ts
✓ Do
- Taupe als primäre Akzentfarbe, Grau und Silber als Ergänzung
- Neumorphism für Karten & Buttons
- Phosphor Icons Regular
- Patterns als subtile Hintergründe
- DM Serif Display für Display
- 16px+ Schriftgröße Body
- Sanfte Transitions (200ms)
✗ Don't
- Orange, Grün oder Neon-Farben
- Harte Schatten oder Glasmorphism
- Icons in Bold Weight
- Patterns zu dominant
- Animationen > 300ms
- Text unter 14px
- Ohne prefers-reduced-motion
10 Navigation — Klammern, die zugreifen
Die Klammern des Logos werden zum Menüelement: Beim Überfahren oder beim Tastaturfokus schieben sie sich von innen nach außen um den Menüpunkt, die aktive Seite behält sie. Die Strichstärke entspricht dem Verhältnis im Logo. Auf dunklem Grund sind die Klammern silbern, sonst taupe.
Standard, Klammern in Taupe · .zw-nav
Fußzeile und Mobil, nur die linke Klammer · .zw-nav--col
11 Übergang — der Zahn sitzt auf der Kante
Zwischen einem hellen und einem dunklen Abschnitt sitzt die Bildmarke genau auf der Kante: oberhalb zeigt sie die Logofarben, unterhalb erscheint sie invertiert — Krone in Silber, Wurzeln in Warmweiß. Beim Scrollen wandert der Zahn langsam durch die Kante und die Farbumkehr zieht sichtbar durch ihn hindurch.
Technisch sind es zwei Streifen, die denselben Zahn an
der Abschnittsgrenze abschneiden — exakter als mix-blend-mode, weil jede Hälfte echte
CI-Farben bekommt statt errechneter Differenzfarben.
Hell → Dunkel .zw-seam--to-dark · Dunkel → Hell .zw-seam--to-light · Scroll-Kopplung über --s, bei reduzierter Bewegung statisch.
[ Übergang ]
Der Zahn sitzt auf der Kante
Der Zahn verbindet zwei Flächen, ohne dazwischen eine Dekoration zu setzen. In der Praxis eignet er sich für den Wechsel von der Leistung zum Termin und vom Text zur Fußzeile.
In der dunklen Fassung bleibt das Silber die Kante: #b9c0c8 auf
#14110B ergibt 10,26:1. Die Wurzeln stehen in Warmweiß, damit die Marke auch
auf dem dunklen Grund als Zahn lesbar bleibt.
Empfehlung: höchstens zwei solcher Kanten je Seite.
12 Bewegung — kleine Reaktionen des Zahns
Die Krone ist im Symbol getrennt von den Wurzeln — dadurch kann der Zahn wackeln, kauen oder sich die
Krone kurz anheben. Alles läuft unter einer Sekunde, respektiert prefers-reduced-motion und
wird sparsam eingesetzt: eine Animation je Handlung.
Zahn-Konfetti
Beim Klick springen kleine Zähne aus dem Knopf. Für den Hauptabschluss einer Seite — sparsam, sonst wird es albern.
.zw-burst
Wackelzahn
Das Zeichen wackelt vom Wurzelpunkt aus. Dezenter — passt für zweitrangige Knöpfe.
.zw-wiggle
Senden mit Zustand
Während des Sendens hebt sich die Krone im Takt, danach glänzt der Knopf kurz wie frisch poliert und die Rückmeldung steht im Knopf selbst.
.zw-submit[data-state]
Ladezustände
Links wird der Zahn gezeichnet, rechts kaut er. Für Terminkalender, Formulare und Seitenwechsel.
.zw-draw · .zw-chew
Politur beim Überfahren
Ein Lichtstreif fährt über das Zeichen, der Zahn hebt sich leicht. Für Leistungs-Kacheln und Karten.
.zw-polish
13 Einfassung — Klammern als Rahmen
Wie im Logo sind die Klammern höher als der Inhalt. Beim Überfahren oder beim Tastaturfokus rücken sie
nach innen und fassen Karte, Foto oder Zitat ein. Stärke, Breite und Überstand sind einstellbar:
--b (Strich), --w (Breite), --over (Überstand), --grip (Zug).
Foto: Behandlungsraum
Implantologie
Feste Zähne auf Implantaten, geplant mit digitaler Diagnostik und in Ruhe erklärt.
Mehr erfahrenIch hatte zum ersten Mal keine Angst vor dem Termin.
Beispiel-Rezension · Google
Foto: Praxis von innen
.zw-frame--xl14 Weitere Ideen — was das Logo noch hergibt
Unterstrich als Worttrenner
UnsereLeistungen
Termin
Der Unterstrich aus [zahn_werk] verbindet Überschriften und wird beim Überfahren länger.
Als blinkender Strich eignet er sich als Cursor im Hero.
.zw-us · .zw-us--blink
Zahlen in Klammern
3Behandlungsräume
12im Team
Kennzahlen und Fakten in eckigen Klammern. Beispielwerte — die echten Zahlen kommen von der Praxis.
.zw-brnum
Kronen als Aufzählung
- Abendsprechstunde
- Barrierefreier Zugang
- Parkplätze vor der Tür
Die Krone ohne Wurzeln ersetzt Häkchen und Punkte in Listen.
.zw-kronen
404: Hier fehlt ein Zahn
Eine Zahnreihe mit Lücke als Fehlerseite, darunter ein Knopf zurück zur Startseite.
.zw-luecke
Auf dieser Seite schon aktiv
- Scroll-Fortschritt als taupefarbener Strich am oberen Rand
- Nach-oben-Knopf unten rechts; die Krone hebt sich beim Überfahren
.zw-progress · .zw-top
Noch ohne Demo
- Favicon aus der Bildmarke — Krone Taupe, Wurzeln dunkel
- Formularfelder mit Klammern als Fokus-Zustand
- Zitate in Klammern statt Anführungszeichen
- Cookie-Hinweis als schmale Leiste im Klammer-Rahmen
- Hero-Intro: Klammern fahren auseinander und geben den Claim frei
Diese fünf sind Vorschläge für den Entwurf — noch nicht gebaut.