Zum Inhalt springen
GEDISA UI

Dokumentation

Foundation

Die grundlegenden Design Tokens für Farbe, Typografie, Abstände, Radien, Schatten und Layout in GEDISA UI.

Verwendung

GEDISA UI stellt seine Tokens über Tailwind-Utilities bereit. Verwende semantische Tokens wie text-gedisa-text-primary-900 oder bg-gedisa-bg-brand-solid statt fester Farbwerte, damit Oberflächen im Hell- und Dunkelmodus konsistent bleiben.

Semantische Tokens

Inhalt mit semantischen Tokens

Farben passen sich dem Farbschema an.

blade 
<div class="rounded-md border border-gedisa-border-primary bg-gedisa-bg-primary p-4 text-gedisa-text-primary-900 shadow-gedisa-xs">
    <p class="font-medium">Inhalt mit semantischen Tokens</p>
    <p class="mt-1 text-sm text-gedisa-text-tertiary-600">Farben passen sich dem Farbschema an.</p>
</div>

Farben

Alle Farbskalen reichen von 25 bis 950. Für Komponenten sind die semantischen text-, fg-, bg- und border-Tokens die bevorzugte Schnittstelle.

Brand

Tailwind: bg-gedisa-brand-{Stufe}

25
bg-gedisa-brand-25
50
bg-gedisa-brand-50
100
bg-gedisa-brand-100
200
bg-gedisa-brand-200
300
bg-gedisa-brand-300
400
bg-gedisa-brand-400
500
bg-gedisa-brand-500
600
bg-gedisa-brand-600
700
bg-gedisa-brand-700
800
bg-gedisa-brand-800
900
bg-gedisa-brand-900
950
bg-gedisa-brand-950

Brand secondary

Tailwind: bg-gedisa-brand-secondary-{Stufe}

25
bg-gedisa-brand-secondary-25
50
bg-gedisa-brand-secondary-50
100
bg-gedisa-brand-secondary-100
200
bg-gedisa-brand-secondary-200
300
bg-gedisa-brand-secondary-300
400
bg-gedisa-brand-secondary-400
500
bg-gedisa-brand-secondary-500
600
bg-gedisa-brand-secondary-600
700
bg-gedisa-brand-secondary-700
800
bg-gedisa-brand-secondary-800
900
bg-gedisa-brand-secondary-900
950
bg-gedisa-brand-secondary-950

Error

Tailwind: bg-gedisa-error-{Stufe}

25
bg-gedisa-error-25
50
bg-gedisa-error-50
100
bg-gedisa-error-100
200
bg-gedisa-error-200
300
bg-gedisa-error-300
400
bg-gedisa-error-400
500
bg-gedisa-error-500
600
bg-gedisa-error-600
700
bg-gedisa-error-700
800
bg-gedisa-error-800
900
bg-gedisa-error-900
950
bg-gedisa-error-950

Warning

Tailwind: bg-gedisa-warning-{Stufe}

25
bg-gedisa-warning-25
50
bg-gedisa-warning-50
100
bg-gedisa-warning-100
200
bg-gedisa-warning-200
300
bg-gedisa-warning-300
400
bg-gedisa-warning-400
500
bg-gedisa-warning-500
600
bg-gedisa-warning-600
700
bg-gedisa-warning-700
800
bg-gedisa-warning-800
900
bg-gedisa-warning-900
950
bg-gedisa-warning-950

Success

Tailwind: bg-gedisa-success-{Stufe}

25
bg-gedisa-success-25
50
bg-gedisa-success-50
100
bg-gedisa-success-100
200
bg-gedisa-success-200
300
bg-gedisa-success-300
400
bg-gedisa-success-400
500
bg-gedisa-success-500
600
bg-gedisa-success-600
700
bg-gedisa-success-700
800
bg-gedisa-success-800
900
bg-gedisa-success-900
950
bg-gedisa-success-950

Gray

Tailwind: bg-gedisa-gray-{Stufe}

