TSD Design GmbH – Brand Guidelines

01 — Farbpalette

Farben

Das dunkle Farbschema mit goldenen Akzenten vermittelt Eleganz, Professionalitat und Vertrauen. Die animierten Markenfarben verleihen der Marke Lebendigkeit.

Hintergrunde

Dark

#111111

--bg-dark

Darker

#0a0a0a

--bg-darker

Section

#161616

--bg-section

Card

#1c1c1c

--bg-card

Light

#f5f4f0

--bg-light

Cream

#eae8e3

--bg-cream

Text

White

#ffffff

--text-white

Light

#e0ddd7

--text-light

Muted

#8c8880

--text-muted

Dark

#1a1a1a

--text-dark

Akzent

Gold (Primary)

#c5a46d

--accent

Gold Hover

#d4b87e

--accent-hover

Animierte Markenfarben (Logo & Header)

Warm Gold

#E5CA9C

Mint

#66F4C4

Ice Blue

#C6E5EC

Purple

#A178BC

Disziplin-Farben (Layer)

Technik

#7a9e7e

Software

#6a8fb5

Design

#9b7ab8

Strategie

#c5a46d

Borders

Subtle

rgba(255,255,255,0.08)

--border-subtle

Light

rgba(255,255,255,0.12)

--border-light

02 — Typografie

Schriften

Playfair Display als elegante Displayschrift fur Uberschriften, Inter als moderne Sans-Serif fur Fliesstext und UI-Elemente.

Hero H1 Playfair Display / 400 / 3.6rem / 1.15 / -0.015em

Das KI-Kreativsystem
fur Ihr Unternehmen

Section H2 Playfair Display / 400 / 2.5rem / 1.2 / -0.01em

Drei Saulen. Ein System.

Sub H2 Playfair Display / 400 / 2rem / 1.25

Wofur wir stehen.

Layer H3 Playfair Display / 400 / 1.7rem / 1.25

Strategische Designsysteme

Card H3 Inter / 600 / 1.05rem / -0.01em

Technische Dokumentation

Body Inter / 300 / 0.95rem / 1.75

Wir verbinden technisches Know-how, intelligentes Softwaredenken und strategisches Design. Fur Unternehmen, die sichtbar, verstandlich und zukunftsfahig sein wollen.

Overline Inter / 500 / 0.75rem / 0.14em / uppercase

Unsere Disziplinen

Tag Inter / 600 / 0.68rem / 0.12em / uppercase

Technik

Nav Link Inter / 400 / 0.88rem / 0.01em

KI-Kreativsystem Leistungspakete Ablauf Uber Uns

Blockquote Playfair Display / 400 italic / 1.8rem / 1.45

„Das Ergebnis hat unsere Erwartungen ubertroffen.“

Stat Number Playfair Display / 400 / 2.2rem

97% 4x 48h

03 — Logo

Logomark

Das TSD-Logo ist ein quadratisches Monogramm mit animiertem Farbverlauf. Die Animation durchlauft vier Markenfarben in 12 Sekunden.

