Zum Inhalt springen
Heinzelbüro
Beispielseite

Styleguide

Alles, woraus die Seite von Heinzelbüro gebaut ist: Farben, Schrift, Bausteine und Bewegung. Diese Seite liest die Farben direkt aus der Theme-Datei, sie zeigt also immer den aktuellen Stand.

Zur Beispielseite

Farben

Namen folgen shadcn, damit ein Theme-Generator den Farbblock ersetzen kann. Werte stehen in themes/heinzelbuero.css.

Hell

background
oklch(0.975 0.004 265)
card
oklch(1 0 0)
popover
oklch(1 0 0)
muted
oklch(0.955 0.008 265)
secondary
oklch(0.94 0.01 265)
accent
oklch(0.94 0.01 265)
foreground
oklch(0.27 0.06 265)
muted-foreground
oklch(0.47 0.03 265)
card-foreground
oklch(0.27 0.06 265)
primary
oklch(0.27 0.06 265)
primary-foreground
oklch(0.98 0.004 265)
ring
oklch(0.55 0.1 265)
destructive
oklch(0.52 0.19 22)
border
oklch(0.9 0.015 265)
input
oklch(0.84 0.02 265)
lantern
oklch(0.81 0.15 85)
done
oklch(0.48 0.09 160)
night
oklch(0.27 0.06 265)
night-muted
oklch(0.8 0.025 265)
AaText auf Seite 14,1 : 1 AA ok
AaGrauer Text auf Seite 6,4 : 1 AA ok
AaButton-Text 14,3 : 1 AA ok
AaText auf Laterne 8,3 : 1 AA ok
AaHaken auf Moos 6,1 : 1 AA ok
AaText im Dunkelband 13,5 : 1 AA ok
AaGrauer Text im Dunkelband 8,1 : 1 AA ok
AaFehlertext auf Seite 5,7 : 1 AA ok

Dunkel

background
oklch(0.2 0.045 265)
card
oklch(0.25 0.05 265)
popover
oklch(0.25 0.05 265)
muted
oklch(0.28 0.045 265)
secondary
oklch(0.3 0.05 265)
accent
oklch(0.31 0.05 265)
foreground
oklch(0.95 0.008 265)
muted-foreground
oklch(0.76 0.025 265)
card-foreground
oklch(0.95 0.008 265)
primary
oklch(0.82 0.13 85)
primary-foreground
oklch(0.22 0.05 265)
ring
oklch(0.75 0.1 85)
destructive
oklch(0.7 0.17 22)
border
oklch(1 0 0 / 12%)
input
oklch(1 0 0 / 18%)
lantern
oklch(0.82 0.14 85)
done
oklch(0.74 0.11 160)
night
oklch(0.16 0.04 265)
night-muted
oklch(0.78 0.025 265)
AaText auf Seite 15,7 : 1 AA ok
AaGrauer Text auf Seite 8,5 : 1 AA ok
AaButton-Text 9,9 : 1 AA ok
AaText auf Laterne 9,9 : 1 AA ok
AaHaken auf Moos 8,1 : 1 AA ok
AaText im Dunkelband 17,3 : 1 AA ok
AaGrauer Text im Dunkelband 9,7 : 1 AA ok
AaFehlertext auf Seite 6,3 : 1 AA ok

Schrift

Young Serif für Überschriften, Figtree für alles andere. Beide liegen auf dem Server (OFL-Lizenz), es gibt keinen Google-Fonts-Aufruf. Grundgröße 18 px.

Titel, 4.5 bis 7 rem
Morgens erledigt
Abschnitt, 1.9 bis 2.25 rem

Was wir Ihnen abnehmen

Unterabschnitt, 1.25 bis 1.5 rem

Gespräch

Einleitung, 1.25 rem, Figtree

Wir hören eine halbe Stunde zu: Was frisst Ihre Zeit? Danach sagen wir ehrlich, ob wir helfen können.

Fließtext, 1.125 rem, Zeilenlänge unter 65 Zeichen

Sie bekommen Ihre Übersicht per Mail oder auf einer Seite im Browser. Mehr braucht es nicht. Umlaute und ß: Äpfel, Öl, Übung, Straße.

Klein, 0.875 rem

Wir nutzen Ihre Angaben nur, um Sie zurückzurufen.

Bausteine

Jeder Baustein ist eine PHP-Funktion, die ein Array bekommt und HTML zurückgibt. Die Texte kommen aus der Datenbank, das Aussehen bleibt hier.

Buttons

Hauptaktion, zweite Aktion, ruhige Aktion. Größen klein, normal, groß.

button('Rückruf anfordern', ['href' => '#kontakt', 'size' => 'lg', 'icon_end' => 'arrow-right']);
button('Zweite Aktion', ['variant' => 'outline']);

Formularfeld

Mit Hinweis, mit Fehler. Pflichtfelder sind unmarkiert, freiwillige tragen den Zusatz.

Wir rufen Sie zurück.

Bitte geben Sie Ihren Namen an.

field('telefon', 'Telefonnummer', ['required' => true, 'type' => 'tel', 'hint' => 'Wir rufen Sie zurück.']);
field('name', 'Ihr Name', ['required' => true, 'error' => 'Bitte geben Sie Ihren Namen an.']);

Morgenübersicht

Das Kennzeichen der Seite. Immer als Beispiel beschriftet, nie mit erfundenen Kunden.

Guten Morgen, Herr Berger Beispiel

