Überblick

Web Manual | Landing | Website v5 | 30.09.2026

Web Manual,
Landing

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.

Manual Basic

Namche × Jodok

Kapitel 01Web Manual | Website v5 | 30.09.2026

Web Manual

Regeln und Beispiele, abgeleitet aus der Landing Page. Die Website ist die Quelle; jede Regel zeigt ihr echtes Beispiel.

European AI | Human Systems | Namche × Jodok

Kapitel 02Web Manual

Prinzipien / Haltung

01

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“

02

Volle Tinte

Kein gedämpfter Text. Die Seite setzt --text-muted auf die Primärtinte, auch auf Farbfeldern.

Website: Services-Text in #111111 auf Aion

03

Flach statt Tiefe

Nur die 0,5-px-Haarlinie, keine Schatten, keine Elevation. Trennung über Farbe und Raum.

Website: Legal-Zeile im Footer, Marquee-Trennlinie

04

Eine Familie, zwei Stimmen

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.“

05

Bewegung folgt dem Scroll

Nichts springt, nichts skaliert, nichts blendet beim Scrollen ein. Jede Szene hat einen Endzustand.

Website: Typewriter „Sovereignty“, Pins, Zeile für Zeile

06

Menschen, Ort, Haltung

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

Farbe / Tokens

Grund dunkel

#111111

Hero, Marquee, Work, Cases, Prozess, Insights, Closing

Erebos

#262626

Feature-Karten, Prozess 01, Tinte auf Hell

Nyx

#66666E

Prozess-Karte 02

Rhea

#BAB4AB

Prozess-Karte 03, Bildgrund About

Selene

#F1EFE8

Grund hell, Tinte auf Dunkel, Koordinatenleiste

Hestia | Hook

#EB4629

Footer-Feld, CTA, Cursor auf Dunkel, Meta-Labels

Helios

#FFD433

These / Position (03–04)

Aion

#738CD9

Services (08)

Amphitrite

#22A6A0

Insight-Karte 01

Atlas

#94C7E6

Insight-Karte 02, Fallback hinter dem Reveal-Video

Demeter

#7CA45C

Insight-Karte 03

Cursor Navy

#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

Farbe / Felder pro Sektion

Kapitelwechsel

Der Grund wechselt pro Sektion. Farbfelder sind immer ganze Sektionen oder ganze Karten, nie Akzente in der UI.

Ein Hook

Hestia erscheint pro Ansicht einmal: als CTA „Book a call“, als Meta-Label der Feature-Karten oder als Footer-Feld.

Cursor folgt dem Grund

Hestia auf Dunkel, Navy #1A2A4A auf Hell und auf den Okeanos-Karten, weil Hestia auf Teal verschwinden würde.

Farbfolge

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

Farbe / Text auf Farbe & Kontrast

Sovereign AI

Europe, with agency.

16,41 : 1

AAA

Tinte auf dunklem Grund

Sovereign AI

Europe, with agency.

16,41 : 1

AAA

Tinte auf hellem Grund

Sovereign AI

Europe, with agency.

4,89 : 1

AA

Hestia auf #111111: Meta-Labels, Cursor

Sovereign AI

Europe, with agency.

3,35 : 1

nur AA groß

Hestia auf Selene: nur ab 24 px oder als Fläche

Sovereign AI

Europe, with agency.

4,89 : 1

AA

Dunkle Tinte auf Hestia: CTA, Footer

Sovereign AI

Europe, with agency.

3,35 : 1

nur AA groß

Selene auf Hestia: nur die große Footer-Wortmarke

Sovereign AI

Europe, with agency.

13,23 : 1

AAA

These auf Helios

Sovereign AI

Europe, with agency.

5,83 : 1

AA

Services auf Aion

Sovereign AI

Europe, with agency.

6,32 : 1

AA

Insight 01 auf Amphitrite

Sovereign AI

Europe, with agency.

10,40 : 1

AAA

Insight 02 auf Atlas

Sovereign AI

Europe, with agency.

6,58 : 1

AA

Insight 03 auf Demeter

Sovereign AI

Europe, with agency.

12,38 : 1

AAA

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

