Dreamworld

CI v1.2

Design System.
Eine Quelle.

Tokens, Komponenten, Regeln. Watcher, Luna, Dashboard und Tracker ziehen alle von hier. Wenn etwas zweimal kopiert wurde — gehört es hier rein.

Tokens · 01

Farben

Light = Print/PDF (monochrom). Dark = interne Web-Tools (Editorial mit Pale-Akzent).

--dw-bg

surface

--dw-surface

surface-hi

--dw-surface-hi

text

--dw-text

text-soft

--dw-text-soft

dim

--dw-dim

border

--dw-border

border-hi

--dw-border-hi

accent

--dw-accent

accent-soft

--dw-accent-soft

success

--dw-success

warn

--dw-warn

error

--dw-error

Tokens · 02

Hintergrund-Layer

Stapelbar. bg ist die tiefste Ebene, surface-hi der Hover-State von Cards.

--dw-bg

--dw-surface

--dw-surface-hi

--dw-accent-soft

--dw-overlay

Tokens · 03

Radien

Nur diese fünf existieren. Alles andere ist verboten.

sm · 6

md · 10

lg · 14

pill · 999

circle · 50%

Tokens · 04

Konturstärken

Drei Stärken — thin für Hairlines (Sidebar-Trenner), border für Cards, thick für Focus-Rings.

thin · 0.5px

border · 1px

thick · 2px

Tokens · 05

Spacing

4px-Skala. Alles aus dieser Skala — keine willkürlichen 7px / 13px Padding mehr.

1 · 4

2 · 8

3 · 12

4 · 16

5 · 20

6 · 24

8 · 32

10 · 40

12 · 48

16 · 64

Tokens · 06

Typografie

Satoshi (Fontshare) für Display + Body. Mono-stack für Tokens, Versionen, Counter.

Display · 52 · 300

Heading · 36 · 500

Title · 20 · 600

Body · 14 · 400 — Standard für Fließtext und Listen.

Body soft · 14 · text-soft Farbe.

Label · 11 · uppercase · 1.5px tracking

Mono · 12.5 · ui-monospace

Komponenten · 07

Buttons

Ein Set für alles. .dw-btn + Variant-Klasse + optional Size-Modifier.

Klasse	Verwendung	Radius	Padding
.dw-btn-primary	Hauptaktion	pill	11×22
.dw-btn-secondary	Zweitaktion	pill	11×22
.dw-btn-ghost	Subtil (Logout)	pill	8×12
.dw-btn-danger	Destruktiv	pill	11×22
+ .dw-btn-sm	Modifier kleiner	(vererbt)	7×14
+ .dw-btn-lg	Modifier größer	(vererbt)	14×28

Komponenten · 08

Icon-Buttons

Quadratisch (md-Radius) oder rund (circle). 36×36 default, Modifier -sm (28) und -lg (44).

.dw-btn-icon

.dw-btn-icon-round

Size-Modifier

Komponenten · 09

Circle-Buttons

Für Pin-Nummern, Avatar-Initialen, Kommentar-Counter. Drei Größen, Status-Varianten.

1 2 7 12 A N .dw-circle

1 2 3 sm · default · lg

● ✓ ! × ? Status-Varianten

Komponenten · 10

Icons

Lucide-Stack inline als SVG. Alle 24×24 viewBox, stroke="currentColor" mit stroke-width: 1.6. Wrapper-Klasse .dw-icon für Default 16px.

plus

check

arrow-right

arrow-left

arrow-down

arrow-up

chevron-down

chevron-right

settings

folder

download

upload

zap

trash

edit

info

help

eye

volume

play

Komponenten · 11

Inputs

Komponenten · 12

Cards

Karte

Standard Card

Surface-Hintergrund, lg-Radius, 1px Border.

Card-Sm — kompakt für Listen, Status-Reihen.

Komponenten · 13

Pills & Dots

Live Beta v1.2

Success Warning Error Pulse

Brand · 14

Logo Mark

Animiertes 8-Dot-Logo. Topbar-Size (28px) und Boot-Size (80px). Skaliert via --dw-logo-size.

Wordmark

Original Brand-Logo (Print/Stationery):

Komponenten · 15

Boot Screen

Vollbild-Loader für interne Tools. FLIP-Anim morpht Logo nach Topbar beim Ausblenden.

Komponenten · 16

Toast

Mini-Notification unten zentriert. Auto-Hide nach 1.8s.

Komponenten · 17

Progress / Quota

Storage2.4 / 10 GB

Quota · Warn7.8 / 10 GB

Quota · Danger9.6 / 10 GB

Wichtig

Regeln

Radien: nur sm / md / lg / pill / circle. Wenn dein Pattern ein anderer Radius braucht, passt das Pattern nicht.
Border-Width: nur thin / 1 / thick. Keine 1.5px-Sonderlocken.
Spacing: nur aus der 4er-Skala. Kein 7px / 13px Padding.
Buttons: .dw-btn + Variant. Kein eigenes .logout-btn mit eigenen Maßen.
Farben: nur Tokens. Keine direkten Hex-Werte außer in Tokens-Definition.
Quelle: alles in dreamworld-ci/dreamworld.css. Wer kopiert, klaut.

History

Changelog

v1.2 · 2026-05-08

Icon-Buttons (square + round), Circle-Buttons (Pin-Style), Danger-Variant.
Tokens: Border-Widths (thin/1/thick), Radius-Circle, Z-Skala.
Showcase: Dark-Default, Original Logo, Icons-Sektion (24+ Lucide-Style), Background-Layers, Border-Visualisierung, Spacing-Bars, Regeln-Sektion.

v1.1 · 2026-05-07

Accent von #7ea7ff auf #a8c0ff (was tatsächlich genutzt wurde).
Komponenten: 8-Dot Logo, Boot-Screen, Toast, Quota-Bar.
Token --dw-accent-glow.

v1.0 · initial

Light/Dark Tokens, Buttons, Inputs, Cards, Pills, Dots.

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

Design System.Eine Quelle.