§22 · Website spherity.com

Erstes Asset, das die Welt sieht.

spherity.com ist das wichtigste owned Channel außerhalb der Produkte. Sie folgt denselben Designsystem-Regeln wie die Apps — Untitled UI Tokens mit Spherity-Override, Archivo + IBM Plex Mono, Buttons + Forms + Icons aus Layer 1/2 reusen. Sub-Brand-Akzent erscheint nur auf der jeweiligen Sub-Brand-Landing, nirgends sonst.

Light-Mode-Default (§11.1) — Hero, Sub-Brand-Tiles, Body, Footer alle auf hellem Hintergrund. Petrol Dark ist Accent (Buttons, Active-States, Strong-Headlines), nicht Background. Dark-Mode bleibt opt-in für Campaign-/Brand-Banner.

Sitemap (Top-Level)

§22.1
spherity.com/ ├── / Home · Hero + Produkt-Tiles + Customer-Logos + CTA ├── /products/ │ ├── /caro CARO Sub-Brand-Landing │ ├── /vera VERA Sub-Brand-Landing (Studio + DPP) │ ├── /eida EIDA Sub-Brand-Landing │ └── /kyle KYLE Sub-Brand-Landing ├── /solutions/ Branchen-Sicht (Pharma · Battery · Textile · Banking) ├── /resources/ │ ├── /whitepaper Whitepaper-Library │ ├── /press Press-Releases + Press-Kit │ ├── /blog Blog (Substack-Embed oder eigenes CMS) │ └── /customer-stories Customer-Cases ├── /company/ │ ├── /about Mission · Team · Investoren │ ├── /careers Open Roles + Culture-Statement │ └── /contact Kontakt-Formular ├── /legal/ Impressum · Datenschutz · AGB · Cookies └── /powered-by-spherity Co-Branding-Erklärseite (TBD-URL, §25)

Live-Mockup · Home

§22.2–§22.5

Light-Mode-Default (§11.1). Header (sticky, max. 80 px, Off-White) · Hero (Off-White-BG mit Cyan/Petrol-Radial-Gradients und Petrol-Solid-CTA) · Sub-Brand-Tiles (4 nebeneinander auf Desktop, Sand-Light-BG) · Footer (Sand-Light, 4-Spalten + Newsletter + Bottom-Strip mit Legal).

https://spherity.com
SPHERITY Talk to sales

Credentialing
the World.

Verifiable digital identities and product passports for regulated industries — from EU Battery Regulation to US DSCSA.

See our products →

One platform · four products.

CARO · VERA · EIDA · KYLE — each tuned for one regulated industry, all on the same trust foundation.

DSCSA-Verifier für US-Pharma
Pharma DSCSA
Learn more →
Digital Product Passports — Studio + DPP
Battery Textile
Learn more →
Organizational Wallet für EUDI & eIDAS 2.0
EU EUDI
Learn more →
Machine-Identity für Banking & Insurance
Banking BANZ KYC
Learn more →
Products
  • CARO
  • VERA
  • EIDA
  • KYLE
Solutions
  • Pharma
  • Battery
  • Textile
  • Banking
Resources
  • Whitepaper
  • Press
  • Blog
  • Customer Stories
Company
  • About
  • Careers
  • Contact
Newsletter
© 2026 Spherity GmbH · Credentialing the World · Impressum · Datenschutz · AGB · Cookies build · 2026-05-06

Header-Pattern (global)

§22.2
ZoneInhalt
BackgroundOff-White #FFFFFE (Light-Mode-Default · §11.1) · Border-Bottom #F2F4F7
LinksSpherity-Wordmark in Petrol Dark (32 px Höhe, klickbar → Home)
MitteTop-Nav-Items in Petrol-72 %: Products (Dropdown mit 4 Sub-Brand-Tiles) · Solutions · Resources · Company
RechtsKontakt-CTA als Petrol-Solid mit Off-White-Text · optional Login-Link in Produkt-App
Active-StateSub-Brand-Landing: Sub-Brand-Akzent als Underline · Sonst: Cyan-Underline (2 px), kombiniert mit voller Petrol-Schrift
LayoutSticky · max. 80 px Höhe · max-width 1240 px

Hero-Patterns pro Page-Typ

§22.3

Mode-Politik: Light-Mode-Default (§11.1). Dark-Mode nur als opt-in Toggle oder für klar abgegrenzte Brand-Banner (z. B. Year-in-Review, Campaign-Hero, Press-Kit).

