46 lines
2.0 KiB
Markdown
46 lines
2.0 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 `.theme-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.
|
|
|
|
## Mobile
|
|
|
|
One breakpoint, `md` (768px), and a phone inspects rather than arranges: no
|
|
dragging, no placing, no resizing. The rules that keep it that way — and the
|
|
"nothing scrolls horizontally" check that enforces them — are in
|
|
DESIGN-GUIDELINES.md → Responsive.
|
|
|
|
## Dashboards
|
|
|
|
A user-defined dashboard deliberately steps outside the shared design system:
|
|
it has two complete component sets of its own (`glass` and `material`) and
|
|
takes its colours from the document rather than from the tokens. See
|
|
DESIGN-GUIDELINES.md → The dashboard is exempt. The shells, the flow editor and
|
|
every admin screen are unaffected.
|