Melvin StroblandClaude Opus 5
bd2155603e
Replace the stock shadcn OKLCH neutral palette (whose teal --primary had no relation to the brand) with the fluksio token block duplicated verbatim from the root DESIGN-GUIDELINES.md, add the self-hosted Inter variable face, the shared lib/motion.ts presets, a DESIGN.md pointer stub and the no-arbitrary-font-size hook. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1.4 KiB
Design system (Fluksio)
fluksio (dashboard SPA + API) and website (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 fluksio/frontend/src/index.css
and website/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.