# 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)