Dreamworld CI
v1

Eine Sprache.
Zwei Aggregatzustände.

Brand-Quelle: die Rechnung. Satoshi-Font, monochrome Light für Print/PDF, Editorial Dark für Web-Tools. Gleiche Komponenten, gleiche Regeln, gleiche Proportionen.

Farben

Palette

bg
--dw-bg
surface
--dw-surface
text
--dw-text
dim
--dw-dim
border
--dw-border
accent
--dw-accent
success
--dw-success
warn
--dw-warn
error
--dw-error
Typografie

Satoshi

Display · 52px · light
Heading · 36px · medium
Title · 20px · semibold
Body · 14px · regular — Lulu lädt jede Kundenseite via Proxy.
Label · uppercase · 1.5px tracking
Mono · 12.5px · ui-monospace
Komponenten

Buttons

Inputs

Cards

Karte
Großer Card-Container

Für News, Projekt-Detail, etc.

Kompakte Card-Variante

Pills & Dots

Live Beta v1 Success Warning Error Pulse
v1.1 — Brand

Logo Mark

Animiertes 8-Dot-Logo. Zwei Sizes: Topbar (28px default) und Boot (80px via .dw-logo-lg). Skaliert via --dw-logo-size.

Wordmark

Boot Screen

Vollbild-Loading mit großem Logo + Wordmark + optionaler Version. Optional: FLIP-Animation morpht das Logo nach Topbar-Position beim Ausblenden (siehe Snippet-Tab unten rechts).

Toast

Quota / Progress Bar

Storage2.4 / 10 GB
Quota7.8 / 10 GB · 78%
Quota9.6 / 10 GB · 96%
Versionierung

Changelog

v1.1 · 2026-05
  • Accent-Farbe von #7ea7ff auf #a8c0ff normalisiert (was tatsächlich genutzt wurde).
  • Neue Komponenten: .dw-logo (8-Dot animated mark), .dw-boot, .dw-toast, .dw-quota.
  • Token --dw-accent-glow für CTA-Glow.
  • Quelle: extrahiert aus Watcher + Luna v2 Duplikaten.
v1.0 · initial
  • Light/Dark Theme Tokens, Buttons, Inputs, Cards, Pills, Dots.
  • Brand-Quelle: invoice_converter/convert.py

Einbinden via <link rel="stylesheet" href="https://dreamworld-ci.pages.dev/dreamworld.css">

Dreamworld
CI v1.1
Made by Dreamworld
CI v1.1 deployed