53 lines
4.1 KiB
Markdown
53 lines
4.1 KiB
Markdown
# 14 — Design System (Soft UI Tailwind)
|
|
|
|
The styling authority is the **Soft UI Dashboard Tailwind** extraction from the first iteration, located at `/references/first-iteration/ai/design-system/` (files: `design-system.md`, `conformity.md`, `tokens.json`, `lint/stylelint.json`, `lint/tokens-schema.json`, `setup/` with `INIT.md`, `tailwind.config.js`, `base.html`, self-hosted fonts + `soft-ui-dashboard-tailwind.css` + Nucleo icon assets). UX inspiration: Linear and Notion (screenshots in `/references/first-iteration/ai/examples/ui/`).
|
|
|
|
- [ ] **Phase 0**: copy the entire `ai/design-system/` directory into this repo at `web/design-system/` so the build no longer depends on `/references` being mounted; wire `setup/tailwind.config.js` and the CSS/font assets into the Vite app per `setup/INIT.md`
|
|
- [ ] Keep `conformity.md` as the UI review checklist — run it against each new page before checking off frontend items
|
|
|
|
The essentials are inlined below so this spec stands alone if the reference copy is unavailable.
|
|
|
|
## Core tokens
|
|
|
|
- [ ] Colors (custom palette, Bootstrap-style names with non-standard values):
|
|
- `slate-700 #344767` primary text/headings · `slate-800 #3a416f` sidebar gradient end
|
|
- `cyan-500 #17c1e8` info/primary action · `blue-600 #2152ff` blue accent
|
|
- `purple-700 #7928ca` → `pink-500 #ff0080` **brand gradient** · `fuchsia-500 #cb0c9f`
|
|
- `green-600 #17ad37` success · `lime-500 #82d616` · `red-600 #ea0606` danger · `amber-500 #f59e0b` warning
|
|
- `gray-50 #f8f9fa` page bg · `gray-100 #ebeff4` card bg · `gray-800 #252f40` dark bg
|
|
- [ ] Typography: Open Sans (sans, self-hosted), sizes xs .75rem / sm .875rem / base 1rem / lg 1.125rem / xl 1.25rem; weights 400/600/700
|
|
- [ ] Shadows: `shadow-soft-{sm,md,lg,xl,2xl}` (soft layered rgba shadows) — **never** standard Tailwind shadows
|
|
- [ ] Radii: `rounded-lg .5rem`, `rounded-xl .75rem`, `rounded-2xl 1rem` (cards)
|
|
- [ ] Breakpoints (Bootstrap-compatible, differ from Tailwind defaults): sm 576 / md 768 / lg 992 / xl 1200 / 2xl 1320
|
|
- [ ] Layout: sidebar `max-w-62.5` (250px) fixed, `xl:left-0`; main content offset `xl:ml-68.5`; easing tokens `ease-soft-in(-out)`, `ease-nav-brand`
|
|
|
|
## Component classes (defined once in `web/src/styles/main.css` via `@layer components`)
|
|
|
|
- [ ] `card`, `card-header`, `card-body` (cards are `rounded-2xl shadow-soft-xl`; `border-0` for content cards)
|
|
- [ ] `btn-primary` (brand gradient), `btn-white`, `btn-outlined` — add display/padding as utilities (`inline-block px-6 py-3 btn-primary`)
|
|
- [ ] `form-label`, `form-input` (includes `block w-full` — don't repeat)
|
|
- [ ] `nav-item(-active|-inactive)`, `nav-icon(-active|-inactive)` for sidebar entries
|
|
|
|
## The 11 code-generation rules (hard constraints)
|
|
|
|
- [ ] 1. Use the component classes above — never repeat their raw utility strings
|
|
- [ ] 2. Only `shadow-soft-*` shadow tokens
|
|
- [ ] 3. Cards use `.card`; `border-0` variant for content cards with headers
|
|
- [ ] 4. Sidebar icons: `nav-icon nav-icon-active` (gradient bg) / `nav-icon-inactive`
|
|
- [ ] 5. Buttons: display + padding as utilities alongside the class
|
|
- [ ] 6. Open Sans loaded (self-hosted, not Google Fonts CDN)
|
|
- [ ] 7. Transitions use the soft easing tokens
|
|
- [ ] 8. Fixed sidebar layout with `xl:ml-68.5` content offset
|
|
- [ ] 9. Primary brand gradient = `from-purple-700 to-pink-500`
|
|
- [ ] 10. Respect the custom breakpoints
|
|
- [ ] 11. Icons: Font Awesome + Nucleo (self-hosted) — never Heroicons/Lucide
|
|
|
|
## SoloPM semantic mappings
|
|
|
|
- [ ] Priority colors: `low` blue-600 · `medium` green-600 · `high` amber-500 · `urgent` orange (#fb6340-family from palette) · `frantic` red-600
|
|
- [ ] Issue status badges: `backlog` gray · `planned` cyan-500 · `in_progress` blue-600 · `ready_for_review` purple-700 · `done` green-600 · `canceled` gray-800 · `duplicate` gray strikethrough
|
|
- [ ] Project/epic status badges reuse the same hues for the shared names
|
|
- [ ] Default label seed colors drawn from the palette (bug red-600, feature cyan-500, enhancement purple-700, documentation blue-600, chore gray, task lime-500)
|
|
- [ ] Epic colors: user-pickable from an 8-swatch palette subset
|
|
- [ ] Brand gradient reserved for primary CTAs, active nav icon, login screen accent
|