Skip to content

Components

Components sind ein zentrales Systemelement von Celestia. Wir bauen unsere Interfaces aus klar definierten Bausteinen, die wiederverwendbar, dokumentiert und teamweit konsistent sind.

  • Atoms – Primitive UI-Elemente wie Button, Input, Label und Icon
  • Molecules – Kompositionen aus Atoms, z.B. Form Field oder Card
  • Organisms – Grössere Bereiche wie Header, Hero oder Navigation

Jede Komponente dokumentieren wir mit denselben vier Perspektiven:

  • States – Alle relevanten Zustände
  • Variants – Stil- und Grössen-Varianten
  • Accessibility – Tastatur, Screenreader, Kontrast und Fokus
  • Usage – Einsatz, Grenzen und typische Muster

Components verwenden ausschliesslich Semantic Tokens. Brand-Tokens (Primitive) sind in Komponenten verboten, damit White-Label rein über Semantic Tokens funktioniert.