Contenuti leggibili, spazi ordinati e livelli visivi ben distinti.
Pink playfull - Base rosa e linee di supporto
Regole visive del sistema Pink Playful.
Il titolo usa un gradiente dal nero al magenta 100colpi. I sottotitoli usano un grigio a contrasto ridotto e le icone restano disegnate a mano.
Un sistema visivo chiaro e coerente.
Struttura essenziale, gerarchie definite e identità 100colpi.
Usato per CTA, stati attivi e informazioni importanti.
Icone disegnate a mano e CTA proprietarie sono riservate alle azioni principali.
Testo fisso a sinistra e card in scorrimento a destra.
Lo scorrimento verticale mostra una card alla volta.
Vai alle regole dei componentiBox per feature
Feature principale di Il Mio Salone
Icona SVG disegnata a mano usata come segnaposto.
Set di icone proprietarie
Otto icone con lo stesso stile grafico.
Otto icone condividono tratto, spessore e terminali, dalla poltrona alla fresa.
Physics Eruption CTA
Animazione riservata alla CTA primaria.
L’animazione viene usata una sola volta per pagina, sulla principale azione di conversione.
Palette colori
Colori usati nel sito, nel calendario e nelle icone degli utenti.
Una palette neutra con un accento magenta.
Ink
--color-inkInk muted
--color-ink-mutedPaper
--color-paperSurface
--color-surfaceLine
--color-line100colpi
--color-accentPalette secondaria · ApplicazioneColori per persone, categorie e dati.
Sei colori secondari per distinguere utenti, categorie e serie di dati. Gli stati di successo, attenzione ed errore usano colori semantici dedicati.
Sabbia
--color-app-sandMenta
--color-app-mintAmbra
--color-app-amberLavanda
--color-app-lavenderCielo
--color-app-skyArgilla
--color-app-clayTre font diversi.
General Sans per titoli e gerarchia. Switzer per testi e interfaccia. Geist Mono per token e dati tecnici.
Titolo principale
Testo descrittivo e contenuti dell’interfaccia.
Aa Bb 0123456789
--font-mono · 12 / 16Spaziatura e ritmo.
48121624324864Catalogo componenti
Componenti shadcn personalizzati con colori, icone e interazioni 100colpi.
Azioni
Gerarchia e statiGerarchia
Un’azione primaria e due azioni secondarie.
Stati di Conferma
Otto stati mostrano avanzamento, risultato ed eventuali errori.
Default
Hover
Focus
Premuto
Disabilitato
Caricamento
Successo
Errore
Campi
Stati predefiniti e messaggi di feedbackServizio
Ricerca e menu
Menu sopra e sotto il campoApertura sotto
Apertura sopra
Stato
Testo, icona e colore per ogni statoConfermatoIn attesaAnnullatoBozza
Interruttori
Stati attivo e inattivoFunzioni principali del prodotto.
01 / 05
Agenda
Vista giornaliera con orari e appuntamenti.
Clienti
Scheda cliente con preferenze e storico.
Team
Turni e appuntamenti del team.
Cassa
Servizi, importi e stato del pagamento.
Avvio
Configurazione iniziale dell’attività.
Configurazione iniziale in quattro passaggi.
Ogni passaggio raccoglie una scelta e indica quali impostazioni verranno configurate.
Passaggio 2 di 4
Che tipo di attività gestisci?
La scelta configura strumenti, servizi e terminologia dell’applicazione.