Kinky Connection APS · sito
La scala dei caratteri, i colori e i componenti della home, composti con gli stessi componenti e lo stesso tema: se qui cambia qualcosa, cambia anche lì.
Tipografia
Un carattere solo, quello di sistema: il brand non ha ancora scelto una famiglia, e questo è il ripiego dichiarato. Quattro corpi e non di più: dentro lo stesso corpo la gerarchia la fanno il peso e il colore. Nel tema di Tailwind (src/styles/global.css) la scala è azzerata, quindi una classe fuori da questi quattro non produce niente.
Si entra per il kink.
Si resta per le persone.
Com'è la prima volta
text-3xl font-bold · peso01
text-3xl font-bold leading-none tabular-nums · peso La sequenza dei passi.Parla con un referente
text-base font-bold · peso I nomi: passi, regole, incontri, eventi.Sabato 20 set, 18:30
text-base font-semibold tabular-nums · peso Data, ora, luogo: quello che non si può non leggere. Anche bottoni e link.Si comincia sempre da un incontro dal vivo, Munch o TNG: un aperitivo insieme, niente di più.
text-base · peso Corpo, attacco, sottotitoli e descrizioni. L'attacco resta in nero, il resto va in grigio.Informazioni
text-sm font-bold · peso Le intestazioni del piede.Ogni mese · under 36
text-sm · peso Cadenze, dettagli, voci del menu, testi del piede, etichette di condizione.Cosa succede davvero
text-sm font-mono uppercase tracking-wider · peso Il nome della sezione, sopra il titolo.Colori
I primi tre e gli ultimi due vengono dal brand, attraverso src/styles/brand.css. Filo, fondo alterno e il suo grigio di testo sono ripieghi del sito, in src/styles/global.css. Nel tema di Tailwind ogni colore si chiama come la sua variabile: text-ink-2, bg-fondo-alterno, border-filo.
Una volta per superficie: «le persone» nell'hero, e il fondo della sezione delle regole.
Tutto il testo, i bottoni, i filetti forti sopra passi e regole.
Il fondo di tutto, e il testo sulla sezione rossa.
Testo secondario, note ed etichette sul bianco.
I bordi di schede e liste, e i separatori.
Una sezione sì e una no, e il piede.
Il grigio testo sulle sezioni grigie, dove il primo non regge il contrasto.
Errori. Nella home non c'è ancora.
Conferme. Nella home non c'è ancora.
Componenti
Gli stessi pezzi della home, presi da src/components. Premi Tab per vedere il contorno di chi naviga da tastiera.
Bottoni · <Bottone>
Pieno per l'azione principale, a contorno per la seconda. Sempre in nero: il rosso della pagina è già impegnato. Al passaggio il bordo si raddoppia.
Link ed etichette · <Link>, <Etichetta>
Il link porta da un'altra parte. L'etichetta dice una condizione e non si clicca; tratteggiata quando la cosa è ancora da fissare.
Testata · <Testata>
Resta fissa in cima mentre scorri. La voce della sezione in cui sei è sottolineata, qui «Eventi». Ogni voce è alta 44px, per il pollice. Il logo sta su un fondo bianco arrotondato, perché gli anelli si intrecciano con dei tratti bianchi.
Intestazione di sezione · <IntestazioneSezione>
Prossimi eventi
Cosa sono, ogni quanto tornano e quando c'è il prossimo.
Passi · <Passi>, <Passo>
Ti chiediamo solo chi sei e come ci hai trovati.
Il Munch comincia sempre da un tavolo e una pizza.
Regola · <Regole>, <Regola>
Ogni contatto ha un sì esplicito, sempre. Vale prima di tutto il resto, in ogni attività.
Scheda incontro · <Incontri>, <SchedaIncontro>
Fondi
Una sezione sì e una no sul fondo alterno. Il rosso pieno è uno solo per pagina: nella home sono le regole. Sul rosso tutto diventa bianco, perché il nero non regge il contrasto. Il brand, per ora, dice che l'accento non fa da fondo a grandi aree: è una scelta del sito, da portare nel brand.
Fondo alterno · <Sezione fondo="grigio">
Si comincia sempre da un incontro dal vivo, Munch o TNG.
Fondo rosso · <Sezione fondo="rosso">
Ogni contatto ha un sì esplicito, sempre.
A ogni evento un socio referente interviene subito.
Illustrazioni
Stampa risograph a due soli inchiostri, nero e rosso anello, disegnata a mano: tratto di spessore variabile, tratteggio al posto delle mezzetinte, carta bianca nuda. Il rosso non è l'ombra del nero, è una cosa rossa col suo contorno sopra. Nessuna persona e nessuna allusione: chi c'era si vede dalle cose che ha lasciato. Il rosso cade una volta sola, e cade sulla seconda metà dell'immagine, come nel logo e nel payoff.
Il brand, oggi, non ha una famiglia di immagini: in branding/brand/00-in-breve.md è una
decisione aperta. Questa è una proposta nata qui, sulla prima superficie vera, e va portata nel brand o lasciata
cadere.
Quando Per le date: annunci, agenda, «i prossimi incontri».
A che ora Per gli orari. Il quadrante è nudo, così vale per qualunque ora.
Dove Per il luogo. Nessun nome di strada: la mappa non dice un indirizzo vero.
Il giro di presentazioni Per i gruppi di parola e l'accoglienza. La sedia rossa è il posto che aspetta.
I workshop Per le attività tecniche. La corda è solo corda, e non lega niente.
Il munch Il soggetto da cui è nata tutta la serie: per la home e per gli incontri conviviali.
Le tavole arrivano come fotografia di un foglio stampato, con il piano grigio attorno e un filetto disegnato a mano lungo il bordo. Qui sono rifilate dentro il filetto: resta solo il disegno, sul bianco della pagina. Il rosso stampato tira un po' più chiaro del rosso del brand, e la cosa è ancora da decidere.