Design System Inspired by Cohere

Category: AI & LLM Piattaforma AI enterprise. Gradienti vivaci, estetica da dashboard ricca di dati.

1. Tema Visivo e Atmosfera

L’interfaccia di Cohere è un deck di comando enterprise rifinito — deciso, pulito, progettato per far percepire l’AI come un’infrastruttura seria piuttosto che un giocattolo consumer. L’esperienza vive su una tela bianco brillante dove i contenuti sono organizzati in card generosamente arrotondate (raggio 22px) che creano un linguaggio di contenimento organico, simile alle nuvole. È un sito che parla a CTO e architetti enterprise: professionale senza essere freddo, sofisticato senza essere intimidatorio.

Il linguaggio di design unisce due mondi con un sistema a doppio carattere tipografico: CohereText, un serif display personalizzato con tracking stretto, conferisce ai titoli il peso di un manifesto tecnologico, mentre Unica77 Cohere Web gestisce tutto il testo corpo e UI con precisione geometrica svizzera. Questo abbinamento serif/sans crea una personalità di “autorità sicura incontra chiarezza ingegneristica” che riflette perfettamente una piattaforma AI enterprise.

Il colore è usato con estrema moderazione — l’interfaccia è quasi interamente in bianco e nero con bordi grigio freddo (#d9d9dd, #e5e7eb). Il viola-violetto appare solo nelle bande hero fotografiche, nelle sezioni con gradienti e nell’interattivo blu (#1863dc) che segnala gli stati hover e focus. Questa moderazione cromatica significa che quando il colore APPARE — negli screenshot di prodotto, nelle fotografie enterprise e nella sezione viola profondo — porta il massimo peso visivo.

Caratteristiche Chiave:

• Tela bianco brillante con bordi di contenimento grigio freddo
• Raggio del bordo caratteristico di 22px — la distintiva “rotondità della card Cohere”
• Doppio carattere tipografico personalizzato: CohereText (serif display) + Unica77 (sans corpo)
• Moderazione cromatica di livello enterprise: nero, bianco, grigi freddi, accento viola-blu minimale
• Sezioni hero viola profondo/violetto che forniscono un contrasto drammatico
• Pulsanti ghost/trasparenti che virano al blu al passaggio del mouse
• Fotografia enterprise che mostra diverse applicazioni nel mondo reale
• CohereMono per codice ed etichette tecniche con trasformazioni maiuscole

2. Palette Colori e Ruoli

Primari

• Cohere Black (#000000): Testo dei titoli principale ed elementi di massima enfasi.
• Near Black (#212121): Colore standard dei link del corpo — leggermente più morbido del nero puro.
• Deep Dark (#17171c): Un quasi-nero con sfumatura blu per la navigazione e il testo nelle sezioni scure.

Secondari e Accenti

• Interaction Blue (#1863dc): L’accento interattivo primario — appare al passaggio del mouse sui pulsanti, negli stati focus e nei link attivi. L’unico colore d’azione cromatico.
• Ring Blue (#4c6ee6 al 50%): Colore del ring Tailwind per gli indicatori di focus da tastiera.
• Focus Purple (#9b60aa): Colore del bordo di focus degli input — un violetto attenuato.

Superfici e Sfondi

• Pure White (#ffffff): Lo sfondo principale della pagina e la superficie delle card.
• Snow (#fafafa): Superfici elevate sottili e sfondi delle sezioni chiare.
• Lightest Gray (#f2f2f2): Bordi delle card e le linee di contenimento più morbide.

Neutri e Testo

• Muted Slate (#93939f): Link footer de-enfatizzati e testo terziario — un grigio dai toni freddi con una leggera sfumatura blu-violetto.
• Border Cool (#d9d9dd): Bordi standard di sezione e di elemento di lista — un grigio freddo con leggera sfumatura violacea.
• Border Light (#e5e7eb): Variante bordo più chiara — il gray-200 standard di Tailwind.

Sistema di Gradienti

• Banda Hero Viola-Violetto: Sezioni con gradiente viola profondo che creano un contrasto drammatico rispetto alla tela bianca. Appaiono come bande a piena larghezza che ospitano screenshot di prodotto e messaggi chiave.
• Gradiente Footer Scuro: La pagina transisce attraverso viola profondo/carbone fino al footer nero, creando un effetto “tramonto”.

3. Regole Tipografiche

Famiglia di Caratteri

• Display: CohereText, con fallback: Space Grotesk, Inter, ui-sans-serif, system-ui
• Corpo / UI: Unica77 Cohere Web, con fallback: Inter, Arial, ui-sans-serif, system-ui
• Codice: CohereMono, con fallback: Arial, ui-sans-serif, system-ui
• Icone: CohereIconDefault (font di icone personalizzato)

Gerarchia

Principi

• Serif per la dichiarazione, sans per l’utilità: CohereText porta la voce del brand alla scala display — le sue terminazioni serif danno ai titoli l’autorità della ricerca pubblicata. Unica77 gestisce tutto il funzionale con neutralità geometrico-svizzera.
• Tracking negativo alla scala: CohereText usa da -1.2px a -1.44px di spaziatura tra lettere a 60–72px, creando blocchi di testo densi e d’impatto.
• Peso corpo singolo: Quasi tutto l’uso di Unica77 è al peso 400. Il peso 500 appare solo per l’enfasi nei pulsanti piccoli. Il sistema si affida a dimensione e spaziatura, non al contrasto di peso.
• Etichette codice in maiuscolo: CohereMono usa il maiuscolo con spaziatura positiva tra lettere (0.16–0.28px) per tag tecnici e marcatori di sezione.

4. Stili dei Componenti

Pulsanti

Ghost / Trasparente

• Sfondo: trasparente (rgba(255, 255, 255, 0))
• Testo: Cohere Black (#000000)
• Nessun bordo visibile
• Hover: il testo vira a Interaction Blue (#1863dc), opacità 0.8
• Focus: contorno solido 2px in Interaction Blue
• Lo stile principale del pulsante — invisibile finché non si interagisce

Solido Scuro

• Sfondo: scuro/nero
• Testo: Pure White
• Per CTA su superfici chiare
• A forma di pillola o con raggio standard

Delineato

• Contenimento basato sul bordo
• Usato nelle azioni secondarie

Card e Contenitori

• Sfondo: Pure White (#ffffff)
• Bordo: sottile solido Lightest Gray (1px solid #f2f2f2) per card sottili; Cool Border (#d9d9dd) per le enfatizzate
• Raggio: 22px — il raggio caratteristico di Cohere per card primarie, immagini e contenitori di dialogo. Anche 4px, 8px, 16px, 20px per elementi più piccoli
• Ombra: minimale — Cohere si affida al colore di sfondo e ai bordi piuttosto che alle ombre
• Speciale: raggio 0px 0px 22px 22px (arrotondamento solo in basso) per i contenitori di sezione
• Dialog: raggio 8px per le finestre modali/dialog

Input e Form

• Testo: bianco su input scuro, nero su chiaro
• Bordo focus: Focus Purple (#9b60aa) con 1px solid
• Ombra focus: ring rosso (rgb(179, 0, 0) 0px 0px 0px 2px) — probabilmente per indicazione di stato errore
• Contorno focus: Interaction Blue solido 2px

Navigazione

• Nav orizzontale pulita su sfondo bianco o scuro
• Logo: wordmark Cohere (SVG personalizzato)
• Link: testo scuro a 16px Unica77
• CTA: pulsante solido scuro
• Mobile: collasso hamburger

Trattamento delle Immagini

• Fotografia enterprise con soggetti e ambienti diversificati
• Fotografia hero con tinta viola per le sezioni drammatiche
• Screenshot UI del prodotto su superfici scure
• Immagini con raggio 22px in linea con il sistema delle card
• Sezioni a gradiente viola a piena larghezza

Componenti Distintivi

Sistema Card 22px

• Il raggio del bordo di 22px è la firma visiva di Cohere
• Tutte le card, immagini e contenitori primari usano questo raggio
• Crea una morbidezza organica, simile alle nuvole, che è distintiva rispetto ai tipici 8–12px

Barra di Fiducia Enterprise

• Loghi aziendali visualizzati in una striscia orizzontale
• Dimostra l’adozione enterprise
• Trattamento logo pulito, monocromatico

Bande Hero Viola

• Sezioni viola profondo a piena larghezza che ospitano le vetrine del prodotto
• Creano pause visive drammatiche nel flusso della pagina bianca
• Gli screenshot del prodotto galleggiano nell’ambiente viola

Tag Codice Maiuscolo

• CohereMono in maiuscolo con spaziatura tra lettere
• Usato come marcatori di sezione ed etichette di categorizzazione
• Crea una gerarchia informativa tecnica e strutturata

5. Principi di Layout

Sistema di Spaziatura

• Unità base: 8px
• Scala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
• Il padding dei pulsanti varia per variante
• Padding interno delle card: circa 24–32px
• Spaziatura verticale delle sezioni: generosa (56–60px tra le sezioni)

Griglia e Contenitore

• Larghezza massima del contenitore: fino a 2560px (molto ampia) con ridimensionamento responsivo
• Hero: centrato con tipografia drammatica
• Sezioni feature: griglie di card multi-colonna
• Sezioni enterprise: bande viola a piena larghezza
• 26 breakpoint rilevati — sistema responsivo estremamente granulare

Filosofia dello Spazio Bianco

• Chiarezza enterprise: Ogni sezione presenta una proposta chiara con spazio di respiro tra le altre.
• La fotografia come hero: Le grandi sezioni fotografiche forniscono interesse visivo senza richiedere elementi di design decorativi.
• Raggruppamento a card: I contenuti correlati sono raggruppati in card con arrotondamento a 22px, creando cluster informativi naturali.

Scala dei Raggi dei Bordi

• Netto (4px): Elementi di navigazione, tag piccoli, paginazione
• Comodo (8px): Finestre dialog, contenitori secondari, card piccole
• Generoso (16px): Contenitori featured, card medie
• Grande (20px): Card feature grandi
• Caratteristico (22px): Card primarie, immagini hero, contenitori principali — IL raggio Cohere
• Pillola (9999px): Pulsanti, tag, indicatori di stato

6. Profondità ed Elevazione

Filosofia delle Ombre: Cohere è praticamente privo di ombre. La profondità è comunicata attraverso il contrasto del colore di sfondo (card bianche su bande viola, superficie bianca su neve), il contenimento con bordi (bordi grigio freddo), e la drammatica alternanza di sezioni chiare e scure. Quando gli elementi hanno bisogno di elevazione, la ottengono essendo bianco-su-scuro piuttosto che proiettando ombre.

7. Cosa Fare e Cosa Evitare

Da Fare

• Usare il raggio del bordo di 22px su tutte le card e i contenitori primari — è la firma visiva
• Usare CohereText per i titoli display (72px, 60px) con spaziatura tra lettere negativa
• Usare Unica77 per tutto il testo corpo e UI al peso 400
• Mantenere la palette in bianco e nero con bordi grigio freddo
• Usare Interaction Blue (#1863dc) solo per gli stati interattivi hover/focus
• Usare le sezioni viola profondo per pause visive drammatiche e vetrine di prodotto
• Applicare maiuscolo + spaziatura tra lettere su CohereMono per le etichette di sezione
• Mantenere fotografia appropriata al contesto enterprise con soggetti diversificati

Da Evitare

• Non usare raggi del bordo diversi da 22px sulle card primarie — il raggio caratteristico è importante
• Non introdurre colori caldi — la palette è rigorosamente dai toni freddi
• Non usare ombre pesanti — la profondità viene dal contrasto cromatico e dai bordi
• Non usare il peso grassetto (700+) sul testo corpo — l’intervallo è 400–500
• Non saltare la gerarchia serif/sans — CohereText per i titoli, Unica77 per il corpo
• Non usare il viola come colore di superficie per le card — il viola è riservato alle sezioni a piena larghezza
• Non ridurre la spaziatura delle sezioni sotto i 40px — i layout enterprise hanno bisogno di spazio di respiro
• Non usare decorazione sui pulsanti per impostazione predefinita — ghost/trasparente è lo stato base

8. Comportamento Responsivo

Breakpoint

26 breakpoint rilevati — uno dei siti più granularmente responsivi nel dataset.

Target di Tocco

• Pulsanti adeguatamente dimensionati per l’interazione touch
• Link di navigazione con spaziatura comoda
• Superfici delle card come target di tocco

Strategia di Collasso

• Navigazione: La nav completa si riduce a hamburger
• Griglie feature: Multi-colonna → 2 colonne → colonna singola
• Testo hero: 72px → 48px → 32px ridimensionamento progressivo
• Sezioni viola: Mantengono la piena larghezza, il contenuto si impila
• Griglie card: 3 → 2 → 1 colonna

Comportamento delle Immagini

• La fotografia si ridimensiona proporzionalmente all’interno di contenitori con raggio 22px
• Gli screenshot del prodotto mantengono il rapporto d’aspetto
• Le sezioni viola ridimensionano lo sfondo proporzionalmente

9. Guida ai Prompt per Agenti

Riferimento Rapido ai Colori

• Testo Principale: “Cohere Black (#000000)”
• Sfondo Pagina: “Pure White (#ffffff)”
• Testo Secondario: “Near Black (#212121)”
• Accento Hover: “Interaction Blue (#1863dc)”
• Testo Attenuato: “Muted Slate (#93939f)”
• Bordi Card: “Lightest Gray (#f2f2f2)”
• Bordi Sezione: “Border Cool (#d9d9dd)“

Esempi di Prompt per Componenti

• “Crea una sezione hero su Pure White (#ffffff) con CohereText a 72px peso 400, line-height 1.0, letter-spacing -1.44px. Testo Cohere Black. Sottotitolo in Unica77 a 18px peso 400, line-height 1.4.”
• “Progetta una card feature con raggio del bordo 22px, bordo 1px solid Lightest Gray (#f2f2f2) su bianco. Titolo in Unica77 a 32px, letter-spacing -0.32px. Corpo in Unica77 a 16px, Muted Slate (#93939f).”
• “Costruisci un pulsante ghost: sfondo trasparente, testo Cohere Black in Unica77 a 16px. Al hover, il testo vira a Interaction Blue (#1863dc) con opacità 0.8. Focus: contorno solido 2px Interaction Blue.”
• “Crea una sezione a piena larghezza viola profondo con testo bianco. CohereText a 60px per il titolo. Lo screenshot del prodotto galleggia all’interno con raggio del bordo 22px.”
• “Progetta un’etichetta di sezione usando CohereMono a 14px, maiuscolo, letter-spacing 0.28px. Testo Muted Slate (#93939f).”

Guida all’Iterazione

1. Concentrarsi su UN componente alla volta
2. Usare sempre il raggio 22px per le card primarie — “la rotondità della card Cohere”
3. Specificare il carattere tipografico — CohereText per i titoli, Unica77 per il corpo, CohereMono per le etichette
4. Gli elementi interattivi usano Interaction Blue (#1863dc) solo al hover
5. Mantenere le superfici bianche con bordi grigio freddo — nessun tono caldo
6. Il viola è per le sezioni a piena larghezza, mai per gli sfondi delle card