Overview of the UFO Phenomenon
Design Analysis
This design language is for dense research archives and event chronologies. It uses a grainy charcoal shell, huge white entry headlines, bright category counters, a horizontal year ruler, a vertical event timeline, and a...
This design language is for dense research archives and event chronologies. It uses a grainy charcoal shell, huge white entry headlines, bright category counters, a horizontal year ruler, a vertical event timeline, and a docked utility rail for long browsing sessions. The interface should feel documentary and evidence-led. Color is functional: it marks categories, active filters, statistics, and timeline tags.
Use 191A1E as the primary page shell. Layer 222328 for cards, floating controls, accordions, and translucent panels. Use 2C2D31 for ruler ticks, timeline tracks, and dividers. Use white for headings and event titles. Use muted gray text for body copy and secondary navigation.
Use Inter or a similar compact grotesk. Hero type can be very large, around 92px / 92px, centered, and white. Event titles are much smaller, around 18px / 24px, but bold enough to scan in dense lists. Body copy should be light-weight and muted, around 17px / 25.5px. Use uppercase labels for category headings and section identifiers.
Use a dark fixed-feeling shell from top to bottom. Entry pages can start with a centered hero and category counters, then drop into a year ruler and continuous vertical timeline. Timeline pages should be dense. Group events by year, keep nodes in a left gutter, and separate rows with faint lines instead of cards. Index pages can switch to a card grid with portraits and short metadata.
Core identity and authoring metadata from the refto.one design model.
A dark investigative archive design language with grainy black surfaces, giant white headlines, neon category counters, year rails, vertical event timelines, floating tool navigation, and portrait-led index cards.
Nocturnal, documentary, dense, and evidence-led, with bright categorical signals cutting through a smoky archive shell.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 92px |
page_title | 48px |
section_title | 38px |
event_title | 24px |
body | 25.5px |
label | 22.4px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
hero | 600 |
title | 700 |
event | 700 |
body | 300 |
label | 700 |
Fields outside the primary renderer remain visible here as structured fallback content.
Border tokens with resolved values.
Shadow tokens with resolved values and shadow samples where applicable.
Motion tokens rendered as resolved values for timing and personality.
Resolved border token values.
| Property | Value |
|---|---|
faint | 1px solid rgba(255, 255, 255, 0.08) |
card | 1px solid rgba(255, 255, 255, 0.10) |
ruler | 1px solid rgba(255, 255, 255, 0.12) |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
yellow_glow | 0 16px 48px rgba(254, 190, 2, 0.22) |
color_glow | 0 12px 36px rgba(255, 255, 255, 0.08) |
rail | 0 24px 80px rgba(0, 0, 0, 0.35) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 120ms |
duration_base | 200ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.