Internal

Guia de estilo NEXO.

NEXO torna execucoes de IA deterministicas, reproduziveis e atribuiveis com Trust Score, Evidence Path e estado de conhecimento versionado.

TokensAtomsMoleculesOrganismsTemplates

Zurück zur Homepage

logo surfaces colors typography spacing radius components animations

REFERENCE

Hero + QC als Materialstandard.

Die Source nutzt Glas, kaltes Cyan-Licht, dezente Gold-Reflexe und technische Tiefe als wiederholbaren visuellen Standard.

Glass edgeDeep cyanQC gold glint

LOGO RULES

NEXOPrimary lockup

Primary lockupNEXO Wortmarke plus ruhiger Mark-Frame fuer Hero, Nav und Footer.

Logo RuleDas Zeichen steht in klaren Flaechen. Glow entsteht ueber Material und Licht, nicht ueber zufaellige Effekte.

Icon systemKleine Marks duerfen kompakt sein; groessere Marks brauchen Luft, Frame und ausreichenden Kontrast.

01Bestehendes Wortzeichen in Navigation und Footer ruhiger einsetzen

02App-Mark mit Luft im Frame, nie hart bis an den Rand gezogen

03Wordmark und Mark nur dort paaren, wo mehr Praesenz gebraucht wird

04Navigation, Mobile-Menue und Footer nutzen denselben Brand-Slot statt Seitennudges

05Glow ueber Container und Lichtfuehrung steuern, nicht ueber Effekte aufblasen

ATOMS

Brand Mark und Wordmark als kontrollierte Atoms.

Alle Logo-Instanzen nutzen denselben Media-Frame: Bild in der Mitte, klare Groessenstufen und Tonalitaeten statt einzelner Ausnahmen.

Navigation

Kompakte Wortmarke mit engem Frame fuer Header und mobile Menues.

Panel

Standard-Mark auf Karten, Proof Panels und Listen.

Display

Grosses Zeichen fuer Hero-, Styleguide- und Showcase-Kontexte.

00 · Surfaces

Surface Recipes

Panels, Washes und Shadows sind eigene Bausteine.

Panel Gradient--nexo-panel-gradient

Surface preview

Standardflaeche fuer Cards und Section-Panels.

Panel Strong--nexo-panel-gradient-strong

Surface preview

Hero-seitige oder hervorgehobene Oberflaechen.

Liquid Glass.nexo-liquid-glass

Surface preview

Optionaler Materialmodus fuer besonders transparente, fluide Hero- oder Showcase-Flaechen.

Panel Wash--nexo-panel-wash

Surface preview

Leichter Akzentfilm fuer Tiefe ohne Neon-Look.

Panel Shadow--nexo-panel-shadow

Surface preview

Grundschatten fuer das Surface-System.

CMS HERO

Strategic Superficie de prova

Hero, Visual Wash, Tag-Molecules und Proof Strip bilden ein wiederverwendbares Organism fuer strategische NEXO-Seiten.

Evidence PathTrust ScoreReplayProof Pack

Superficie de provaThese -> Lauf -> pruefbares Artefakt

CMS CTA

Proof Room Zugang beantragen

Visual, Kicker, Titel, Text und Aktionen bilden ein wiederverwendbares CTA-Organism fuer strategische Seiten, Detailseiten und Proof-Pfade.

Access beantragen NDA Proof Room

Priorities

Vier Leitplanken fuer jede neue Komponente.

CORE

Brand Tokens

Farben, Typografie, Spacing und Radien definieren den gesamten Auftritt.

MATERIAL

Surface System

Panels, Washes, Borders und Shadows halten alle Seiten konsistent zusammen.

Component Primitives

Buttons, Badges, Inputs und Cards bilden die Basissprache der Oberfläche.

FILES

Reference Paths

Die wichtigsten Quellen sind index.css, NexoNav.tsx und die zentralen Page-Komponenten.

Usage Rules

Source-Regeln für Oberfläche, Claims und Rhythmus

FRAME

Nutze klare Rahmen statt generischer Glow-Flächen.

CLAIMS

Halte Claims kurz und gib Beweisräume separat.

