landingpage v1
This commit is contained in:
RubenRWU
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