Asset e linee guida del brand
Usa asset e linee guida per rappresentare Cal.com in modo coerente su tutte le piattaforme e i punti di contatto.
Logo
Il logo Cal.com dovrebbe essere usato in tutti i riferimenti a Cal.com quando lo spazio lo consente.
Per layout stretti o griglie solo logo, l’icona Cal.com è un modo conciso per fare riferimento a Cal.com. Serve anche come favicon.
Wordmark
Il logo per ogni riferimento a Cal.com quando lo spazio lo consente.
Icona
Per layout stretti, griglie di loghi e la favicon.
Colori
La palette colori di Cal.com è una suite precisa di tonalità di grigio piatte. Usa questi colori in modo coerente in tutti i materiali del brand.
Clicca su un campione per copiarne il valore.
Tipografia
Il nostro carattere principale è Cal Sans di Mark Davis. È un sans serif geometrico per casi d’uso impegnativi. Mantiene il suo fascino anche da vicino, con lettere che appaiono sempre come gli utenti si aspettano. È una scelta straordinariamente calda per prodotti digitali e testo corrente. Ha più vivacità a parità di peso, ma resta trasparente, neutro e non invadente.
Il nostro carattere secondario è Cal Sans UI.
Scrivi nello specimen per provare le tue parole.
- Display
- 80 px, 700
- Titolo di sezione
- 56 px, 700
- Lead
- 24 px, 500
- Corpo
- 16 px, 400
- Didascalia
- 12 px, 500
Iconografia
Usiamo il set di icone Lucide. Lucide è un set di 1.701 icone.
Le icone UI hanno una forma lineare semplice ed esprimono funzionalità essenziali. Clicca su un’icona per copiarne l’SVG.
43 icons
coss.com UI
Una nuova e moderna libreria di componenti UI basata su Base UI. I mattoni per l’applicazione Cal.com e la piattaforma coss.com più ampia.
Accordion
Un insieme di pannelli comprimibili con titoli e contenuti.
Alert
Un riquadro per mostrare informazioni importanti.
Alert Dialog
Una finestra di dialogo che richiede una risposta dell’utente per continuare.
Avatar
Un elemento immagine con fallback per rappresentare l’utente.
Badge
Un badge o un componente che assomiglia a un badge.
Breadcrumb
Mostra il percorso alla risorsa corrente usando una gerarchia di link.
Calendar
Un componente selettore di data con supporto per intervalli e selezione multipla.
Tabs
Un componente per passare tra pannelli correlati nella stessa pagina.
Toggle Group
Fornisce uno stato condiviso a una serie di pulsanti toggle.