landingpage v1
This commit is contained in:
RubenRWU
BIN
anforderungen/anforderungen_neu.pdf
Normal file
BIN
anforderungen/anforderungen_neu.pdf
Normal file
Binary file not shown.
BIN
anforderungen/briefing.pdf
Normal file
BIN
anforderungen/briefing.pdf
Normal file
Binary file not shown.
11
anforderungen/logo.html
Normal file
11
anforderungen/logo.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="relative select-none leading-[1]" aria-label="mitarbeiterpuls" style="font-family: "Avenir Next Rounded", Nunito, "M PLUS Rounded 1c", sans-serif; font-weight: 900; letter-spacing: -0.02em; color: rgb(244, 244, 242); text-shadow: rgba(0, 0, 0, 0.18) 0.015em 0.03em 0.03em, rgba(0, 0, 0, 0.14) 0.03em 0.08em 0.12em, rgba(0, 0, 0, 0.1) 0.05em 0.14em 0.25em; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1;">m<span class="relative inline-block">ı<span class="absolute rounded-full" style="width: 0.22em; height: 0.22em; left: 50%; top: -0.06em; transform: translateX(-50%); background: rgb(255, 122, 26); box-shadow: rgba(255, 122, 26, 0.95) 0px 0px 0.12em, rgba(255, 122, 26, 0.72) 0px 0px 0.28em, rgba(255, 122, 26, 0.38) 0px 0px 0.48em;"></span></span>tarbeiterpuls</div>
|
||||
</body>
|
||||
</html>
|
||||
281
anforderungen/logodesign.txt
Normal file
281
anforderungen/logodesign.txt
Normal file
@@ -0,0 +1,281 @@
|
||||
Ja. Hier ist eine präzise, umsetzbare Beschreibung, damit eine KI oder ein Entwickler das Logo in **HTML/CSS responsiv nachbauen** kann.
|
||||
|
||||
## Gesamtwirkung
|
||||
|
||||
Das Logo besteht aus einer einzigen Wortmarke:
|
||||
|
||||
**„mitarbeiterpuls“**
|
||||
|
||||
Es ist ein **modernes, weiches, minimalistisches Sans-Serif-Logo** in **fett / extra-fett**, komplett in **Kleinbuchstaben** gesetzt. Die Schrift wirkt freundlich, digital, klar und leicht technisch. Besonders auffällig ist:
|
||||
|
||||
* sehr **runde Buchstabenformen**
|
||||
* **gleichmäßige Strichstärke**
|
||||
* **enge, aber nicht gedrängte Laufweite**
|
||||
* weißer Text
|
||||
* deutlicher **weicher Schatten**
|
||||
* ein **orange leuchtender Punkt** über dem **i** am Anfang statt eines normalen weißen i-Punkts
|
||||
|
||||
## Aufbau des Logos
|
||||
|
||||
### 1. Wortmarke
|
||||
|
||||
Textinhalt:
|
||||
|
||||
`mitarbeiterpuls`
|
||||
|
||||
Alles kleingeschrieben.
|
||||
|
||||
### 2. Schriftcharakter
|
||||
|
||||
Die Schrift ähnelt einer sehr runden, fetten Grotesk. Stilistisch in Richtung:
|
||||
|
||||
* **Avenir Next Rounded Bold / Heavy**
|
||||
* **Nunito ExtraBold**
|
||||
* **M PLUS Rounded 1c ExtraBold**
|
||||
* **Gotham Rounded Bold**
|
||||
* **Arial Rounded** ist zu kindlich, also eher nicht ideal
|
||||
|
||||
Die Buchstaben sollen:
|
||||
|
||||
* kräftig und voluminös wirken
|
||||
* breite Rundungen haben
|
||||
* keine scharfen Ecken besitzen
|
||||
* sehr gut lesbar sein
|
||||
* eher **geometrisch** als handschriftlich aussehen
|
||||
|
||||
### 3. Farbe
|
||||
|
||||
Die Wortmarke selbst ist:
|
||||
|
||||
* **reinweiß bis leicht warmweiß**
|
||||
* ungefähr: `#F5F5F3` bis `#FFFFFF`
|
||||
|
||||
Empfehlung:
|
||||
|
||||
* Textfarbe: `#F4F4F2`
|
||||
|
||||
## Typografische Details
|
||||
|
||||
### Schriftgewicht
|
||||
|
||||
Sehr fett:
|
||||
|
||||
* `font-weight: 800` bis `900`
|
||||
|
||||
### Laufweite
|
||||
|
||||
* neutral bis minimal negativ
|
||||
* ungefähr: `letter-spacing: -0.01em` bis `-0.03em`
|
||||
|
||||
### Zeilenhöhe
|
||||
|
||||
* `line-height: 1`
|
||||
|
||||
### Verhältnis Höhe/Breite
|
||||
|
||||
Das Logo ist sehr breit und flach.
|
||||
|
||||
Grobe Proportionen:
|
||||
|
||||
* Gesamtbreite ca. **5,5 bis 6,5 mal** so groß wie die Texthöhe
|
||||
* Das Wort nimmt fast die ganze Breite ein
|
||||
|
||||
## Der besondere Punkt über dem ersten „i“
|
||||
|
||||
Das wichtigste Markenelement ist der **orange Punkt** über dem ersten Buchstaben **i**.
|
||||
|
||||
### Eigenschaften
|
||||
|
||||
* nicht rein flach, sondern mit **Glow / Leuchteffekt**
|
||||
* kreisrund
|
||||
* kräftiges Orange
|
||||
|
||||
### Farbe
|
||||
|
||||
Kernfarbe ungefähr:
|
||||
|
||||
* `#FF7A1A`
|
||||
* alternativ leicht heller: `#FF8124`
|
||||
|
||||
### Glow
|
||||
|
||||
Um den Punkt liegt ein **weicher, diffuser, orangefarbener Schein**.
|
||||
|
||||
Glow-Eindruck:
|
||||
|
||||
* innen kräftig orange
|
||||
* außen weich auslaufend
|
||||
* sichtbar deutlich größer als der eigentliche Punkt
|
||||
|
||||
### Größenverhältnis
|
||||
|
||||
* Punktdurchmesser ungefähr **4–5 % der gesamten Logobreite**
|
||||
* bzw. ungefähr **35–45 % der x-Höhe** eines Buchstabens
|
||||
* der Glow ist etwa **2 bis 2,8x** so groß wie der Punkt selbst
|
||||
|
||||
### Position
|
||||
|
||||
Der Punkt sitzt:
|
||||
|
||||
* exakt über dem ersten **i** in „mitarbeiterpuls“
|
||||
* leicht oberhalb der normalen i-Punkt-Position
|
||||
* optisch sauber mittig über dem i-Stamm
|
||||
* nicht zu hoch, aber mit genug Luft, damit der Glow wirken kann
|
||||
|
||||
Wichtig:
|
||||
Der **normale weiße i-Punkt** existiert dort nicht. Er wird durch den **orange leuchtenden Punkt** ersetzt.
|
||||
|
||||
## Schatten der Wortmarke
|
||||
|
||||
Die gesamte weiße Wortmarke hat einen **weichen, nach unten rechts fallenden Schlagschatten**.
|
||||
|
||||
### Schattencharakter
|
||||
|
||||
* weich
|
||||
* diffus
|
||||
* mittelstark
|
||||
* elegant, nicht hart
|
||||
* eher wie leichter 3D-/Floating-Effekt
|
||||
|
||||
### Richtung
|
||||
|
||||
* nach unten
|
||||
* leicht nach rechts
|
||||
|
||||
### Empfehlung
|
||||
|
||||
In CSS als Kombination mehrerer Schatten:
|
||||
|
||||
* kleiner Schatten für Kontur/Tiefe
|
||||
* größerer Schatten für weiche Fläche
|
||||
|
||||
Beispielwirkung:
|
||||
|
||||
* `0.02em 0.05em 0.06em rgba(0,0,0,0.18)`
|
||||
* `0.04em 0.10em 0.18em rgba(0,0,0,0.16)`
|
||||
* `0.06em 0.18em 0.30em rgba(0,0,0,0.10)`
|
||||
|
||||
Der Schatten soll im unteren Bereich der Buchstaben deutlicher sichtbar sein.
|
||||
|
||||
## Buchstabencharakter im Detail
|
||||
|
||||
Damit der Nachbau näher ans Original kommt:
|
||||
|
||||
### m
|
||||
|
||||
* sehr breit
|
||||
* runde Übergänge
|
||||
* dicke Stämme
|
||||
* kompakt, weich
|
||||
|
||||
### i
|
||||
|
||||
* schmaler Stamm
|
||||
* Punkt beim ersten i orange
|
||||
* spätere i-Punkte normal weiß und rund
|
||||
|
||||
### t
|
||||
|
||||
* relativ kurzer Querbalken
|
||||
* rundes Ende
|
||||
* kräftiger Stamm
|
||||
|
||||
### a
|
||||
|
||||
* einstöckiges „a“ wirkt wahrscheinlich am passendsten
|
||||
* rund, geschlossen, kompakt
|
||||
|
||||
### r
|
||||
|
||||
* kurzer Schulteransatz
|
||||
* weich gerundet
|
||||
|
||||
### b / p / u / s
|
||||
|
||||
* sehr runde, freundliche Formen
|
||||
* keine eckigen Innenräume
|
||||
* besonders das `puls` wirkt weich und ausgewogen
|
||||
|
||||
## Hintergrund im Beispielbild
|
||||
|
||||
Das Bild zeigt nur die Wortmarke auf transparentem Hintergrund, aber im Screenshot ist ein Arbeitsraster zu sehen. Das Raster gehört **nicht** zum Logo.
|
||||
|
||||
Also:
|
||||
|
||||
* der eigentliche Logohintergrund ist **transparent**
|
||||
* nur die weiße Wortmarke plus orange Glow gehören zum Design
|
||||
|
||||
## Responsive Umsetzung
|
||||
|
||||
Für responsive HTML/CSS sollte das Logo so gebaut werden:
|
||||
|
||||
### Prinzip
|
||||
|
||||
* ein Wrapper mit `position: relative`
|
||||
* der eigentliche Text als ein Element
|
||||
* der orange Punkt als separates, absolut positioniertes Element
|
||||
* Skalierung über `font-size` mit `clamp()`
|
||||
* Position des Punkts relativ zur Schriftgröße, nicht in fixen Pixeln
|
||||
|
||||
### Empfohlene Skalierungslogik
|
||||
|
||||
* Textgröße z. B. mit `clamp(2rem, 8vw, 8rem)`
|
||||
* Punktgröße in `em`
|
||||
* Glow ebenfalls in `em`
|
||||
* Textschatten in `em`, damit alles mit der Schrift mitskaliert
|
||||
|
||||
## Präzise Stilbeschreibung für eine KI
|
||||
|
||||
Du kannst einer KI diesen Block direkt geben:
|
||||
|
||||
> Erzeuge ein responsives HTML/CSS-Logo für das Wort „mitarbeiterpuls“.
|
||||
> Die Wortmarke ist komplett kleingeschrieben, in einer sehr fetten, runden Sans-Serif-Schrift mit freundlichem, modernem, geometrischem Charakter. Die Schrift ist weiß bis leicht warmweiß, mit einem weichen, diffusen Schatten nach unten rechts, sodass die Buchstaben leicht schwebend wirken.
|
||||
> Der erste Buchstabe „i“ hat keinen normalen weißen Punkt. Stattdessen sitzt darüber ein runder orangefarbener Punkt mit kräftigem, weichem Glow. Der Punkt ist klar sichtbar, aber kleiner als ein Buchstabenauge, und der Glow ist etwa doppelt bis dreifach so groß wie der Punkt selbst.
|
||||
> Das Logo soll auf transparentem Hintergrund funktionieren.
|
||||
> Die Typografie soll breit, weich, sauber und hochwertig wirken.
|
||||
> Das Layout muss responsiv sein: Textgröße über clamp(), orange Punkt relativ in em positionieren, Schatten ebenfalls skalierend in em anlegen.
|
||||
|
||||
## Noch genauer: CSS-Zielwerte
|
||||
|
||||
Falls eine KI konkrete Werte braucht:
|
||||
|
||||
* `font-family`: `"Avenir Next Rounded", "Nunito", "M PLUS Rounded 1c", sans-serif`
|
||||
* `font-weight`: `800` oder `900`
|
||||
* `color`: `#F4F4F2`
|
||||
* `letter-spacing`: `-0.02em`
|
||||
* `line-height`: `1`
|
||||
* Textschatten:
|
||||
|
||||
* `0.015em 0.03em 0.03em rgba(0,0,0,.18)`
|
||||
* `0.03em 0.08em 0.12em rgba(0,0,0,.14)`
|
||||
* `0.05em 0.14em 0.25em rgba(0,0,0,.10)`
|
||||
|
||||
Orange Punkt:
|
||||
|
||||
* `background: #FF7A1A`
|
||||
* `width: 0.18em` bis `0.24em`
|
||||
* `height: 0.18em` bis `0.24em`
|
||||
* `border-radius: 50%`
|
||||
* `box-shadow`:
|
||||
|
||||
* `0 0 0.12em rgba(255,122,26,.95)`
|
||||
* `0 0 0.28em rgba(255,122,26,.72)`
|
||||
* `0 0 0.48em rgba(255,122,26,.38)`
|
||||
|
||||
## Hinweis zur Positionierung des orangefarbenen Punkts
|
||||
|
||||
Da der Punkt über dem **ersten i** sitzen muss, ist die sauberste Methode:
|
||||
|
||||
* Text in einzelne `span`s splitten
|
||||
* das erste `i` in ein eigenes `span`
|
||||
* den orangefarbenen Punkt über diesem `span` absolut platzieren
|
||||
|
||||
So bleibt das Logo auch responsiv korrekt.
|
||||
|
||||
## Kompakte Beschreibung für Prompting
|
||||
|
||||
Falls du nur einen kompakten Prompt brauchst:
|
||||
|
||||
> Minimalistische Wortmarke „mitarbeiterpuls“, komplett in Kleinbuchstaben, weiße extra-fette runde Sans-Serif-Schrift, weich und modern, mit dezentem weichen Schatten nach unten rechts. Über dem ersten „i“ sitzt ein kleiner orangefarbener Punkt mit warmem Glow statt eines normalen i-Punkts. Transparentes Logo, hochwertig, digital, freundlich, responsiv umsetzbar.
|
||||
|
||||
Ich kann dir daraus auch direkt den **fertigen HTML/CSS-Code** für einen möglichst originalgetreuen responsiven Nachbau erstellen.
|
||||
619
anforderungen/style.txt
Normal file
619
anforderungen/style.txt
Normal file
@@ -0,0 +1,619 @@
|
||||
Ja — hier ist eine **präzise UI-/Brand-Spezifikation**, mit der eine KI das Dashboard sehr nah am gezeigten Stil nachbauen kann.
|
||||
|
||||
Ich beschreibe erst die **Marke**, dann **Layout**, **Farben**, **Typografie**, **Komponenten**, **Charts**, **Spacing**, **Shadows**, **Icons**, **Responsive-Verhalten** und gebe dir am Ende noch einen **kompakten KI-Prompt**.
|
||||
|
||||
---
|
||||
|
||||
# 1. Gesamtstil / visuelle Richtung
|
||||
|
||||
**Stilname:**
|
||||
„Technical Elegance“
|
||||
|
||||
**Look & Feel:**
|
||||
Ein sehr dunkles, elegantes, modernes B2B-Analytics-Dashboard mit leicht futuristischem, aber nüchternem Charakter.
|
||||
Es soll wirken wie:
|
||||
|
||||
* premium
|
||||
* technisch präzise
|
||||
* ruhig
|
||||
* hochwertig
|
||||
* datengetrieben
|
||||
* minimalistisch
|
||||
* leicht warm akzentuiert durch Orange
|
||||
|
||||
**Wirkung:**
|
||||
Nicht verspielt, nicht bunt, nicht glossy, nicht neon-cyberpunk.
|
||||
Die Oberfläche ist dunkel, matt, hochwertig und zurückhaltend. Orange wird nur als **gezielter Markenakzent** verwendet.
|
||||
|
||||
---
|
||||
|
||||
# 2. Brand-Grundregeln
|
||||
|
||||
## Markenname / Schreibweise
|
||||
|
||||
Die Wortmarke ist immer:
|
||||
|
||||
**mitarbeiterpuls**
|
||||
|
||||
Wichtig:
|
||||
|
||||
* komplett **kleingeschrieben**
|
||||
* keine Verzerrung
|
||||
* keine Serifenschrift
|
||||
* kein heller Hintergrund
|
||||
* keine alternative Schreibweise wie „Mitarbeiterpuls“
|
||||
|
||||
---
|
||||
|
||||
# 3. Farbpalette
|
||||
|
||||
Die zweite Grafik zeigt die Farbwelt sehr klar. Verwende diese Farben:
|
||||
|
||||
## Primärfarben
|
||||
|
||||
* **Carbon Black**: `#121212`
|
||||
* **Snow White**: `#FFFFFF`
|
||||
* **Ember Orange**: `#FF6600`
|
||||
|
||||
## Statusfarben
|
||||
|
||||
* **Success Green**: `#00C853`
|
||||
(im Bild leicht als kräftiges Grün dargestellt; falls exakter Corporate-Wert nicht lesbar ist, diesen Wert verwenden)
|
||||
* **Warning Yellow**: `#FFD600`
|
||||
* **Alert Red**: `#D50000`
|
||||
|
||||
## Zusätzliche UI-Nuancen für das Dashboard
|
||||
|
||||
Um das Dashboard wie im Bild aussehen zu lassen, sind zusätzlich diese dunklen Zwischenstufen sinnvoll:
|
||||
|
||||
* **Page Background**: `#0D0F12`
|
||||
* **Sidebar Background**: `#11141A`
|
||||
* **Card Background**: `#161A22`
|
||||
* **Card Hover / Elevated Panel**: `#1B2029`
|
||||
* **Border / Divider**: `rgba(255,255,255,0.08)` bis `rgba(255,255,255,0.12)`
|
||||
* **Muted Text**: `rgba(255,255,255,0.60)`
|
||||
* **Secondary Text**: `rgba(255,255,255,0.75)`
|
||||
* **Soft Orange Glow**: `rgba(255,102,0,0.20)`
|
||||
* **Chart Orange Line**: `#C8742A` bis `#D88436`
|
||||
* **Chart Green Line**: `#2FBF71`
|
||||
* **Chart Yellow Line**: `#D8A63A`
|
||||
|
||||
## Hintergrundcharakter
|
||||
|
||||
Der Hintergrund ist **nicht flach schwarz**, sondern:
|
||||
|
||||
* sehr dunkles Anthrazit / Schwarz
|
||||
* leicht texturiert / minimal körnig
|
||||
* mit ganz dezentem Blau-Grau-Anteil
|
||||
* keine hellen Flächen
|
||||
|
||||
---
|
||||
|
||||
# 4. Typografie
|
||||
|
||||
## Primärfont
|
||||
|
||||
**JetBrains Mono**
|
||||
Das ist laut Styleguide die Markenschrift.
|
||||
|
||||
## Nutzung
|
||||
|
||||
* **Logo:** JetBrains Mono Bold
|
||||
* **Überschriften / KPI-Zahlen:** JetBrains Mono Bold
|
||||
* **Labels / UI-Text:** JetBrains Mono Regular
|
||||
* **Sekundärlabels / kleine Beschriftungen:** JetBrains Mono Light oder Regular mit reduzierter Opazität
|
||||
|
||||
## Typografische Regeln
|
||||
|
||||
* technisch, klar, monospaced
|
||||
* keine Serifenschrift
|
||||
* keine übertriebene Großschreibung
|
||||
* viele UI-Texte eher klein und kompakt
|
||||
* KPI-Zahlen groß und deutlich
|
||||
* textlastige Panels eher mit kleinerem, ruhigem Text
|
||||
|
||||
## Empfohlene Schriftgrößen
|
||||
|
||||
### Desktop
|
||||
|
||||
* App-Logo: 18–22 px, Bold
|
||||
* Seiten-/Bereichstitel: 13–15 px, Medium/Bold
|
||||
* Haupt-KPI im Hero: 34–40 px
|
||||
* KPI-Card-Titel: 12–13 px
|
||||
* KPI-Card-Wert: 28–34 px
|
||||
* Kleine Chart-Labels: 10–11 px
|
||||
* Tabelleninhalt: 11–12 px
|
||||
* Sidebar-Menü: 12–13 px
|
||||
|
||||
---
|
||||
|
||||
# 5. Grundlayout des Dashboards
|
||||
|
||||
Das Dashboard im ersten Bild hat diese Struktur:
|
||||
|
||||
## Canvas / App Frame
|
||||
|
||||
* Vollbild-Dashboard in dunklem Theme
|
||||
* Zentraler Content-Bereich mit abgerundeten Karten
|
||||
* Links eine schmale Sidebar
|
||||
* Oben eine Topbar
|
||||
* Darunter ein Hero-/Summary-Bereich
|
||||
* Darunter KPI-Karten
|
||||
* Unten zwei große Panels: Tabelle + Insights
|
||||
|
||||
## Grober Aufbau
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Topbar │
|
||||
├──────────────┬──────────────────────────────────────────────┤
|
||||
│ Sidebar │ Hero Summary Bar │
|
||||
│ ├──────────────────────────────────────────────┤
|
||||
│ │ 4 KPI Cards │
|
||||
│ ├───────────────────────┬──────────────────────┤
|
||||
│ │ Team Overview Table │ AI Insights Panel │
|
||||
└──────────────┴──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 6. Topbar
|
||||
|
||||
## Aufbau
|
||||
|
||||
Eine schmale obere Navigationsleiste über dem Content.
|
||||
|
||||
### Links
|
||||
|
||||
* kleines oranges rundes Brand-Icon / Punkt
|
||||
* daneben „mitarbeiterpuls“ in weiß
|
||||
|
||||
### Mitte
|
||||
|
||||
* Suchfeld oder zentrierte Titelleiste sehr dezent
|
||||
* dunkel, kaum sichtbar, subtil
|
||||
|
||||
### Rechts
|
||||
|
||||
* runder User-Avatar / Profilbutton
|
||||
* ggf. kleine Utility-Icons
|
||||
|
||||
## Style
|
||||
|
||||
* Höhe: ca. 48–56 px
|
||||
* Hintergrund: leicht heller als Page Background, z. B. `#131722`
|
||||
* Border unten sehr subtil
|
||||
* Inputs/Pills: dunkelgrau, weich gerundet
|
||||
|
||||
---
|
||||
|
||||
# 7. Sidebar
|
||||
|
||||
## Breite
|
||||
|
||||
* Desktop: ca. 72–96 px bei ikonischer Sidebar
|
||||
* oder 140–180 px wenn mit Labels
|
||||
|
||||
Im Mockup ist sie **schmal**, aber mit Textlabels.
|
||||
|
||||
## Inhalt
|
||||
|
||||
Vertikale Navigation mit etwa:
|
||||
|
||||
* Dashboard
|
||||
* Teams
|
||||
* Survey
|
||||
* Settings
|
||||
* Feedback
|
||||
|
||||
## Stil
|
||||
|
||||
* dunkler als Hauptfläche
|
||||
* Icons links, Text daneben
|
||||
* aktiver Menüpunkt mit orangefarbener Markierung oder dunkler aktiver Kachel
|
||||
* viel Luft, kein grelles Highlight
|
||||
|
||||
## Aktiver Zustand
|
||||
|
||||
* dunkles aktiviertes Rechteck
|
||||
* links eine orange Linie oder orange Fläche
|
||||
* Text in Weiß
|
||||
* Icon ebenfalls heller
|
||||
|
||||
---
|
||||
|
||||
# 8. Hero-/Summary-Bereich oben
|
||||
|
||||
Das ist der wichtigste visuelle Block.
|
||||
|
||||
## Form
|
||||
|
||||
Eine breite horizontale Karte oben über den KPI-Karten.
|
||||
|
||||
## Inhalt links
|
||||
|
||||
* großer **Donut / Ringindikator** in Orange
|
||||
* zeigt Gesamtscore
|
||||
|
||||
## Inhalt Mitte/Rechts
|
||||
|
||||
* Headline:
|
||||
**„Gesamtengagement: 7.4/10“**
|
||||
* darunter ein breiter **Line-/Area-Chart** über den Zeitverlauf
|
||||
* X-Achse mit Zeitpunkten / Perioden
|
||||
|
||||
## Farbigkeit
|
||||
|
||||
* Donut-Ring: Ember Orange `#FF6600`
|
||||
* Chart-Linie: warmes Orange/Bernstein
|
||||
* Chart-Fläche: sehr dezenter orangefarbener Verlauf nach unten
|
||||
* Hintergrund der Karte: dunkles Blau-Grau/Anthrazit
|
||||
|
||||
## Typo
|
||||
|
||||
* Titel in Weiß
|
||||
* Score prominent
|
||||
* Nebentexte gedimmt
|
||||
|
||||
## Größenverhältnis
|
||||
|
||||
* Donut links etwa 20–25 % der Breite des Hero-Blocks
|
||||
* Titel + Chart rechts etwa 75–80 %
|
||||
|
||||
---
|
||||
|
||||
# 9. KPI-Kartenreihe
|
||||
|
||||
Unter dem Hero-Block folgen **vier gleich hohe Karten** nebeneinander.
|
||||
|
||||
## Beispielinhalte aus dem Bild
|
||||
|
||||
* Engagement
|
||||
* Fluktuation
|
||||
* Führung
|
||||
* Belastung
|
||||
|
||||
## Aufbau je Karte
|
||||
|
||||
* kleiner Titel oben links
|
||||
* große Zahl mittig/links
|
||||
* kleine Trendanzeige rechts oder unten
|
||||
* sehr kleiner Untertitel / Vergleichswert
|
||||
* Mini-Line-Chart im unteren Bereich
|
||||
|
||||
## Stil
|
||||
|
||||
* Hintergrund: `#161A22` oder `#171B24`
|
||||
* Radius: 12–16 px
|
||||
* feine Border
|
||||
* leichter Soft Shadow
|
||||
* kein starker 3D-Effekt
|
||||
* jede Karte minimal unterschiedlich in Akzentfarbe, aber insgesamt sehr zurückhaltend
|
||||
|
||||
## Trendfarben
|
||||
|
||||
* positive Entwicklung: Grün
|
||||
* neutrale/warnende Entwicklung: Gelb/Orange
|
||||
* negative Entwicklung: Rot oder ockerfarbene Linie
|
||||
|
||||
---
|
||||
|
||||
# 10. Untere Sektion: Team-Übersicht + AI-Insights
|
||||
|
||||
## Linkes großes Panel: Team-Übersicht
|
||||
|
||||
Eine dunkle Karte mit tabellarischer Übersicht.
|
||||
|
||||
### Inhalt
|
||||
|
||||
* Titel: „Team-Übersicht“
|
||||
* mehrere Zeilen für Abteilungen / Teams, z. B.:
|
||||
|
||||
* Entwicklung
|
||||
* Vertrieb
|
||||
* Marketing
|
||||
* Operations
|
||||
|
||||
### Spalten
|
||||
|
||||
mehrere KPI-Spalten mit farbcodierten Werten:
|
||||
|
||||
* grüne Werte = gut
|
||||
* gelbe Werte = mittel
|
||||
* rote Werte = kritisch
|
||||
* orange Werte = Brand/Neutral-KPI
|
||||
|
||||
### Stil
|
||||
|
||||
* kompakte Tabelle
|
||||
* keine harten Gridlines
|
||||
* lieber subtile horizontale Trennlinien
|
||||
* Zahlen in kleinen farbigen Pills oder in farbiger Typo
|
||||
|
||||
## Rechtes großes Panel: AI-Empfehlungen / Insights
|
||||
|
||||
Eine vertikale Karte mit Textbausteinen.
|
||||
|
||||
### Inhalt
|
||||
|
||||
* Titel etwa: „AI-Empfehlungen“ oder „KI-Empfehlungen“
|
||||
* kurze Bullet-artige Aussagen:
|
||||
|
||||
* Abteilung X benötigt Aufmerksamkeit
|
||||
* Stimmung sinkt
|
||||
* Führung verbessert sich
|
||||
* Handlungsempfehlungen etc.
|
||||
|
||||
### Stil
|
||||
|
||||
* textorientiert
|
||||
* kleine Icons/Bullets
|
||||
* eher informativ als dekorativ
|
||||
* weiße und graue Typo
|
||||
* einzelne orange oder grüne Markierungen für Prioritäten
|
||||
|
||||
---
|
||||
|
||||
# 11. Kartenstil / Container-Stil
|
||||
|
||||
Die Styleguide-Grafik zeigt die gewünschte Sprache der UI-Komponenten sehr klar.
|
||||
|
||||
## Karten
|
||||
|
||||
* dunkle, halbmatte Flächen
|
||||
* weiche Rundungen: 14–18 px
|
||||
* dezente Außenkante / Border
|
||||
* subtiler innerer Glow möglich
|
||||
* Schatten weich, aber nicht stark
|
||||
|
||||
## Beispielwerte
|
||||
|
||||
* Border: `1px solid rgba(255,255,255,0.08)`
|
||||
* Box shadow: `0 8px 30px rgba(0,0,0,0.28)`
|
||||
* Backdrop/Glass nur sehr leicht, nicht echtes starkes Glasdesign
|
||||
|
||||
## Buttons / Inputs
|
||||
|
||||
* dunkelgraue Flächen
|
||||
* abgerundet
|
||||
* Orange nur bei Hover, Fokus oder primärer Aktion
|
||||
* keine hellen Button-Flächen
|
||||
|
||||
---
|
||||
|
||||
# 12. Datenvisualisierung
|
||||
|
||||
Die zweite Grafik gibt klare Regeln vor.
|
||||
|
||||
## Donut Charts
|
||||
|
||||
* Ring ist relativ dick
|
||||
* Farben:
|
||||
|
||||
* Grün = Success
|
||||
* Gelb = Warning
|
||||
* Rot = Alert
|
||||
* Orange kann als Brand-Akzent vorkommen
|
||||
* Mitte frei / leer
|
||||
* minimalistisches Labeling
|
||||
|
||||
## Line Charts
|
||||
|
||||
* dunkler Hintergrund
|
||||
* dünne bis mittlere Linie
|
||||
* warme Orange-/Rot-Töne
|
||||
* subtile Gridlines
|
||||
* Achsen sehr dezent
|
||||
* keine kräftigen Farben außer gezielten Statushinweisen
|
||||
|
||||
## Generelle Chart-Regeln
|
||||
|
||||
* wenig Beschriftung
|
||||
* kein überladenes Raster
|
||||
* keine bunten Standard-Chartfarben
|
||||
* alles wirkt ruhig und professionell
|
||||
* Linien leicht geglättet
|
||||
* Flächen unter Linien mit sehr schwachem Verlauf
|
||||
|
||||
---
|
||||
|
||||
# 13. Abstände / Spacing
|
||||
|
||||
## Grundsystem
|
||||
|
||||
Nutze ein 8px-Grid.
|
||||
|
||||
## Empfohlene Abstände
|
||||
|
||||
* äußerer Seitenrand: 20–28 px
|
||||
* Abstand Sidebar zu Content: 16–20 px
|
||||
* Abstand zwischen Karten: 12–16 px
|
||||
* Innenabstand von Karten: 16–20 px
|
||||
* Abstand zwischen KPI-Zahl und Mini-Chart: 8–12 px
|
||||
|
||||
## Eindruck
|
||||
|
||||
Nicht eng, aber kompakt.
|
||||
Es soll wie ein professionelles Control Center wirken, nicht wie eine Marketing-Landingpage.
|
||||
|
||||
---
|
||||
|
||||
# 14. Rundungen / Formen
|
||||
|
||||
* Hauptkarten: 14–18 px Radius
|
||||
* Buttons/Inputs: 10–14 px Radius
|
||||
* Avatare: rund
|
||||
* Chips/Pills: 999 px Radius
|
||||
* Donut: sauber, präzise, ohne verspielte Rundungsfehler
|
||||
|
||||
---
|
||||
|
||||
# 15. Icons
|
||||
|
||||
## Stil
|
||||
|
||||
* dünn bis mittelstark
|
||||
* linear / outline
|
||||
* technisch und schlicht
|
||||
* weiß oder grau
|
||||
* aktive Zustände orange
|
||||
|
||||
## Nicht verwenden
|
||||
|
||||
* bunte Emoji-artige Icons
|
||||
* illustrative Icons
|
||||
* 3D-Icons
|
||||
* Comic-Stil
|
||||
|
||||
---
|
||||
|
||||
# 16. Tonalität / Content-Stil
|
||||
|
||||
Laut Styleguide:
|
||||
|
||||
* **objektiv/klar**
|
||||
* **unterstützend/empathisch**
|
||||
* **niemals belehrend**
|
||||
|
||||
Das heißt für Texte im Dashboard:
|
||||
|
||||
* nüchtern
|
||||
* handlungsorientiert
|
||||
* menschlich
|
||||
* keine aggressive Alarm-Sprache
|
||||
* eher „Hinweis“, „Trend“, „Empfehlung“, „Beobachtung“
|
||||
|
||||
---
|
||||
|
||||
# 17. Responsive Verhalten
|
||||
|
||||
Im ersten Bild sieht man das Dashboard auf:
|
||||
|
||||
* Desktop
|
||||
* Tablet
|
||||
* Smartphone
|
||||
|
||||
## Desktop
|
||||
|
||||
* volle Struktur mit Sidebar, Hero, 4 KPI-Karten, Tabelle, Insight-Panel
|
||||
|
||||
## Tablet
|
||||
|
||||
* Sidebar deutlich schmaler
|
||||
* Karten in 2x2 oder 2-spaltigem Grid
|
||||
* Hero bleibt oben
|
||||
* Tabelle und Insights untereinander oder 2-spaltig, je nach Breite
|
||||
|
||||
## Mobile
|
||||
|
||||
* einspaltig
|
||||
* Hero zuerst
|
||||
* KPI-Karten untereinander
|
||||
* Tabelle vereinfacht oder horizontal scrollbar
|
||||
* Insights darunter
|
||||
* Navigation kompakt / Burger / Bottom Nav
|
||||
|
||||
---
|
||||
|
||||
# 18. Exakte stilistische Merkmale aus dem Bild
|
||||
|
||||
Hier die wichtigsten visuellen Hinweise, damit eine KI es wirklich trifft:
|
||||
|
||||
1. **Sehr dunkler Grundton**, fast schwarz, aber nicht reines Schwarz.
|
||||
2. **Orange Ring links oben** ist ein zentraler Markenanker.
|
||||
3. **Headline mit Score** steht dominant im Hero-Bereich.
|
||||
4. **Liniencharts sind dünn, elegant, warm-orange oder grün**, nie quietschbunt.
|
||||
5. **Alle Cards sind dunkel und leicht voneinander abgesetzt**, aber nicht zu kontrastreich.
|
||||
6. **Typografie ist monospaced und technisch.**
|
||||
7. **Das UI wirkt luxuriös und präzise**, eher wie High-End-Analytics-Software als ein Standard-SaaS-Template.
|
||||
8. **Es gibt kaum visuelles Rauschen**: keine harten Umrandungen, keine grellen Akzente, keine unnötigen Effekte.
|
||||
9. **Logo und Wortmarke sind immer weiß auf dunklem Grund**, mit kleinem orangefarbenem Akzentpunkt.
|
||||
10. **Die Datenvisualisierung nutzt Statusfarben konsistent**: grün, gelb, rot plus orange als Markenfarbe.
|
||||
|
||||
---
|
||||
|
||||
# 19. Design-Tokens für eine KI oder ein Frontend-System
|
||||
|
||||
```yaml
|
||||
brand:
|
||||
name: "mitarbeiterpuls"
|
||||
style: "Technical Elegance"
|
||||
|
||||
colors:
|
||||
background: "#0D0F12"
|
||||
surface_sidebar: "#11141A"
|
||||
surface_card: "#161A22"
|
||||
surface_card_hover: "#1B2029"
|
||||
border_subtle: "rgba(255,255,255,0.08)"
|
||||
text_primary: "#FFFFFF"
|
||||
text_secondary: "rgba(255,255,255,0.75)"
|
||||
text_muted: "rgba(255,255,255,0.60)"
|
||||
accent: "#FF6600"
|
||||
success: "#00C853"
|
||||
warning: "#FFD600"
|
||||
danger: "#D50000"
|
||||
chart_orange: "#D88436"
|
||||
chart_orange_fill: "rgba(255,102,0,0.10)"
|
||||
chart_green: "#2FBF71"
|
||||
chart_yellow: "#D8A63A"
|
||||
|
||||
typography:
|
||||
font_family: "JetBrains Mono, monospace"
|
||||
logo_weight: 700
|
||||
heading_weight: 700
|
||||
body_weight: 400
|
||||
caption_weight: 300
|
||||
|
||||
radius:
|
||||
card: 16
|
||||
button: 12
|
||||
pill: 999
|
||||
|
||||
shadow:
|
||||
card: "0 8px 30px rgba(0,0,0,0.28)"
|
||||
glow_accent: "0 0 24px rgba(255,102,0,0.16)"
|
||||
|
||||
spacing:
|
||||
page_padding: 24
|
||||
card_padding: 18
|
||||
gap: 16
|
||||
|
||||
layout:
|
||||
topbar_height: 52
|
||||
sidebar_width: 160
|
||||
hero_height: 120-150
|
||||
kpi_card_height: 110-130
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 20. KI-Beschreibung zum direkten Nachbauen
|
||||
|
||||
Hier ist eine Formulierung, die du 1:1 einer generativen KI oder einem UI-Generator geben kannst:
|
||||
|
||||
**Prompt:**
|
||||
|
||||
> Erstelle ein hochwertiges, dunkles HR-Analytics-Dashboard für die Marke „mitarbeiterpuls“ im Stil „Technical Elegance“. Verwende eine sehr dunkle anthrazit-schwarze Oberfläche mit subtiler Textur. Typografie ausschließlich JetBrains Mono. Primärfarben: Carbon Black #121212, Snow White #FFFFFF, Ember Orange #FF6600. Statusfarben: Success Green #00C853, Warning Yellow #FFD600, Alert Red #D50000.
|
||||
>
|
||||
> Das Layout besteht aus einer schmalen linken Sidebar, einer oberen Topbar und einem Hauptbereich mit abgerundeten Dark-Mode-Karten. Oben eine breite Hero-Karte mit großem orangenen Donut-Ring links und der Headline „Gesamtengagement: 7.4/10“ rechts, darunter ein eleganter orangefarbener Trend-Chart. Unter dem Hero vier KPI-Karten nebeneinander: Engagement, Fluktuation, Führung, Belastung, jeweils mit großer Zahl, kleinem Label und Mini-Line-Chart. Darunter links eine dunkle Tabellenkarte „Team-Übersicht“ mit farbcodierten KPI-Werten und rechts eine Karte „KI-Empfehlungen“ mit kompakten textlichen Insights.
|
||||
>
|
||||
> Alle Komponenten sollen leicht abgerundet sein (ca. 16px Radius), mit subtilen Borders und weichen Schatten. Keine hellen Hintergründe, keine Serifenschriften, keine bunten Standardfarben. Das Dashboard soll präzise, luxuriös, technisch, ruhig und professionell wirken. Orange nur als gezielter Markenakzent. Charts minimalistisch, mit feinen Gridlines und zurückhaltenden Labels. Logo immer als „mitarbeiterpuls“ in Kleinbuchstaben, weiß auf dunklem Hintergrund, optional mit kleinem orangenen Punkt oder Kreisakzent.
|
||||
|
||||
---
|
||||
|
||||
# 21. Wichtigste No-Gos
|
||||
|
||||
Damit es nicht vom Stil abweicht:
|
||||
|
||||
* keine weißen Karten
|
||||
* keine serifenbetonte Typografie
|
||||
* keine knalligen Neonfarben
|
||||
* keine dicken Standard-UI-Borders
|
||||
* keine verspielten Illustrationen
|
||||
* keine großen bunten Buttons
|
||||
* kein zu helles Blau als Primärfarbe
|
||||
* Logo niemals in Groß-/Mischschreibung
|
||||
|
||||
---
|
||||
|
||||
Wenn du möchtest, formuliere ich dir daraus als Nächstes noch eine **ultrapräzise JSON-Design-Spec** oder einen **Prompt für Lovable / v0 / Figma AI / Midjourney / Cursor**.
|
||||
Reference in New Issue
Block a user