frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

1 leituras · 2.8 KB

# Frontend Design

## Core Directive
- Build distinctive, production-grade frontend interfaces that deliberately avoid clichés, templated defaults, and generic "AI slop" aesthetics (such as default Inter fonts, purple-on-white gradients, centered cards with emojis, or predictable pill buttons).
- Make opinionated, deliberate choices about palette, typography, and layout based strictly on the brief's real domain and audience.

---

## 1. Ground Your Designs in the Subject Matter
- Derive aesthetic choices from the specific industry, materials, audience, and vernacular of the project (e.g., software for financial analysts demands a radically different visual language than a consumer lifestyle product).
- Avoid generic placeholder content; design around realistic workflows, domain terms, and concrete data models.

---

## 2. Process: Plan Before Coding
Execute in two distinct passes:

1. **Design Plan & Token System:**
   - **Tone & Direction:** Define a concrete aesthetic vector (e.g., brutalist/utilitarian, editorial/magazine, retro-futuristic, high-end luxury, organic).
   - **Color Tokens:** Establish 4 to 6 named CSS variables (dominant tones with sharp accents rather than timid, evenly distributed palettes).
   - **Typography:** Select characterful, distinctive type pairings (display font with personality + legible body face; avoid defaults like generic Arial or Inter).
   - **Layout & Composition:** Use asymmetric grids, deliberate alignments, or negative space rather than standard identical card grids.

2. **Implementation:**
   - Generate production-grade, functional code (HTML/CSS/JS, React, Vue).
   - Structure CSS specificity carefully to prevent selector clashes.
   - Match implementation depth to aesthetic goals (elaborate animations for maximalist styles; extreme precision and spacing control for minimalist styles).

---

## 3. Typographic & Visual Restraint
- **Avoid common generator tells:**
  - Do not italicize, bold, or highlight just a single random word in a headline.
  - Do not use unnecessary all-caps labels or tags floating above every header.
  - Ensure clear hierarchy via size, weight, and scale rather than color tint alone.
- **Motion & Micro-interactions:**
  - Prefer purposeful transitions (150–300ms) and staggered reveals on load over chaotic, scattered animations.
  - Provide complete states (hover, focus-visible, active, disabled) for all interactive components.

---

## 4. Copywriting in Interface Design
- Interface text is functional design, not decoration.
- Use plain, active, user-centric language (e.g., "Save changes" instead of "Submit").
- Maintain strict vocabulary consistency (a button named "Publish" must trigger a toast named "Published").
- Treat empty states and error screens as directions for action, not mood pieces. State clearly what happened and provide the next step without unnecessary apologies.