Design System v2.0

CDK Styleguide

Umfassende Dokumentation des CDK Design Systems mit Tailwind CSS 4.0, Farbpaletten, Komponenten und Utilities.

Farbpalette

Das CDK Design System verwendet eine sorgfältig abgestimmte Farbpalette mit mehreren Abstufungen für maximale Flexibilität.

Yellow

yellow-50

#FEFFCC

yellow-100

#FEFF99

yellow-200

#FDFF66

yellow-300

#F5FF33

yellow-400

#EEFF00

yellow-500

#F2EE11

yellow-600

#D4E600

yellow-700

#B8CC00

yellow-800

#9CB300

yellow-900

#7A8C00

yellow

#F2EE11

Navy

navy-50

#E6F0FF

navy-100

#CCE0FF

navy-200

#99C2FF

navy-300

#66A3FF

navy-400

#3385FF

navy-500

#0066CC

navy-600

#004D99

navy-700

#003D7A

navy-800

#002D5C

navy-900

#001A33

navy

#032A49

Waterblue

waterblue-50

#F0FAFF

waterblue-100

#E0F5FF

waterblue-200

#D1F0FF

waterblue-300

#C2EBFF

waterblue-400

#B8E6F5

waterblue-500

#A3DFED

waterblue-600

#8DD8E5

waterblue-700

#78D1DD

waterblue-800

#62CAD5

waterblue-900

#4DC3CD

waterblue

#B8E6F5

Lightblue

lightblue-50

#f5f8fd

lightblue-100

#e1eaf8

lightblue-200

#c9d9f4

lightblue-300

#a5c2eb

lightblue-400

#7aa2e0

lightblue-500

#5a81d7

lightblue-600

#4667ca

lightblue-700

#3c55b9

lightblue-800

#364797

lightblue-900

#303e78

lightblue-950

#21284a

Gray

gray-50

#FAFAFA

gray-100

#F5F5F5

gray-200

#EEEEEE

gray-300

#E0E0E0

gray-400

#BDBDBD

gray-500

#9E9E9E

gray-600

#757575

gray-700

#616161

gray-800

#424242

gray-900

#212121

Beige

beige-50

#FEFEFE

beige-100

#FCFCF8

beige-200

#F9F9F3

beige-300

#F7F7ED

beige-400

#F5F5F0

beige-500

#E8E8DD

beige-600

#DBDBC9

beige-700

#CECEB6

beige-800

#C1C1A3

beige-900

#B4B490

beige

#F5F5F0

Typografie

Das CDK Design System verwendet Montserrat für Body-Text und Poppins für Überschriften.

Schriftarten

Font Sans (Body)

Montserrat

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Font Heading

Poppins

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Schriftgewichte

Normal (400) - The quick brown fox jumps over the lazy dog

Medium (500) - The quick brown fox jumps over the lazy dog

Semibold (600) - The quick brown fox jumps over the lazy dog

Bold (700) - The quick brown fox jumps over the lazy dog

Extrabold (800) - The quick brown fox jumps over the lazy dog

Schriftgrößen

text-xs (0.75rem)

The quick brown fox jumps over the lazy dog

text-sm (0.875rem)

The quick brown fox jumps over the lazy dog

text-base (1rem)

The quick brown fox jumps over the lazy dog

text-lg (1.125rem)

The quick brown fox jumps over the lazy dog

text-xl (1.25rem)

The quick brown fox jumps over the lazy dog

text-2xl (1.5rem)

The quick brown fox jumps over the lazy dog

text-3xl (1.875rem)

The quick brown fox jumps over the lazy dog

text-4xl (2.25rem)

The quick brown fox

text-5xl (3rem)

The quick brown

Buttons

Umfassende Button-Komponenten für verschiedene Aktionen und Kontexte mit Solid, Outline und Ghost Varianten.

Primary Buttons (Yellow Focus)

Solid Primary

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

Yellow Background mit Navy Text, hover zu Navy/White. Für Hauptaktionen.

Outline Primary

<button class="btn-primary-outline">Primary Outline</button>

Transparent mit Yellow Border, hover zu Yellow/Navy. Für sekundäre Hauptaktionen.

Ghost Primary

<button class="btn-primary-ghost">Primary Ghost</button>

Transparent mit Yellow Text, subtiler Hover. Für tertiäre Aktionen.

Secondary Buttons (Navy Focus)

Solid Navy

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

Navy Background mit White Text, hover zu Yellow/Navy.

Outline Navy

<button class="btn-navy-outline">Navy Outline</button>

Transparent mit Navy Border, hover zu Navy/White.

Ghost Navy

<button class="btn-navy-ghost">Navy Ghost</button>

Transparent mit Navy Text, subtiler Hover-Effekt.