25
bg-gedisa-gray-25
50
bg-gedisa-gray-50
100
bg-gedisa-gray-100
200
bg-gedisa-gray-200
300
bg-gedisa-gray-300
400
bg-gedisa-gray-400
500
bg-gedisa-gray-500
600
bg-gedisa-gray-600
700
bg-gedisa-gray-700
800
bg-gedisa-gray-800
900
bg-gedisa-gray-900
950
bg-gedisa-gray-950

Gray dark

Tailwind: bg-gedisa-gray-dark-{Stufe}

25
bg-gedisa-gray-dark-25
50
bg-gedisa-gray-dark-50
100
bg-gedisa-gray-dark-100
200
bg-gedisa-gray-dark-200
300
bg-gedisa-gray-dark-300
400
bg-gedisa-gray-dark-400
500
bg-gedisa-gray-dark-500
600
bg-gedisa-gray-dark-600
700
bg-gedisa-gray-dark-700
800
bg-gedisa-gray-dark-800
900
bg-gedisa-gray-dark-900
950
bg-gedisa-gray-dark-950

Gray dark alpha

Tailwind: bg-gedisa-gray-dark-alpha-{Stufe}

25
bg-gedisa-gray-dark-alpha-25
50
bg-gedisa-gray-dark-alpha-50
100
bg-gedisa-gray-dark-alpha-100
200
bg-gedisa-gray-dark-alpha-200
300
bg-gedisa-gray-dark-alpha-300
400
bg-gedisa-gray-dark-alpha-400
500
bg-gedisa-gray-dark-alpha-500
600
bg-gedisa-gray-dark-alpha-600
700
bg-gedisa-gray-dark-alpha-700
800
bg-gedisa-gray-dark-alpha-800
900
bg-gedisa-gray-dark-alpha-900
950
bg-gedisa-gray-dark-alpha-950

Gray blue

Tailwind: bg-gedisa-gray-blue-{Stufe}

25
bg-gedisa-gray-blue-25
50
bg-gedisa-gray-blue-50
100
bg-gedisa-gray-blue-100
200
bg-gedisa-gray-blue-200
300
bg-gedisa-gray-blue-300
400
bg-gedisa-gray-blue-400
500
bg-gedisa-gray-blue-500
600
bg-gedisa-gray-blue-600
700
bg-gedisa-gray-blue-700
800
bg-gedisa-gray-blue-800
900
bg-gedisa-gray-blue-900
950
bg-gedisa-gray-blue-950

Gray cool

Tailwind: bg-gedisa-gray-cool-{Stufe}

25
bg-gedisa-gray-cool-25
50
bg-gedisa-gray-cool-50
100
bg-gedisa-gray-cool-100
200
bg-gedisa-gray-cool-200
300
bg-gedisa-gray-cool-300
400
bg-gedisa-gray-cool-400
500
bg-gedisa-gray-cool-500
600
bg-gedisa-gray-cool-600
700
bg-gedisa-gray-cool-700
800
bg-gedisa-gray-cool-800
900
bg-gedisa-gray-cool-900
950
bg-gedisa-gray-cool-950

Gray modern

Tailwind: bg-gedisa-gray-modern-{Stufe}

25
bg-gedisa-gray-modern-25
50
bg-gedisa-gray-modern-50
100
bg-gedisa-gray-modern-100
200
bg-gedisa-gray-modern-200
300
bg-gedisa-gray-modern-300
400
bg-gedisa-gray-modern-400
500
bg-gedisa-gray-modern-500
600
bg-gedisa-gray-modern-600
700
bg-gedisa-gray-modern-700
800
bg-gedisa-gray-modern-800
900
bg-gedisa-gray-modern-900
950
bg-gedisa-gray-modern-950

Gray neutral

Tailwind: bg-gedisa-gray-neutral-{Stufe}

25
bg-gedisa-gray-neutral-25
50
bg-gedisa-gray-neutral-50
100
bg-gedisa-gray-neutral-100
200
bg-gedisa-gray-neutral-200
300
bg-gedisa-gray-neutral-300
400
bg-gedisa-gray-neutral-400
500
bg-gedisa-gray-neutral-500
600
bg-gedisa-gray-neutral-600
700
bg-gedisa-gray-neutral-700
800
bg-gedisa-gray-neutral-800
900
bg-gedisa-gray-neutral-900
950
bg-gedisa-gray-neutral-950

