The Unwritten Future
Design system
Every type style, colour and element of the exhibition, drawn from the same tokens and components the pages use. The sizes beside each one are measured in this browser, at this width.
- Even pixels. Every font size is a whole, even pixel.
- The 4 px grid. Every line height and every space is a multiple of 4. No fluid sizes; type steps up at breakpoints.
- Green marks, black reads. The green is never the colour of text.
- Styles and roles. Components use the named text styles and colour roles, never a raw size or base colour.
- Drawn icons. Icons are drawn in the stroke of the type, never taken from a font.
Tokens: src/app/globals.css · Rules and reasons: docs/design-system.md
Typeface
Rethink Sans, one family for everything: headlines, body, labels and the text drawn into the 3D space. Self-hosted through next/font.
Regular 400
Body, statements, questions asked
When anyone can generate
Medium 500
Labels
When anyone can generate
Bold 700
Names, buttons, answers, quotes in the index
When anyone can generate
ExtraBold 800
Headlines, the wordmark
When anyone can generate
Colour
Two layers. Components use the roles, which say what a colour is for; each role points to one of the eight base colours. To change what something looks like, point its role at another base colour in globals.css.
Roles
text
→ ink
Headlines, bold text, section labels
text-soft
→ ink-soft
Body text, disciplines, labels
text-faint
→ ink-faint
Secondary text, idle icons, slots, a disabled button
text-on-dark
→ room
Text on a black or blue button
surface
→ room
The ground, tags, the header (at 90 %)
surface-raised
→ room-raised
Participation, How this was made
surface-overlay
→ room at 95 %
The welcome panel over the space
scrim
→ ink at 90 %
Behind a film in full screen
stage
→ ink
Behind the invitation mockup, solid
border
→ rule
Hairlines, the frame of an artwork on its page
border-strong
→ ink
Over a new section, fields, question tags, Previous / Next
mark
→ signal
The green bar, underlines, switch dots
artwork
→ signal
View the Artwork, the play button
voice
→ signal
View the Future Voice
invite
→ signal
The invitation badge on the cover
reality
→ line
View the Reality Signal, its ring, key figure and source links
button
→ ink
Enter, Add my perspective; the hover of the buttons in the space
button-hover
→ line
Hover of the black buttons, the switches and the wordmark
focus
→ line
The focus ring
Base colours
White ground, black type, one green mark and one blue line. Contrast is measured against white.
room
The ground.
room-raised
Participation and How this was made.
ink
Headlines, bold text, the ink buttons.
ink-soft
Body text, disciplines.
ink-faint
Secondary text, idle arrows, slots.
rule
Hairlines, the frame of a stand-in.
signal
The brand green. A mark only: bars, dots, threads, and the fill of the artwork, Future Voice and play buttons. Never text.
line
The brand blue. Reality Signals: ring, key figure, button. Focus rings.
Type
Two layers. Components use the text styles: one name for size, line height, tracking and weight, and the steps they take at 768 and 1024 px. The styles are built from the base sizes below. Colour is never part of a style; it comes from a role.
Text styles
Measured at this width; resize the window to see each step.
type-cover
The cover headline, in capitals, with the green bar
Steps: 48/56 · 64/72 from 640 · 96/112 from 768 · 128/144 from 1024 · 800 · uppercase
Unwritten
type-display
Key figure of a Reality Signal, the not-found page
Steps: 48/48 · 64/60 from 768 · 800
3.67 vs 1.85
type-hero
Future Voice quote, Reality Signal question, the index title
Steps: 36/40 · 48/48 from 768 · 64/60 from 1024 · 800
“Even then, it is usually only as good as the way I guide it.”
type-title
An artwork's title on its page
Steps: 36/40 · 48/48 from 768 · 800
Prompt Automat
type-heading
An artwork's name in the caption, sections of this page
Steps: 28/32 · 36/40 from 768 · 800
Move toward whatever holds your attention.
type-question
The participation question
Steps: 24/28 · 36/40 from 768 · 800
When anyone can generate, what makes a creative?
type-subheading
The welcome panel's heading, How this was made, footers, names in the index
Steps: 28/32 · 800
How this was made
type-card
An artwork's name on a Future Voice or Reality Signal page
Steps: 24/28 · 800
Prompt Automat
type-answer
An artwork's answer under The artwork speaks
Steps: 24/28 · 28/32 from 768 · 700
I'm a prompt machine that generates images
type-subline
The cover's subline
Steps: 20/28 · 24/32 from 768 · 400
How will we create tomorrow?
type-quote
A quote in the index
Steps: 20/24 · 24/28 from 768 · 700
“Even then, it is usually only as good as the way I guide it.”
type-large
Name / Discipline and the kicker on a Future Voice page, your answer
Steps: 24/32 · 400
Silke Sonnenberg / Creative & Author-Voice
type-lead
Statement, context, claim, the question asked and its field
Steps: 20/28 · 400
An endless stream of plausible possibilities. A transparent chamber recombines visual fragments while the machine continuously prints new image variants. There is no guiding hand, winner or final selection. The visible action is multiplication. Possibility becomes a growing physical stream without a natural endpoint.
type-body-lg
Research text on a Reality Signal page
Steps: 18/28 · 400
AI is both the subject of this exhibition and one of its tools.
type-intro
The intro above the index
Steps: 18/24 · 400
AI is both the subject of this exhibition and one of its tools.
type-body
Body, what a Reality Signal does not show
Steps: 16/24 · 400
AI is both the subject of this exhibition and one of its tools.
type-small
Welcome panel, tags, tools, notes beside a heading
Steps: 14/20 · 400
Drag to move. Scroll or pinch to zoom. Click anything to come closer.
type-badge
OPENING on the invitation badge on the cover
Steps: 16/24 · 18/24 from 768 · 700 · uppercase
Opening
type-badge-date
The date on the invitation badge
Steps: 20/24 · 28/32 from 768 · 700
29 October 2026
type-label
Kicker lines above a name; usually text-soft, text where it heads a section
Steps: 12/16 · 500 · uppercase
Artwork 04 · Limitless / Lost in Possibility
type-note
Footnotes, counters
Steps: 12/16 · 400
*Working title
type-fineprint
A note under a form, with more air
Steps: 12/20 · 400
Prototype: your answer stays in this browser only.
type-wordmark
The wordmark in the header: three lines, each with the green bar
Steps: 18/20 · 800 · uppercase
The Unwritten Future
type-button
Buttons under a chosen thing in the space
Steps: 14/20 · 700
type-button-md
Add my perspective
Steps: 16/24 · 700
type-button-lg
Enter, Enter the Exhibition
Steps: 18/24 · 700
Base sizes: text
text-xs
Footnotes, counters
Prototype: your answer stays in this browser only.
text-sm
Welcome panel, buttons in the space, tags, tools
Drag to move. Scroll or pinch to zoom. Click anything to come closer.
text-base
Body
AI is both the subject of this exhibition and one of its tools.
text-lg
Intro text, research text
AI is both the subject of this exhibition and one of its tools.
text-xl
Statements, context paragraphs, questions asked
AI is both the subject of this exhibition and one of its tools.
text-2xl
Quotes in the index, Name / Discipline on a Voice page
When anyone can generate, what makes a creative?
text-3xl
Not in use at present
When anyone can generate
Base sizes: headlines
Each sets its own tracking: minus 1 px for every 32 px of size, none below 36 px.
text-display-2xs
Small headings, names in the index on phones
Move toward whatever holds your attention.
text-display-xs
Index cards, footers, How this was made, the welcome heading, a name in the space on phones
Move toward whatever holds your attention.
text-display-sm
A name in the space, Reality Signal claim, participation question
Move toward whatever holds your attention.
text-display-md
Artwork page title, page titles on phones
Fields of Thought
text-display-lg
Voice page quote, key figures
Fields of Thought
text-display-xl
Cover headline, medium screens
Voices
text-display-2xl
Cover headline
Future
Marks and details
The small things that recur on every page.
Green bar (.mark)
Directly under the letters. Its thickness grows with the headline in 4 px steps, never under 4 px.
The Unwritten Future
Green bar, on the cover
16 px under the 128 px cover headline.
Entrance.tsx
Future
Name / Discipline
One line with a slash. Name bold in ink, slash and discipline in ink-soft.
Silke Sonnenberg / Creative & Author-Voice
Silke Sonnenberg / Creative & Author-Voice
Link
Bold, with a 4 px green underline on hover. Hover to see it.
FieldIndex.tsx
Asterisk (.wt)
Marks a working title only, explained by “*Working title” nearby. No title carries one at present: The Unwritten Future, Fields of Thought and the cover's subline are final.
A working title
*Working title
Slot and source
[A slot] is a fact still to be found: grey, in its brackets. {A source} named in the text is a blue external link.
Slotted.tsx
In [Source], [share] of the creatives asked said they use AI every day.
Placeholder
Every placeholder says so on screen, in the label above it.
Future Voice · placeholder
Artwork 01 · Human Trace / Craft / Meaning · stand-in
Reality Signal · placeholder
Focus ring
2 px blue, 4 px off the element, on buttons and links reached by keyboard. Text fields show their caret instead.
Timeline station
The case study's nine stations: a 32 px ring, 1 px ink on white, its number in bold, sitting on a 1 px rule-grey line; the chapter's label level with it.
StationRing, case-study/Timeline.tsx
Idea
Section bar
The sections of a long page (the case study, this page) on raised grey between two hairlines. The one in view bold, black, with a 2 px green underline; each keeps the width of its wider self, so the row never shifts. Sticks under the top bar; on one line, which scrolls sideways where it does not fit and sets the one in view at its left edge. This specimen mirrors it, without the scrolling.
SectionNav.tsx
- 03 Themes
- 04 Artworks
- 05 Research
Image to come
The place of an image still missing in the case study: room-raised, 1 px rule border, marked as such and naming what belongs there. Never filled with a stand-in.
ImageToCome, case-study/Timeline.tsx
Invitation badge
On the cover only, beside THE, above UNWRITTEN, tilted 6°. Green fill (invite), black text, square, no shadow. Drag it on the cover; Invite a friend opens the poster.
InviteBadge.tsx
Opening
29 October 2026
Hairline
1 px in rule grey between rows; 1 px in ink over a new section.
Fields
Text fields show focus by their caret alone, never the blue ring.
The participation line
2 px ink line, a 24 px green dot without a ring, black under the pointer; it sways once when the line comes into view. The poles in the label style under its ends.
Participation.tsx, .perspective-range
The participation results
Ten bars, 96 px at the tallest, in 4 px steps, 4 px apart, on a 2 px ink floor; the visitor's in green, the others ink-faint. They rise one after another.
Participation.tsx, .result-bar
Icons
Drawn SVGs at the stroke weight of the type, 1.5 px with square caps. Shown at their real size.
- Arrow16 × 12 · grey at rest in a row
- Arrow back16 × 12
- Arrow down12 × 16 · TalkTag
- Out12 × 12 · source link
- Fold16 × 12 · grey at rest, black on hover
- Unfold16 × 12 · grey at rest, black on hover
- Close12 × 12
- From the start16 × 16
- Full screen16 × 16
- Turn16 × 16
- Speaker16 × 12
- Speaking3 bars, 2 px, green
- Play / Pause16 × 16 in 48 px
- Artwork mark12 px frame, 1.5 px grey · welcome panel
- Future Voice mark12 px thread, 2 px green · welcome panel
- Reality Signal dot12 px, 2 px blue
- Reality Signal ring48 px, 4 px blue
- 485 950Range0.8 em wide, in the stroke of the figure · a Reality Signal range
- Switch on12 px green dot
- Switch off12 px, 2 px grey ring
Spacing
Tailwind's step is 4 px. Use whole steps only, never the half ones (py-2.5 and the like).
- 4px · 1
- 8px · 2
- 12px · 3
- 16px · 4
- 20px · 5
- 24px · 6
- 32px · 8
- 40px · 10
- 48px · 12
- 64px · 16
- 80px · 20
- 96px · 24
Measures
- Page gutter
- 20 px on a phone, 40 px from 768 px (px-5 md:px-10).
- Reading measure
- 672 px at most (max-w-2xl): statements, context, research, the intro above the index.
- Panel and caption
- 448 px at most (max-w-md).
- Header bar
- 12 px top and bottom; the wordmark on the page gutter.
- Sections
- 56 px top and bottom (py-14), with 1 px ink above.
- Phone width
- Everything is checked at 375 px, with no sideways scroll.
Over the space
What lies over the 3D field: the welcome panel in the overview, and the caption under whatever is chosen. Both are the live components.
Welcome panel · FieldOverlay.tsx
Caption · FieldCaption.tsx
Folded panel
Motion
Slow and soft. Everything that moves stands still for visitors who ask for reduced motion.
- Ease
- cubic-bezier(0.22, 1, 0.36, 1), the token ease-room in globals.css: quick to start, long to settle.
- Hover
- Colours change over 300 to 500 ms. Arrows slide 4 px to the right.
- Caption
- Fades in over 0.45 s, after 0.35 s, once the camera has mostly arrived.
- Welcome panel
- Rises 12 px and fades in over 0.45 s.
- Arriving in the space
- The camera starts close on the sphere and Prompt Automat, holds 0.6 s, then draws back to the whole field over 3.5 s, easing in and out; the Voices fade in as it pulls away. A drag, zoom or choice ends it.
- Cover
- The drawing writes itself line by line over about seven seconds.
- Building up
- On the case study each block (a heading, a paragraph, an image, a card) fades in and rises 16 px over 0.7 s the first time it scrolls into view; blocks arriving together follow 120 ms apart (Reveal.tsx, data-reveal). Without JavaScript, or printed, everything simply stands.
- Reduced motion
- All of it stops; the drawing is shown whole, the rings stand still and the case study stands built.
The Reality Signal ring, turning once every 25 s.
Sound
Sparing. Sound only answers a visitor's own action.
- Tick
- Clicking an artwork in the space: an 1800 Hz sine, 20 ms, drawn by the browser (tick.ts). Artworks only, not Future Voices or Reality Signals.
- Films
- An artwork's film plays only when pressed, with its own sound.
- The FUTURE VOICES film
- Plays by itself, with its sound at half volume, once the camera has all but arrived at the drawing it was chosen by.
- The artwork's voice
- Reads an answer under The artwork speaks aloud; Voice on/off turns it off.
- One at a time
- Films and the artwork's voice stop each other (sound.ts). The tick is short and quiet enough to sit under both.