MIOSA Foundation is the internal component library for the platform frontend. It is the place to inspect components before deciding what to keep, remove, rename, or rebuild.
The live browser is maintained in the Foundation package:
cd miosa-platform/miosa-frontend/src/lib/foundations-components
npm run dev -- --host 127.0.0.1 --port 5174Open:
http://127.0.0.1:5174/component-libraryWhat Lives Where
Browse every section, pattern, and demo in the Foundation package.
src/lib/foundations-components/src/routes/component-library/sections
src/lib/foundations-components/DESIGN.md
src/lib/foundations-components/COMPONENT_REVIEW.md
Compact Reference
MIOSA UI should feel like an operator console for AI compute: precise, dark, dense, and fast to scan. Keep the system mostly neutral. Use a limited blue/cyan signal color only for active compute, selected state, focus, and live status. Avoid decorative gradients, oversized marketing sections, duplicate button variants, and one-off component styling.
| Token | Value | Role |
|---|---|---|
| Canvas | #07090d | App background |
| Panel | #10141c | Primary component surface |
| Raised | #151b25 | Elevated controls and selected rows |
| Border | #263041 | Hairline structure |
| Text | #f4f7fb | Primary text |
| Muted | #8d98aa | Secondary labels |
| Signal | #60a5fa | Active compute, focus, selected state |
| Success | #34d399 | Healthy/running status |
| Warning | #fbbf24 | Attention state |
| Danger | #f87171 | Destructive or failed state |
Core rules:
- Use one primary button per visual region.
- Prefer compact toolbars, segmented controls, tabs, tables, and split panes.
- Use 1px borders for structure; use shadows sparingly.
- Use status color only where state must be read quickly.
- Keep cards at
8pxradius unless the existing local pattern requires less. - Remove duplicate button/component variants unless they encode meaning.
Extended Reference
Component Cleanup Checklist
Use this checklist when deciding what stays in the Foundation library.
| Decision | Keep When | Remove Or Merge When |
|---|---|---|
| Button variant | It maps to a real action hierarchy | It only changes color, radius, or vibe |
| Card/panel | It represents a reusable product surface | It is a one-off demo wrapper |
| Input/composer | It handles real data entry or agent prompts | It duplicates another composer shell |
| Table/list | It supports scan, sort, compare, or operate workflows | It is only visual filler |
| Status badge | It encodes real state | It is decorative labeling |
| Module page | It maps to a MIOSA product workflow | It is a generic SaaS mockup |