RHYTHM

Variiere Seitenrhythmus, aber nicht das Materialsystem.

01 · Farben

Color Tokens

Variablen als Source of Truth.

:rootAlle Farben, Abstaende, Typografie und Radien werden als CSS Custom Properties gefuehrt.

index.cssDie Token-Datei bleibt der zentrale Code-First-Design-Source fuer den Consumer.

Background Base--nexo-bg-base

#02060a

Surface 1--nexo-bg-surface-1

#07131a

Surface 2--nexo-bg-surface-2

#0e1d26

Surface 3--nexo-bg-surface-3

#192c34

Refracted White--nexo-accent-bright

#f4fffc

Tempered Teal--nexo-accent-rgb

142, 232, 223

Accent Deep--nexo-accent-deep

#1d6f79

Gold Glint--nexo-gold-rgb

216, 179, 106

Text Primary--nexo-text-primary

#f3f8fb

Text Secondary--nexo-text-secondary

#b8c8d6

Text Muted--nexo-text-muted

#738397

Border--nexo-border

rgba(..., 0.18)

02 · Typografie

Type Scale ist eine kontrollierte Token-Treppe.

300 · 400 · 500 · 600 · 700 · 800400 · 500 · 600

Display & Body

Outfit

Display-Headlines und Body Copy bleiben in einer klaren, ruhigen Groteskfamilie.

Monospace / Data

JetBrains Mono

Fuer Badges, Labels, Code-Snippets und Metriken. Praezise, technisch, lesbar.

Fluid Scale

clamp()

Hero- und Section-Groessen skalieren ueber Tokens, nicht ueber viewportgebundene Einzelfaelle.

Display Leading

Line height

Fuer Legal, Compliance und regulierte Entscheidungen bleibt die Lesefuehrung eng, aber nicht gequetscht.

Run IDXS--text-xs

Monospace Labels, Badges

Evidence noteSM--text-sm

Body Small, Nav Links

Replayable knowledge stateBase--text-base

Body Text, Descriptions

Proof surface bodyLG--text-lg

Lead Text, Card Body

Trust ScoreXL--text-xl

Subheadings, Feature Titles

Evidence Path2XL--text-2xl

Card Headings

Runtime Anatomy3XL--text-3xl

Section Headings

Knowledge Route4XL--text-4xl

Page Headings

Berechenbares Wissen5XL--text-5xl

Hero Subheadings

NEXO6XL--text-6xl

Hero Headlines

03 · Abstände

Spacing Matrix

Abstaende folgen festen Variablen.

4px--space-1

0.25rem

8px--space-2

0.5rem

12px--space-3

0.75rem

16px--space-4

1rem

24px--space-6

1.5rem

32px--space-8

2rem

48px--space-12

3rem

64px--space-16

4rem

96px--space-24

6rem

04 · Radien

Border Radius

Radien sind bewusst und sparsam.

Small--radius-sm

6px

Medium--radius-md

12px

Large--radius-lg

16px

XL--radius-xl

24px

2XL--radius-2xl

32px

Full--radius-full

9999px

05 · Komponenten

UI Components

Module werden aus stabilen Layern zusammengesetzt.

Buttons

Primary Button Secondary Button Small Primary Small Secondary

Badges

WHITEBOXDETERMINISTISCHQUANTUMAUDITIERBARSICHERADAPTIV

Cards

STANDARD

Standard Card

Glassmorphism-Karte mit subtilen Cyan-Kanten und ruhigem Graphit-Wash.

ACCENT

Accent Card

Hervorgehobene Karte mit Petrol/Cyan-Akzent und staerkerer Lichtfuehrung.

FEATURE

Feature Card

Kompaktes Molecule aus Feature Icon, Headline und erklaerender Kurzbeschreibung.

Feature Icons

SHCLUIQC

NEXO Orbit Symbol

60px

100px

160px

220px

Form Elements

Text InputEmail Input

Legacy Source Labels

HOME FEATUREBald smarter als GPT 5.3

Legacy-Source-Label aus dem alten Home-Bento. Im Rebuild nur als Copy-Parity-Referenz, nicht als aktuelle Leistungsbehauptung.