Typografie / Rollen

Display | Namche Shadow Sans

Ideas on paper.
Agents at work.

Headlines, Lockup, Karten- und Service-Titel. Nur Medium 500, kein Bold, kein Regular. Laufweite −0,01 em.

Text | Namche Shadow Sans

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.

Label | Namche Shadow Mono

  Whitepaper / Agents

  47.4060° N | 9.7453° E – CampusVäre, Dornbirn, Austria

  Services & Practice Areas     K001

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

Typografie / Skala

Hero

56–110 px | ZAB 1,1

NAMCHE

Display XL

32–100 px | ZAB 1,1

Sovereign AI | Think Tank

Stat / H2

32–56 px | ZAB 1,1

Make the next move legible.

Display

32 px | ZAB 1,1

Frontier Sandbox & Red Teaming

Lede

26 px | ZAB 1,65 | Sans 500

Why Europe needs its own AI infrastructure.

Body

18 px | ZAB 1,65 | Sans 500

Infrastructure, policy and possibility, made tangible.

Mono Nav

18 px | Versalien

Insights Menu Talk

Mono Meta

15,68 px | Versalien

Namche / Sovereignty

Caption

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

Typ-Regeln

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

Typografie / Do & Don’t

Do

Human context for complex work.

Headline in Medium 500

People, place and a point of view.

Lesetext in voller Tinte

About / Story

Label in Mono, Versalien, oben angeschlagen

Insights

Nav ohne Unterstreichung

Don’t

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

Raum & Grid

Skala Y = X/8

128 = Modul X (Sektion-Padding) | 16 = X/8 | Schritte 2 / 4 / 8 / 16 / 32 / 64 | Zeilenabstand Reihe 16, Stapel 8

Desktop 1920 | 12 Spalten | Gutter 32 | Rand 64 (Maßstab 1 : 2)

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.

Mobil

4 Spalten | Gutter 16 | Rand 32 (× 0,5)

Baseline 8

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

Komponenten / Nav & CTA

Talk

Nav auf Dunkel

Talk

Nav auf Hell

  • Work
  • About
  • Services
  • Cases
  • Process
  • Insights
  • Contact

Menü, Eintrag im Hover

Talk

Standard auf Dunkel

Talk

Hover / Fokus

Book a call

Closing-CTA / Nav angedockt

Book a call

Hook-CTA Hover

Talk

Standard auf Hell

Book a call

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.

Nav und CTA

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

Komponenten / Karten

Eine Fingerkuppe, der Abdruck scharf vor tiefblauem Grund Namche / SovereigntyOwn the horizon

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.

01

Sovereignty in the shadow of giants: why Europe needs its own AI infrastructure

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.

Eine Hand flach auf dunklem Gras im tiefen LichtHorizonField systems
ThesisLong horizon
PersonalClose signal

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.

Understand01
Map02
Evolve03
Activate04

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

Komponenten / Labels, Pills & Cursor

Label

About / Story

Services & Practice AreasK001

Quadrat 8 px | Abstand 32 | Mono 15,68 Versalien | Abstand nach unten 32

Split-Label

InsightsAll Insights

Service-Zeile (08)

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).

Koordinatenleiste

K001

Marquee-Liste (05)

Sovereign AI

  • Think Tank  →
  • Frontier Sandbox & Red Teaming

Hover: Punkt wird Hestia, der Pfeil folgt dem Label; nichts skaliert.

Pills

Open mapSovereign AI

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.

Cursor

Metaball-Plus 32 px, Hestia auf Dunkel

Navy #1A2A4A auf Hell

45° gedreht über Links und Buttons

Open map

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

Komponenten / Footer

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

Bildwelt

Das Korallen-Objekt, letztes Standbild des Reveal-Videos

Video 02 / 12b | letztes Standbild |

Zwei Hände, die Fingerspitzen berühren sich, in warmem Licht vor blauem Grund

Video 12b | letztes Standbild |

Motiv

Menschliche Sinne im Close-up: Auge, Ohr, Fingerkuppe, Hand. Warmes Licht auf Haut, dunkler oder farbiger Grund.

Paare

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.

Ohne Filter

