Markenmaterialien und Richtlinien
Nutze Materialien und Richtlinien, um Cal.com auf allen Plattformen und Kontaktpunkten einheitlich darzustellen.
Logo
Das Cal.com-Logo sollte in allen Verweisen auf Cal.com verwendet werden, sofern der Platz es zulässt.
Für enge Layouts oder reine Logo-Raster ist das Cal.com-Icon eine kompakte Möglichkeit, auf Cal.com zu verweisen. Es dient außerdem als Favicon.
Wortmarke
Das Logo für jeden Verweis auf Cal.com, sofern der Platz es zulässt.
Icon
Für enge Layouts, Logo-Raster und das Favicon.
Farben
Die Farbpalette von Cal.com ist eine präzise Auswahl flacher Grautöne. Verwende diese Farben konsequent in allen Markenmaterialien.
Klicke auf ein Farbfeld, um den Wert zu kopieren.
Typografie
Unsere primäre Schrift ist Cal Sans von Mark Davis. Sie ist eine geometrische Sans-Serif-Schrift für anspruchsvolle Anwendungsfälle. Sie bleibt auch aus der Nähe ansprechend, und ihre Buchstaben sehen immer so aus, wie Nutzer es erwarten. Sie ist eine einzigartig warme Wahl für digitale Produkte und Fließtext. Sie hat mehr Schwung pro Buchstabe, wirkt aber trotzdem transparent, neutral und unaufdringlich.
Unsere sekundäre Schrift ist Cal Sans UI.
Tippe in das Schriftmuster, um eigene Wörter auszuprobieren.
- Display
- 80 px, 700
- Abschnittstitel
- 56 px, 700
- Lead
- 24 px, 500
- Text
- 16 px, 400
- Bildunterschrift
- 12 px, 500
Ikonografie
Wir verwenden das Lucide-Icon-Set. Lucide ist ein Icon-Set mit 1.701 Icons.
UI-Icons haben eine einfache Linienform und drücken zentrale Funktionen aus. Klicke auf ein Icon, um sein SVG zu kopieren.
43 icons
coss.com UI
Eine neue, moderne UI-Komponentenbibliothek auf Basis von Base UI. Die Bausteine für die Cal.com-Anwendung und die breitere coss.com-Plattform.
Akkordeon
Eine Reihe einklappbarer Panels mit Überschriften und Inhalt.
Hinweis
Ein hervorgehobener Hinweis zur Anzeige wichtiger Informationen.
Warndialog
Ein Dialog, der eine Nutzerantwort erfordert, um fortzufahren.
Avatar
Ein Bildelement mit Fallback zur Darstellung des Nutzers.
Badge
Ein Badge oder eine Komponente, die wie ein Badge aussieht.
Breadcrumb
Zeigt den Pfad zur aktuellen Ressource über eine Link-Hierarchie an.
Kalender
Eine Datumsauswahl-Komponente mit Unterstützung für Zeiträume und Mehrfachauswahl.
Tabs
Eine Komponente zum Wechseln zwischen zusammengehörigen Panels auf derselben Seite.
Toggle-Gruppe
Stellt einer Reihe von Toggle-Buttons einen gemeinsamen Zustand bereit.