solopm-server/plans/14-design-system.md

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