Macedo Aldick Logo

Intern · Referenz

Design-Guideline

Diese Seite fasst das visuelle System der Website zusammen: Farbsemantik aus globals.css, Typografie, den verbindlichen Button-Stil sowie Glasflächen und Bewegung. So bleiben neue Komponenten konsistent mit dem bestehenden Look.

Grundlage

Designprinzipien

  • Dunkle Basis, warme Lesbarkeit: Hintergrund Schwarz, Fließtext und Überschriften in Creme-Tönen, keine rein kalßen Grautöne für Haupttext.
  • Petrol als digitale Akzentfarbe: Für Tiefe, Fokus und „Tech“-Assoziation — sparsam einsetzen, nie gegen den warmen Text konkurrieren lassen.
  • Primary (Beige) für warme Highlights: Buttons auf hellen Flächen, dezente Akzente; auf dunklem Grund eher Petrol/Creme-Glas.
  • Glas statt harter Karten: Wo möglich Blur, feine Kanten und color-mix-Ränder statt flacher Graublöcke.

Tokens

Farben

CSS-Variablen in :root; in Tailwind über @theme inline als bg-* / text-* nutzbar.

Hintergrund & Oberflächen

Background

--background

#000000

Foreground

--foreground

#faf6ec

Surface

--surface

#0a0a09

Surface elevated

--surface-elevated

#121210

Creme-Skala

Cream

text-cream / bg-cream

#faf6ec

Cream soft

--cream-soft

#e8e0d0

Cream muted (Text)

text-cream-muted

#aea598

Border subtle

--border-subtle

Primary (warmes Beige)

Primary

--primary

#c4b59a

Primary hover

--primary-hover

#dcd0bc

Primary deep

--primary-deep

#6b6254

Petrol

Petrol deep

--petrol-deep

#081a1d

Petrol

--petrol

#134b52

Petrol mid

--petrol-mid

#2a737e

Petrol muted

--petrol-muted

#6eb8c4

Petrol soft

--petrol-soft

#9ad4de

Panels (Taupe / Gold-Namen in Theme)

Panel

bg-panel

#14110c

Panel muted

bg-panel-muted

#1e1a14

Gold dark

bg-gold-dark

#2e2a24

Gold mid

bg-gold-mid

#5c5347

Schrift

Typografie

Schrift: Geist (Variable Font, lokal unter /fonts). Body nutzt var(--font-geist).

Überschrift 1

Moderne Websites für Unternehmen

text-3xl md:text-4xl lg:text-5xl font-bold text-cream

Überschrift 2

Abschnitt oder Karten-Titel

text-2xl md:text-3xl font-bold text-cream

Fließtext

Kurze Sätze, klare Struktur. Sekundärinfo und längere Erläuterungen in cream-muted, nicht in Grau außerhalb der Palette.

Label / Kicker

Beispiel-Kicker

text-sm font-semibold uppercase tracking-wider text-petrol-muted

Code / Token

--petrol-mid

Interaktion

Buttons & Links (Pflicht-Stil)

Für alle primären Aktionen (CTA, Telefon, E-Mail, „weiter“): einheitlicher Mystic-Glas-Button mit Klassen btn-mystic-glass-bg + Shell-Klassen wie auf dieser Seite. Der Verlauf bewegt sich sanft (mystic-glass-shift in globals.css).

Beispiel AnrufBeispiel NavigationBeispiel E-Mail
  • Eckenradius: rounded-2xl
  • Innenabstand: px-6 py-3.5, Schrift text-sm font-semibold
  • Textfarbe: text-cream; Fokus: Ring ring-cream/40, Offset ring-offset-background
  • Option Icon links im Link-Button: Wrapper group, Icon-Hover z. B. group-hover:scale-110
/* globals.css */
.btn-mystic-glass-bg { … animation: mystic-glass-shift … }

/* JSX: btnMysticLink / btnMysticBlock aus @/lib/design-mystic

Weitere Button-Zustände

Anker-Link (z. B. „Mehr erfahren“)

Sekundär-Link: für Inline-Verweise ohne Button-Fläche — Text-Link zu Formularen

Angebot

Paket-Karten

Zwei Spalten auf Desktop, eine Karte pro Angebot: rounded-2xl border border-white/10, innen bg-panel/80, Bullet-Liste mit Petrol-Punkt, Preisblock optional mit border-primary/20 bg-primary/5.

Paket

Kostenloses Website Template

Kostenloses Template, selbst befüllen, hosten und pflegen. Ohne Blog und Karriere.

  • Branchen-Templates
  • Kontakt & Rechtliches
  • Hosting selbst
Zur Paket-Seite

Service-Paket

Kostenloses Webdesign + Service

Design inklusive, Sie zahlen für Hosting, Support und Pflege — mit vollem Leistungsumfang.

Monatlicher Preis

49 EUR

pro Monat · Mindestlaufzeit beachten

Details & Service

Eingaben

Formulare

Felder: rounded-2xl, dezenter heller Fill, Fokus mit Petrol-Ring. Absenden = Mystic-Button (btnMysticBlock). Demo unten sendet nichts.

Live: PaketInquiryForm / ContactForm — Submit-Knopf dort auf Mystic-Stil angleichen.

Layout

Inhaltsabschnitt & CTA-Band

Standard-Section: Überschrift + Fließtext + optional zweispaltig. CTA-Band: volle Breite im Container, Glas oder Panel, klare Handlung.

Beispiel-Abschnitt

Zwei Spalten mit Bildplatzhalter

Links Text und Kicker, rechts visuelle Fläche. Auf schmalen Screens stapelt sich der Block — immer mit ausreichend vertikalem Rhythmus (gap-8).

Bild / Illustration

Call-to-Action Band

Kurzer Nutzen, ein nächster Schritt. Maximal zwei gleichwertige Buttons — hier Mystic primär und optional Kontakt.

Paket ansehenAnrufen

Personen

Team & Trust

Raster grid sm:grid-cols-2 lg:grid-cols-3, Karten wie Pakete. Avatar: rund oder abgerundetes Quadrat, Platzhalter oder Foto.

Jan Macedo Aldick

Webdesign & Entwicklung

Über mich

Container

Flächen & Glas

Für Karten, Overlays und modulare Blöcke: vordefinierte Klassen glass-surface und glass-surface-strong (Blur + gemischte Creme/Petrol-Kante).

glass-surface

Standard-Glas, blur 20px.

glass-surface-strong

Kräftiger, für mehr Kontrast über dem Hintergrund.

Optionales „Frost-Panel“ für Inhalt (wie dieser Hauptblock): rounded-3xl border border-white/[0.08] bg-white/[0.035] backdrop-blur-xl.

Motion

Bewegung

  • Mystic-Glas: mystic-glass-shift (~18s, ease-in-out, Endlosschleife). Bei prefers-reduced-motion deaktiviert.
  • Telefon-Puls (optional): animate-pulse-slow — nur sparsam, z. B. Header-CTA.
  • Hover an Buttons: bevorzugt border-color und box-shadow, nicht aggressive Skalierung (außer bewusst für Spielwiese).

Qualität

Barrierefreiheit & Konsistenz

  • Fokus sichtbar: focus-visible:ring-2 + Offset auf dunklem Grund.
  • Icons in Buttons: sinnvolles aria-hidden wenn Labeltext denselben Zweck trägt.
  • Keine wichtige Information nur über Farbe transportieren; Kontrast Creme auf Schwarz und Petrol-Flächen prüfen.
  • Neue Seiten: Metadaten canonical und openGraph.url auf macedoaldick.com setzen.

Stand: interne Referenz · URL /examples