Fotos stehen unbearbeitet. Grund hinter dem Bild Erebos, im About-Paar Rhea. Offen: dunkler Verlauf über dem Foto der Tür „Field systems“.

Bewegtbild

Koralle-Reveal (02) und Hände (12b) laufen mit dem Scroll; erstes Bild = Poster, letztes = Standbild.

Don’t

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

Metaball & Mark

64 px | Nav | Selene auf Dunkel

64 px | #111111 auf Hell

128 px

Scroll-Cue (Hero): Metaball-Pfeil in Selene

Mark

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.

Metaball

Organisches Knotennetz, Teil des Formvokabulars mit Quadrat, Pill und Kreis. Flächig, ohne Schatten, einfarbig in Systemfarbe.

Grow once

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.

Hälse

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

Motion / Tokens

Easing | cubic-bezier(0.2, 0, 0, 1)

--ease-standard: schneller Start, weiches Ende. Eine Kurve für alles.

Dauern

--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

Aufsteigen (Hero)

Titel 0 ms → Descriptor +200 → Note +400 → Tag +500, je 600 ms. Eine kurze Intro-Bewegung.

Nichts springt

Kein Bounce, kein Overshoot. Nur --ease-standard.

Nichts skaliert

Keine Zoom-Hover. Bewegung ist Position, Clip oder Form.

Nichts blendet ein

Kein Fade-in beim Scrollen. Inhalte decken sich per Clip auf, gleiten hoch oder schalten an.

Reduced Motion

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

Motion / Scroll-Verhalten

01

Hero-Pin

Der Hero bleibt stehen (Dwell 0,4 Viewport), nur der Metaball-Pfeil morpht mit dem Scroll.

02

Koralle-Reveal

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.

03

These

Typewriter: die Buchstaben behalten ihren Platz und schalten mit dem Scroll an. Der Sternenkreis dreht sich, jeder Stern um die eigene Achse.

04

Position

Drei Zeilen decken sich per Clip auf, 600 ms, Zeilen je 600 ms versetzt.

05

Marquee

Endlos-Drift 54 s linear, pausiert außerhalb des Viewports; der Pfeil-Nudge ist 0,12 s versetzt.

07

About

Das Bildpaar wischt per Clip von oben auf.

08

Services

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.

10

Prozess

Karten ziehen beim Scrollen hoch, Hälse verbinden sie auf jeder Breite; der Text tippt Wort für Wort (90 ms).

11

Insights

Horizontale Schiene im Pin, drei Punkte zeigen den Fortschritt.

12b

Hände + Nav-CTA

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.

Motion-Regeln

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

Voice & Copy

Hero

Frontier AI Initiative

Hero-Note

Infrastructure, policy and possibility, made tangible.

Position

Europe, with agency. AI, with a human horizon. We make the invisible feel inevitable.

Headlines

Ideas on paper. Agents at work. | One seed. Many capabilities. | Make the next move legible.

Closing

Ready to step onto the blank map?

CTA

Talk | Book a call | Load more

Do

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“).

Don’t

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

Section-Patterns 01–06

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

Section-Patterns 07–12

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

Do & Don’t

Do

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

Don’t

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

Abweichungen & offene Punkte

Mark

Offen

Mindestgröße und Schutzraum sind auf der Website nicht definiert. Nur 64 px in der Nav.

Abstände

DS

DS gap-row 18 / gap-stack 10, Website 16 / 8. DS angleichen.

Bildfilter

DS

DS beschreibt Hestia-Filter über Fotos, die Website nutzt keinen. DS bereinigen.

Gedämpfte Tinte

DS

DS: 65 % und Hover-Tint 0,65. Website: volle Tinte überall.

Schrift

DS

DS: Geist Sans 400 für Lesetext. Website: nur Shadow Sans / Mono Medium 500. DS-Tokens nachziehen.

Inhalte

Offen

Work, Cases und Prozess sind Kurzfassungen, bis Jodoks Inhalte kommen. Sprache: nur EN aktiv, DE deaktiviert.

Weitere Komponenten

Offen

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.

Manual Basic

DS = Design-System anpassen | Offen = Entscheidung durch Namche × Jodok