# Project Frontend Design

> comprehensive design guide for the Meatballs project, combining high-quality frontend principles with the specific "Craft & Chao" design system. Use this skill for all frontend work in this project.

- Skill: `diegosouzapw/project-frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/project-frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/project-frontend-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/project-frontend-design

---


This skill defines the specific design language for the **Meatballs** project, merging the "Craft & Chao" aesthetic with high-quality production standards. Avoid generic "AI slop" by strictly adhering to these specific theme patterns.

## 🎨 Core Design Philosophy: "Craft & Chao"

Commit to this bold aesthetic direction:
- **Warm & Authentic**: Evoke appetite and warmth using rich orange-red gradients. The site should feel "cooked", not sterile.
- **Premium Quality**: Use refined typography, generous spacing, and glass-morphism effects (`backdrop-blur`).
- **Mobile-First**: Designs must be optimized for single-column, touch-friendly interactions (min 44px targets).

## 📐 Theme & Aesthetics Guidelines

### 1. Color System
Do not use generic colors. Use the specific project palette:
- **Primary**: `orange-500` to `red-600` gradients. Use for CTAs, price highlights.
- **Background**: `#FDFBF7` (Warm Off-White). **Never** use pure white `#FFFFFF` for the main page background.
- **Neutral**: `slate-50` to `slate-900` for text and borders.
- **Semantic**: `green` for success, `red` for warning.
- **Technique**: Use opacity layers (`/90`, `/50`) and gradients to create depth and sophistication.

### 2. Typography
Avoid generic font stacks.
- **UI & Body**: `font-sans` (Clean, readable).
- **Accents & Prices**: `font-serif` (Premium, editorial feel).
- **Hierarchy**:
  - Hero: `text-4xl`, Extrabold.
  - Prices: `text-5xl` (Success page), `text-xl` (Cards).
  - Labels: Uppercase, `text-xs`, Bold, wide tracking.

### 3. Component Patterns
- **Buttons**:
  - Primary: Gradient `from-orange-500 to-red-600`, `rounded-full`, with hover scale effects.
  - Secondary: `orange-50` background, `orange-700` text.
- **Cards**:
  - White background, `rounded-3xl` (Very rounded), `shadow-sm` transitioning to `shadow-xl` on hover.
- **Inputs**: `rounded-xl`, `bg-slate-50`, focus ring in `orange-500`.

### 4. Motion & Interaction
Create a living interface, not a static page.
- **Micro-interactions**: Use `active:scale-95` on clickable elements.
- **Transitions**: Default to `duration-300`. Use `duration-700` for entrances.
- **Feedback**: Visual state must reflect user actions immediately (e.g., pulse animations).

## 🔧 Implementation Strategy

- **Tailwind CSS**: Use utility classes for almost everything.
- **Icons**: Lucide React (`size={14}` to `size={20}`).
- **Images**: High-quality food photography with gradient overlays for text readability.
- **Internationalization (i18n)**: All user-facing text must be internationalized using `next-intl`. **Never** hardcode strings; use translation keys (e.g., `t('menu.title')`).

## 🚫 Anti-Patterns (What to Avoid)
- **Generic Aesthetics**: Do not use "startup blue" or default Bootstrap/Material styles.
- **Sterility**: Avoid cold grays or pure whites without the warm off-white base.
- **Flatness**: Always use shadows, gradients, or blur to add depth to flat elements.
- **Tiny Targets**: Never make touch targets smaller than 44px.

**Remember**: The goal is a "Premium, Warm, Food-Focused" experience. Implementation must be meticulous and polished.