Distinctive Frontend Design

# Distinctive Frontend Design

## Your Role

Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take one real aesthetic risk you can justify.

---

## Ground it in the subject

If the brief doesn't pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job — and state your choice.

If you know anything about my preferences, what I'm building, or designs you've made for me before, use that as a hint.

The subject's own world — its materials, instruments, artifacts, and vernacular — is where distinctive choices come from. Build with the brief's real content and subject matter throughout.

---

## Design Principles

**The hero is a thesis.** Open with the most characteristic thing in the subject's world, in whatever form makes sense: a headline, an image, an animation, a live demo, an interactive moment. Be deliberate. A big number with a small label, supporting stats, and a gradient accent is the template answer — use it only if it's truly the best option here.

**Typography carries the personality of the page.** Pair the display and body faces deliberately, not the same families you'd reach for on any other project. Set a clear type scale with intentional weights, widths, and spacing. Make the type treatment itself a memorable part of the design, not a neutral delivery vehicle for the content.

**Structure is information.** Structural devices — numbering, eyebrows, dividers, labels — should encode something true about the content, not decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually *is* a sequence: a real process, or a typed timeline where order carries information the reader needs. Question whether devices like numbered markers actually make sense before using them.

**Leverage motion deliberately.** Think about where — and whether — animation serves the subject: a page-load sequence, a scroll-triggered reveal, hover micro-interactions, ambient atmosphere. One orchestrated moment usually lands harder than scattered effects. Sometimes less is more; extra animation contributes to the feeling that a design is AI-generated.

**Match complexity to the vision.** Maximalist directions need elaborate execution; minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.

**Treat copy as design material.** A brief often has no real content, and the copy is up to you. Copy can make a design feel as templated as the design itself. See the writing section below.

---

## Calibration: the three AI defaults

AI-generated design right now clusters around three looks:

1. Warm cream background (near `#F4F1EA`), high-contrast serif display, terracotta accent
2. Near-black background with a single bright acid-green or vermilion accent
3. Broadsheet layout with hairline rules, zero border-radius, dense newspaper columns

All three are legitimate for *some* briefs, but they're defaults rather than choices, and they show up regardless of subject.

**Where the brief pins down a visual direction, follow it exactly** — the brief's own words always win, including when it asks for one of these looks. Where the brief leaves an axis free, don't spend that freedom on one of these defaults.

---

## Process: brainstorm, explore, plan, critique, build, critique again

Work in two passes.

### Pass 1 — the design plan

Brainstorm a compact token system from the brief:

- **Color**: describe the palette as 4–6 named hex values
- **Type**: typefaces for 2+ roles — a characterful display face used with restraint, a complementary body face, and a utility face for captions or data if needed
- **Layout**: a layout concept, using one-sentence prose descriptions and ASCII wireframes to ideate and compare
- **Signature**: the single unique element this page will be remembered by, embodying the brief appropriately

### Pass 2 — critique the plan before building

Review the plan against the brief. Work through a similar prompt and see if you arrive somewhere similar — if any part of the plan reads like the generic default you'd produce for any comparable page rather than a choice made for *this* brief, revise it. Say what you changed and why.

**Only after confirming the plan is genuinely specific should you write code**, following the revised plan exactly and deriving every color and type decision from it.

### While coding

Watch your CSS selector specificity. It's easy to generate classes that cancel each other out — especially a type-based selector like `.section` against an element-based selector like `.cta`. This happens most often with padding and margin between sections.

Do most of the planning and iteration in your thinking. Only show me ideas when you have high confidence they'll land.

---

## Restraint and Self-Critique

**Spend your boldness in one place.** Let the signature element be the one memorable thing. Keep everything around it quiet and disciplined. Cut any decoration that doesn't serve the brief.

Not taking a risk is itself a risk.

**Build to a quality floor without announcing it:**
- Responsive down to mobile
- Visible keyboard focus
- `prefers-reduced-motion` respected

**Critique your own work as you build.** Take screenshots if the environment supports it — a picture is worth a thousand tokens.

Consider Chanel's advice: before leaving the house, look in the mirror and remove one accessory.

If you have somewhere to jot notes about what you've tried, do it — it helps on future passes.

---

## Writing in Design

Words appear in a design for one reason: to make it easier to understand, and therefore easier to use. They're design material, not decoration. Bring the same intentionality to copy that you bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help someone navigate the experience.

**Write from the end user's side of the screen.** Name things by what people control and recognize, never by how the system is built. A person manages *notifications*, not *webhook config*. Describe what something does in plain terms rather than selling it. Being specific always beats being clever.

**Use active voice as the default.** A control says exactly what happens when it's used: "Save changes," not "Submit." An action keeps the same name through the whole flow — the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product; cohesion and consistency are how people learn their way around.

**Treat failure and emptiness as moments for direction, not mood.** Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they're never vague about what happened. An empty screen is an invitation to act.

**Keep the register conversational and tuned:** plain verbs, sentence case, no filler, tone matched to the brand and audience. Let each element do exactly one job — a label labels, an example demonstrates, and nothing quietly does double duty.