Gray iron

Tailwind: bg-gedisa-gray-iron-{Stufe}

25
bg-gedisa-gray-iron-25
50
bg-gedisa-gray-iron-50
100
bg-gedisa-gray-iron-100
200
bg-gedisa-gray-iron-200
300
bg-gedisa-gray-iron-300
400
bg-gedisa-gray-iron-400
500
bg-gedisa-gray-iron-500
600
bg-gedisa-gray-iron-600
700
bg-gedisa-gray-iron-700
800
bg-gedisa-gray-iron-800
900
bg-gedisa-gray-iron-900
950
bg-gedisa-gray-iron-950

Gray true

Tailwind: bg-gedisa-gray-true-{Stufe}

25
bg-gedisa-gray-true-25
50
bg-gedisa-gray-true-50
100
bg-gedisa-gray-true-100
200
bg-gedisa-gray-true-200
300
bg-gedisa-gray-true-300
400
bg-gedisa-gray-true-400
500
bg-gedisa-gray-true-500
600
bg-gedisa-gray-true-600
700
bg-gedisa-gray-true-700
800
bg-gedisa-gray-true-800
900
bg-gedisa-gray-true-900
950
bg-gedisa-gray-true-950

Gray warm

Tailwind: bg-gedisa-gray-warm-{Stufe}

25
bg-gedisa-gray-warm-25
50
bg-gedisa-gray-warm-50
100
bg-gedisa-gray-warm-100
200
bg-gedisa-gray-warm-200
300
bg-gedisa-gray-warm-300
400
bg-gedisa-gray-warm-400
500
bg-gedisa-gray-warm-500
600
bg-gedisa-gray-warm-600
700
bg-gedisa-gray-warm-700
800
bg-gedisa-gray-warm-800
900
bg-gedisa-gray-warm-900
950
bg-gedisa-gray-warm-950

Moss

Tailwind: bg-gedisa-moss-{Stufe}

25
bg-gedisa-moss-25
50
bg-gedisa-moss-50
100
bg-gedisa-moss-100
200
bg-gedisa-moss-200
300
bg-gedisa-moss-300
400
bg-gedisa-moss-400
500
bg-gedisa-moss-500
600
bg-gedisa-moss-600
700
bg-gedisa-moss-700
800
bg-gedisa-moss-800
900
bg-gedisa-moss-900
950
bg-gedisa-moss-950

Green light

Tailwind: bg-gedisa-green-light-{Stufe}

25
bg-gedisa-green-light-25
50
bg-gedisa-green-light-50
100
bg-gedisa-green-light-100
200
bg-gedisa-green-light-200
300
bg-gedisa-green-light-300
400
bg-gedisa-green-light-400
500
bg-gedisa-green-light-500
600
bg-gedisa-green-light-600
700
bg-gedisa-green-light-700
800
bg-gedisa-green-light-800
900
bg-gedisa-green-light-900
950
bg-gedisa-green-light-950

Green

Tailwind: bg-gedisa-green-{Stufe}

25
bg-gedisa-green-25
50
bg-gedisa-green-50
100
bg-gedisa-green-100
200
bg-gedisa-green-200
300
bg-gedisa-green-300
400
bg-gedisa-green-400
500
bg-gedisa-green-500
600
bg-gedisa-green-600
700
bg-gedisa-green-700
800
bg-gedisa-green-800
900
bg-gedisa-green-900
950
bg-gedisa-green-950

Teal

Tailwind: bg-gedisa-teal-{Stufe}

25
bg-gedisa-teal-25
50
bg-gedisa-teal-50
100
bg-gedisa-teal-100
200
bg-gedisa-teal-200
300
bg-gedisa-teal-300
400
bg-gedisa-teal-400
500
bg-gedisa-teal-500
600
bg-gedisa-teal-600
700
bg-gedisa-teal-700
800
bg-gedisa-teal-800
900
bg-gedisa-teal-900
950
bg-gedisa-teal-950

