CDK Styleguide

Button Style Guide

A collection of button components and variants based on our design system and Tailwind configuration.

Base Components

.btn-primary
.btn-navy

Color Variants

Styles: Outline & Ghost

Sizes

With Icons

States

CDK Design System

Willkommen zum CDK (Codik Design Kit) Styleguide. Diese Seite dokumentiert alle verfügbaren Design-Komponenten, Farben, Typografie und UI-Elemente für die dpw.codik.app Plattform basierend auf der aktuellen Tailwind-Konfiguration.

Letzte Aktualisierung: 24. Januar 2026 - Vollständige Synchronisation mit tailwind.config.js

Farbpalette

Das CDK Design System verwendet eine umfassende Farbpalette mit jeweils 10-11 Abstufungen für maximale Flexibilität und konsistentes Design.

Navy (Primärfarbe)

Hauptmarkenfarbe für Branding, Header, Footer und primäre Elemente

DEFAULT

navy

#032A49

50

#E6F0FF

100

#CCE0FF

200

#99C2FF

300

#66A3FF

400

#3385FF

500

#0066CC

600

#004D99

700

#003D7A

800

#002D5C

900

#001A33

bg-navy text-navy border-navy-500

Yellow (Akzentfarbe)

Akzentfarbe für CTAs, Highlights und wichtige Aktionen

DEFAULT

yellow

#F2EE11

50

#FEFFCC

100

#FEFF99

200

#FDFF66

300

#F5FF33

400

#EEFF00

500

#E8FF00

600

#D4E600

700

#B8CC00

800

#9CB300

900

#7A8C00

bg-yellow text-yellow-800 border-yellow

Waterblue

Helle, freundliche Akzentfarbe für sekundäre Elemente

DEFAULT

waterblue

#B8E6F5

50

#F0FAFF

100

#E0F5FF

200

#D1F0FF

300

#C2EBFF

400

#B8E6F5

500

#A3DFED

600

#8DD8E5

700

#78D1DD

800

#62CAD5

900

#4DC3CD

bg-waterblue text-waterblue-700

Lightblue

Moderne Blautöne für Links, interaktive Elemente und Info-Alerts

50

#f5f8fd

100

#e1eaf8

200

#c9d9f4

300

#a5c2eb

400

#7aa2e0

500

#5a81d7

600

#4667ca

700

#3c55b9

800

#364797

900

#303e78

950

#21284a

bg-lightblue-500 text-lightblue-800 border-lightblue-300

Gray

Neutrale Grautöne für Text, Rahmen und Hintergründe

50

#FAFAFA

100

#F5F5F5

200

#EEEEEE

300

#E0E0E0

400

#BDBDBD

500

#9E9E9E

600

#757575

700

#616161

800

#424242

900

#212121

bg-gray-50 text-gray-900 border-gray-200

Beige

Warme, neutrale Hintergrundfarbe als Alternative zu reinem Weiß

DEFAULT

beige

#F5F5F0

50

#FEFEFE

100

#FCFCF8

200

#F9F9F3

300

#F7F7ED

400

#F5F5F0

500

#E8E8DD

600

#DBDBC9

700

#CECEB6

800

#C1C1A3

900

#B4B490

bg-beige text-beige-800

Spezialfarben

Zusätzliche Farben für spezielle Anwendungsfälle

Black

#000000

bg-black

White

#FFFFFF

bg-white

White Glass

#FFFFFF7A (48% opacity)

bg-white-glass
Transparent

Transparent

transparent

bg-transparent

Typografie

Das CDK Design System verwendet zwei Schriftarten: Montserrat für Body-Text und Poppins für Überschriften. Beide Schriftarten sind in 5 Gewichten verfügbar und können in 13 verschiedenen Größen verwendet werden. Gesamt: 130 Typografie-Beispiele (13 Größen × 5 Gewichte × 2 Schriftarten)

Sans-Serif (Body)

Montserrat

Standard-Schriftart für Fließtext, Beschreibungen und UI-Elemente. 13 Größen × 5 Gewichte = 65 Beispiele

font-sans

Heading

Poppins

Schriftart für Überschriften, Titel und Hero-Texte. 13 Größen × 5 Gewichte = 65 Beispiele

font-heading

Montserrat (font-sans) - 65 Beispiele