HOME FEATUREKeine Halluzinationen

Aktive Rebuild-Formulierung fuer die deterministische Runtime und Replay-Bindung.

TECH NOTEDas Gehirn denkt diffusionsbasiert – NEXO auch.

Source-Hinweis auf die neurowissenschaftliche Analogie, im Rebuild als Forschungs-/Architekturkontext gefuehrt.

CAREERSKeine passende Stelle dabei?

Source-CTA fuer Initiativbewerbungen und Rollen, die im neuen Careers-System als Role Map erweitert wurden.

Source Primitive Aliases

Source Surface

Glass Card Molecule

Kompatibler Source-Card-Name, aber auf dem Factory Surface System aufgebaut.

Primary Secondary

WHITEBOXQCframework · route contractready

.nexo-cardCard molecule

Source-Card als Factory Surface-Molecule.

.nexo-btn-primaryPrimary button atom

Source-Hauptaktion auf dem Factory Button Atom.

.nexo-btn-secondarySecondary button atom

Source-Nebenaktion auf dem Factory Button Atom.

.nexo-badgeBadge atom

Source-Badge auf dem Status/Tag Atom.

.nexo-feature-iconFeature icon atom

Source-Feature-Icon auf dem Icon Atom.

.nexo-section-labelSection label atom

Source-Section-Label auf dem Label Atom.

.nexo-framework-metaFramework meta atom

Source-Meta-Label fuer Systemnotizen.

.nexo-framework-statusFramework status atom

Source-Status-Pill fuer Framework-Kontext.

.nexo-liquid-glassSurface mode

Source-Materialmodus als kontrollierter Surface Modifier.

Source Layout Aliases

SectionShell

Layout primitives stay atomic.

PageShell, SectionShell, SectionHeader und SurfacePanel werden als Source-Aliase auf Factory Templates, Sections und Surface-Molecules gemappt.

Evidence PathTrust ScoreReplay

KeyValuePanel

Superficie de prova Data

Definition-List-Molecule fuer strukturierte Proof- und Audit-Werte.

Route: /proof-pilot/
Status: crawlable static HTML
Locale: de, en, es, fr, ar, ja, ko, zh-TW, pt

InfoFlowPanel

Source flow becomes a reusable organism.

FlowList und FlowStep behalten ihre Source-Namen, nutzen aber Factory-Abstaende, Tokens und responsive Grid-Regeln.

Quelle inventarisieren Atomic transfer contract

Modul in Styleguide bauen Atomic transfer contract

Consumer aus Slots zusammensetzen Atomic transfer contract

PrepCard

Reusable prep molecule

Source-Card fuer Vorbereitung, Readiness und Proof-Unterlagen.

VisualCTA

Proof Solicitar piloto

Visual, Kicker, Copy und Aktion bleiben getrennte Slots.

Pilot starten

.nexo-page-shellPage shell

Source-Seitenrahmen auf dem Factory Page Template.

.nexo-section-shellSection shell

Source-Section auf dem Factory Section Band.

.nexo-containerContainer slot

Source-Container auf dem zentralen Breiten-Token.

.nexo-surface-panelSurface panel

Source-Panel auf dem NEXO Surface-System.

.nexo-key-value-panelKey-value panel

Definition-List-Molecule fuer Audit- und Proof-Daten.

.nexo-info-flow-panelInfo flow panel

Head plus FlowList als wiederverwendbares Organism.

.nexo-prep-cardPrep card

Source-Vorbereitungs-Card auf dem Factory Card-Molecule.

.nexo-list-boardFlow list board

Source FlowList auf dem Factory Listen-Grid.

.nexo-flow-stepFlow step

Nummerierter Schritt mit Text- und Meta-Slot.

.nexo-visual-ctaVisual CTA

Source CTA-Organism mit Bild-, Copy- und Action-Slot.

.nexo-concept-tagsConcept tag list

Source ConceptTagList auf dem Factory Tag-Atom.

NEXO Component Graph Contract

nexo-component-graph.v1Sektion wählen - Inhalts Box wählen - Kachel Typ wählen - Inhalt Komponenten wählen

