Guida di stile

Nomi delle classi "Client-First", variabili Webflow e controlli del Designer. Codice personalizzato solo per ciò che il Designer non è in grado di esprimere (:has, :checked, autofill, keyframes), inserito nell'intestazione della pagina e commentato.

Il ritmo verticale è dato dal riempimento all'interno della sezione, mai dal margine tra le sezioni. All'interno di una sezione, lo spazio è dato da un valore "flex" o da uno spazio della griglia, mai dal margine inferiore ("margin-bottom"). Ogni classe di testo deve azzerare i propri margini superiore e inferiore, altrimenti si intromettono i margini predefiniti di Webflow per i titoli e i paragrafi.

px solo per bordi e ombre, che sono elementi decorativi. rem per il testo, il padding e gli spazi, in modo che si adattino alla dimensione del carattere scelta dal lettore. ch per la misura di lettura (max-width-text è 60ch). Spaziatura tra le lettere in em, in modo che si adatti alla dimensione del testo.

Le dimensioni vengono impostate per ogni breakpoint nel Designer (desktop, tablet, cellulare), mai con la funzione clamp(). Ciò che si vede in un breakpoint è esattamente ciò che viene pubblicato.

Le classi di testo definiscono il tipo di carattere, la dimensione e il colore. L'allineamento e la larghezza dipendono dal contenitore: lo stesso elemento `heading-style-h1` è centrato nella pagina iniziale (all'interno di `section-header.is-center`) e allineato a sinistra nelle pagine "Contatti" e "Vendite".

Ogni regola è quasi nera, mai grigia; le regole grigie vengono interpretate come mancanti. L'opzione "border/subtle" è riservata esclusivamente ai bordi dei riquadri.

Una modifica specifica per una pagina viene trasformata in una classe combo, in modo che la classe condivisa rimanga invariata in ogni altro punto. Assegna alla classe combo un nome che ne descriva la funzione (is-line, is-full, is-tight) e rinominala quando tale funzione cambia.

Nessuna fase fissata, nessun allineamento allo scorrimento né spostamenti tramite rotellina. Motion applica lo stile solo ai contenuti che scorrono normalmente; lo sticky nativo CSS è consentito poiché è comunque il lettore a controllarlo.

Un paragrafo introduttivo, da usare con parsimonia quando una sezione richiede un ulteriore livello di enfasi.

Testo del corpo. Nero, mai in secondo piano o secondario. Abbinalo a `max-width-text (60ch)` per qualsiasi testo più lungo di una riga.

Dettagli secondari: ruoli associati a un nome di riferimento, descrizioni delle carte.

Pulsanti, tag, pillole, schede e voci di navigazione mantengono la propria classe, ma associano la dimensione del carattere, l'altezza della riga e la famiglia di caratteri agli stessi token ui/type. Non inserire mai una dimensione del carattere in formato grezzo.

I numeri di Geist Mono (ui-num, ui-mono, ui-deal_num), le iniziali dell'avatar a 11px, il simbolo dei tasti della tastiera (ui-key) e l'ora nella barra di stato con peso 600.

Dimensione unica ovunque: 16px, sia sugli schermi dei computer che su quelli dei telefoni. Il glifo assume il colore del proprio contenitore, quindi imposta il colore sull’elemento padre, mai sull’icona. Non incollare mai un file SVG in un’illustrazione: aggiungi prima l’icona alla cartella “Icone prodotto”, poi inseriscila.

I simboli “Orbit” e “Consolidate” mantengono le loro dimensioni originali. Le frecce tratteggiate, le stelle, i cursori, le barre ondulate e gli avatar fotografici non sono icone.

container-large 90rem (1440px), quindi i laptop con larghezza compresa tra 1440 e 1728px mantengono un margine laterale. container-medium 64rem, container-small 48rem. Le bande multimediali si trovano all’interno del contenitore, senza estendersi a tutto schermo; solo la banda hero si estende oltre i suoi confini.

1,5 rem su ciascun lato in ogni punto di rottura.

Rientro superiore e inferiore di ogni sezione. .is-hero imposta 3rem in alto in modo che l'immagine del prodotto sia visibile nella pagina di destinazione.

Titolo e introduzione di una sezione. Il selettore .is-tight riduce la distanza dal contenuto, mentre .is-center centra tutto ciò che si trova al suo interno (home hero).

In base alle misure su Figma: le schede disposte in gruppi da 5 e la riga del logo in gruppi da 6 non rientrano in una griglia a 12 colonne. Ciò che rimane costante sono le misure e la distanza tra le colonne di 1,5 rem, quindi le righe sono frazioni uguali. Gli hero a due colonne utilizzano una propria griglia (contact-hero: 1fr 1fr, spazio di 6 rem, impilati su tablet).

