# Build to a Quality Floor

**SHOULD** · **ID:** `aesthetics-craftsmanship` · **Category:** aesthetics
**Source:** [Skills](https://skills.sh/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-craftsmanship

> SHOULD: Demonstrate meticulous craftsmanship: consistent spacing scale (4/8/12/16/24px), pixel-perfect alignment, harmonious proportions. No arbitrary values, misaligned elements, or inconsistent padding. Every detail should feel intentional.

Hold a non-negotiable baseline of responsiveness, focus, and reduced motion, and critique your own work as you build

The floor is invisible when present and unmistakable when missing: consistent spacing rhythm, honest alignment, a focus ring you can actually see, a layout that survives 375px, motion that stands down when asked. It is not a feature to advertise — it is the price of entry. The self-critique half matters as much: look at the rendered thing, not the code. Upstream adds Chanel's rule — before leaving the house, take one accessory off.

## Bad — do not do this

`aesthetics-craftsmanship-bad`

```tsx
export function CraftsmanshipBad() {
  return (
    <div className="w-full max-w-sm">
      {/* Pricing card with inconsistent, sloppy styling */}
      <div
        className="bg-card border border-border"
        style={{
          padding: '12px 8px 18px 14px', // Inconsistent padding on all sides
          borderRadius: '6px',
        }}
      >
        {/* Header with misalignment */}
        <div className="flex items-center justify-between" style={{ marginBottom: '11px' }}>
          <span
            className="font-medium text-foreground"
            style={{ fontSize: '17px' }} // Arbitrary, not on type scale
          >
            Pro Plan
          </span>
          <span
            className="text-xs text-muted-foreground px-2 py-0.5 bg-muted"
            style={{
              borderRadius: '12px', // Different radius than card
            }}
          >
            Popular
          </span>
        </div>

        {/* Price with inconsistent spacing */}
        <div style={{ marginBottom: '14px' }}>
          <span
            className="font-bold text-foreground"
            style={{ fontSize: '31px' }} // Arbitrary size
          >
            $29
          </span>
          <span
            className="text-muted-foreground"
            style={{ fontSize: '13px', marginLeft: '3px' }} // Arbitrary margin
          >
            /month
          </span>
        </div>

        {/* Feature list with inconsistent spacing */}
        <ul style={{ marginBottom: '15px' }}>
          <li
            className="text-sm text-foreground flex items-center gap-2"
            style={{ marginBottom: '9px' }}
          >
            <span className="text-success" style={{ fontSize: '14px' }}>&#10003;</span>
            Unlimited projects
          </li>
          <li
            className="text-sm text-foreground flex items-center gap-2"
            style={{ marginBottom: '7px' }} // Different than above
          >
            <span className="text-success" style={{ fontSize: '12px' }}>&#10003;</span> {/* Different size */}
            Priority support
          </li>
          <li
            className="text-sm text-foreground flex items-center"
            style={{ gap: '10px' }} // Different gap
          >
            <span className="text-success" style={{ fontSize: '14px' }}>&#10003;</span>
            Advanced analytics
          </li>
        </ul>

        {/* CTA button */}
        <button
          className="w-full bg-primary text-primary-foreground font-medium"
          style={{
            padding: '10px 16px',
            borderRadius: '8px', // Yet another radius value
            fontSize: '14px',
          }}
        >
          Get Started
        </button>
      </div>

      <p className="text-xs text-destructive mt-4">
        Inconsistent padding (8/12/14/18px), arbitrary type sizes (13/14/17/31px), misaligned checkmarks, varied spacing
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-craftsmanship-good`

```tsx
export function CraftsmanshipGood() {
  return (
    <div className="w-full max-w-sm">
      {/* Pricing card with consistent, refined styling */}
      <div className="bg-card p-6 rounded-xl border border-border">
        {/* Header with consistent alignment */}
        <div className="flex items-center justify-between mb-4">
          <span className="text-lg font-semibold text-foreground">Pro Plan</span>
          <span className="text-xs text-muted-foreground bg-muted px-2.5 py-1 rounded-full">
            Popular
          </span>
        </div>

        {/* Price with harmonious proportions */}
        <div className="mb-6">
          <span className="text-4xl font-bold tracking-tight text-foreground">$29</span>
          <span className="text-sm text-muted-foreground ml-1">/month</span>
        </div>

        {/* Feature list with consistent 12px gap */}
        <ul className="space-y-3 mb-6">
          <li className="text-sm text-foreground flex items-center gap-2.5">
            <span className="text-success text-base leading-none">&#10003;</span>
            Unlimited projects
          </li>
          <li className="text-sm text-foreground flex items-center gap-2.5">
            <span className="text-success text-base leading-none">&#10003;</span>
            Priority support
          </li>
          <li className="text-sm text-foreground flex items-center gap-2.5">
            <span className="text-success text-base leading-none">&#10003;</span>
            Advanced analytics
          </li>
        </ul>

        {/* CTA button with matching border-radius */}
        <button className="w-full bg-primary text-primary-foreground font-medium py-2.5 px-4 rounded-lg text-sm">
          Get Started
        </button>
      </div>

      <p className="text-xs text-success mt-4">
        Consistent 24px padding, Tailwind type scale, uniform spacing (12px/16px/24px), harmonious radii
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)