PageHero
Home Off-White-BG (#FFFFFE) mit dezenten Cyan/Petrol-Radial-Gradients · H1 Archivo Bold 64–80 pt in Petrol Dark · Lead-Sentence in Petrol-72 % · Primary-CTA als Petrol-Solid mit Off-White-Text · Hero-Visual rechts auf hellem Hintergrund
Sub-Brand-Landing
/products/<sub>		 Off-White-BG mit großem Sub-Brand-Akzent als Hero-Block oder Akzent-Streifen · Sub-Brand-Logo links · Produktname H1 in Petrol Dark · Primary-CTA „Talk to sales" (Petrol-Solid) + Secondary „Read the docs" (Outline)
Solutions Branchen-Foto oder AI-Bild aus Use-Case-Track (§11.8.5.3) auf hellem Hintergrund · H1 in Petrol Dark · Lead-Sentence Trust-First
Blog / Resources Kleiner Hero (max. 240 px Höhe) · Off-White-BG mit Petrol-Akzent-Strip · Sektion-Titel + Filter
Company / Careers Foto-Hero (echtes Team-Foto oder Spherity-Office) · H1 Off-White auf Petrol-Overlay (60 % Opacity) — eine der wenigen erlaubten Dark-Hero-Ausnahmen für emotionale Wirkung
Campaign-/Brand-Banner
(Year-in-Review · Conference)		 Dark-Mode-Hero erlaubt — Petrol-Vollflächen mit Cyan-Akzent. Im CMS als „Brand-Surface" markieren, damit Light-Mode-Konsistenz auf Produkt-Pages erhalten bleibt.

Komponenten-Reuse aus Layer 1 / 2

§22.6

Die Website ist eigenes Layer-3-Surface, aber sie muss Layer-1- und Layer-2-Komponenten reusen — keine Insel-Implementierung.

KomponenteQuelleHinweis
ButtonsLayer 2Identisch zu Produkt-Apps · Primary Petrol-Solid mit Off-White-Text auf Light-BG · Secondary Petrol-Outline · Cyan-CTA-Variante nur auf Dark-Brand-Banner (Campaign-Hero, Pitch-Title) — niemals auf Light-Hero
Form-InputsLayer 2 · §12.2Floating-Label · Helper-Text-Pattern · Error-State mit Spherity-Attention-Red
Iconography§11.7Untitled UI Icons · Single Source · keine Heroicons / Lucide / Material-Inseln
Typografie§11.2Archivo + IBM Plex Mono · font-display: swap · Performance-Budget < 200 ms
Sub-Brand-Logos§10 Hard-RuleNativer Marken-Gradient · niemals als Single-Color-Reduktion oder getintet

Performance-Budget

§22.7
LCP
< 2.0 s
Largest Contentful Paint · Hard 2.5 s
CLS
< 0.05
Cumulative Layout Shift · Hard 0.10
INP
< 200 ms
Interaction to Next Paint · Hard 500 ms
JS-Bundle
< 100 KB
Initial gzipped · Hard 200 KB
Image-Format
WebP / AVIF
JPEG-Fallback · nie unkomprimiertes PNG > 200 KB

Accessibility-Pflicht

§22.8
PunktWert
StandardWCAG 2.2 Level AA (§14)
Focus-Ring2 px Spherity Cyan #2BFEBB · 2 px Offset · §14.1
Keyboard-NavEnd-to-end ohne Maus testbar
Skip-LinkAuf Main-Content als erstes interaktives Element
FormsAlle mit <label>-Anbindung · Helper + Error via aria-describedby
Cookies-ConsentNicht-blockierend · Tastatur-bedienbar · „Reject all"-Button gleichberechtigt

CMS · Stack · Approver

§22.9
BereichStand
CMSHeadless (Sanity oder Contentful — Owner-Decision offen, §25). Marketing pflegt Content, Design pflegt Komponenten-Bibliothek.
FrontendNext.js (SSG mit selective ISR). Komponenten-Bibliothek aus Produkt-Designsystem (Untitled UI Tokens + Spherity-Override) gespiegelt.
Preview-URLJeder Content-Change erzeugt eine Preview-URL für Approval, bevor er live geht.

Approver-Matrix:

Asset-TypApprover
Hero / H1 / TaglineCMO + Founder
Produkt-Seiten-ContentProduct-Lead + CMO
Customer-StoriesCustomer + Marketing-Lead
Press-ReleasesCMO + Founder
Whitepaper-DownloadsProduct-Lead + CMO
Footer / Legal / CookiesCMO + Legal (extern)

Don'ts

§22.10

Verboten auf spherity.com