ODS Überblick - oxom Guide

ODS ist das oxom Design System. Es bündelt Tokens, UI-Komponenten, Markenregeln und Installationspfade für Anwendungen im oxom Monorepo. Die Farbwahrheit liegt in apps/web/app/globals.css. apps/brand zieht diese Werte als Design-Referenz und privates Package @oxom/design nach.

Prinzipien

Ruhe

Das Interface konkurriert nicht mit dem Inhalt. Weißraum, zurückhaltende Linien und reduzierte Zustände schaffen Fokus.

Klarheit

Typografie führt. Labels, Beschreibungen und Zustände sollen ohne dekorative Umwege verständlich sein.

Präzision

Tokens, Abstände und Zustände sind bewusst gesetzt. Im Produktionsalltag sind inkonsistente Details teuer.

Reduktion

Was keinen klaren Zweck hat, wird weggelassen. Komponenten sollen Arbeitsabläufe tragen, nicht inszenieren.

Monochromie

Farbe ist Signal, kein Stilmittel. Die Basispalette ist achromatisch; Akzentfarben werden sparsam und funktional verwendet.

Paket

{
  "name": "@oxom/design",
  "exports": {
    ".": "./index.ts",
    "./logo": "./components/wordmark.tsx",
    "./tokens": "./lib/tokens.ts",
    "./utils": "./lib/utils.ts",
    "./hooks/use-mobile": "./hooks/use-mobile.ts",
    "./components/*": "./components/*.tsx",
    "./ui/*": "./components/ui/*.tsx",
    "./tokens/base.css": "./tokens/base.css",
    "./tokens/default.css": "./tokens/default.css",
    "./globals.css": "./app/globals.css"
  }
}

Lokale Referenz

Farbwahrheit: apps/web/app/globals.css
ODS-App: apps/brand
ODS-Tokens: apps/brand/tokens/
Token-Referenz: apps/brand/lib/tokens.ts
Komponenten-Katalog: apps/brand/lib/ods-catalog.ts

​Prinzipien

​Ruhe

​Klarheit

​Präzision

​Reduktion

​Monochromie

​Paket

​Lokale Referenz