Merkmiddelen en richtlijnen
Gebruik merkmiddelen en richtlijnen om Cal.com consistent te presenteren op alle platforms en contactmomenten.
Logo
Het Cal.com-logo moet worden gebruikt in alle verwijzingen naar Cal.com, waar de ruimte het toelaat.
Voor krappe layouts of rasters met alleen logo's is het Cal.com-icoon een compacte manier om naar Cal.com te verwijzen. Het dient ook als favicon.
Woordmerk
Het logo voor elke verwijzing naar Cal.com waar de ruimte het toelaat.
Icoon
Voor krappe layouts, logorasters en de favicon.
Kleuren
Het kleurenpalet van Cal.com is een nauwkeurige reeks vlakke grijstinten. Gebruik deze kleuren consistent in al het merkmateriaal.
Klik op een kleurvlak om de waarde te kopiëren.
Typografie
Ons primaire lettertype is Cal Sans van Mark Davis. Het is een geometrisch schreefloos lettertype voor veeleisende toepassingen. Het blijft aantrekkelijk van dichtbij, met letters die er altijd uitzien zoals gebruikers verwachten. Het is een uniek warme keuze voor digitale producten en lopende tekst. Het heeft meer schwung per gram, maar voelt toch transparant, neutraal en onbevooroordeeld.
Ons secundaire lettertype is Cal Sans UI.
Typ in het specimen om je eigen woorden te proberen.
- Display
- 80 px, 700
- Sectietitel
- 56 px, 700
- Intro
- 24 px, 500
- Body
- 16 px, 400
- Bijschrift
- 12 px, 500
Iconografie
We gebruiken de Lucide-iconenset. Lucide is een iconenset met 1.701 iconen.
UI-iconen hebben een eenvoudige lijnvorm en drukken essentiële functionaliteit uit. Klik op een icoon om de SVG te kopiëren.
43 icons
coss.com UI
Een nieuwe, moderne UI-componentenbibliotheek gebouwd op Base UI. De bouwstenen voor de Cal.com-applicatie en het bredere coss.com-platform.
Accordion
Een set inklapbare panelen met koppen en inhoud.
Alert
Een callout om belangrijke informatie weer te geven.
Alert Dialog
Een dialoogvenster dat een reactie van de gebruiker vereist om door te gaan.
Avatar
Een afbeeldingselement met een fallback om de gebruiker weer te geven.
Badge
Een badge of een component dat op een badge lijkt.
Breadcrumb
Toont het pad naar de huidige resource met een hiërarchie van links.
Agenda
Een datumkiezercomponent met ondersteuning voor bereikselectie en multiselectie.
Tabs
Een component om te schakelen tussen gerelateerde panelen op dezelfde pagina.
Toggle Group
Biedt een gedeelde status aan een reeks toggle-knoppen.