Diese Contract-Matrix verbindet Atomic Design, Styleguide-Proof und spätere Builder-Komposition. Page-Shells bleiben als markierte Migrationsebene erlaubt; Standardmodule brauchen Slots, Props und Styleguide-Evidence.

nexo.fixture.styleguide-proof-surfaceManifest-attached graph fixture

Diese Fixture hängt am Styleguide-Manifest-Block und wird rekursiv gegen Layer, Node Types und Pflicht-Slots geprüft.

sectionNexoCmsHero

fixture-proof-section

content-boxNexoSourcePrimitiveAliases

fixture-content-box

tileNexoProofTile

fixture-proof-tile

content-componentNexoTextBlock

fixture-text-component

sectioncontent-boxtilecontent-component

organism · section

NexoCmsHero

nexo.organism.cms-hero

maturity: styleguide-proven
slots: eyebrow, title, text, tags, visual, proofStrip
uses: nexo.atom.label, nexo.molecule.tags, nexo.molecule.proof-strip, nexo.atom.media-frame

organism · section

NexoCmsCta

nexo.organism.cms-cta

maturity: styleguide-proven
slots: eyebrow, title, text, actions, visual
uses: nexo.atom.label, nexo.atom.button, nexo.atom.media-frame

organism · section

NexoFaq

nexo.organism.faq

maturity: styleguide-proven
slots: items, question, answer
uses: nexo.molecule.faq-item, nexo.atom.label

atom · content-component

NexoOrbit

nexo.atom.orbit-symbol

maturity: styleguide-proven
slots: mark
uses: none

molecule · content-box

NexoSourcePrimitiveAliases

nexo.molecule.source-primitive-aliases

maturity: styleguide-proven
slots: selector, label, text
uses: nexo.atom.button, nexo.atom.badge, nexo.molecule.card

molecule · tile

NexoProofTile

nexo.molecule.proof-tile

maturity: styleguide-proven
slots: kicker, title, text, tags
uses: nexo.atom.label, nexo.atom.button, nexo.molecule.tags

atom · content-component

NexoTextBlock

nexo.atom.text-block

maturity: styleguide-proven
slots: text
uses: none

organism · section

NexoSourceLayoutAliases

nexo.organism.source-layout-aliases

maturity: styleguide-proven
slots: section, contentBox, tiles, actions
uses: nexo.section.shell, nexo.molecule.surface-panel, nexo.molecule.key-value-panel, nexo.organism.visual-cta

Early Access Waitlist

Early Access

Sei dabei, wenn NEXO startet

Trage dich in die Warteliste ein und erhalte frühzeitigen Zugang zum deterministischen KI-Modell der nächsten Generation.

Du bist auf der Warteliste!Du bist auf der Warteliste! Wir melden uns bald.

Bitte gib deine E-Mail-Adresse ein.Kein Spam. Kein Abo. Nur NEXO.

CMS FAQ Accordion

Was ist der Unterschied zu klassischen LLM-Lösungen?

Der Lauf ist deterministisch im fixierten Kontext: dieselben Inputs, denselben Wissensstand und dieselben Reaktionswege ergeben denselben reproduzierbaren Output.

Was ist ein Trust Score in der Praxis?

Trust Score beschreibt den Vertrauensgrad je Ausgabe auf Basis definierter Metriken statt auf ein implizites, nur textuell erklärtes Sicherheitsempfinden.

Wie werden Beweise nachgenutzt?

Trace, Evidence Path, Wissensreferenzen und Zustandsänderungen werden als Artefatos exportiert und in der Reviewschicht erneut geprüft.

Source CMS FAQ Catalog

Methodik

Was ist der Unterschied zu klassischen LLM-Lösungen?

Der Lauf ist deterministisch im fixierten Kontext: dieselben Inputs, denselben Wissensstand und dieselben Reaktionswege ergeben denselben reproduzierbaren Output.

Was ist ein Trust Score in der Praxis?

Trust Score beschreibt den Vertrauensgrad je Ausgabe auf Basis definierter Metriken statt auf ein implizites, nur textuell erklärtes Sicherheitsempfinden.