Cyan

Tailwind: bg-gedisa-cyan-{Stufe}

25
bg-gedisa-cyan-25
50
bg-gedisa-cyan-50
100
bg-gedisa-cyan-100
200
bg-gedisa-cyan-200
300
bg-gedisa-cyan-300
400
bg-gedisa-cyan-400
500
bg-gedisa-cyan-500
600
bg-gedisa-cyan-600
700
bg-gedisa-cyan-700
800
bg-gedisa-cyan-800
900
bg-gedisa-cyan-900
950
bg-gedisa-cyan-950

Blue light

Tailwind: bg-gedisa-blue-light-{Stufe}

25
bg-gedisa-blue-light-25
50
bg-gedisa-blue-light-50
100
bg-gedisa-blue-light-100
200
bg-gedisa-blue-light-200
300
bg-gedisa-blue-light-300
400
bg-gedisa-blue-light-400
500
bg-gedisa-blue-light-500
600
bg-gedisa-blue-light-600
700
bg-gedisa-blue-light-700
800
bg-gedisa-blue-light-800
900
bg-gedisa-blue-light-900
950
bg-gedisa-blue-light-950

Blue

Tailwind: bg-gedisa-blue-{Stufe}

25
bg-gedisa-blue-25
50
bg-gedisa-blue-50
100
bg-gedisa-blue-100
200
bg-gedisa-blue-200
300
bg-gedisa-blue-300
400
bg-gedisa-blue-400
500
bg-gedisa-blue-500
600
bg-gedisa-blue-600
700
bg-gedisa-blue-700
800
bg-gedisa-blue-800
900
bg-gedisa-blue-900
950
bg-gedisa-blue-950

Blue dark

Tailwind: bg-gedisa-blue-dark-{Stufe}

25
bg-gedisa-blue-dark-25
50
bg-gedisa-blue-dark-50
100
bg-gedisa-blue-dark-100
200
bg-gedisa-blue-dark-200
300
bg-gedisa-blue-dark-300
400
bg-gedisa-blue-dark-400
500
bg-gedisa-blue-dark-500
600
bg-gedisa-blue-dark-600
700
bg-gedisa-blue-dark-700
800
bg-gedisa-blue-dark-800
900
bg-gedisa-blue-dark-900
950
bg-gedisa-blue-dark-950

Indigo

Tailwind: bg-gedisa-indigo-{Stufe}

25
bg-gedisa-indigo-25
50
bg-gedisa-indigo-50
100
bg-gedisa-indigo-100
200
bg-gedisa-indigo-200
300
bg-gedisa-indigo-300
400
bg-gedisa-indigo-400
500
bg-gedisa-indigo-500
600
bg-gedisa-indigo-600
700
bg-gedisa-indigo-700
800
bg-gedisa-indigo-800
900
bg-gedisa-indigo-900
950
bg-gedisa-indigo-950

Violet

Tailwind: bg-gedisa-violet-{Stufe}

25
bg-gedisa-violet-25
50
bg-gedisa-violet-50
100
bg-gedisa-violet-100
200
bg-gedisa-violet-200
300
bg-gedisa-violet-300
400
bg-gedisa-violet-400
500
bg-gedisa-violet-500
600
bg-gedisa-violet-600
700
bg-gedisa-violet-700
800
bg-gedisa-violet-800
900
bg-gedisa-violet-900
950
bg-gedisa-violet-950

Purple

Tailwind: bg-gedisa-purple-{Stufe}

25
bg-gedisa-purple-25
50
bg-gedisa-purple-50
100
bg-gedisa-purple-100
200
bg-gedisa-purple-200
300
bg-gedisa-purple-300
400
bg-gedisa-purple-400
500
bg-gedisa-purple-500
600
bg-gedisa-purple-600
700
bg-gedisa-purple-700
800
bg-gedisa-purple-800
900
bg-gedisa-purple-900
950
bg-gedisa-purple-950

Fuchsia

Tailwind: bg-gedisa-fuchsia-{Stufe}

