solopm-server/web/design-system/conformity.md

Soft UI Dashboard Tailwind — Conformity Checklist

How to Use

Provide this file plus the code to review to Claude with this prompt: "Review the following code against the conformity checklist below. For each rule, output PASS or FAIL with a specific code callout. Then provide a conformity score."

Rules

Visual Token Conformity

• C-V1: All colors are from the defined custom palette — no raw hex, rgb(), or hsl() values. Use slate-700, cyan-500, purple-700, pink-500, fuchsia-500, lime-500 from the tailwind.config.js color overrides.
• C-V2: Typography uses defined size tokens — no arbitrary font-size values like text-[13px]. Use text-xs, text-sm, text-base, text-lg.
• C-V3: Spacing uses the extended custom scale — no arbitrary spacing values like mt-[13px]. Custom scale includes fractional values (py-2.7, h-19.5, px-8.75).
• C-V4: Shadows use shadow-soft-{xs|sm|md|lg|xl|2xl|3xl} tokens — no standard shadow-sm/md/lg or custom box-shadow values
• C-V5: Border radius uses rounded-2xl for cards/sidebar (1rem), rounded-lg for nav items and buttons, rounded-full for circular icons — no arbitrary radius values

Component Conformity

• C-C1: Buttons use the pattern: inline-block px-{n} py-{n} font-bold text-center uppercase align-middle transition-all ease-in border-0 rounded-lg select-none shadow-soft-md ... hover:shadow-soft-2xl hover:scale-102
• C-C2: Cards use relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border — not shadow-xl or rounded-lg
• C-C3: Form inputs follow the pattern: text-sm focus:shadow-soft-primary-outline ease-soft ... rounded-lg border border-solid border-gray-300 bg-white focus:border-fuchsia-300 focus:outline-none
• C-C4: Sidebar uses fixed inset-y-0 my-4 ml-4 rounded-2xl transition-transform duration-200 xl:left-0 xl:translate-x-0 — not position:sticky or full-height non-rounded
• C-C5: Icons use Font Awesome (fas fa-*, far fa-*) and Nucleo Icons — no Heroicons, Lucide, or Iconoir

Layout Conformity

• C-L1: Container uses custom Bootstrap-compatible max-widths (sm:540px md:720px lg:960px xl:1140px 2xl:1320px) via container plugin
• C-L2: Main content area has xl:ml-68.5 to offset the fixed 250px sidebar
• C-L3: Breakpoints use custom screen values: sm=576px, md=768px, lg=992px, xl=1200px, 2xl=1320px — not standard Tailwind breakpoints
• C-L4: Sidebar width is max-w-62.5 (15.625rem = 250px) — no wider or narrower sidebar

Naming Conformity

• C-N1: HTML pages follow kebab-case in build/ (dashboard.html, billing.html, profile.html)
• C-N2: Custom soft-ui easing tokens used: ease-soft-in, ease-soft-out, ease-soft-in-out, ease-nav-brand — not standard ease-in-out
• C-N3: Gradient accents use the named gradient utilities: bg-gradient-to-tl from-purple-700 to-pink-500 (primary), from-blue-600 to-cyan-400, from-green-600 to-lime-400

Scoring Guide

• 14–15 rules pass → Fully conformant
• 11–13 rules pass → Mostly conformant (minor issues)
• 7–10 rules pass → Partially conformant (significant drift)
• Below 7 → Non-conformant (major rework needed)