Seit gestern 17:30 Uhr erledigt:

  1. Anruf angenommen: Familie Roth fragt nach einer Wärmepumpe. Rückruf-Wunsch notiert.
  2. Anfrage per Mail beantwortet, Besichtigungstermin vorgeschlagen.
  3. Angebot für die Dachsanierung als Entwurf geschrieben.
  4. Ihr Tag: 3 Termine, 1 Angebot zur Freigabe, 2 Rückrufe.

Erfundenes Beispiel. Nichts wird verschickt, ohne dass Sie es freigeben, wenn Sie das möchten.

morning_card($content['hero']['morning']);

Hero

Titel, Satz, zwei Buttons, rechts die Morgenübersicht.

Heinzelbüro nimmt Ihnen Anrufe, Anfragen, Angebote und Termine ab, auch nachts und im Urlaub. Sie schauen morgens drauf und entscheiden.

Rückruf anfordern Was wir übernehmen
Guten Morgen, Herr Berger Beispiel

Seit gestern 17:30 Uhr erledigt:

  1. Anruf angenommen: Familie Roth fragt nach einer Wärmepumpe. Rückruf-Wunsch notiert.
  2. Anfrage per Mail beantwortet, Besichtigungstermin vorgeschlagen.
  3. Angebot für die Dachsanierung als Entwurf geschrieben.
  4. Ihr Tag: 3 Termine, 1 Angebot zur Freigabe, 2 Rückrufe.

Erfundenes Beispiel. Nichts wird verschickt, ohne dass Sie es freigeben, wenn Sie das möchten.

hero($content['hero']);

Aufgaben-Tabs

Eine Aufgabe pro Tab, jeweils Heute und Mit Heinzelbüro.

Was wir Ihnen abnehmen

Wir fangen mit einer Aufgabe an, die Sie am meisten Zeit kostet. Weitere kommen dazu, wenn es läuft.

Heute

Das Telefon klingelt, während Sie auf dem Dach stehen. Abends sind 14 Mails unbeantwortet, und Anfragen gehen zum Mitbewerber.

Mit Heinzelbüro

Jede Anfrage bekommt sofort eine freundliche Antwort. Sie sehen morgens, wer was will und was dringend ist.

task_tabs($title, $intro, $items);

Dunkelband mit Ablauf

Die einzige echte Reihenfolge der Seite, deshalb nummeriert.

So fangen wir an

  1. 1

    Gespräch

    Wir hören eine halbe Stunde zu: Was frisst Ihre Zeit? Danach sagen wir ehrlich, ob wir helfen können.

  2. 2

    Einrichtung

    Wir richten die erste Aufgabe ein, mit Ihren Texten, Preisen und Regeln. Sie müssen nichts installieren.

  3. 3

    Alltag

    Es läuft. Sie bekommen die Morgenübersicht, wir bleiben Ihr Ansprechpartner, wenn etwas anders sein soll.

steps_band($title, $items);

Für wen

Ruhige Liste, die Zeilen reagieren auf Hover.

Für Betriebe, die täglich zu viel Papier haben

Unsere Kunden führen Betriebe mit 3 bis 50 Leuten und haben keine IT-Abteilung. Das ist gewollt.

  • Handwerk
  • Heizung und Sanitär
  • Photovoltaik
  • Steuerberater
  • Hausverwaltungen
  • Spedition und Lager
  • Immobilienmakler
  • Kanzleien
audience($title, $text, $branches);

Häufige Fragen

Klappt ohne JavaScript auf (details), mit weichem Übergang, wo der Browser das kann.

Häufige Fragen

Was passiert mit den Daten meiner Kunden?

Platzhalter: Hier steht, wo die Daten liegen, wer Zugriff hat und welchen Vertrag zur Auftragsverarbeitung Sie bekommen. Der Text kommt vom Datenschutz-Check.

Muss ich etwas installieren oder lernen?

Nein. Sie bekommen Ihre Übersicht per Mail oder auf einer Seite im Browser. Mehr braucht es nicht.

Was, wenn die Maschine etwas falsch macht?

Wichtiges geht erst raus, wenn Sie es freigegeben haben. Das legen wir gemeinsam fest, Aufgabe für Aufgabe.

Was kostet das?

Platzhalter: Preise stehen noch nicht fest. Nach dem ersten Gespräch bekommen Sie ein festes Angebot, ohne versteckte Posten.

faq($title, $items);

Bewegung

Wenig und mit Absicht. Alles ist ohne JavaScript sichtbar und wird bei „weniger Bewegung“ im System ausgeschaltet.

Wörter steigen auf

Einmal beim Laden der Überschrift.

Morgens ist die Arbeit erledigt.

Lichtkegel und Anheben

Fahren Sie mit der Maus über diese Fläche: Ein warmer Schein folgt dem Zeiger, die Fläche hebt sich leicht.

Weitere Bausteine der Bewegung

  • Einblenden beim Scrollen: Abschnitte und ihre Kinder, versetzt um 90 ms.
  • Fortschrittsbalken unter dem Kopf der Seite (wo der Browser Scroll-Animationen kann).
  • Glaskopf mit Haarlinie nach dem Scrollen, Unterstrich bei Menüpunkten.
  • Langsam wandernder Lichtschein hinter dem Hero, ein Ring um den hellen Punkt.
  • Button-Pfeil, Tab-Wechsel, Fokus-Leuchten im Formular.