EN
Sistema visivo

Design system

Una guida viva ai token e ai componenti dell’atlante. Gli esempi riprendono gli stessi elementi usati nelle schede e negli strumenti.

Colore

Palette e contrasto

Rapporto WCAG sul fondo #080A09
--blackFondo principale

#080A091.00 : 1

--black-2Superfici e pannelli

#1013101.06 : 1

--anthraciteSuperfici in rilievo

#1B201D1.20 : 1

--lineBordi e separatori

#2A312C1.49 : 1

--line-strongBordi in evidenza

#3A443D1.96 : 1

--grey-textTesto secondario

#A7ADA88.68 : 1

--grey-lightTesto principale

#D7DAD714.09 : 1

--green-archiveAccento d’archivio · bordi, superfici, testo ≥ 24px

#4E7D5A4.16 : 1

--green-brightTesto e controlli verdi

#8EBD729.14 : 1

--yellow-docDocumentazione e accento

#D6B84A10.22 : 1

--yellow-hiInterazione e risalto

#F0D35B13.40 : 1

--red-criticalAffermazioni smentite

#D9705F6.08 : 1

--paperVelatura calda · rgba(214, 184, 74, 0.06)

#14140D1.07 : 1

--highlightEvidenziazione · rgba(240, 211, 91, 0.16)

#2D2A161.38 : 1

Uso del verde d’archivio: --green-archive è riservato a bordi, superfici e testo di almeno 24px; non usarlo per testo piccolo.

Caratteri

Tipografia

Display · Fraunces Variable

Una storia, più tracce.

var(--font-display)
Testo · IBM Plex Sans

Le fonti distinguono attestazione e interpretazione.

var(--font-sans)
Metadati · IBM Plex Mono

DA–F–001 · 1963 · IT

var(--font-mono)
--step--2Etichette e noteAa 1963
--step--1Testo secondarioAa 1963
--step-0Testo di baseAa 1963
--step-1Titolo minoreAa 1963
--step-2Titolo di sezioneAa 1963
--step-3Titolo paginaAa 1963
--step-4DisplayAa 1963
--step-5Display ampioAa 1963
Dati

Attendibilità

Fonte primaria Documentato Dichiarato dall’autore Attribuzione critica Somiglianza non dimostrata Tradizione controversa Leggenda promozionale Affermazione smentita Informazione incompleta Interpretazione editoriale

Claim con dettaglio

La promozione attribuì la storia a una leggenda locale, senza riscontri indipendenti.✦ Leggenda promozionaleL’etichetta qualifica la provenienza promozionale della frase; non è una conferma dei fatti narrati.Fonte: Materiale promozionale d’esempio

Interfaccia

Pulsanti, chip e callout

Pulsanti

Azione primaria Secondaria

Chips

Film 1963 Selezionato
Nodi

Card per tipo

Film DA·F·0001

I tre volti della paura

1963 · Italia / Francia · <a href="/people/mario-bava">Mario Bava</a>

Black Sabbath · Les Trois Visages de la peur

Creatura DA·C·0003

Revenant

Area
Inghilterra medievale, Europa occidentale
Prime attestazioni
Cronache inglesi del XII secolo
Componenti editoriali

Fatti, tabelle e cronologie

FactGrid

Titolo originale
I tre volti della paura PRIM
Titoli internazionali
Black Sabbath (USA, 1964); Les Trois Visages de la peur (Francia) DOC
Anno e paese
1963 · Italia / Francia DOC
Regia
Mario Bava PRIM

Tabella comparativa

ElementoFonte AFonte BNota
DataDato registratoDato riferito DOC
AttribuzioneDocumento primarioStudio successivo ATTR

Cronologia

Visualizzazioni

Grafo e mappa

Grafo centrato sul Vurdalak

Grafo delle connessioni di Vurdalak: 8 connessioni dirette e 8 collegamenti più distanti. Vurdalak La famiglia del Vurdalak FONTE La Guzla FONTE Strigoi CREATURA Vampiro CREATURA Revenant CREATURA Il vampiro familiare MOTIVO Il vurdalak, dal folklore a… BLOODLINE Vampiri dell’Europa orienta… COLLEZIONE Visum et Repertum I tre volti della pau… Perché Dread Atlas co… Protezioni contro i m… Europa orientale La soglia e l’invito Kisiljevo Medveđa
Esempio compatto di relazioni tra nodi.
  • Film
  • Creatura · rituale
  • Motivo
  • Fonte
  • Persona
  • Legame debole

Mappa compatta

Mappa dell’Europa con 5 luoghi dell’atlante. Europa orientale Kisiljevo Medveđa Roma Vienna
Layout e movimento

Griglia e accessibilità

Griglie

.wrap contiene il layout entro la misura massima del sito; .wrap--narrow limita i testi lunghi. Le griglie editoriali si riducono a due colonne e poi a una sui viewport più stretti.

Spaziatura

I token --space-1–--space-9 mantengono una scala coerente; titoli e testo usano i gradini fluidi --step--2–--step-5.

Breakpoints

La navigazione e i componenti complessi si adattano alle soglie responsive del foglio globale: 1180px, 820px e 640px. Le griglie preservano contenuti leggibili senza affidarsi a larghezze fisse.

Movimento ridotto

Animazioni e scorrimento morbido rispettano prefers-reduced-motion: reduce. Le informazioni non dipendono dal movimento per essere comprese.