Desktop a partire da 992px (con 1440 e 1920 al di sopra), tablet fino a 991px, cellulare in modalità orizzontale fino a 767px, cellulare in modalità verticale fino a 479px. Il carattere e la spaziatura cambiano su tablet e cellulare.

Come inizia una sezione: una linea orizzontale che attraversa il contenitore, seguita dal titolo. Viene utilizzata in ogni sezione della home page dopo l’hero e nell’hero della pagina “Contatti e vendite”.

Solo la regola, quando il contenuto definisce autonomamente la propria spaziatura (CTA nel piè di pagina).

Gli elenchi sono separati da una sottile linea sottile nella parte superiore di ogni riga, mai solo da spazi vuoti.

Angoli acuti ovunque: schede, pannelli, campi, tessere con il logo. L’unica eccezione è il CTA principale, un “pill” completo (raggio di 999 px).

I tratti dei riquadri utilizzano il contorno (tutte e quattro le varianti lunghe), quindi non occupano spazio nell'impaginazione e vengono disegnati sopra gli elementi sottostanti. Qualsiasi elemento su un solo lato, come una riga orizzontale o una sottolineatura, utilizza il bordo.

Wrapper .signup-form_wrap, modulo con attributo data-folk-demo="contact", un campo input[type=email], un elemento .js-select i cui valori sono 1-2, 3-9, 10-49, 50-249, 250-999, 1000+. Lo script cerca l’azienda quando il campo email viene disattivato, quindi reindirizza gli utenti qualificati (10+) a /demo-calendly, quelli qualificati (3–9) a /book-a-folk-demo-2 e tutti gli altri al reindirizzamento per gli utenti non qualificati.

Indirizzo e-mail, numero di membri del team e pulsante in un'unica riga con bordi, 0,875 rem, altezza 3 rem.

Contattare l'ufficio vendite. Nessun riquadro, nessun sfondo, testo da 1,25 rem, sottolineatura nera da 1 px, altezza 4 rem. Il testo di suggerimento è il titolo (nessuna etichetta; ogni campo contiene un attributo `aria-label`). Il testo di suggerimento e il menu a tendina non selezionato sono in stile "text/secondary". Nessuna sottolineatura quando il campo è attivo: il cursore funge da indicatore e il menu a tendina mostra una linea da 2 px solo quando è attivo il focus da tastiera.

Pillola nera, larghezza intera, 1 rem, altezza 3,5 rem.

Campi ravvicinati (0,5 rem), pulsante e mazzetta di banconote (1 rem), blocco (2 rem) tra i due gruppi.

Un comando "select" nativo rispetto alle caselle di opzione: queste ultime richiedevano uno script ponte per raggiungere lo script di qualificazione, mentre il comando "select" non ne necessita. L'intestazione della pagina copre la funzione di compilazione automatica blu di Chrome e mantiene il carattere del campo sui valori suggeriti.

Su una sezione o una griglia. Il caricamento interagisce con la pagina (eroi); visualizza il gruppo quando entra nella schermata, scorrendo elemento per elemento man mano che entrano. Il parametro `data-reveal-at="60%"` ritarda la visualizzazione finché la parte superiore non raggiunge tale altezza.

up: dissolvenza e spostamento verso l'alto di 1rem. lines: un titolo che viene rivelato riga per riga. fade: solo opacità, utilizzata per i contenitori sottilissimi in modo che la regola appaia insieme alla sua sezione.

Un attributo invece di tre, come nei modelli standard.

I titoli “above-the-fold” utilizzano la visualizzazione basata esclusivamente su CSS, quindi vengono considerati immediatamente visualizzati (LCP). Non applicare mai un effetto di dissolvenza JavaScript a un contenitore che ospita l’H1.

Con animazioni ridotte, senza JavaScript o nel Designer, tutto è semplicemente visibile. Il motore è reveal.js, presente nel piè di pagina del sito; le modalità "solo home" sono contenute in reveal-extra.js.

La modifica di uno dei due elementi comporta l'aggiornamento di tutte le pagine. La variante "Base" del piè di pagina include il modulo CTA. Non rinominare mai .nav-items-wrapper, .nav-item-wrapper, .logo-context-menu o .sub-nav-item: gli script e i fogli CSS fanno riferimento a questi elementi.

La parete con il logo dell'azienda e le file di testimonianze, riutilizzate nelle vendite tramite contatto diretto.

Il modulo demo incorporato, già collegato allo script di qualificazione.

Le illustrazioni sono elementi Webflow codificati, non immagini: nitide a qualsiasi DPI, interattive e animabili. Utilizzano le proprie classi UI e i propri token e non prendono mai in prestito la spaziatura della pagina. Ciascuna illustrazione animata contiene un’istanza del proprio componente Code, quindi lo script va modificato una sola volta. Tutte le illustrazioni sono elencate alla pagina /illustrations; aggiungi lì ogni nuova illustrazione.

• Richiedi una demo
• Scopri quale piano fa al caso tuo