Accent Buttons

Waterblue

Lightblue

Gray (Neutral)

Code

.btn-waterblue
.btn-lightblue
.btn-gray

Button-Größen

<button class="btn-primary btn-sm">Small</button>
<button class="btn-primary">Default</button>
<button class="btn-primary btn-lg">Large</button>

Größenmodifikatoren .btn-sm und .btn-lg sind mit allen Button-Varianten kombinierbar.

Icon Buttons

<button class="btn-icon-yellow">
  <span class="material-symbols-outlined">add</span>
</button>

Quadratische Icon-Buttons mit .btn-icon-yellow und .btn-icon-navy.

Button Groups

<div class="btn-group">
  <button class="btn-navy">Option 1</button>
  <button class="btn-navy">Option 2</button>
  <button class="btn-navy">Option 3</button>
</div>

Gruppiert zusammenhängende Buttons nahtlos mit .btn-group.

Alle Button-Varianten im Überblick

Cards

Verschiedene Card-Komponenten für unterschiedliche Inhaltstypen.

Stat Cards

analytics +12.5%

Total Revenue

$48,290

download Last 30 days

Downloads

85,201

star Average

Rating

4.9/5.0

<div class="stat-card">...</div>
<div class="stat-card border-l-4 border-waterblue">...</div>

Info Cards

Information Module

Standard Info-Karte für allgemeine Inhaltsblöcke mit sanften Schatten.

  • Semantische Struktur
  • Barrierefreier Kontrast
  • Responsive Padding
<div class="info-card">
  <h4>...</h4>
  <p>...</p>
</div>

Testimonial Cards

star star star star star

"Dieses Design-System hat die Art und Weise, wie wir unsere Interfaces erstellen, komplett transformiert. Die Utility-Klassen sind intuitiv und leistungsstark."

JD

Jane Doe

CTO, TechCorp

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

Glass Cards (Glassmorphism)

light_mode

Frost Effect

Glassmorphism-Effekt für dunkle Hintergründe.

blur_on

Backdrop Blur

Native CSS backdrop-filter für Tiefe.

layers

Stackable

Perfekt über komplexen Hintergründen.

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

Formular-Elemente

Konsistente Form-Komponenten für Benutzereingaben.

<input type="text" class="form-input" placeholder="...">
<select class="form-select">...</select>
<input type="checkbox" class="form-checkbox">
<input type="radio" class="form-radio">
<label class="form-label">...</label>

Alerts & Feedback

Feedback-Komponenten für Benutzerbenachrichtigungen.

check_circle

Erfolgreich

Ihre Änderungen wurden erfolgreich gespeichert.

info

Neue Updates

Version 2.4 ist jetzt zum Download verfügbar.

warning

Speicher niedrig

Sie nähern sich Ihrem Speicherlimit im Free-Tarif.

error

Verbindungsfehler

Verbindung zum Server fehlgeschlagen. Bitte versuchen Sie es später erneut.

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-error">...</div>

Badges & Tags

Kleine Label-Komponenten für Status und Kategorisierung.

Navy Badge Yellow Badge Neutral Badge Waterblue Badge Lightblue Badge 
<span class="badge badge-navy">Navy Badge</span>
<span class="badge badge-yellow">Yellow Badge</span>

Material Symbols & Icons

Material Symbols Outlined für konsistente Icon-Verwendung.

Häufig verwendete Icons

home

home

search

search

settings

settings

person

person

mail

mail

notifications

notifications

favorite

favorite

star

star

download

download

upload

upload

delete

delete

edit

edit

check_circle

check_circle

error

error

info

info

warning

warning

menu

menu

close

close

arrow_forward

arrow_forward

arrow_back

arrow_back

expand_more

expand_more

chevron_right

chevron_right

analytics

analytics

dashboard

dashboard

Icon-Größen

star

text-base

star

text-xl

star

text-2xl

star

text-4xl

star

text-6xl

<span class="material-symbols-outlined text-4xl text-navy">home</span>

SVG & Grafiken

SVG-Elemente für skalierbare Grafiken und Dekorationen.

Dekorative Kreise

Dekorative Blur-Kreise

Gradient Backgrounds

Navy Gradient

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

Utilities & Helpers

Hilfsklassen für spezielle Styling-Anforderungen.

Data Label

Kategorie

Kleine, uppercase Labels für Daten-Kategorien.

<p class="data-label">Kategorie</p>

Text Balance

Diese Klasse sorgt für ausgeglichene Textumbrüche in Überschriften und kurzen Absätzen für bessere Lesbarkeit.

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

Box Shadows

shadow-soft
shadow-medium
shadow-strong

List Item Check

  • Automatisches Check-Icon
  • Material Symbols Integration
  • Konsistentes Styling
<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.