Ein lauter Hook pro Ansicht
Hestia #EB4629 ist das einzige laute Signal einer Ansicht. Alles andere tragen Gaia und die Farbfelder.
Website: Footer-Feld in Hestia, CTA „Book a call“
Kurz- und Langfassung in einem Dokument. Die Kurzfassung (13 Folien) fasst die Regeln aus der Landing Page zusammen: Prinzipien, Farbe und Kontrast, Typografie, Raum & Grid, Komponenten, Bildwelt, Metaball & Mark, Motion, Voice & Copy, Section-Patterns, Don’ts und offene Punkte. Darunter folgen die 22 Kapitel der Langfassung, jedes mit seinem echten Beispiel. Die Website ist die Quelle.
Kapitel 01Web Manual | Website v5 | 30.09.2026
Regeln und Beispiele, abgeleitet aus der Landing Page. Die Website ist die Quelle; jede Regel zeigt ihr echtes Beispiel.
Kapitel 02Web Manual
Hestia #EB4629 ist das einzige laute Signal einer Ansicht. Alles andere tragen Gaia und die Farbfelder.
Website: Footer-Feld in Hestia, CTA „Book a call“
Kein gedämpfter Text. Die Seite setzt --text-muted auf die Primärtinte, auch auf Farbfeldern.
Website: Services-Text in #111111 auf Aion
Nur die 0,5-px-Haarlinie, keine Schatten, keine Elevation. Trennung über Farbe und Raum.
Website: Legal-Zeile im Footer, Marquee-Trennlinie
Namche Shadow Sans Medium für Headlines und jeden Lesetext, Shadow Mono Medium für Labels. Keine Geist, nur Schnitt 500.
Website: „Ideas on paper. Agents at work.“
Nichts springt, nichts skaliert, nichts blendet beim Scrollen ein. Jede Szene hat einen Endzustand.
Website: Typewriter „Sovereignty“, Pins, Zeile für Zeile
Nahaufnahmen menschlicher Sinne statt einer Bilderwand. Europa mit Handlungsmacht.
Website: „People, place and a point of view.“
HaltungEuropa mit Handlungsmacht | KI mit menschlichem Horizont
Quelleindex.html, css/site.css, ds/tokens
Namche × Jodok
Kapitel 03Web Manual
#111111
Hero, Marquee, Work, Cases, Prozess, Insights, Closing
#262626
Feature-Karten, Prozess 01, Tinte auf Hell
#66666E
Prozess-Karte 02
#BAB4AB
Prozess-Karte 03, Bildgrund About
#F1EFE8
Grund hell, Tinte auf Dunkel, Koordinatenleiste
#EB4629
Footer-Feld, CTA, Cursor auf Dunkel, Meta-Labels
#FFD433
These / Position (03–04)
#738CD9
Services (08)
#22A6A0
Insight-Karte 01
#94C7E6
Insight-Karte 02, Fallback hinter dem Reveal-Video
#7CA45C
Insight-Karte 03
#1A2A4A
Cursor auf Hell
RegelFarbe nur aus dem System | Okeanos und Helios nur als ganze Felder, nie als UI-Chrome | Karten-Radius 16 px nur für Farbchips
Quelleds/tokens/colors.css, css/site.css
Kapitel 04Web Manual
01 Hero
02 Reveal
03–04 These
05 Marquee
06 Work
07 About
08 Services
09 Cases
10 Prozess
11 Insights
12 Closing
12b Bild
Footer
Der Grund wechselt pro Sektion. Farbfelder sind immer ganze Sektionen oder ganze Karten, nie Akzente in der UI.
Hestia erscheint pro Ansicht einmal: als CTA „Book a call“, als Meta-Label der Feature-Karten oder als Footer-Feld.
Hestia auf Dunkel, Navy #1A2A4A auf Hell und auf den Okeanos-Karten, weil Hestia auf Teal verschwinden würde.
Reihenfolge wie auf der Website01 Hero bis Footer
Prozess = Gaia-Rampe Erebos → Nyx → Rhea → Selene
Insights = Amphitrite → Atlas → Demeter
Quellecss/site.css
Kapitel 05Web Manual
Sovereign AI
Europe, with agency.
16,41 : 1
Tinte auf dunklem Grund
Sovereign AI
Europe, with agency.
16,41 : 1
Tinte auf hellem Grund
Sovereign AI
Europe, with agency.
4,89 : 1
Hestia auf #111111: Meta-Labels, Cursor
Sovereign AI
Europe, with agency.
3,35 : 1
Hestia auf Selene: nur ab 24 px oder als Fläche
Sovereign AI
Europe, with agency.
4,89 : 1
Dunkle Tinte auf Hestia: CTA, Footer
Sovereign AI
Europe, with agency.
3,35 : 1
Selene auf Hestia: nur die große Footer-Wortmarke
Sovereign AI
Europe, with agency.
13,23 : 1
These auf Helios
Sovereign AI
Europe, with agency.
5,83 : 1
Services auf Aion
Sovereign AI
Europe, with agency.
6,32 : 1
Insight 01 auf Amphitrite
Sovereign AI
Europe, with agency.
10,40 : 1
Insight 02 auf Atlas
Sovereign AI
Europe, with agency.
6,58 : 1
Insight 03 auf Demeter
Sovereign AI
Europe, with agency.
12,38 : 1
Cursor Navy auf Selene
WCAG 2.xAA Text 4,5 : 1 | AA groß und Non-Text 3 : 1 | AAA 7 : 1
Werte berechnet aus den Hex-Tokens der Website
RegelText auf Hestia immer #111111 in voller Stärke
Kapitel 06Web Manual
Ideas on paper.
Agents at work.
Headlines, Lockup, Karten- und Service-Titel. Nur Medium 500, kein Bold, kein Regular. Laufweite −0,01 em.
For governments, NGOs, and companies, an independent, self-contained AI capability is decisive for the future. We advise and accompany you on your path to digital sovereignty.
Jeder Lesetext, ebenfalls Medium 500 (nicht 400), Zeilenabstand 1,65 auf die Baseline 8 gerundet. Keine Geist.
Labels, Nav, Koordinaten, Meta. Medium 500, Versalien, oben angeschlagen, nie vertikal zentriert.
Website: eine Familie, ein Schnitt: Namche Shadow Sans Medium und Shadow Mono Medium. Fallback nur Systemschriften. Namche Shadow Pixel bleibt geparkt: nur Datenvisualisierung und Ladezustände.
RegelImmer das Token: --font-display und --font-sans zeigen beide auf Namche Shadow Sans, --font-mono auf Shadow Mono, --weight-text = 500
Quellecss/site.css, ds/tokens/typography.css
Kapitel 07Web Manual
56–110 px | ZAB 1,1
NAMCHE
32–100 px | ZAB 1,1
Sovereign AI | Think Tank
32–56 px | ZAB 1,1
Make the next move legible.
32 px | ZAB 1,1
Frontier Sandbox & Red Teaming
26 px | ZAB 1,65 | Sans 500
Why Europe needs its own AI infrastructure.
18 px | ZAB 1,65 | Sans 500
Infrastructure, policy and possibility, made tangible.
18 px | Versalien
Insights Menu Talk
15,68 px | Versalien
12 px | Versalien
Open map
Specimen 300 px („Sovereignty“, auf die volle Breite eingepasst) | Laufweite Display −0,01 em | Fluid: clamp(min, vw, max) | ZAB = Zeilenabstand
RegelGrößen nur aus der Skala
Zeilenhöhen auf Baseline 8 gerundet
alles Medium 500, Headlines und Lesetext
Quelleds/tokens/typography.css, css/site.css
Kapitel 08Web Manual
Human context for complex work.
Headline in Medium 500
People, place and a point of view.
Lesetext in voller Tinte
Label in Mono, Versalien, oben angeschlagen
Insights
Nav ohne Unterstreichung
Human context for complex work.
Headline in Regular 400
People, place and a point of view.
Gedämpfte Tinte (65 %)
about / story
Label in Display-Schrift, gemischt
Insights
Nav unterstrichen (nur Fließtext-Links)
Weitere Don’tsGeist oder Regular 400 für Lesetext | Pixel-Schrift in Kern-UI | Größen außerhalb der Skala | Label vertikal zentriert
Links im FließtextLinie volle Stärke, --stroke-text
Kapitel 09Web Manual
128 = Modul X (Sektion-Padding) | 16 = X/8 | Schritte 2 / 4 / 8 / 16 / 32 / 64 | Zeilenabstand Reihe 16, Stapel 8
NAMCHE
Frontier AI Initiative
Spalte 120 px = (1920 − 2 × 64 − 11 × 32) / 12
Breakpoints: 900 px (4 → 12 Spalten) | 1024 px (Rand 32 → 64) | Das Grid ist auf der Seite nie sichtbar, nur in der Produktionsleiste.
4 Spalten | Gutter 16 | Rand 32 (× 0,5)
NAMCHE
Zeilenhöhen werden auf 8 gerundet: 18 px × 1,65 = 29,7 → 32 px. Die Seite läuft auf einem 8er-Raster.
RegelJede Maßangabe löst sich in X/8 auf
DS-Werte 18 und 10 liegen neben der Skala, die Website nutzt 16 und 8
Quelleds/tokens/spacing.css, css/site.css
Kapitel 10Web Manual
Nav auf Dunkel
Nav auf Hell
Menü, Eintrag im Hover
Standard auf Dunkel
Hover / Fokus
Closing-CTA / Nav angedockt
Hook-CTA Hover
Standard auf Hell
Nav angedockt über Footer
Menü: der Nav-Grund umgedreht (hell auf dunkel), Einträge 32 px, Hover = Hestia mit dunkler Tinte; das Quadrat vor MENU wird bei Hover Hestia.
CTA = gekerbte Pill (--shape-pill-notch), Höhe 32, Pfeil-Kachel 30, Label-Einzug 48, Label Mono 18 Versalien; das Label behält in jedem Zustand seine Tinte; bei Hover gleitet der Pfeil 4 px in seine Richtung. Nach dem Closing-CTA kehrt die Nav-CTA als „Book a call“ in Hestia zurück und bleibt bis zum Ende; über dem Footer Selene mit #111111, Hover Erebos mit Selene.
NavINSIGHTS und ■ MENU, Mono 18 Versalien mit 16-px-Quadrat, Abstand 32, Mindesthöhe 32
MobilMENU hinter TALK, unter 340 px nur das Quadrat
Mark 64 px
Quellecss/site.css .nav, .cta
Kapitel 11Web Manual
Feature (06): Erebos, Text links, Bild rechts; unter 900 px Breite Bild oben, Text darunter. Die Headline bricht bei 60 % der Box um. Meta in Hestia. Hover ohne Zoom, der Cursor wird zur Pill.
An analysis of the risks of technological monopolies, and how regional initiatives, from CampusVäre to the European level, can reclaim digital self-determination.
Insight (11): Okeanos-Feld, #111111 in voller Stärke, Padding 32, Mindesthöhe 460.
Tür (09): Erebos, Mindesthöhe 368, Meta oben, Titel unten; „Field systems“ mit Foto (Hand im Gras) unter dunklem Verlauf. Hover: 4 px nach oben.
Prozess (10): Gaia-Rampe dunkel → hell, Titel unten in Versalien, Nummer darunter, Mindesthöhe 276, Karten über Metaball-Hälse verbunden.
Kartenkeine Schatten, keine Radien (Radius 16 nur für Farbchips), Trennung über Farbe / Padding 32
Quellecss/site.css .feature, .insight, .door, .step
Kapitel 12Web Manual
About / Story
Services & Practice AreasK001
Quadrat 8 px | Abstand 32 | Mono 15,68 Versalien | Abstand nach unten 32
InsightsAll Insights
Sovereign AI
Frontier Sandbox & Red Teaming
Punkt 32 px, Abstand 16; offen entfaltet sich der Kreis zum D, der Text klappt darunter auf (32 px Luft oben und unten).
Sovereign AI
Hover: Punkt wird Hestia, der Pfeil folgt dem Label; nichts skaliert.
Case-Pill: Hestia, Mono 12, Padding 16 / 32, Radius Pill (128), in Gebrauch. DS-Tag: 12 px, Haarlinie 0,5, Radius Pill, auf der Website nicht im Einsatz.
Metaball-Plus 32 px, Hestia auf Dunkel
Navy #1A2A4A auf Hell
45° gedreht über Links und Buttons
Case: Pill mit Label folgt dem Zeiger
Form: das Metaball-Plus (--shape-cursor), unanimiert, als Maske; es nimmt Hestia oder Navy an. Es sitzt exakt auf dem Zeiger, das Label folgt. Die Case-Pill gleitet aus ihrer Zeile hoch (600 ms, ohne Skalierung, ohne Fade).
Quellecss/site.css .label, .coords--bar, .service__node, .mono__dot, .cursor
Tag aus ds/tokens/shape.css
Kapitel 13Web Manual
Hestia-Feld mit dunkler Tinte #111111; die Wortmarke in Selene ist auf volle Breite eingepasst (groß, daher 3,35 : 1 zulässig) und gleitet beim Einblenden aus ihrer Zeile hoch (600 ms, bei jeder Rückkehr, ohne Fade). Über dem Footer wird die angedockte Nav-CTA Selene mit #111111, Hover Erebos mit Selene (Hestia würde auf dem Hestia-Footer verschwinden).
Quellecss/site.css .footer, .footer__home, .footer__bar, .footer__legal
SpracheEN aktiv, DE deaktiviert
Kapitel 14Web Manual
Menschliche Sinne im Close-up: Auge, Ohr, Fingerkuppe, Hand. Warmes Licht auf Haut, dunkler oder farbiger Grund.
Zwei Hochformate nebeneinander, Seitenverhältnis 4 : 5, Gutter dazwischen, object-fit cover; ein Fokusbereich pro Bild (data-focus) hält Auge, Ohr, Fingerkuppe und Hand in jedem Format im Ausschnitt.
Fotos stehen unbearbeitet. Grund hinter dem Bild Erebos, im About-Paar Rhea. Offen: dunkler Verlauf über dem Foto der Tür „Field systems“.
Koralle-Reveal (02) und Hände (12b) laufen mit dem Scroll; erstes Bild = Poster, letztes = Standbild.
Bild beim Hover skalieren | Farbfilter oder Multiply über Fotos | Bilderwand ohne Paar-Logik
Alt-Text beschreibt, was zu sehen ist. Website: „Close-up of an amber eye in low, warm light“
Quelleassets/images/*.webp, assets/video/*.jpg, css/site.css .pair, .pair__img
About-Paar deckt sich per Clip von oben auf (600 ms)
Kapitel 15Web Manual
64 px | Nav | Selene auf Dunkel
64 px | #111111 auf Hell
128 px
Scroll-Cue (Hero): Metaball-Pfeil in Selene
Farbe folgt dem Grund (--mark-color: #111111 auf Hell, Selene auf Dunkel). Größe in der Nav 64 px (--mark-size). Mindestgröße und Schutzraum sind auf der Website nicht definiert → offen.
Organisches Knotennetz, Teil des Formvokabulars mit Quadrat, Pill und Kreis. Flächig, ohne Schatten, einfarbig in Systemfarbe.
Der Scroll-Cue wächst einmal beim Laden (1100 ms, 300 ms nach Start), zusammen mit der Schrift. Beim Scrollen werden die Hälse dünn und reißen wie ein Tropfen.
Prozess-Karten sind über Metaball-Enden verbunden: der Punkt fließt über eine konkave Kehle in die Linie, nie hart. Drift 18 s: 1,5 % / −1 %, ±0,4°.
Quelleds/tokens/shape.css, shapes.css (--shape-logo), assets/shapes/arrow-down.svg, js/site.js (GROW_MS 1100, GROW_AT 300), ds/tokens/motion.css
Kapitel 16Web Manual
--ease-standard: schneller Start, weiches Ende. Eine Kurve für alles.
--dur-fast
120 ms
Farbe, Link-Linie, About-Paar versetzt
--dur-base
200 ms
Nav-Farbe, Menü, Karten-Hover
--dur-slow
600 ms
Aufsteigen, Clip-Reveals, Service-Punkt, Case-Pill
Grow once
1100 ms
Scroll-Cue beim Laden
--dur-drift
18 s
Metaball-Drift, unendlich
Marquee
54 s linear
Drift × 3, pausiert außerhalb des Bildes
0 % | clip unten 100 %, +16 px
50 % | halb sichtbar
100 % | clip offen, Position 0
Titel 0 ms → Descriptor +200 → Note +400 → Tag +500, je 600 ms. Eine kurze Intro-Bewegung.
Kein Bounce, kein Overshoot. Nur --ease-standard.
Keine Zoom-Hover. Bewegung ist Position, Clip oder Form.
Kein Fade-in beim Scrollen. Inhalte decken sich per Clip auf, gleiten hoch oder schalten an.
Jede Szene im Endzustand, Drift aus, Cursor aus.
Quelleds/tokens/motion.css, css/site.css (namche-rise, namche-marquee), js/site.js
Hover-Tint 0,65 im DS, die Website setzt gedämpfte Tinte auf volle Stärke
Kapitel 17Web Manual
Der Hero bleibt stehen (Dwell 0,4 Viewport), nur der Metaball-Pfeil morpht mit dem Scroll.
Video gleitet über den Hero und läuft mit dem Scroll. Koordinaten wandern zur Mitte, ihre Selene-Leiste wird breit. Das Statement steigt auf, schiebt das Video hoch und deckt sich Zeile für Zeile auf.
Typewriter: die Buchstaben behalten ihren Platz und schalten mit dem Scroll an. Der Sternenkreis dreht sich, jeder Stern um die eigene Achse.
Drei Zeilen decken sich per Clip auf, 600 ms, Zeilen je 600 ms versetzt.
Endlos-Drift 54 s linear, pausiert außerhalb des Viewports; der Pfeil-Nudge ist 0,12 s versetzt.
Das Bildpaar wischt per Clip von oben auf.
Ein Service offen, vom Scroll geführt: der Kreis wird zum D, der Text gleitet Zeile für Zeile hoch. Mobil wächst der Seed einmal (2400 ms), sobald ein Drittel sichtbar ist.
Karten ziehen beim Scrollen hoch, Hälse verbinden sie auf jeder Breite; der Text tippt Wort für Wort (90 ms).
Horizontale Schiene im Pin, drei Punkte zeigen den Fortschritt.
Das Video scrubbt mit dem Scroll. Nach dem Closing-CTA dockt die Nav-CTA als „Book a call“ in Hestia an; die Footer-Wortmarke gleitet hoch.
RegelSzenen folgen dem Scroll in beide Richtungen; nur Grow once, Drift, Marquee und das Tippen im Prozess laufen auf der Uhr
Nav-Farbe folgt dem Grund in 200 ms
Reduced Motion = jede Szene im Endzustand
Quellejs/site.js, css/site.css
Kapitel 18Web Manual
Frontier AI Initiative
Infrastructure, policy and possibility, made tangible.
Europe, with agency. AI, with a human horizon. We make the invisible feel inevitable.
Ideas on paper. Agents at work. | One seed. Many capabilities. | Make the next move legible.
Ready to step onto the blank map?
Talk | Book a call | Load more
Kurze Zweitakter mit Punkt. Europa und der Mensch als Horizont. Konkrete Verben: map, stress-test, activate. Headline, dann ein erklärender Satz. Labels als Ort / Thema („Namche / Sovereignty“).
Ausrufezeichen, Superlative und Hype-Vokabular. Lange Headlines ohne Punkt. Floskeln ohne Inhalt. Englisch und Deutsch im selben Satz mischen.
Statement: „Namche is a network for applied futures research. As our reality erodes, new biospheres emerge at the boundary of artificial and historical intelligence.“
RahmungNamche × Jodok
Website-Copy auf Englisch, DE-Schalter vorhanden, deaktiviert
Quelleindex.html
Kapitel 19Web Manual
Lockup und Haltung
Titel 56–110 links, Note ab Spalte 8 auf 4 Spalten, Fußzeile mit Haarlinie, Tag und Scroll-Cue. Nav: INSIGHTS | ■ MENU | TALK.
Ort und Statement
Vollbild-Video, darunter das Statement zentriert auf 8 Spalten auf Selene; Koordinaten kleben am Fuß.
Ein Wort als These
Specimen bis 300 px auf volle Breite, Label oben, Sublinie Lede 26 auf 5 Spalten, Sternenkreis dahinter.
Drei Haltungssätze
Im selben Pin wie 03: drei Zeilen mit großem Punkt, Clip-Reveal nacheinander.
Practice Areas
Laufband 32–100 px, darunter Mono-Liste mit Punkten unter einer Selene-Haarlinie; öffnet die Relations-Map.
Whitepaper / Agents
Label, H2, zwei Feature-Karten (Text links, Bild rechts), Load more klappt eine Liste mit Haarlinien auf.
Jede SektionPadding 128 oben und unten, Rand 32 / 64, Label → H2 → Inhalt
Kopie in Work, Cases und Prozess ist Kurzfassung, bis die Inhalte von Jodok kommen
Quelleindex.html, css/site.css
Kapitel 20Web Manual
Menschen und Ort
H2, Sublinie in Shadow Sans 18 auf 5 Spalten, Bildpaar 4 : 5 auf Rhea-Grund.
Fähigkeiten
Pin; Label mit Code K001; Bühne 3 : 8 Spalten, Seed-Metaball links, Service-Liste rechts, ein Eintrag offen.
Einstiege
Label, H2, drei Türen im Grid mit Gutter; Meta oben, Titel unten; die erste Tür mit Foto.
Vier Schritte
Kartenstapel in der rechten Hälfte, Text links daneben, Gaia-Rampe, Metaball-Hälse.
Artikel
Split-Label mit „All Insights“, horizontale Schiene im Pin, Okeanos-Karten, Fortschrittspunkte.
Einladung
Titel 32–100 auf 8 Spalten, Lede 26 auf 6, Hook-CTA; danach dockt die Nav-CTA an. Hände-Video; Footer-Feld in Hestia.
Jede SektionPadding 128 oben und unten, Rand 32 / 64, Label → H2 → Inhalt
Kopie in Work, Cases und Prozess ist Kurzfassung, bis die Inhalte von Jodok kommen
Quelleindex.html, css/site.css
Kapitel 21Web Manual
Ein Hook pro Ansicht: Hestia #EB4629
Volle Tinte, auch auf Farbfeldern
Eine Familie: Shadow Sans Medium für Headlines und Text, Shadow Mono für Labels
Maße aus Y = X/8, Grid 12 / 32, Baseline 8
Fotos ohne Filter, als 4 : 5-Paare
Szenen scroll-gebunden, --ease-standard, Endzustand für Reduced Motion
Text auf Hestia in #111111
Cursor: Hestia auf Dunkel, Navy #1A2A4A auf Hell
Bild-Hover-Zoom
Punkt wächst beim Hover
Gedämpfte 65-%-Tinte
Schatten, Blur, Glass
Okeanos oder Helios als UI-Chrome
Hestia als Lesetext auf Selene (3,35 : 1)
Geist oder Regular 400, Pixel-Schrift in Kern-UI
Fade-in beim Scrollen, Bounce, Overshoot
Die Website ist die Quellewo sie vom DS abweicht, gilt die Website, außer bei den Punkten auf der nächsten Seite
Kapitel 22Web Manual
Mindestgröße und Schutzraum sind auf der Website nicht definiert. Nur 64 px in der Nav.
DS gap-row 18 / gap-stack 10, Website 16 / 8. DS angleichen.
DS beschreibt Hestia-Filter über Fotos, die Website nutzt keinen. DS bereinigen.
DS: 65 % und Hover-Tint 0,65. Website: volle Tinte überall.
DS: Geist Sans 400 für Lesetext. Website: nur Shadow Sans / Mono Medium 500. DS-Tokens nachziehen.
Work, Cases und Prozess sind Kurzfassungen, bis Jodoks Inhalte kommen. Sprache: nur EN aktiv, DE deaktiviert.
Slider und kreative Szenen wie „Sovereignty“ gibt es noch nicht. Ideen und Grenzen stehen in docs/future-components.md. Neue Teile entstehen nur über npm run new, mit Tokens.
DS = Design-System anpassen | Offen = Entscheidung durch Namche × Jodok