Grundlagen
Marke · Logo
Der Waypoint
Das ATLVS-Zeichen ist ein Waypoint : ein achtzackiger Navigationsstern mit Leerstelle im Zentrum, das gesamte Navigationssystem in eine geometrische Glyphe geschnitten. Neutraler SaaS-Charakter, je Produkt umgefärbt. Es steht klar abseits des kosmischen GHXSTSHIP-Geisterschiff-Totenkopfs, der ausschließlich das Zeichen der Muttergesellschaft ist.
Die Kachel trägt den Produktakzent; der Stern bleibt weiß (oder Ink auf hellem Grund). Der Schriftzug ist stets gesperrt in Versalien und ohne Umbruch, niemals klein, niemals ungesperrt, außer in URLs und IDs.
| Schriftzug-Spezifikation | Satz |
|---|---|
| Schriftschnitt | Jost geometrisch, ausschließlich für das Logo-Lockup. Überschriften nutzen Anton; Fließtext & UI nutzen Hanken Grotesk. |
| Das A | Eine nackte Spitze, kein Querbalken, das V gespiegelt. A und V lesen sich als Spiegelformen. |
| Satz | Gesperrte Versalien, ohne Umbruch. Im vollständigen Lockup ist TECHNOLOGIES exakt auf die Breite von ATLVS gesperrt. |
| Untertitel | Nur ATLVS trägt TECHNOLOGIES. Compass, Gateway und Legend stehen für sich allein. |
Ein Zeichen, vier Akzente
Jedes Produkt ist derselbe Waypoint auf seiner eigenen Akzentkachel: sofort eine Familie, sofort unverwechselbar.
Producer / Intern
Crew / Lieferant / Talent
Gast / Kunde
Wissen / Lernen
Neutral / Suite
Schutzraum & Nutzung
Halte auf jeder Seite einen Rand von der halben Zeichenhöhe ein.
- Färbe die Kachel im Produktakzent ein; halte den Stern weiß (oder Ink auf hell).
- Halte den Schutzraum = ½ Zeichenhöhe.
- Nutze das pure Zeichen bei ≤16px; das gekachelte Icon bei ≥32px.
- Kombiniere mit dem gesperrten A T L V S Schriftzug, ohne Umbruch.
- Den Stern selbst umfärben oder mit Verlauf versehen; nur die Kachel trägt Farbe.
- Rotieren, verzerren oder das kosmische Halbton-Raster bzw. den Totenkopf hinzufügen.
- Den Schriftzug ungesperrt oder klein setzen.
- Das pure Zeichen ohne die solide Kachel auf ein unruhiges Foto setzen.
Grundlagen · Farbe
Farbe
Neutrale Flächen leisten die Arbeit; ein Akzent pro Produkt trägt die Identität. Jeder Wert leitet sich aus dem --p-* Namespace ab und justiert sich je Modus für AA-Kontrast neu.
Grundlagen · Schrift
Typografie
Monument. Überschriften und Kennzahlen sind gesetzt in Anton, eine ultrakondensierte Versal-Display-Schrift : ein einzelner schwarzer Schnitt, der dem Produkt Präsenz im Plakatmaßstab verleiht. Fließtext und UI bleiben Hanken Grotesk damit Tabellen und Formulare klar lesbar bleiben; Space Mono ist die Sprache für Eyebrows und Koordinaten (IDs, Codes, Labels); und Jost ist ausschließlich das konstruierte Schriftzug-Lockup. Display-Überschriften stehen in VERSALIEN (Anton ist eine Versalschrift); Fließtext und Labels bleiben in Title- / Satzschreibung.
Drei zugelassene Wege, die breite Headline einzusetzen. Nutze den passenden für den Kontext; niemals mehr als einen pro Ansicht mischen.
Akzentbalken + Live-Mono-Kicker. Der Standard für App-Chrome und Seiten-Header.
Ein Wort nimmt den Produktakzent auf; Headlines branden sich selbst. Cover, Marketing, Splash.
Tabellarische Ziffern bei 900 / expanded. Dashboards und Reports.
Grundlagen · Raum
Abstände
Ein 4px-Basisraster. Die Dichte tauscht den Rhythmus von Bedienelementen und Zeilen; dieselben Tokens straffen sich unter data-density="compact".
Grundlagen · Radius
Radien
Weich, freundlich für Produktivitäts-Tools, niemals Pop-Art-scharf. Pillen nur für Chips und Toggles.
Grundlagen · Elevation
Elevation
Eine kühle, knappe Drei-Stufen-Skala: Ruhe → Hover → Popover & Modal. Schatten bleiben im Hellen subtil und lehnen sich im Dunklen an Rahmen an.
Grundlagen · Motion
Motion
Schnell und unaufgeregt. Eine Easing-Kurve, kurze Dauern und eine harte Regel: niemals ein token-gestütztes background über einen Theme-Wechsel hinweg überblenden; sofort umfärben und stattdessen filter oder opacity animieren.
| Token | Wert | Einsatz |
|---|---|---|
--p-ease | 140ms cubic-bezier(.2,.7,.2,1) | Hover, Press, Mikrointeraktionen |
| Hover-Lift | translateY(-2px) + elev-2 | Cards, Stat-Kacheln |
| Skeleton-Schimmer | 1.4s ease, unendlich | Ladeplatzhalter (berücksichtigt reduzierte Bewegung) |
| Spinner | 0,7s linear | Laufende Aktionen |
Grundlagen · Icons
Ikonografie
Phosphor Icons: Bold für die UI, Fill für Status-Siegel und Betonung. Auf Texthöhe bei 16 bis 20px ausrichten; eigenständige Aktionen bei 24px. Einfarbig, erbt currentColor.