Internes Design-Manual

Design-Manual

Vollständige Design-Standards für modulario.com — Farben, Typografie, Abstände, Komponenten mit Live-Vorschauen.

Farben

Textfarben sind für WCAG 2.1 AA (≥ 4,5:1 auf Weiß) angepasst. Die ursprünglichen lebendigen Farbtöne leben in den -accent-Varianten — ausschließlich für Hintergründe, Chips, Gradienten.

Brand-Palette

Yellow

--color-brand-yellow

#a16207 (Text, WCAG AA)

--color-brand-yellow-accent

#d69f1f (BG / Gradient)

#ebb22d (Light Focus)

Orange

--color-brand-orange

#9a3412 (Text, WCAG AA)

--color-brand-orange-accent

#fbae17 (BG / Gradient)

Green

--color-brand-green

#15803d (Text, WCAG AA)

--color-brand-green-accent

#1aa46c (BG / Gradient)

Cyan

--color-brand-cyan

#0e7490 (Text, WCAG AA)

--color-brand-cyan-accent

#21acd7 (BG / Gradient)

#3bc4ef (Light Focus)

Ink — neutrale Skala

ink-50

#f5f5f5

Chip BG

ink-100

#ebebeb

Trennlinien, Rings

ink-200

#e2e2e2

Chip-Border, Btn-Border

ink-300

#cfd0d4

Placeholder

ink-400

#4b5563

Labels, Icons (7,1:1)

ink-500

#4e4b66

Sekundärtext

ink-600

#4d4d4e

Body-Text

ink-700

#33373d

Headings hell

ink-800

#212121

Primärtext, Btns

ink-900

#171717

Headings dunkel, Footer

Spezial / semantisch

Primary (Text/Body)

--color-primary

#2e2e2e

Accent Green

--color-accent

#2ab67d

Link

--color-brand-link

#0e7490

Typografie

Schriftarten

Primär — Gabarito

Modulario

Bold 700 — UI-Headings

Regular 400 — Fließtext

--font-sans, --font-display

Gabarito, ui-sans-serif, system-ui…

Variable Font Weights: 400 – 900

Self-hosted: /fonts/gabarito-latin.woff2

Akzent — Caveat

Excel

Salesforce

Trello

--font-accent / Utility: .font-accent

Caveat, cursive

Variable Font Weights: 400 – 700

Verwendung: "ohne Modulario"-Panel (Competitor Labels)

Typografische Skala

Tag	Größe	Weight	line-height	Live-Vorschau
h1	1.75em (~35px)	900	1.08	Überschrift H1
h2	clamp(1.5rem, 3.2vw, 2.4em)	900	1.08	Überschrift H2
h3	1.25em (~25px)	900	1.08	Überschrift H3
body	20px (Base)	400	1.5	Fließtext — gewöhnlicher Seiteninhalt
small	0.85em (~17px)	400–600	1.5	Beschreibung, Metadaten, Sekundärtext
caption	0.72 – 0.78em	600–700	1.5	Labels, Metrik-Beschriftungen

Headings (h1–h5)

line-height: 1.08 · letter-spacing: -0.01em

Kompakt, tight, Weight 900

Body-Text

line-height: 1.5 · letter-spacing: 0

Standard, lesbar

Abstände und Lücken

Tailwind Spacing: 1 Unit = 0.25 rem = 4 px. Übliche Werte auf der Website:

Innenabstände (Padding)

p-1 4px

Toggle-Container (p-1)

p-2 8px

Kleine Chips, Tags

p-3 12px

Kompakte Elemente, Nav-Links

p-4 16px

Karten, Feedback-Panel

p-6 24px

Modul-Karten, CTA-Inneres (px-6)

p-8 32px

Größere Info-Panels

p-12 48px

Hero, CTA-Sektionen (py)

p-16 64px

Sektionen auf dem Desktop (py-16)

Lücken in Grids und Flex (Gap)

gap-2 8px

Chips und Tags

gap-3 12px

Form Inputs

gap-4 16px

Modul-Grid, Karten (Standard)

gap-5 20px

Icons mit Beschriftungen

gap-6 24px

CTA-Row, Kontaktdaten

gap-8 32px

Hero Stats Row

gap-10 40px

Sektion-Nav

Seiten-Container

.container-page

mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8

max-width: 80 rem (1280 px) · horizontales Padding: 16 / 24 / 32 px

