Visual system

Design system

A living guide to the atlas tokens and components. The examples use the same elements found in entries and tools.

Colour

Palette and contrast

WCAG ratio against #080A09

--blackMain background

#080A091.00 : 1

--black-2Surfaces and panels

#1013101.06 : 1

--anthraciteRaised surfaces

#1B201D1.20 : 1

--lineBorders and dividers

#2A312C1.49 : 1

--line-strongEmphasized borders

#3A443D1.96 : 1

--grey-textSecondary text

#A7ADA88.68 : 1

--grey-lightPrimary text

#D7DAD714.09 : 1

--green-archiveArchive accent · borders, surfaces, text ≥ 24px

#4E7D5A4.16 : 1

--green-brightGreen text and controls

#8EBD729.14 : 1

--yellow-docDocumentation and accent

#D6B84A10.22 : 1

--yellow-hiInteraction and emphasis

#F0D35B13.40 : 1

--red-criticalDisputed claims

#D9705F6.08 : 1

--paperWarm overlay · rgba(214, 184, 74, 0.06)

#14140D1.07 : 1

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

#2D2A161.38 : 1

Archive green usage: --green-archive is reserved for borders, surfaces and text of at least 24px; do not use it for small text.

Type

Typography

Display · Fraunces Variable

One history, many tracks.

var(--font-display)

Body · IBM Plex Sans

Sources distinguish attestation from interpretation.

var(--font-sans)

Metadata · IBM Plex Mono

DA–F–001 · 1963 · EN

var(--font-mono)

--step--2Labels and notesAa 1963

--step--1Secondary textAa 1963

--step-0Body textAa 1963

--step-1Small headingAa 1963

--step-2Section headingAa 1963

--step-3Page headingAa 1963

--step-4DisplayAa 1963

--step-5Large displayAa 1963

Data

Reliability

Primary source Documented Stated by the author Critical attribution Unproven similarity Disputed tradition Promotional legend Debunked claim Incomplete information Editorial interpretation

Claim with details

The publicity attributed the story to a local legend, without independent corroboration.✦ Promotional legendThe label identifies the promotional source of the statement; it does not confirm the events described.Source: Sample promotional material

Interface

Buttons, chips and callouts

Buttons

Primary action Secondary

Chips

Film 1963 Selected

Nodes

Cards by type

Film DA·F·0001

Black Sabbath

1963 · Italy / France

I tre volti della paura · Les Trois Visages de la peur

Creature DA·C·0003

Revenant

Area: Medieval England, Western Europe
Earliest attestations: Twelfth-century English chronicles

Motif DA·M·0002

The vampire child

Source DA·S·0001

La famiglia del Vurdalak

<a href="/en/people/aleksej-tolstoj">A. K. Tolstoy</a> · 1839 · Short story

Belief or ritual DA·R·0001

Protections against the dead

Place DA·L·0001

Eastern Europe

47.00°N · 25.00°E · folklore

Person DA·P·0004

American International Pictures

Production, Distribution · 1954–1980

Version DA·V·0001

I tre volti della paura vs Black Sabbath

Comparison · 2 versions · 14 differences

Bloodline DA·B·0001

The Vurdalak, from folklore to cinema

Bloodline · 11 generations

Journal DA·J·0002

The Chekhov credit: a source that cannot be found

Field Note · Correction

Collection DA·K·0003

Films changed by dubbing

Collection · Versions

Glossary DA·G·0004

Literary adaptation

Editorial components

Facts, tables and timelines

FactGrid

Original title: I tre volti della paura PRIM: Primary source
International titles: Black Sabbath (USA, 1964); Les Trois Visages de la peur (France) DOC: Documented
Year and country: 1963 · Italy / France DOC: Documented
Direction: Mario Bava PRIM: Primary source

Comparison table

Item	Source A	Source B	Note
Date	Recorded information	Reported information	DOC: Documented
Attribution	Primary document	Later study	ATTR: Critical attribution

Timeline

Sample events

1198 History
William of Newburgh collects stories of the returning dead
DOC: Documented
1725 History
The case of Petar Blagojević at Kisiljevo appears in the Viennese press
DOC: Documented
1732 History
The Visum et Repertum report on the Medvedja case
PRIM: Primary source
1746 Scholarship
Dom Calmet publishes his treatise on apparitions and vampires
DOC: Documented
1819 Literature
John Polidori’s The Vampyre: the aristocratic vampire emerges
DOC: Documented

Visualisations

Graph and map

Graph centred on the Vurdalak

A compact example of relations between nodes.

Film
Creature · ritual
Motif
Source
Person
Weak link

Compact map

Layout and motion

Grid and accessibility

Grids

.wrap keeps the layout within the site’s maximum width; .wrap--narrow constrains long text. Editorial grids reduce to two columns and then one on narrower viewports.

Spacing

The --space-1–--space-9 tokens maintain a consistent scale; headings and text use the fluid --step--2–--step-5 steps.

Breakpoints

Navigation and complex components adapt to the global stylesheet breakpoints: 1180px, 820px and 640px. Grids keep content readable without relying on fixed widths.

Reduced motion

Animations and smooth scrolling respect prefers-reduced-motion: reduce. Information does not depend on motion to be understood.