FLOWNIQ — Sechs Dialekte im Vergleich

Gleiche Tokens. Gleiche Komponenten. Sechs eigenständige Charaktere. Die Hero-Bereiche der Startseiten nebeneinander für die Entscheidungshilfe.

Zur Basis-Version
01

Editorial

Magazinhaft · Großzügig · Ruhig
Editorial · Startseite Vorschau

Magazinhaft, ruhig, großzügig. Headlines bis zu 88px, alles aufgeräumt mit viel Atem. Cards lösen sich auf — Trennung entsteht durch Whitespace statt durch Linien. Akzent-Cyan nur als feines Detail.

Ideal für: Premium-Positionierung, C-Level-Audiences, „Plattform für Pioniere"-Narrative.
  • Asymmetrischer Hero mit massivem Display-Text statt zentrierter Aufmacher
  • Borderlose Cards — Hierarchie durch Whitespace und Typografie
  • Squared Buttons mit Letter-Spacing statt gerundeter Standardform
02

Bold

Plakativ · Kontrastreich · Aktivierend
Bold · Startseite Vorschau

Plakativ, hoher Kontrast, aktivierend. Hero und Page-Header voll-bleed in Navy mit Cyan-Akzenten. Alternierende dunkle Sektionen, extra-bold Headlines, kantige Cards mit kräftigen Borders.

Ideal für: Performance-Kampagnen, Sales-Push, neue Markt-Eintritte — wenn Aufmerksamkeit wichtiger als Subtilität ist.
  • Hero ist voll-bleed Navy-900, Headline-Skala bis 96px in Black-Weight
  • Cards quadratisch (border-radius 0) mit 2px Borders statt Hairlines
  • CTA-Banner in Cyan-Akzentfläche, Featured-Pricing-Plan in Inverse-Dark
03

Minimal / Clean

Reduziert · Präzise · Strukturiert
Minimal · Startseite Vorschau

Stark reduziert, technische Präzision. Keine Shadows, keine Tints, nur Hairline-Borders. Headlines in Light-Italic statt fett, Mono-Stenografie auf Overlines und Stats. Akzent ausschließlich auf Links und Status.

Ideal für: Tech-savvy IT-Käufer, Developer-Audience, internationale Konzerne mit dezenter Hausschrift-Kultur.
  • Italic-Akzentwort im Hero statt Cyan-Highlight-Bar
  • Mono-Font auf Overlines, Stats und Tabellen-Headern
  • Alle Cards/Forms ohne Shadow und mit 4-6px Radius statt 10px
04

Dense / Productive

Informationsdicht · Effizient · Dashboard
Dense · Startseite Vorschau

Informationsdicht und kompakt, Dashboard-Anmutung. Hero kompakt mit Body-14px, alle Stats und Features in 4-6 Spalten, Header auf 52px geschrumpft. Mehr Inhalt pro Bildschirm, weniger Scrollen.

Ideal für: Bestandskunden-Portale, Self-Service-Bereiche, datengetriebene Operations-Teams.
  • Feature-Grid 4-spaltig (statt 3) und Logo-Wall 8-spaltig (statt 6)
  • Body 14px / Headlines bis 42px statt bis 56px — alles eine Stufe kompakter
  • Tabular-Nums global aktiv für saubere Zahlen-Spalten in Tabellen und KPIs
05

Premium / Sophisticated

Refined · Gehoben · Exklusiv
Premium · Startseite Vorschau

Refined und gehoben. Großzügige Buchstabenabstände, viel Whitespace, Light-Italic-Display, dezente Akzentfarben. Eleganz im Detail, ruhige Hierarchie. Centered Hero auf ivory-warmer Bühne — kein Cyan-Plakat, sondern Hairlines und Atemraum.

Ideal für: Wealth Management, institutionelle Kunden, gehobenes B2B-Banking. Tonalität: ruhig, selbstbewusst, exklusiv.
  • Light-Italic-Display (Weight 300) statt Bold-Display wie Editorial / Bold
  • Ivory-warmer Untergrund (#fafaf8) statt cooles Off-White der anderen Dialekte
  • All-Caps-Letterspacing 0.20em auf Buttons und Labels — kein Sans-Mix wie Minimal
06

Technical / Engineering

Schematisch · Diagrammlastig · Präzise
Technical · Startseite Vorschau

Schematisch und diagrammlastig — wie hochwertige Produkt-Doku. Grid-Background, Monospace-Akzente in Labels und Stats, Coordinate-Marker auf Sektionen, Cards mit Figure-Captions („FIG.01"), Eyebrow als Code-Bracket. Cyan ist die technische Highlight-Farbe.

Ideal für: CTOs, Engineering-Leads, Operations / Risk, technische Käufer. Tonalität: substanziell, evidenzbasiert, präzise.
  • Subtiles 32-px-Grid auf dem Page-Background — bei keinem anderen Dialekt vorhanden
  • Cyan-Akzent als gestricheltes Highlight im Hero-Display (statt Cyan-Underline / -Pill)
  • Body komplett in Mono umgestellt für Labels, Stats, Caption, Footer und Table-Header

Auf einen Blick — Charakteristika je Dialekt

Aspekt Editorial Bold Minimal Dense Premium Technical
Hero-Charakter Asymmetrisch, 88px Display Voll-bleed Navy, 96px Black Zentriert, 60px mit Italic-Akzent Kompakt, 42px max Centered, 72px Light-Italic Schematisch, dashed Highlight
Section-Padding 144px y-Padding 96px, alternierend dark 80px, neutral 56px, eng 128px, ivory 72px, mit Grid-Background
Card-Bord. / Radius Borderless / 0 2px / 0 1px / 4–6px 1px / 6px 0.5px hairline / 0 1px / 4px + Caption
Akzent-Cyan Sehr dezent Flächig, plakativ Nur Status & Focus Standard-Einsatz Cyan-700 als Italic-Wort Cyan als technische Highlights
Feature-Grid 3-spaltig, viel gap 3-spaltig, Accent-Stripe 3-spaltig, kleine Icons 4-spaltig, kompakt 3-spaltig, Hairline-Trennung 3-spaltig, nummeriert + Corner-Cut
Body-Größe 17px 15–16px 14px 14px 16px Sans, 19px Italic Lead 14px Sans, Mono auf Labels
Schrift-Charakter Light–Bold, viel Atem Bold–Black Regular–SemiBold + Mono Medium–Bold, eng Light 300 + Italic durchgehend SemiBold + Mono-Layer auf allem