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

31 lines
1.4 KiB
Markdown

# 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`](../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.