Wie werden Beweise nachgenutzt?

Trace, Evidence Path, Wissensreferenzen und Zustandsänderungen werden als Artefatos exportiert und in der Reviewschicht erneut geprüft.

Ist alles schon produktionsreif?

Die Struktur ist auf Pilotierung mit klaren Freigaben ausgelegt. Produktive Einsätze folgen aus derselben Methodik in denselben Prüfflächen.

Technologie

Warum spricht NEXO von einem Lauf statt von einer Antwort?

Weil Output nur ein Artefakt ist. Entscheidend sind Run-Kontext, Wissensbindung, Berechnungspfad, Evidence Path, Trust Score und Replay.

Was bleibt öffentlich und was gehört in den Proof Room?

Öffentlich zeigen wir Kategorie, Artefatos und Pilotlogik. Tiefe Demos, Benchmarks, Reuse-Messungen und Architektur-nahe Belege gehören hinter NDA.

Warum ist die Wissensschicht versioniert?

Nur versioniertes Wissen macht lokale Änderungen, Blast Radius, Replay und Review später nachvollziehbar.

Proof Pilot

Warum muss man sich für den Proof Pilot bewerben?

Wir priorisieren Use Cases mit klarem Scope, Wissensraum, Reviewern und messbaren Erfolgskriterien, damit ein Pilot wirklich beweisen kann.

Welche Materialien helfen beim Einstieg?

Hilfreich sind Dokumente, Testfragen, Benchmarks, bestehende Workflows, Security- oder Compliance-Scope und ein interner Sponsor.

Wann braucht es den NDA Proof Room?

Wenn Demos, Daten, Reuse-Messungen, Contribution Ledger oder technische Belege nicht öffentlich gezeigt werden sollen.

Proof Room

Ist der Proof Room nur ein geschützter Downloadbereich?

Nein. Er ist ein kuratierter Beweisraum mit Zugriffsstufen, Proof Runs, Evidence Packs, Demos, Replay-Paketen und Technical-DD-Material.

Welche Zugriffsstufen gibt es?

Typisch sind Qualified Viewer, NDA Viewer und Technical Reviewer. Die Tiefe hängt von Rolle, Risiko und Partnerpfad ab.

Welche Belege bleiben geschützt?

Architektur-nahe Details, tiefe Demos, große Codebase-Materialisierung, Performance-Kontext und IP-sensitive Proof Packs bleiben kontrolliert.

Use Case

Wie wählt NEXO den passenden Use Case aus?

Wir prüfen Kritikalität, Nachweisbedarf, Datenlage, Reviewer, Scope und ob ein reproduzierbarer Lauf echte Entscheidungstiefe zeigen kann.

Warum sehen Use-Case-Seiten ähnlich aus?

Die Struktur ist bewusst CMS-artig: Problema, NEXO-Unterschied, Artefatos, Fluxo do piloto und CTA bleiben vergleichbar, während Inhalt und Visual spezifisch werden.

Kann ein Use Case später tiefer werden?

Ja. Öffentliche Seite, Proof Pilot und NDA Proof Room sind drei Tiefen desselben Pfads.

Product

Sind die Produkte eigene Apps oder Oberflächen auf derselben Foundation?

Die Produktseiten übersetzen dieselbe Foundation-Logik in konkrete Workspaces: Business, Private, Research, Coding, Finance und Health.

Was unterscheidet einen Workspace von einem Chat?

Ein Workspace hält Läufe, Wissen, Evidence, Review, Rollen und Exporte zusammen, statt nur einzelne Antworten zu erzeugen.

Wie startet ein Produktpilot?

Mit Team-Scope, Wissensraum, Rollen, Review-Kriterien und einer klaren Produktspur im Proof-Pilot-Funnel.

STANDARD

Primary Button

Hauptaktion fuer Proof Pilot, Access und qualifizierte naechste Schritte.

STANDARD

Small Primary

Kompakte Hauptaktion in Cards, Detailseiten und mobilen Panel-Kontexten.

STANDARD

Secondary Button

Leisere Navigation zu Technologie, Details oder Rueckwegen.

STANDARD

Standard Card

