Interne Referenz

Brand System

Diese Seite ist nur als interne Design-Referenz gedacht. Hier liegen die visuellen Standards für Farben, Buttons, Glassmorphism, Typografie und wiederverwendbare UI-Bausteine.

Farbpalette & Tokens

Background

--bg

#ffffff

Background Soft

--bg2

#f5f7fa

Background Muted

--bg3

#eceef3

Border

--border

#d4d9e3

Ink

--ink

#0d1117

Ink 2

--ink2

#2f3948

Ink 3

--ink3

#6b7280

Accent

--accent

#0077cc

Accent Hover

--accent2

#005fa3

Accent Light

--accentlt

#e6f2fb

Success

--color-success

#3BB273

Warning

--color-warning

#F4A261

Error

--color-error

#E76F51

CTA Background

--cta-bg

#0d1117

Typografie

Font Face

Switzer (Fontshare), Fallback: Arial / system-ui

font-family: "Switzer", Arial, sans-serif;

Heading Example

Functional Minimalism

Body copy bleibt ruhig, klar und gut scannbar. `text-ink` für Headlines, `text-ink2` für Body.

Buttons (Standard)

Primär und Sekundär sind jetzt als wiederverwendbare Komponente definiert: `ButtonLink`.

Projekt besprechen →Referenzprojekte ansehen

import ButtonLink from "@/components/ui/ButtonLink";

<ButtonLink href="#cta" variant="primary">Projekt besprechen →</ButtonLink>
<ButtonLink href="#cases" variant="secondary">Referenzprojekte ansehen</ButtonLink>

Glassmorphism Komponenten

GlassPanel

Nur der Glass-Rahmen — Inhalt (Werte, Text, Icons) legst du als children fest.

Jahre Erfahrung

15+

Projekte

48h

Erste Ergebnisse

Status Badge

Available

GrowthMetric (Analytics Card)

Wiederverwendbare KPI-Karte mit animierter Sparkline, Change-Badge und optionalem Helper-Text.

Average Order Value

€83.23

+39%

vs. last 30 days

ROAS

4.2×

+11%

paid campaigns

Churn Rate

2.6%

-0.8%

subscription cohort

import GrowthMetric from "@/components/ui/GrowthMetric";

              <GrowthMetric
                label="Average Order Value"
                value="€83.23"
                change="+39%"
                subtitle="vs. last 30 days"
                trend={[45, 49, 51, 58, 56, 63, 68, 74]}
              />

Layout & UI Prinzipien

Abstände & Radius

Einheitlicher Radius für Flächen/Cards: `1rem` (global über `rounded` bzw. `rounded-2xl`). Buttons immer `0.75rem` (`rounded-xl`). Standard-Abstände für Sektionen: `py-14` bis `py-20`, Container: `max-w-6xl px-4`.

Komponenten zuerst

Für wiederkehrende Muster immer Komponenten nutzen (z. B. `ButtonLink`, `GlassPanel`). So bleibt das UI konsistent und Änderungen lassen sich zentral ausrollen.

Status-Farben (Icons)

Kreis-Icons mit ✓ nutzen --color-success / bg-success, mit ✕ --color-error / bg-error. Für Warnungen: --color-warning / bg-warning.