Design System

Gebaut aus Tokens.

Jeder Wert dieser Website stammt aus den Tokens unten und wird in CSS Custom Properties erzeugt. Komponenten nutzen nur Variablen, sodass helles und dunkles Theme automatisch passen.

Farben

Neutrale Flächen, eine Teal-Markenfarbe. Akzent nur für Flächen, nie für Text.

TokenHellDunkelVerwendung
--surface-100#fafafa#0e1514Page background.
--surface-200#ffffff#151e1dHeader, nav pill, cards and inputs on surface-100.
--ink#1c2321#eef3f1Headings, nav and body text on surface-100 and surface-200.
--ink-muted#4d5a57#a3b3afIntro paragraphs and captions on surface-100 and surface-200.
--brand#0a7a68#3fd1b5Links, step numbers (01, 02), active-item bar, focus. Teal text on surface-100 and surface-200.
--on-ink#ffffff#0e1514Text on ink-filled buttons (the dark primary button).
--on-brand#ffffff#0b1f1bText and icons on brand fills.
--accent#1fd1b0#1fd1b0Bright teal of the logo mark, chat button and highlights. Fill only, never text.
--on-accent#0b1f1b#0b1f1bText and icons on accent fills.
--hairline#e6e8e7#25322fSection dividers and header rule; decorative only.
--focus#0a7a68#3fd1b52px focus ring, at least 3:1 on every surface.
--success#1f7a4d#6fcf9fSuccess text and icons on surface-100; always with a word or icon.
--danger#b3361f#ff8a73Error text and icons on surface-100; always with a word or icon.

Typografie

Serif für den Hero, Poppins für alles andere. Leichte Überschriften mit fettem Schlüsselwort.

display
"Source Serif 4", Georgia, serif
sans
"Poppins", system-ui, sans-serif
mono
"JetBrains Mono", ui-monospace, monospace

Headings

  • .type-display-xl64px/72px, 600

    Jeden Schritt sichern

    Hero first line in ink. Second line: same style in italic (display-italic) in brand.

  • .type-display-italic64px/72px, 500, italic

    für Ihr Wachstum.

    Hero second line, in brand: 'of Your Growth.'

  • .type-display-lg40px/48px, 300

    Wenn Sie die große Idee haben

    Section titles such as 'When You Have the Big Idea' in the sans face; key words at 600.

  • .type-heading24px/32px, 500

    Cloud-Migration

    Card and sub-section titles.

Text

  • .type-eyebrow14px/20px, 600

    Softwareentwicklung

    Uppercase kicker such as 'IP AND BUSINESS LAW FIRM', and step numbers, in brand. Set text-transform: uppercase for kickers.

  • .type-body-lg18px/32px, 300

    Wir entwerfen, bauen und betreiben Software, die pünktlich liefert.

    Intro paragraphs in ink-muted.

  • .type-body16px/24px, 400

    Klarer Umfang, klare Verträge, klare Lieferung.

  • .type-link16px/24px, 500

    Webentwicklung

    Arrow links in brand.

  • .type-label15px/24px, 500

    Kontakt aufnehmen

    Nav items, buttons.

  • .type-caption14px/20px, 400

    Ihre Idee. Ihre Software. Klar im Preis.

Code

  • .type-code14px/22px, 400

    npm run build

Abstände

Fünf Stufen auf einem 8px-Raster.

  • --space-1

    8px

    Icon gaps.

  • --space-2

    16px

    Default gap, link row gap 24px = space-3.

  • --space-3

    24px

    Between links and paragraphs.

  • --space-4

    32px

    Item padding.

  • --space-5

    64px

    Section spacing.

Radien

Weiche Ecken in drei Größen.

  • --radius-sm

    8px

    Buttons, nav pill, inputs.

  • --radius-md

    12px

    Cards.

  • --radius-lg

    24px

    Large images and panels.

Schatten

Nur für schwebende Ebenen. Karten bleiben flach mit feiner Linie.

  • --shadow-sm

    0 1px 2px rgba(28,35,33,0.08)

    Nav pill, small floating bubbles such as 'Need help?'.

  • --shadow-md

    0 8px 24px rgba(28,35,33,0.12)

    Dropdown menus and popovers.

  • --shadow-lg

    0 24px 64px rgba(28,35,33,0.18)

    Modals and dialogs.

Icons

Dünne Outline-Icons, 24px-Raster, 1,5px Strich, übernehmen die Textfarbe.

  • arrow-right
  • arrow-up-right
  • arrow-down
  • search
  • user
  • language
  • chat
  • close
  • code

Komponenten

Die Bausteine jeder Seite.

Eyebrow

Kurzer Kicker in Großbuchstaben über einer Überschrift.

Softwareentwicklung

Badge

Status mit Wort, nie nur Farbe.

LiveFehlgeschlagenNeu

Field

Label, Eingabe und Hinweis. Fehler enthalten immer das Wort Fehler.

Wir antworten innerhalb eines Werktags.

Error: Bitte eine vollständige E-Mail-Adresse eingeben.

Card

Flacher Container mit feiner Linie. Karten nicht verschachteln.

Cloud-Migration

Workloads ohne Ausfallzeit umziehen, mit klarem Rollback-Plan.

StepItem

Nummerierter Schritt. Der aktive Eintrag zeigt einen Balken in Markenfarbe.

  1. 01

    Wenn Sie die große Idee haben

    Konzept prüfen, Stack wählen und das erste Release planen.

    Discovery-WorkshopPrototyping