card-radius 10 px
Poppins 700
section 96 px
Die Default-Variante des FLOWNIQ Design Systems — auf der alle vier Dialekte aufsetzen. Navy-Primary, Cyan-Akzent, gerundete Cards, ausgewogene Hierarchie.
Standard-Spacing (24 px Card-Padding, 96 px Section-Padding)
Navy-Primary für CTAs, Cyan-Akzent für Status und Highlights
Poppins Bold für Headlines, Regular für Body
1
Editorial
Magazinhaft · Großzügig · Ruhig
borderless cards
144 px section
88 px display
squared buttons
Magazinhafte Anmutung. Headlines bis 88 px in 700-Weight, alles aufgeräumt mit viel Atem. Cards lösen sich auf — Trennung entsteht durch Whitespace, nicht durch Linien.
Sektionspadding auf 144 px erhöht, Headlines bis 88 px Display
Borderless Cards — Hierarchie über Whitespace und Typografie
Squared Buttons mit Letter-Spacing, Akzent-Cyan sehr zurückhaltend
2
Bold
Plakativ · Kontrastreich · Aktivierend
navy-900 hero
96 px black
2 px borders
radius 0
Plakativ, hoher Kontrast, aktivierend. Hero und Page-Header voll-bleed Navy mit Cyan-Akzenten. Alternierende dunkle Sektionen, extra-bold Headlines, kantige Cards.
Voll-bleed Navy-Hero, Headlines in 900-Weight bis zu 96 px
Quadratische Cards (radius 0) mit 2 px Borders statt Hairlines
Featured-Pricing-Plan in Inverse-Dark, CTA-Banner in Cyan-Akzentfläche
3
Minimal / Clean
Reduziert · Präzise · Strukturiert
no shadows
hairline
mono overlines
radius 4 px
Stark reduziert, technische Präzision. Keine Shadows, keine Tints — nur Hairline-Borders. Mono-Stenografie auf Overlines und Stats. Akzent ausschließlich auf Status und Focus.
JetBrains Mono auf Overlines, Stats und Tabellen-Headern
Keine Shadows, kleinere Border-Radii (4–6 px)
Buttons in Ink-Schwarz statt Navy, Italic-Akzent im Hero
4
Dense / Productive
Informationsdicht · Effizient · Dashboard
28.412
98%v3.2
142 / ∞
DASHBOARD
14 px body
52 px header
tabular-nums
8 cols logo wall
Informationsdicht und kompakt, Dashboard-Anmutung. Body 14 px, Header 52 px, alle Spacing-Werte eine Stufe enger. Mehr Inhalt pro Bildschirm, weniger Scrollen.
Globale tabular-nums-Aktivierung für saubere Zahlen-Spalten
Feature-Grid 4-spaltig (statt 3), Team-Grid 6-spaltig
Alle Komponenten kompakter — 56 px Section-Padding statt 96 px
5
Premium
Refined · Gehoben · Exklusiv
light 300
italic display
ivory paper
0.20em tracking
Refined und gehoben. Light-Italic-Display, generous tracking, ivory-warmer Untergrund. Hairline-Borders überall, Cyan nur als italic-Wort. Klassisch zentrierte Kompositionen, Eleganz im Detail.
Light-Italic-Display (Weight 300) statt Bold-Display
Ivory-warmer Untergrund #fafaf8 statt cooles Off-White
All-Caps-Letterspacing 0.20 em auf Buttons und Labels
6
Technical
Schematisch · Diagrammlastig · Präzise
// hero
[ NEU ]
workflow
FIG.01
32px grid
mono labels
FIG captions
// comments
Schematisch und diagrammlastig wie hochwertige Produkt-Doku. Grid-Background, Monospace-Labels, Coordinate-Marker, gestrichelte Highlights, Cards mit Figure-Captions. Substanziell und evidenzbasiert.
Subtiles 32-px-Grid auf dem Page-Background
Mono-Layer auf Labels, Stats, Caption, Footer und Tabs
Cyan als gestricheltes Highlight im Hero-Display