Graphit-Panel mit zurueckhaltendem Wash und praezisem Akzent-Rand bei Hover.

ACCENT

Accent Card

Karte mit Petrol/Cyan-Akzent fuer hervorgehobene Inhalte.

STANDARD

Feature Card

Mit Feature-Icon und kompaktem Layout.

LIQUID

Liquid Glass Card

Transparenter Materialmodus fuer Hero- und Showcase-Flaechen.

∀

Radikale Transparenz

Jede Ausgabe braucht für uns einen Vertrauensgrad und einen sichtbaren Evidence Path. Ohne das ist es keine belastbare KI.

Evidence PathTrust ScoreAudit Lens

⊕

Determinismus als Prinzip

Im fixierten Run-Kontext bleibt jeder Lauf reproduzierbar. Wir bauen keine Systeme, die sich im Pfad verlieren.

Run ContextQC StateInvariant

ArchitekturDeterministisch-diffusionsbasiertStochastisch-seriell (Autoregressive)

Ausgabe-KonsistenzDeterministisch im fixierten Run-KontextVariiert bei gleicher Eingabe

VertrauenssignalTrust Score pro OutputSelbstsicherheit ohne Pfadbeleg

HerleitungEvidence Path bis auf WissensbausteineNur indirekt oder nachträglich

Atom

Tag, Label, Button, Icon Badge, Metric

Molecule

Proof Card, Flow Node, Field Row, Role Row

Organism

Hero, Bento Grid, Access Ladder, Evidence Stack

Template

Hub Page, Detail Page, Legal Page, Proof Pilot

Stimmen aus der Praxis

Was Pilotpartner sagen

Die Source-Seite setzt hier bewusst auf reale Review-Situationen: Medizin, Compliance und Forschung brauchen denselben pruefbaren Lauf, aber andere Entscheidungskontexte.

Die Fähigkeit, jeden Berechnungsschritt zu auditieren, ist für uns nicht optional – es ist die Grundvoraussetzung für den Einsatz in der Patientenversorgung.

Zum ersten Mal haben wir ein KI-System, das wir vor dem Regulator vertreten koennen. Nicht weil wir es behaupten, sondern weil wir es beweisen koennen.

MOTION

Bewegung ist Proof-Orientierung, kein Effektfilm.

Reveals, Spotlights und Hover-Zustaende sollen Hierarchie, Fokus und Interaktion verdeutlichen. Animierte Oberflaechen muessen reduziert bleiben und ohne JavaScript-Inhalt crawlbar sein.

Fade Up

Einblenden von unten fuer Section- und Card-Reveals.

.nexo_motion_reveal

Float

Sanftes vertikales Schweben fuer kleine Akzent-Objekte.

.nexo_style_float_demo

Pulse Glow

Zurueckhaltendes Pulsieren fuer Proof- und Mark-Fokus.

.nexo_style_pulse_demo

Spotlight

Interaktive Surface-Aufhellung bei Hover oder Fokus.

.nexo_spotlight_surface

Source Pulse Glow

Source-kompatibler Alias fuer pulsierende Mark- und Proof-Flaechen.

.nexo-animate-pulse-glow

Source Float

Source-kompatibler Alias fuer sanfte vertikale Bewegung.

.nexo-animate-float

Source Fade Up

Source-kompatibler Alias fuer Reveal von unten.

.nexo-animate-fade-up

Source Fade In

Source-kompatibler Alias fuer einfaches Einblenden.

.nexo-animate-fade-in

USAGE

Primaerfarbe aendern--nexo-accent-glow: #8ee8df;

Hintergrund aendern--nexo-bg-base: #02060a;

Schriftgroesse anpassen--text-3xl: clamp(...);

Spacing skalieren--space-8: 2rem;

Scroll Reveal

Die Source-Reveal-Idee ist im Rebuild als CSS-only Motion-Klasse modelliert und bleibt bei reduzierter Bewegung deaktivierbar.

.nexo_motion_reveal.nexo_motion_reveal:nth-child(2).nexo_motion_reveal:nth-child(3).nexo_motion_reveal:nth-child(4).prefers-reduced-motion