25
bg-gedisa-fuchsia-25
50
bg-gedisa-fuchsia-50
100
bg-gedisa-fuchsia-100
200
bg-gedisa-fuchsia-200
300
bg-gedisa-fuchsia-300
400
bg-gedisa-fuchsia-400
500
bg-gedisa-fuchsia-500
600
bg-gedisa-fuchsia-600
700
bg-gedisa-fuchsia-700
800
bg-gedisa-fuchsia-800
900
bg-gedisa-fuchsia-900
950
bg-gedisa-fuchsia-950

Pink

Tailwind: bg-gedisa-pink-{Stufe}

25
bg-gedisa-pink-25
50
bg-gedisa-pink-50
100
bg-gedisa-pink-100
200
bg-gedisa-pink-200
300
bg-gedisa-pink-300
400
bg-gedisa-pink-400
500
bg-gedisa-pink-500
600
bg-gedisa-pink-600
700
bg-gedisa-pink-700
800
bg-gedisa-pink-800
900
bg-gedisa-pink-900
950
bg-gedisa-pink-950

Rosé

Tailwind: bg-gedisa-rose-{Stufe}

25
bg-gedisa-rose-25
50
bg-gedisa-rose-50
100
bg-gedisa-rose-100
200
bg-gedisa-rose-200
300
bg-gedisa-rose-300
400
bg-gedisa-rose-400
500
bg-gedisa-rose-500
600
bg-gedisa-rose-600
700
bg-gedisa-rose-700
800
bg-gedisa-rose-800
900
bg-gedisa-rose-900
950
bg-gedisa-rose-950

Orange dark

Tailwind: bg-gedisa-orange-dark-{Stufe}

25
bg-gedisa-orange-dark-25
50
bg-gedisa-orange-dark-50
100
bg-gedisa-orange-dark-100
200
bg-gedisa-orange-dark-200
300
bg-gedisa-orange-dark-300
400
bg-gedisa-orange-dark-400
500
bg-gedisa-orange-dark-500
600
bg-gedisa-orange-dark-600
700
bg-gedisa-orange-dark-700
800
bg-gedisa-orange-dark-800
900
bg-gedisa-orange-dark-900
950
bg-gedisa-orange-dark-950

Orange

Tailwind: bg-gedisa-orange-{Stufe}

25
bg-gedisa-orange-25
50
bg-gedisa-orange-50
100
bg-gedisa-orange-100
200
bg-gedisa-orange-200
300
bg-gedisa-orange-300
400
bg-gedisa-orange-400
500
bg-gedisa-orange-500
600
bg-gedisa-orange-600
700
bg-gedisa-orange-700
800
bg-gedisa-orange-800
900
bg-gedisa-orange-900
950
bg-gedisa-orange-950

Yellow

Tailwind: bg-gedisa-yellow-{Stufe}

25
bg-gedisa-yellow-25
50
bg-gedisa-yellow-50
100
bg-gedisa-yellow-100
200
bg-gedisa-yellow-200
300
bg-gedisa-yellow-300
400
bg-gedisa-yellow-400
500
bg-gedisa-yellow-500
600
bg-gedisa-yellow-600
700
bg-gedisa-yellow-700
800
bg-gedisa-yellow-800
900
bg-gedisa-yellow-900
950
bg-gedisa-yellow-950

Text

text-gedisa-text-primary-900 --color-gedisa-text-primary-900
text-gedisa-text-secondary-700 --color-gedisa-text-secondary-700
text-gedisa-text-tertiary-600 --color-gedisa-text-tertiary-600
text-gedisa-text-quaternary-500 --color-gedisa-text-quaternary-500
text-gedisa-text-brand-primary-900 --color-gedisa-text-brand-primary-900
text-gedisa-text-error-primary-600 --color-gedisa-text-error-primary-600
text-gedisa-text-warning-primary-600 --color-gedisa-text-warning-primary-600
text-gedisa-text-success-primary-600 --color-gedisa-text-success-primary-600

Foreground