Auf Dunkel (#111111) – Animiert

Auf Hell (#f5f4f0)

Auf Akzent (#c5a46d)

Statisch – Gold (#E5CA9C)

Statisch – Mint (#66F4C4)

Statisch – Ice Blue (#C6E5EC)

Statisch – Purple (#A178BC)

Logo-Animationsfarben (12s Cycle)

#E5CA9C

#66F4C4

#C6E5EC

#A178BC

Logo Schutzzone

Mindestabstand: Hohe des Logo-Rahmens (1x). Keine Elemente durfen in die Schutzzone eindringen. Mindestgrosse: 24px Hohe (digital), 8mm (Print).

04 — Abstande & Raster

Spacing System

Konsistente Abstande basierend auf einem 8px-Grundraster. Container-Breite: max 1200px mit responsivem Padding.

XS

8px / 0.5rem

SM

16px / 1rem

MD

24px / 1.5rem

LG

32px / 2rem

XL

48px / 3rem

2XL

64px / 4rem

Section

112px / 7rem

Hero

160px / 10rem

Border Radius

Gerät	Viewport	Padding
iPhone SE	375 px	24 px
iPhone 14 / Pro	390–430 px	24 px
Kleine Tablets	600 px	~24 px
iPad Portrait	768 px	~31 px
Desktop	≥ 1200 px	48 px

UI-Komponenten

Wiederverwendbare Bausteine des TSD Design Systems.

Buttons

Primary

Accent

Outline

Nav CTA Kontakt

Tags & Labels

Layer Tags Technik Software Design Strategie

Pills Corporate Design Logo-System Typografie Farbkonzept

Badge Empfohlen

Cards

Standard Card

Background: #1c1c1c, Border: rgba(255,255,255,0.08), Radius: 12px, Padding: 2rem.

Technik

Card mit Akzentlinie

3px farbige Linie links, passend zur jeweiligen Disziplin.

Modular Package Cards

Nummerierte Module (01–04) werden farblich den Disziplinen zugeordnet: 3px Top-Stripe, eingefärbte Modul-Overline und Check-Icons. Wird auf der Startseite für die Leistungspakete verwendet.

Modul 01

Strategie-Fundament

Grün · #7a9e7e — Technik-Layer

Modul 02

KI-Content-Engine

Blau · #6a8fb5 — Software-Layer

Modul 03

Design & Markensystem

Lila · #9b7ab8 — Design-Layer

Alle 4 Elemente

Gesamtsystem

Gold · var(--accent) — featured

      .pkg::before { height: 3px; top: 0 } · .pkg:nth-child(n) ::before und .pkg-overline in Disziplin-Farbe
    

Icon-System

Inline-SVGs mit viewBox="0 0 24 24", 1.5px Stroke, 28×28px gerendert. Füllung via currentColor — Parent setzt die Farbe (var(--accent) Gold oder #A178BC Lila). Bei komplexeren Icons wie "Fragmentierte Marke" wird per transform-box: fill-box eine dezente Float-Animation auf einzelne Shapes angewendet.

Uhr

gold · 1.5px

Fragmente

animiert · floating

Lupe

gold · 1.5px

◆

Klarheit

purple · unicode

⚙

Systematik

purple · unicode

✦

Qualität

purple · unicode

❤

Wirkung

purple · unicode

Form Inputs

Default

Focus

Label E-Mail *

Navigation

KI-Kreativsystem Leistungspakete Ablauf Uber Uns Kontakt

Fixed Header: 72px Hohe, Frosted Glass (rgba(17,17,17,0.92) + blur(24px)), animierter Gradient-Stripe darunter.

Mobile Navigation

Breakpoint bei 768px. Der Hamburger-Button verwandelt sich beim Öffnen in ein X. Das Menü slidet von rechts ein, überlagert den kompletten Viewport unter dem Header mit deckendem Hintergrund.

Closed

TSD
DES
IGN

Open

TSD
DES
IGN

KI-Kreativsystem Leistungspakete Ablauf Über Uns Kontakt

Spezifikation

          background: rgba(8, 8, 8, 0.95)

          position: fixed; top: 72px; left: 0; right: 0

          height: calc(100vh - 72px)

          transform: translateX(100%) → translateX(0)

          transition: 0.5s cubic-bezier(0.32, 0.72, 0, 1)

          z-index: 50; overflow-y: auto

          Text: #e0ddd7 (hell, theme-unabhängig)

Hinweis: Wegen backdrop-filter auf dem Header entsteht ein neuer Containing Block — daher explizite height statt bottom: 0.

Hamburger (geschlossen)

X (geöffnet, .active)

06 — Effekte & Texturen

Visuelle Effekte

Subtile Texturen und Effekte, die dem Design Tiefe und Charakter verleihen.

Noise Overlay

Subtiles Rauschen uber dem gesamten Viewport fur eine organische, haptische Qualitat.

fractalNoise / opacity: 0.035 / z-index: 9999 / pointer-events: none

Frosted Glass (Header)

Glasmorphismus-Effekt fur die fixierte Navigation.

background: rgba(17,17,17,0.92) / backdrop-filter: blur(24px)

Frosted Glass Preview

Card Hover Glow

Dezenter goldener Schein beim Hovern uber Karten.

box-shadow: 0 8px 32px rgba(197,164,109,0.06), 0 0 0 1px rgba(197,164,109,0.08)

Button Hover Shadow

Goldener Schatten + leichte Elevation beim Hovern.

box-shadow: 0 4px 20px rgba(197,164,109,0.25) / transform: translateY(-1px)

Selection Color

Goldene Text-Selektion passend zur Markenfarbe.

background: rgba(197,164,109,0.3) / color: #fff

Selektierter Text

Fade-In Animation

Scroll-basierte Einblendung fur Sektionen und Karten.

opacity: 0 → 1 / translateY(24px → 0) / 0.7s cubic-bezier(0.23, 1, 0.32, 1)

07 — Tonalitat

Brand Voice

Die Kommunikation der TSD Design GmbH ist professionell, klar und selbstbewusst — ohne uberheblich zu wirken.

Wir sind

Professionell & kompetent
Klar & prazise
Strategisch & losungsorientiert
Selbstbewusst & einladend
Hochwertig & sorgfaltig

Wir sind nicht

Uberheblich oder elitar
Technisch unverstandlich
Verspielt oder unserioes
Aggressiv verkaufend
Generisch oder austauschbar

Sprachbeispiele

Richtig

„Lassen Sie uns sprechen.“

Falsch

„Jetzt schnell Angebot sichern!!!“

Richtig

„Wir entwickeln eine Losung, die zu Ihrem Unternehmen passt.“

Falsch

„Wir machen alles moglich!“

08 — Lightmode

Helles Farbschema

Die Website unterstutzt ein helles Farbschema als Alternative zum dunklen Standard. Der Toggle befindet sich in der Navigation jeder Seite. Die Auswahl wird via localStorage persistiert und ist beim nachsten Besuch aktiv.

Hintergrunde (Light Mode)

Dark (invertiert)

#fafaf7

--bg-dark

Darker (invertiert)

#f0ede7

--bg-darker

Section

#ffffff

--bg-section

Card

#ffffff

--bg-card

Text (Light Mode)

Primary (ehemals White)

#1a1a1a

--text-white

Secondary

#2d2d2d

--text-light

Muted

#6b6b6b

--text-muted

Akzente (unverandert)

Gold Primary

#c5a46d

--accent

Gold Hover

#d4b87e

--accent-hover

Der Gold-Akzent und die Disziplin-Farben (Technik Grun, Software Blau, Design Lila) bleiben in beiden Modi identisch, damit die Marken-Identitat konsistent bleibt.

Borders (Light Mode)

Subtle

rgba(0,0,0,0.08)

--border-subtle

Light

rgba(0,0,0,0.15)

--border-light

Technische Umsetzung

Steuerung

Der Toggle setzt data-theme="light" auf das <html>-Element. CSS-Variablen werden per Selector html[data-theme="light"] uberschrieben.

Persistenz

Die Auswahl wird in localStorage unter dem Schlussel theme gespeichert. Ein Init-Script im <head> verhindert FOUC (Flash of unstyled content).

Standard

Dark Mode ist der Default. Ohne gespeicherte Praferenz startet die Seite immer im dunklen Schema.

Logo-Anpassung

Das animierte SVG-Logo wird im Light Mode per CSS-Filter abgedunkelt (brightness(0.55) saturate(1.3)), da es aus pastelligen Farben besteht.

Prinzipien

Konsistenz

Marken-Identitat bleibt erhalten: Akzent-Gold, Disziplin-Farben und animierte Markenfarben sind in beiden Modi gleich.

Kontrast

Alle Textfarben wurden fur WCAG-AA-Kontrast auf den entsprechenden Hintergrunden optimiert.

Performance

Der Wechsel erfolgt rein uber CSS-Variablen – keine doppelten Stylesheets, kein zusatzliches Laden.