Rundungen (border-radius)

rounded (4px)

Focus Outline

rounded-lg (8px)

Toggle Tab, Tags

rounded-xl (12px)

Chip, Feedback-Panel

rounded-2xl (16px)

Widget, Panels

rounded-3xl (24px)

Modul-Karte, CTA-Block

rounded-full

Hero-Tabs, Pills, Btn-Icon

15px (--radius-btn)

btn-primary, btn-secondary

28px

Dashboard-Vorschau

Vertikaler Rhythmus der Sektionen

Sektion	py (Top / Bottom)	Hinweis
Hero	pt-10 pb-6 / md:pt-14 pb-8	Mit BG-Bild
Modules	py-12	bg-white
Testimonials	py-16	bg-white
CTA-Inneres	py-14 px-6	rounded-3xl Gradient BG
CTA-Wrapper-Sektion	pb-20 pt-10	bg-white

Buttons

.btn-primary

bg: var(--color-primary) = #2e2e2e

hover bg: var(--color-ink-800) = #212121

border: 2px solid Primary

Padding: 14px 20px · Font: 1rem / 500

border-radius: var(--radius-btn) = 15px

Transition: bg, border, color — 180ms ease

.btn-secondary

2-Min-Demo ansehen

bg: white → hover: var(--color-ink-50)

border: 2px solid var(--color-ink-200)

Padding: 14px 20px · Font: 1rem / 500

border-radius: 15px · Transition: bg 150ms ease

Button-Zustände

default

:hover

disabled

Normal default

Hover :hover

CTA-Reihe — Hero-Pattern

2-Min-Demo ansehen

flex-col auf Mobile → sm:flex-row · gap-3

Chips und Badges

.hero-chip

MODULARIO – modulare Cloud-ERP- und CRM-Lösung

