Files
app/DESIGN.md
T
Melvin StroblandClaude Opus 5 4aa2705d34 Rename the workspace layout: fluksio -> app, website -> index
The repo moves to git.stroblme.de:Fluksio/app.git and its sibling to
Fluksio/index.git, so every cross-repo path reference moves with it. The
architecture sources the roadmap cites now live in the docs repo under
architecture/, and the brand marks in the index repo's src/assets.

Also replaces the placeholder README with one that reflects the actual layout.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-09 16:16:08 +02:00

1.4 KiB

Design system (Fluksio)

app (dashboard SPA + API) and index (marketing site) are separate repos that share one visual design. The full, canonical spec — palette, radius, elevation, motion, component map, and shell patterns — lives in the parent repo's DESIGN-GUIDELINES.md. Read it before any UI work.

Sync rule (read before touching tokens)

The @theme inline, :root, and .dark blocks in app/frontend/src/index.css and index/src/index.css must be kept byte-identical, and frontend/src/lib/motion.ts is duplicated verbatim. Any palette / radius / elevation / motion-token change is made in both repos in the same change. There is intentionally no shared npm package — the duplicated blocks are the sync point. Components (src/components/ui/*) are copied per repo (the shadcn model) and may diverge; only the tokens and motion presets must match.

Both repos share components.json: style new-york, cssVariables: true, icon library lucide.

Verify with make design-check from the workspace root.

Shell

The authenticated area is a bg-card region (SidebarProvider) with a floating translucent AppSidebar (variant="floating", bg-card/80 backdrop-blur-md). The flow editor floats its chrome over a full-bleed node canvas using the same frosted-surface model. See DESIGN-GUIDELINES.md → Shells and → Overlay surfaces & content chips.