/* GENERATO da scripts/build-brand.mjs da brand/tokens.css della libreria. Non modificare a mano: modificare la fonte. */ /* ────────────────────────────────────────────────────────────────────────── cosmetiFULL, i token di marca. FONTE UNICA. Ogni app, sito, pagina ed email consuma QUESTO file. Non si ricopiano i valori altrove: e' la stessa regola della zona neutra che vale per la conoscenza (standard di architettura, paragrafo 1). Se il lime cambia, cambia qui e lo prendono tutti. Fissato il 2026-08-06, estraendo i valori VERI da tre sorgenti gia' in produzione (sito cosmetifull.com, landing LabelCheck, app LabelCheck) e riconciliando i tre dialetti in uno. Il manuale che spiega il PERCHE' di ognuno: brand-book.md, accanto a questo. ────────────────────────────────────────────────────────────────────────── */ :root { /* ---- L'ANCORA ------------------------------------------------------------ Il nero caldo era gia' IDENTICO in tutte e tre le sorgenti: e' l'unico valore su cui il marchio non ha mai derivato. Non si tocca. */ --cf-nero: #17161b; --cf-nero-2: #211f27; /* superfici scure alternate */ --cf-nero-linea: #33313a; /* filetti su fondo scuro */ --cf-nero-bordo: #c0c0bf; /* il BORDO di una scheda in evidenza sul CHIARO: piu' marcato del filetto normale (--cf-linea) e molto meno del nero pieno. Non e' il gemello di --cf-nero-linea, che vive sul buio: e' il grigio che serve quando una scheda deve staccarsi dalle altre senza gridare. Prima: `border-brand/30|40|50`, quattordici volte, tre intensita' per un ruolo. Stesso rapporto del resto della casa: 20,6% fra --cf-fondo-2 e --cf-nero. */ /* ---- SUPERFICI CHIARE --------------------------------------------------- */ --cf-fondo: #f4f4f2; /* il fondo pagina */ --cf-fondo-2: #ecece9; /* sezione alternata */ --cf-carta: #ffffff; /* schede e riquadri */ --cf-linea: #e4e3df; /* filetti su fondo chiaro */ /* ---- TESTO -------------------------------------------------------------- */ --cf-testo: #3c4048; /* corpo */ --cf-testo-muto: #666b73; /* didascalie, dati secondari */ /* ---- IL SEGNALE: una famiglia sola, cinque ruoli ------------------------- Il lime e' l'unico accento. Non esiste un secondo colore di marca. I valori NON sono colori diversi: sono lo stesso segnale declinato per fondo, perche' un lime chiaro su fondo chiaro non si legge. Il 06-08-2026 ne sono stati riconciliati TRE quasi identici che vivevano in tre app (#d4f53c sito, #c6f24a LabelCheck e FormulaArchive, #c9f24e ExpertDesk): vince quello del sito, che e' il riferimento. */ --cf-lime: #d4f53c; /* pieno: riempimenti, pulsanti, accenti su fondo SCURO */ --cf-lime-segnale: #7d9400; /* il segno decorativo su fondo chiaro: filetti, punti, anello di fuoco */ --cf-lime-testo: #5b7205; /* testo e icone su fondo CHIARO. E' l'unico lime che passa AA su TUTTE e cinque le superfici chiare: 5,45 su carta, 4,95 su fondo, 4,60 su fondo-2, 4,60 su lime-lieve, 4,79 su lime-velo. Era #5d7405 con scritto 5,07: quel numero valeva sulla vecchia carta di LabelCheck (#fbfaf6), che non e' piu' un colore di marca, e sul fondo alternato e sul velo lime scendeva a 4,47, cioe' sotto lo standard. Corretto il 06-08-2026 ricalcolando sui valori veri. */ --cf-lime-lieve: #e6f3a3; /* velatura per etichette e fasce */ --cf-lime-velo: #eef4cd; /* velatura piu' tenue: fondo di una scheda o di un banner */ --cf-lime-linea: #d0d9a4; /* il BORDO di una scheda ACCESA (scelta, attiva, consigliata). Stessa ragione e stesso rapporto dei bordi di stato: sta al 20,6% fra il velo e il pieno, perche' una scheda accesa col bordo del velo non si distingue da una spenta. Prima si componeva a mano con l'opacita' (`border-accent/20|30|40`, diciassette volte in LabelCheck, tre intensita' per un ruolo). */ /* ---- GRAVITA' REGOLATORIA (solo le app che fanno controlli) -------------- Non sono colori di marca: sono il linguaggio di un referto (LabelCheck, PIFBuilder, FormulaArchive). Stanno qui perche' fino al 06-08-2026 esistevano in TRE copie identiche, ed e' esattamente cio' che la regola "lo stesso fatto non in due forme" vieta. Il verde di conformita' e' volutamente diverso dal lime: un semaforo non deve mai essere scambiato per un accento di marca. Un'app che non emette referti NON li importa. */ --cf-blocco: #b42318; /* bloccante */ --cf-blocco-velo: #fbe9e9; /* velatura sotto un messaggio d'errore */ --cf-blocco-linea: #eac6bf; /* il BORDO di un riquadro d'errore sul chiaro: sta fra il velo e il pieno, e serve perche' un riquadro d'errore col bordo del velo non si distingue dal fondo. Entrato in fonte il 06-08-2026 col suo valore vero, preso da ExpertDesk: era l'ultimo colore a mano rimasto in un blocco di tema. */ --cf-rivedere: #92520a; /* da rivedere (ambra scurita per passare AA sul chiaro) */ --cf-rivedere-velo: #fbefd9; --cf-rivedere-linea:#e5cfae; --cf-nota: #33614a; /* nota */ --cf-nota-velo: #e7f0e9; --cf-nota-linea: #c2d3c8; /* ⚠️ LE DUE RIGHE `-linea` QUI SOPRA SONO ARRIVATE IL 27-08-2026, e la loro assenza era la CAUSA di un difetto, non una mancanza estetica. La famiglia degli stati aveva `-linea` per UNO stato su tre (`blocco`). Chi doveva bordare un riquadro «da rivedere» o «nota» non trovava niente e lo componeva a mano con l'opacita': contati in LabelCheck il 27-08, `border-review/20|30|40` e `border-note/30|40` per venticinque volte, in tre intensita' diverse per lo stesso ruolo. Un riquadro d'errore col bordo del velo non si distingue dal fondo: e' la stessa ragione per cui `--cf-blocco-linea` era nato, applicata agli altri due. ⚠️ I VALORI NON SONO SCELTI A OCCHIO: sono ricavati dal rapporto dell'unico token della famiglia che gia' esisteva. `--cf-blocco-linea` sta al 20,6% del cammino fra il suo velo e il suo pieno (misurato canale per canale: 0,239 / 0,177 / 0,201); questi due stanno alla stessa distanza fra i loro. Estendere una famiglia col rapporto che la famiglia gia' dichiara e' l'unico modo di aggiungere un colore senza aggiungere una decisione. */ --cf-conforme: #2f7d5b; /* punteggio alto, indicatore positivo. ATTENZIONE, misurato: 4,99 su carta e 4,53 su fondo, ma 4,22 su fondo-2: come TESTO piccolo sul fondo alternato non passa AA. Va usato come riempimento o su carta, non come testo minuto ovunque. */ /* ---- CARATTERI ---------------------------------------------------------- ⚠️ I 349 GLIFI SONO LA SOMMA DI DUE TAGLI, e per dieci giorni in questa cartella ce n'era uno solo. Fino al 17-08-2026 `brand/fonts/` conteneva solo il taglio `latin` (217 glifi Poppins, 225 Space Mono): i diacritici rumeni promessi qui sotto stavano nel taglio `latin-ext`, che viveva solo dentro il repo di LabelCheck. Chi consumava QUESTA cartella credendo alla riga qui sotto si portava a casa dei caratteri senza ă, ș ne' ț: e' successo alla console del backbone, che elenca clienti rumeni per mestiere. Adesso i due tagli ci sono tutti e due, e insieme fanno i 349. Chi li usa deve dichiarare l'`unicode-range` di ognuno: senza, il browser non sa quale dei due chiedere e il secondo non lo scarica mai. COSA COPRONO DAVVERO, contato sui woff2 spediti il 06-08-2026 (349 glifi): Poppins copre tutte le lingue LATINE che servono, diacritici rumeni, lettoni, lituani, estoni, croati, cechi, polacchi e ungheresi compresi. NON copre tre cose, e vanno scritte perche' la prima versione di questo file affermava il contrario: - il cirillico (bulgaro), - il greco, - la h-sbarrata del maltese (U+0126 e U+0127). Le prime due si sapevano. La terza no: e' uscita solo aprendo i file e contando i glifi, dopo che qui c'era gia' scritto "verificato". Space Mono ha gli stessi tre buchi. Percio' la pila porta Inter come RIPIEGO DICHIARATO: il browser ci arriva da solo, glifo per glifo, solo dove Poppins non copre. Un'app che non serve quelle lingue puo' non caricare Inter: la pila scende a system-ui e non succede niente. Un'app che le serve DEVE caricarlo, e ora glielo impone un controllo (labellens/scripts/check-fonts.mjs, nel predeploy), non una frase. Generica NON e' qui apposta: ha 286 glifi e NON ha le lettere rumene (mancano a-breve, s-virgola, t-virgola). Vive solo dentro il file del logo, congelata in tracciati. Non si usa come carattere di testo. */ --cf-sans: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif; --cf-mono: 'Space Mono', ui-monospace, monospace; /* ---- IL TEMA SCURO (entrato qui il 06-08-2026) --------------------------- Fino a poche ore prima viveva in quattro copie scritte a mano, e le copie avevano gia' cominciato a divergere. Portarlo qui ha costretto a misurare, e la misura ha detto che i due valori in lite erano SBAGLIATI TUTTI E DUE: - #6e8011 (LabelCheck, PIFBuilder) portava scritto "white text legible": col bianco pieno sta a 4,41:1, sotto lo standard, e con l'avorio caldo dell'interfaccia scende a 3,83:1; - #82981a (FormulaArchive) era stato schiarito apposta per funzionare come TESTO su fondo scuro, e li' funziona (4,53:1), ma come riempimento con del testo chiaro sopra crolla a 2,83:1. Non era un disaccordo: erano due RUOLI diversi che si contendevano un nome solo, esattamente come era gia' successo al lime sul chiaro. Quindi qui i ruoli sono due, separati e misurati. */ --cf-scuro-fondo: #16151a; /* carbone caldo, il fondo pagina */ --cf-scuro-fondo-2: #1f1d23; /* sezione alternata */ --cf-scuro-carta: #221f27; /* schede e riquadri */ --cf-scuro-linea: #322f38; /* filetti */ --cf-scuro-nero-bordo: #4a484b; /* il bordo della scheda in evidenza, sul buio: il gemello di --cf-nero-bordo, calcolato con lo stesso rapporto */ --cf-scuro-testo: #f1efe7; /* avorio caldo, il corpo */ --cf-scuro-testo-muto: #a39d92; /* didascalie e dati secondari */ /* RUOLO 1, riempimento con testo CHIARO sopra: 5,19:1 col bianco pieno e 4,51:1 con l'avorio dell'interfaccia. E' il valore piu' chiaro che regge ancora il testo: cercato, non scelto a occhio. */ --cf-scuro-marchio: #64740f; /* I due gradini vanno verso il BUIO, non verso la luce. Sul carbone la tentazione e' schiarire al passaggio del mouse, ed e' quello che facevano tutte e tre le app: i loro gradini stavano a 3,50 e 2,95 col bianco sopra, cioe' il pulsante diventava illeggibile proprio mentre ci passavi sopra. Verso il buio il testo resta (6,32 e 7,54) e lo stacco dal riposo si vede lo stesso. */ --cf-scuro-marchio-2: #58660d; /* passaggio del mouse */ --cf-scuro-marchio-3: #4d5a0c; /* premuto */ /* RUOLO 2, l'accento e il TESTO sul carbone: da 8,87 a 10,94 sulle quattro superfici scure. E' il lime schiarito, non l'oliva. */ --cf-scuro-lime: #b6d62f; --cf-scuro-velo: #272a12; /* velatura lime su scuro */ --cf-scuro-lime-linea: #343911; /* il bordo della scheda accesa, sul buio */ --cf-scuro-velo-2: #2c3a0e; /* velatura piu' carica */ /* La CTA primaria non usa nessuno dei due: sul carbone resta il lime PIENO di marca (--cf-lime) col testo quasi-nero sopra, 14,50:1. E' la stessa identica coppia del tema chiaro, ed e' il motivo per cui il marchio si riconosce passando da un tema all'altro. */ /* Gravita' sul carbone: gli stessi semafori, schiariti per restare leggibili. */ --cf-scuro-blocco: #ef6f63; --cf-scuro-blocco-velo: #381e1c; --cf-scuro-blocco-linea: #5e2f2b; --cf-scuro-rivedere: #dca44e; --cf-scuro-rivedere-velo:#322715; --cf-scuro-rivedere-linea:#554121; --cf-scuro-nota: #6cae82; --cf-scuro-nota-velo: #1b2a21; --cf-scuro-nota-linea: #2c4535; /* Le tre `-linea` del buio, con lo stesso rapporto delle chiare (20,6% fra velo e pieno). Sul chiaro ne mancavano due; qui ne mancavano tre, cioe' la famiglia scura non ne aveva nessuna: un riquadro di stato su carbone restava senza bordo, oppure ne prendeva uno grigio che non diceva di che stato si trattava. */ --cf-scuro-conforme: #46b485; /* ---- RITMO E MOVIMENTO --------------------------------------------------- */ --cf-interlinea: 1.65; --cf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --cf-larghezza-max: 1180px; --cf-misura: 680px; /* colonna di lettura */ }