bg: linear-gradient(135deg, #f4d98f → #fdd49b → #9ad9b5 → #8cd9ed)

border: none · border-radius: 12px (--radius-chip)

Padding: 6px 12px · Gap: 10px · Font: 0.72em / 400

⚠ Icon steht immer RECHTS hinter dem Text

.efektTextu — Gradient-Text

mit Modulario

Kunden sagen

Gradient: linear-gradient(300deg, #ebb22d 0%, #3bc4ef 100%)

-webkit-background-clip: text · -webkit-text-fill-color: transparent

Verwendung: Toggle-Label, Sektion-Supertitle, Headings mit Akzent

Stat Chip — Hero-Metriken

18.000+ Aktive Nutzer

200+ Unternehmen nutzen Modulario

18 Module in der Plattform

Value: .brand-gradient-text font-black text-[1.15em]

Label: text-ink-500 font-semibold text-[0.72em]

Layout: flex items-baseline gap-1.5 · Wrap gap-8

Karten

Modul-Karte (Link)

Rechnungsstellung

rounded-3xl · bg-white · ring-1 ring-ink-100

Shadow: 0 2px 12px rgba(0,0,0,0.04)

hover: -translate-y-0.5 + Shadow 0 6px 24px

Padding: p-6 · Gap: gap-4

.gradient-border-card

Karte mit Gradient-Border

Statischer Gradient-Rand immer sichtbar — 2 px Pseudoelement.

Gradient-Border: cyan → green → yellow (135°)

Immer sichtbar (opacity 1)

.gradient-border-hover

Hover-Gradient-Border

Mit der Maus darüberfahren — der Gradient-Rand erscheint.

opacity 0 → 1 bei Hover (200ms)

Kombinieren mit ring-1 ring-ink-100

CTA-Block (rounded-3xl + brand-gradient-bg)

Bereit zu starten? Vereinbaren Sie eine kostenlose Beratung.

Kontaktieren Sie uns und wir schlagen Ihnen innerhalb von 24 Stunden eine Lösung vor.

Beratung buchen

rounded-3xl · .brand-gradient-bg · shadow-[0_6px_40px_rgba(0,0,0,0.08)]

Padding: px-6 py-14 · text-center (Produktionswert = py-14)

Toggle (Toggle Tabs)

Modules-Toggle (mit / ohne Modulario)

Container: bg-[#f4f4f4] · r-12 · border-2 white · p-1

Aktiv: bg-white shadow-sm · r-8

Aktives Label: .efektTextu font-semibold

Inaktiv: text-ink-600 (ohne BG)

Hero View Tabs (Pill Style)

Container: rounded-full · border ink-200 · p-1

Shadow: 0 4px 16px rgba(0,0,0,0.06)

Aktiv: bg-white + ring-1 ring-ink-200 + shadow-sm

letter-spacing: 1px im Tab-Text

Gradienten

.brand-gradient-bg

Hintergrund von CTA-Blocks, Hero-Chip-Hintergrund

#f4d98f → #fdd49b → #9ad9b5 → #8cd9ed

.brand-gradient-text

Numerische Hero-Werte, Metriken (Clip Text)

#d69f1f → #fbae17 → #1aa46c → #21acd7

.efektTextu

Toggle-Label, Sektion-Supertitle (Clip Text)

#ebb22d → #3bc4ef (300 deg)

gradient-border ::before

.gradient-border-card / .gradient-border-hover

#21acd7 → #1aa46c → #d69f1f

Icons

Modul-SVG-Icons (inline, stroke="currentColor")

Import: import.meta.glob("?raw") → Render über <Fragment set:html>. Die Icon-Farbe wird über CSS color gesteuert (Tailwind text-[#…]).

Rechnungsstellung #a16207

Buchhaltung #0e7490

Belegerkennung #15803d

Angebote #a16207

Anwesenheit #0e7490

Planung #15803d

Recruiting #15803d

Dateien #0e7490

Verträge #a16207

Verzeichnis #15803d

Icon-Farben — Regel

orange

text-[#a16207]

cyan

text-[#0e7490]

green

text-[#15803d]

ink

text-ink-800

Lucide-Icons (für Module ohne Custom-SVG)

lucide:workflow Workflows

lucide:graduation-cap Schulungen

lucide:users CRM

lucide:package Lager

lucide:factory Produktion

lucide:shopping-bag Einkauf

lucide:wrench Wartung

lucide:list-ordered Warteliste

Formulare und Interaktivität

Input / Textarea

border: 1px solid ink-200 · rounded-xl

focus: border-ink-400 (Transition 150ms) — ohne Outline

Padding: px-3 py-2.5 · Font-Size: 14px

Placeholder: text-ink-400

Feedback-Widget (unten rechts)

Komponente: src/components/feedback/FeedbackWidget.tsx (Preact Island)

Position: fixed bottom-6 right-6 z-[9999]

Trigger-Button: rounded-full bg-ink-800 px-4 py-3

Panel: w-[360px] rounded-2xl border border-ink-100 shadow-[0_8px_40px_rgba(0,0,0,0.18)]

Öffnungs-Animation: fadeSlideUp — translateY(12px) + scale(0.97) → (0, 1) / 160ms

Toast nach Senden: 4s Auto-Dismiss fadeSlideUp + fadeOut

Screenshot: max. Eingabe 2000×2000px, komprimiertes Canvas → 1200px JPEG 0.82

Webhook: POST application/x-www-form-urlencoded → Apps Script

Focus-Outline (global)

:focus-visible

outline: 2px solid var(--color-brand-cyan-light) = #3bc4ef

outline-offset: 2px · border-radius: 4px

Sektionen und Layout-Patterns

Links im Text (WCAG 1.4.1)

Links in p, li, dd, blockquote, article, .prose erhalten automatisch Underline

text-decoration-thickness: 1px · hover: 2px · text-underline-offset: 3px

Deaktivierung: .no-underline (Buttons, die wie Links gestylt sind)

Sektion-Hintergründe — Wechsel

bg-white

die meisten Sektionen (Default)

bg-[#f4f4f4]

Toggle-Container, abwechselnde Sektion

.brand-gradient-bg

CTA-Block (innerhalb einer bg-white-Wrapper-Sektion)

Header

sticky top-0 · bg-white · border-b border-ink-100

Logo + Nav-Links + LanguageSwitcher + CTA-Button (.btn-primary)

Mobile: Hamburger → animated Drawer Overlay

Z-Index-Schichtung

Element	z-index	Code
Sticky Header	sticky (Flow)	`sticky top-0`
Brand Page Nav	50	`z-50`
Cookie-Banner / Modals	50	`z-50`
Feedback-Widget	9999	`z-[9999]`

Marquee (Kunden-Band)

.marquee-track — animation: marquee 40s linear infinite

.marquee-fade — mask-image: transparent an den Rändern (8% / 92%)

@media (prefers-reduced-motion) — Animation deaktiviert