# Commit to a Direction

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

> SHOULD: Commit to a design direction (brutalist, editorial, organic) and execute with precision. Avoid generic AI aesthetics: purple gradients, sparkles, excessive border-radius. Polarizing is better than forgettable.

Pick one aesthetic direction and execute it fully instead of hedging toward the safe median

The failure this catches is not ugliness, it is hedging: a page that borrows a little brutalism, a little soft-pastel SaaS, and a little editorial serif, so that no choice can be blamed and none can be remembered. Choose a direction — brutalist, editorial, organic, technical — and let every element pay into it, including the ones it costs you. Specific anti-patterns (purple, gradients, glass, glow) are not this principle's inventory: they are owned with real detector thresholds by `design-ibelick-no-purple`, `design-ibelick-no-gradients`, `design-impeccable-no-glassmorphism` and `design-impeccable-dark-glow`.

## Bad — do not do this

`aesthetics-bold-direction-bad`

```tsx
export function BoldDirectionBad() {
  return (
    <div className="w-full max-w-md">
      <div className="p-6 rounded-2xl border border-border bg-card">
        {/* An editorial serif kicker... */}
        <p
          className="text-xs italic text-muted-foreground mb-2"
          style={{ fontFamily: 'Georgia, serif' }}
        >
          A publication for builders
        </p>

        {/* ...over a soft, rounded product card... */}
        <div className="rounded-xl bg-muted p-4 mb-4">
          <h3 className="text-lg font-semibold text-foreground">Everything, gently</h3>
          <p className="text-sm text-muted-foreground mt-1">
            Friendly, capable, and above all approachable.
          </p>
        </div>

        {/* ...next to a hard-edged mono button, because why not both. */}
        <div className="flex items-center gap-2">
          <button
            className="px-4 py-2 text-sm font-medium bg-foreground text-background"
            style={{ fontFamily: "'Courier New', monospace" }}
          >
            ENTER
          </button>
          <button className="px-4 py-2 text-sm font-medium rounded-full border border-border text-muted-foreground">
            Maybe later
          </button>
        </div>
      </div>

      <p className="text-xs text-error mt-4">
        Editorial serif, soft rounded SaaS, and brutalist mono &mdash; three borrowed idioms, none
        committed to. Nothing can be blamed on a choice, because no choice was made, and there is
        nothing to remember. (The specific slop inventory &mdash; purple, gradients, glass, glow
        &mdash; is detected by <code>design-ibelick-no-purple</code>,{' '}
        <code>design-ibelick-no-gradients</code>, <code>design-impeccable-no-glassmorphism</code> and{' '}
        <code>design-impeccable-dark-glow</code>.)
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-bold-direction-good`

```tsx
export function BoldDirectionGood() {
  return (
    <div className="w-full max-w-md">
      <div className="p-6 bg-stone-50 border border-stone-200">
        <div className="mb-4">
          <span className="text-xs font-medium tracking-widest uppercase text-stone-500">
            Brutalist
          </span>
        </div>
        <h3
          className="text-2xl font-bold mb-2 text-stone-900"
          style={{
            fontFamily: "'Courier New', monospace",
            letterSpacing: '-0.02em',
          }}
        >
          Raw. Functional. Direct.
        </h3>
        <p className="text-sm mb-4 text-stone-600 leading-relaxed">
          No decoration for its own sake. Every element serves a purpose.
          The absence of style is the style.
        </p>
        <button className="px-4 py-2 text-sm font-medium bg-stone-900 text-stone-50">
          Enter
        </button>
      </div>
      <p className="text-xs text-success mt-4">
        Committed direction (brutalist) executed with precision and intention
      </p>
    </div>
  );
}
```

## References

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