text-gedisa-fg-primary-900 --color-gedisa-fg-primary-900
text-gedisa-fg-secondary-700 --color-gedisa-fg-secondary-700
text-gedisa-fg-tertiary-600 --color-gedisa-fg-tertiary-600
text-gedisa-fg-quaternary-400 --color-gedisa-fg-quaternary-400
text-gedisa-fg-brand-primary-600 --color-gedisa-fg-brand-primary-600
text-gedisa-fg-error-primary --color-gedisa-fg-error-primary
text-gedisa-fg-warning-primary --color-gedisa-fg-warning-primary
text-gedisa-fg-success-primary --color-gedisa-fg-success-primary

Background

bg-gedisa-bg-primary --color-gedisa-bg-primary
bg-gedisa-bg-primary-alt --color-gedisa-bg-primary-alt
bg-gedisa-bg-secondary --color-gedisa-bg-secondary
bg-gedisa-bg-tertiary --color-gedisa-bg-tertiary
bg-gedisa-bg-quaternary --color-gedisa-bg-quaternary
bg-gedisa-bg-brand-primary --color-gedisa-bg-brand-primary
bg-gedisa-bg-error-primary --color-gedisa-bg-error-primary
bg-gedisa-bg-warning-primary --color-gedisa-bg-warning-primary
bg-gedisa-bg-success-primary --color-gedisa-bg-success-primary

Borders & focus

border-gedisa-border-primary --color-gedisa-border-primary
border-gedisa-border-secondary --color-gedisa-border-secondary
border-gedisa-border-tertiary --color-gedisa-border-tertiary
border-gedisa-border-brand --color-gedisa-border-brand
border-gedisa-border-error --color-gedisa-border-error
ring-gedisa-focus-ring --color-gedisa-focus-ring
ring-gedisa-focus-ring-error --color-gedisa-focus-ring-error
Eigenschaft
Werte
Default
text-gedisa-text-primary-900 primärer Inhalt hell: #121926; dunkel: #F7F7F7
text-gedisa-text-secondary-700 untergeordneter Inhalt hell: #364152; dunkel: #CECFD2
text-gedisa-text-tertiary-600 ergänzende Informationen hell: #4B5565; dunkel: #94979C
bg-gedisa-bg-primary Standardfläche hell: #FFFFFF; dunkel: #0C0E12
border-gedisa-border-secondary dezente Trennlinie hell: #E3E8EF; dunkel: #22262F

Typografie

Product verwendet Inter für Display und Fließtext. Marketing verwendet Ubuntu. Die Textskala reicht von text-xs bis text-xl, die Display-Skala von display-xs bis display-2xl.

Product display

Product body text für Anwendungen und Oberflächen.

Marketing display

Marketing body text für kommunikative Inhalte.

Eigenschaft
Werte
Default
text-gedisa-text-xs 0.75rem / 1.125rem kleine Beschriftungen
text-gedisa-text-md 1rem / 1.5rem Standard-Fließtext
text-gedisa-display-sm 1.875rem / 2.375rem Bereichsüberschriften
text-gedisa-display-xl 3.75rem / 4.5rem prägnante Seitentitel

Abstände und Layout

Die Spacing-Skala basiert auf 0.25rem. Nutze die Tailwind-Schritte für Abstände und die benannten GEDISA-Maße für Container, Inhaltsbreiten und responsives Padding.

w-1
w-2
w-3
w-4
w-6
w-8
Eigenschaft
Werte
Default
spacing-gedisa-1 0.25rem enger Abstand
spacing-gedisa-4 1rem Standard-Abstand
spacing-gedisa-8 2rem Bereichsabstand
spacing-gedisa-container-padding-mobile 1rem mobiles Seiten-Padding
spacing-gedisa-container-padding-desktop 2rem Desktop-Seiten-Padding
width-gedisa-paragraph-max 45rem maximale Absatzbreite

Radien und Schatten

Die Radius-Skala reicht von none bis full. Schatten sind sparsam für Erhebung und Fokus einzusetzen; die Tokens wechseln im Dunkelmodus auf zurückhaltende Werte.

rounded-xs
rounded-md
rounded-xl
shadow-gedisa-xs
shadow-md
rounded-full