pristine
Install
All examples

Operate · Tidepool

Settings page

A stock Tailwind settings form, with every section stacked, one Save at the very bottom and a red Delete workspace next to Update, became sectioned forms that show what a change will do before you save it: renaming the workspace URL lists the 23 shared links and 2 embeds it affects and how long the old links redirect.

Persona
Sam Okafor, Head of growth, workspace owner
Their goal
Invite a new analyst, change a teammate's role and rename the workspace URL without breaking anything or deleting the wrong thing.
Lenses applied
clarify, harden, adapt, colorize
/pristine polish src/pages/settings.astro

Full pages. Scroll either one; they move together.

Before4.5/10

Settings page before Pristine

After9.4/10

Settings page after Pristine
Open before liveOpen after live

4.5/10 Level 6

Clean and plausible, like any Tailwind form starter, until you use it. Placeholder-only fields, one Save at the bottom of a five-section form, toggles that are divs, a member table that hides Role and Remove off to the right, and a red Delete workspace beside Update workspace guarded only by "Are you sure?"

9.4/10 Level 10

Renaming the workspace URL, the riskiest everyday change here, previews its impact live: old and new URL, an availability check, 23 shared links, 2 embeds and a 90-day redirect, and Save stays blocked while the name is taken. Elsewhere a bounced invite offers the likely fix, unsaved changes are counted with a Discard, and usage shows the projection against the alert, not just a bar.

Scores

Every Dimension, before and after.

DimensionBeforeAfter
Persona fit410
Hierarchy & clarity39
Layout & spacing69
Typography69
Color & theming69
Consistency59
Responsiveness49
Motion & interaction49
Accessibility29
Copy410
Robustness & performance39

The critique

What the red pen found.

Vibe-code tells

  • Default Tailwind form-starter look
  • Placeholder used as label
  • Every section an identical white panel
  • One global Save at the very bottom
  • Destructive button next to a routine one
  • Div toggles with onclick
  • focus:outline-none on buttons
  • "Are you sure?" confirm
  • Generic success alert
  • whitespace-nowrap table in overflow-x-auto
  • Fake uptime stat

  1. P0 Lens: harden

    Destructive actions guarded by "Are you sure?"

    Delete workspace is a red button sitting right beside Update workspace, and it and Remove member both run `confirm('Are you sure?')`. The prompt never says what will be deleted or that it can't be undone.

  2. P0 Lens: clarify

    Fields have no labels and no validation

    Inputs rely on `placeholder="Full name"`, which disappears once filled; with every field the same gray-300 box, "tidepool-growth" doesn't even say it's the workspace URL. It accepts "Tidepool_Growth" and only fails after the single Save at the bottom, with `alert('Settings saved!')` either way.

  3. P0 Lens: harden

    Toggles and tabs can't be reached by keyboard

    Notification toggles are divs with onclick, so Tab skips them. Buttons set `focus:outline-none` with no ring, so only the inputs show focus.

  4. P1 Lens: adapt

    Long emails break the member table

    Emails are `whitespace-nowrap`, so aleksandra.wisniewska-kowalczyk@… pushes Role, Last active and Remove out of view inside an `overflow-x-auto` box, even on desktop; at 390px only Name is visible. Edit and Remove are 12px text links, and roles are badges you can't change.

  5. P1 Lens: distill

    One long form, one Save, nothing leads

    Profile, workspace, members, notifications and billing are identical white panels stacked down one page, all with blue-600 buttons. Save sits at the very bottom, under Billing, and doesn't say which of five sections it saves; Update workspace and Invite act immediately, so it's unclear what Save covers.

  6. P2 Lens: clarify

    Fake reassurance in billing

    "99.9% Uptime" and "Upgrade Now 🚀" sit where the next invoice amount and usage against the plan limit should be.

The changes

Before, after, and why.

The report Pristine hands back after a run, with the real values from the two pages above.

LensBeforeAfterWhy
clarify<input placeholder="Workspace URL"> saved by the one Save at the bottomImpact preview: app.tidepool.example/tidepool-growth → growth-team, "23 shared dashboard links", "2 embedded charts", "Old links redirect for 90 days, until Jan 17, 2027"Sam sees what breaks and what doesn't before renaming, so he can do it without asking engineering.
hardenAny slug acceptedDebounced check: running → "growth belongs to another workspace. Try growth-team"; button reads "Rename and save" and is blocked while takenCollisions are caught as you type, with a usable suggestion.
hardenOne Save at the bottom of the page → alert('Settings saved!')Per-section "1 unsaved change · Discard", unsaved pip in the section nav, Saving… → "Renamed to app.tidepool.example/growth-team"Sam knows what's pending in each section and can back out of it.
hardenInvites listed as "Pending"Bounced row: "Couldn't deliver. No mailbox at fjordlab.example.se. Did you mean fjordlabs?" + Fix and resend; Dana: "Opened the email Oct 18" + ResendThe invite that silently failed is the one Sam needs to see, with the fix in one click.
clarifyDiv toggle rows with 12px gray-500 hintsInline threshold "falls more than [3] points below its 4-week average" + per-row history: "Hasn't fired in 12 weeks"Sam tunes the alert in place and knows whether it's too sensitive.
clarify"99.9% Uptime" and "Upgrade Now 🚀"4,212 of 10,000, projected bar to ~6,900 by Nov 1, tick at the 8,000 alertAnswers "will we go over?" rather than only "how much have we used?"
hardenonclick="confirm('Are you sure?')"<dialog> naming Tidepool Growth, typed-slug confirm that follows a renameThe button stays disabled until the current slug matches.
hardenRemove → confirm('Are you sure?')Row leaves + toast with Undo; member count and 6-of-10 seat pips updateReversible actions don't need a confirm.
adapt<table> with whitespace-nowrap emails in overflow-x-auto; Role and Remove off-screen at 390pxGrid rows; under 720px invites stack state, expiry and actions on their own linesNo horizontal scroll at 320px, and long emails still fit.
colorize.btn { background: #2563eb } on every action; .btn-red Delete workspace beside Update workspace--accent teal for the one primary action per section, red only for the bounce and the danger zone, which moves to its own section at the end; status marks shared with the dashboardColor means state and priority, and the destructive action is no longer one mis-click from a routine one.