text-9xl (8rem / 128px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-8xl (6rem / 96px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-7xl (4.5rem / 72px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-6xl (3.75rem / 60px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-5xl (3rem / 48px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-4xl (2.25rem / 36px) - 5 Gewichte

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-3xl (1.875rem / 30px) - 5 Gewichte

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-2xl (1.5rem / 24px) - 5 Gewichte

The quick brown fox jumps over

The quick brown fox jumps over

The quick brown fox jumps over

The quick brown fox jumps over

The quick brown fox jumps over

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-xl (1.25rem / 20px) - 5 Gewichte

The quick brown fox jumps over

The quick brown fox jumps over

The quick brown fox jumps over

The quick brown fox jumps over

The quick brown fox jumps over

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-lg (1.125rem / 18px) - 5 Gewichte

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-base (1rem / 16px) - 5 Gewichte - STANDARD

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-sm (0.875rem / 14px) - 5 Gewichte

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-xs (0.75rem / 12px) - 5 Gewichte

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)

Poppins (font-heading) - 65 Beispiele

text-9xl (8rem / 128px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-8xl (6rem / 96px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-7xl (4.5rem / 72px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-6xl (3.75rem / 60px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-5xl (3rem / 48px) - 5 Gewichte

Aa

Aa

Aa

Aa

Aa

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-4xl (2.25rem / 36px) - 5 Gewichte

The Quick Brown Fox

The Quick Brown Fox

The Quick Brown Fox

The Quick Brown Fox

The Quick Brown Fox

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-3xl (1.875rem / 30px) - 5 Gewichte

The Quick Brown Fox

The Quick Brown Fox

The Quick Brown Fox

The Quick Brown Fox

The Quick Brown Fox

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-2xl (1.5rem / 24px) - 5 Gewichte

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-xl (1.25rem / 20px) - 5 Gewichte

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

The Quick Brown Fox Jumps Over

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-lg (1.125rem / 18px) - 5 Gewichte

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-base (1rem / 16px) - 5 Gewichte

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-sm (0.875rem / 14px) - 5 Gewichte

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)
text-xs (0.75rem / 12px) - 5 Gewichte

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

The Quick Brown Fox Jumps Over The Lazy Dog

normal (400)medium (500)semibold (600)bold (700)extrabold (800)

Verwendungsempfehlungen

Montserrat (font-sans)

  • ✓Body-Text: text-base mit font-normal
  • ✓Einleitungen: text-lg mit font-normal/medium
  • ✓UI-Elemente: text-sm/base mit font-medium
  • ✓Buttons: text-base mit font-bold
  • ✓Metadaten: text-sm/xs mit font-normal

Poppins (font-heading)

  • ✓Hero-Titel: text-6xl bis text-9xl mit font-bold/extrabold
  • ✓H1: text-5xl/4xl mit font-bold
  • ✓H2: text-3xl mit font-bold/semibold
  • ✓H3: text-2xl mit font-semibold
  • ✓H4: text-xl mit font-semibold

Allgemeine Richtlinien

Lesbarkeit

Mindestens 16px (text-base) für Body-Text, nie kleiner als 12px (text-xs)

Hierarchie

Verwende Größen und Gewichte konsistent für klare visuelle Hierarchie

Line Height

Größere Texte (5xl+) mit leading-none, Body-Text mit Standard Line Height

Line Heights

Custom Line Heights für präzise typografische Kontrolle.

leading-3

0.75rem (12px)

leading-3

leading-4

1rem (16px)

leading-4

leading-5

1.25rem (20px)

leading-5

leading-6

1.5rem (24px)

leading-6

leading-7

1.75rem (28px)

leading-7

leading-8

2rem (32px)

leading-8

leading-9

2.25rem (36px)

leading-9

leading-10

2.5rem (40px)

leading-10

Custom Buttons

.btn-primary

Primärer Button mit Yellow-Hintergrund, Navy-Text, uppercase und tracking-wide

<button class="btn-primary">Primary Button</button>

.btn-navy

Navy Button mit weißem Text

<button class="btn-navy">Navy Button</button>

Cards & Container

.stat-card

Statistik-Titel

1,234

<div class="stat-card">...</div>

.info-card

Info Card

Standard Info-Card mit Border und Shadow

<div class="info-card">...</div>

.testimonial-card

"Großartiges Design System!"

— Max Mustermann

<div class="testimonial-card">...</div>

.product-card

Produkt Name

€99.00

<div class="product-card">...</div>

.glass-card

Glass Card

Glassmorphism-Effekt mit Backdrop-Blur

<div class="glass-card">...</div>

Forms

Formular-Komponenten mit konsistentem Styling

.form-label & .form-input

<label class="form-label">...</label>
<input class="form-input" />

.form-select

<select class="form-select">...</select>

.form-checkbox

<input type="checkbox" class="form-checkbox" />

.form-radio

<input type="radio" class="form-radio" />

Navigation

.navbar

Navigation Bar

<div class="navbar">...</div>

.breadcrumb

Home/System/Styleguide
<div class="breadcrumb">...</div>

.tabs & .tab-item

<div class="tabs">
  <button class="tab-item tab-item-active">...</button>
</div>

.pagination

<div class="pagination">...</div>

Alerts & Messages

.alert-success

Erfolg! Ihre Änderungen wurden gespeichert.
<div class="alert alert-success">...</div>

.alert-error

Fehler! Bitte überprüfen Sie Ihre Eingaben.
<div class="alert alert-error">...</div>

.alert-warning

Warnung! Diese Aktion kann nicht rückgängig gemacht werden.
<div class="alert alert-warning">...</div>

.alert-info

Info: Neue Features sind verfügbar.
<div class="alert alert-info">...</div>

Badges & Tags

.badge-yellow

NewFeatured
<span class="badge badge-yellow">New</span>

.badge-navy

PremiumPro
<span class="badge badge-navy">Premium</span>

.badge-orange

HotSale
<span class="badge badge-orange">Hot</span>

Hero Sections

.hero-section

Hero Titel

Beschreibungstext für die Hero Section mit Navy-Gradient-Hintergrund

<div class="hero-section">...</div>

Custom Utilities

.data-label

Daten-Label

<p class="data-label">Daten-Label</p>

.text-balance

Dieser Text verwendet text-wrap: balance für optimale Verteilung

<p class="text-balance">...</p>

.bg-gradient-navy

Navy Gradient Background

<div class="bg-gradient-navy">...</div>

.list-item-check

  • Listenpunkt mit Check-Icon
  • Verwendet Material Symbols
  • Gelbes Check-Circle Icon
<li class="list-item-check">...</li>
This website is using cookies to provide a good browsing experience
These include essential cookies that are necessary for the operation of the site, as well as others that are used only for anonymous statistical purposes, for comfort settings or to display personalized content. You can decide for yourself which categories you want to allow. Please note that based on your settings, not all functions of the website may be available.
This website is using cookies to provide a good browsing experience
These include essential cookies that are necessary for the operation of the site, as well as others that are used only for anonymous statistical purposes, for comfort settings or to display personalized content. You can decide for yourself which categories you want to allow. Please note that based on your settings, not all functions of the website may be available.
Your cookie preferences have been saved.