Zum Inhalt springen

Design System

Styleguide

Alle Farben, Typografie, Komponenten und Utility-Klassen des BRANDFUSION Neon Minimalism Design-Systems.

Farben

Surfaces

base

--color-base

surface-1

--color-surface-1

surface-2

--color-surface-2

Text

text-primary

--color-text-primary

text-secondary

--color-text-secondary

text-muted

--color-text-muted

Neon Palette

neon-orange

--color-neon-orange

neon-pink

--color-neon-pink

neon-violet

--color-neon-violet

neon-blue

--color-neon-blue

neon-cyan

--color-neon-cyan

Accent

accent

--color-accent

accent-hover

--color-accent-hover

accent-dim

--color-accent-dim

Gradient DNA

gradient-start (#ff6d3a) → gradient-mid (#f2203e) → gradient-end (#9b27d6)

Borders

border
border-hover
border-glow

Typografie

font-display (Bungee)

Branding, Design & digitale Strategie.

font-serif (Roboto Slab)

Ausgewählte Cases & Insights

font-sans (Ubuntu) — Body

Wir gestalten Marken, die auffallen. Mit Strategie, Design und Technologie – von der Idee bis zum messbaren Ergebnis.

font-mono (JetBrains Mono)

const brandFusion = createBrand({ style: "neon-minimalism" });

Text-Grössen

text-xs — Kompakte Labels und Meta-Informationen

text-sm — Sekundärer Body-Text und Beschreibungen

text-base — Standard Body-Text

text-lg — Einleitungen und Card-Titel

text-xl — Sektions-Überschriften

text-2xl — Grosse Überschriften

text-3xl — Seitentitel

Buttons

Primary Button Secondary Button Ghost Button

Primary: bg-gradient + neon-glow + hover:brightness-110

Secondary: border + bg-surface-1 + hover:bg-surface-2

Ghost: text-only + hover:bg-surface-1/60

Cards

Standard Card

Mit Padding, ohne Link. Statische Darstellung.

Card als Link

Mit hover:bg-surface-2 und card-glow-hover.

Ohne Padding

Padding manuell im Content.

Chips

Webdesign UI/UX Design SEO E-Commerce Chip als Link

radius-chip: 9999px (pill) — text-xs, border-border

Utility-Klassen

.accent-dot

Sektion Label

::before mit 6px orangem Kreis

.neon-glow

Neon Glow Effekt

box-shadow mit Pink + Violet + Orange Glow (nur Primary CTA)

.card-glow-hover

Hover mich — border-glow + subtle box-shadow

.kpi-tile

+42%

Organic Traffic

1.2s

Ladezeit

98

Lighthouse Score

3x

Conversion Rate

::before mit 2px Gradient-Top-Border

.nav-active

Aktiv Inaktiv Inaktiv

::after mit 2px Gradient-Bottom-Border

GradientLine

Standard

Mit BrandLogo

Brand Logo

8px

16px

24px

32px

48px

Gradient: Fdb051 → F2203E → 5342D6

Breadcrumb

BrandLogo (8px) als Separator, text-text-muted

CaseCard

Beispiel AG

Beispiel Case

Eine elegante Website mit modernem Design und optimierter Performance.

Webdesign UI/UX Design SEO

+42% Organic Traffic

Demo GmbH

Featured Case

Shopify-basierter Onlineshop mit Produktkatalog und Kundenbewertungen.

Webdesign E-Commerce Branding SEO

Props: slug, title, excerpt, client?, cover?, services[], kpi?, featured?

InsightCard

5 min

Beispiel Insight

Warum schnelle Ladezeiten dein Google-Ranking verbessern.

SEO Performance +1
aktualisiert 8 min

Featured Insight

Die wichtigsten Branding-Trends für Schweizer KMU im Jahr 2025.

Branding Trends KMU Strategie

Props: slug, title, excerpt, date, updated?, cover?, tags[], readingTime?, featured?

Industry Icons

Medizin

E-Commerce

Gastronomie

Beauty

Food

Handwerk

Immobilien

Kreativ

Startups

SVG stroke icons, currentColor, stroke-width 2, viewBox 0 0 24 24

ReviewBlock

BRANDFUSION hat unsere Marke komplett transformiert. Von der Strategie bis zur Umsetzung – alles aus einem Guss.

Anna Müller

CEO · Beispiel AG

Props: quote, author, role, company?

Radii & Motion

Border Radii

radius-button

0.5rem

radius-card

0.75rem

radius-chip

9999px

Motion

--duration-fast: 180ms — Farb-Übergänge, Text-Hover

--duration-normal: 240ms — Card-Hover, Button-Transitions

--ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1) — Smooth easing