# Design Taste Frontend

> Frontend tasarım zevki rehberi: modern web ve mobil arayüzler için tipografi, renk, boşluk, düzen kalıpları ve görsel kalite standartları.

- Skill: `gktuoktay/design-taste-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gktuoktay/design-taste-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gktuoktay/design-taste-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: GktuOktay (https://skillmd.com/u/gktuoktay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gktuoktay/design-taste-frontend

---


# Design Taste — Frontend

A comprehensive design taste and visual quality guide for building premium, modern frontend interfaces across web and mobile platforms.

---

## 1. Core Design Principles

### The Hierarchy of Visual Quality
1. **Spacing & Alignment** — The #1 indicator of design quality. Inconsistent spacing = amateur.
2. **Typography** — Sets the entire tone. Good type choices carry even minimal designs.
3. **Color & Contrast** — Creates mood, guides attention, signals interactivity.
4. **Depth & Layering** — Shadows, blur, z-ordering create spatial relationships.
5. **Motion & Feedback** — Makes the interface feel alive and responsive.

### Design Taste Signals
✅ **Premium Feel:**
- Generous whitespace (don't be afraid of empty space)
- Tight leading on large headings, loose leading on body text
- Subtle color palette with 1–2 accent colors
- Consistent 4px/8px spacing grid
- Purposeful shadows (not generic `box-shadow`)

❌ **Amateur Signals:**
- Default browser fonts and sizes
- Rainbow of unrelated colors
- Inconsistent padding/margins
- Borders everywhere instead of spacing and background contrast
- Generic stock icons that don't match in style

---

## 2. Typography System

### Font Selection Strategy
| Category | Recommended Fonts | Personality |
|---|---|---|
| **Modern Sans** | Inter, Geist, Satoshi, Plus Jakarta Sans | Clean, techy, versatile |
| **Classic Sans** | Helvetica Neue, SF Pro, Roboto | Neutral, professional |
| **Geometric** | Outfit, Poppins, Montserrat | Friendly, approachable |
| **Serif (Editorial)** | Playfair Display, Lora, Source Serif | Authoritative, editorial |
| **Mono** | JetBrains Mono, Fira Code, SF Mono | Code, technical data |

### Type Scale (Recommended)
```
--text-xs:    0.75rem   / 12px   — Captions, badges
--text-sm:    0.875rem  / 14px   — Secondary text, labels
--text-base:  1rem      / 16px   — Body text (base)
--text-lg:    1.125rem  / 18px   — Lead paragraphs
--text-xl:    1.25rem   / 20px   — Card titles
--text-2xl:   1.5rem    / 24px   — Section headings
--text-3xl:   1.875rem  / 30px   — Page sub-headings
--text-4xl:   2.25rem   / 36px   — Page headings
--text-5xl:   3rem      / 48px   — Hero headings
--text-6xl:   3.75rem   / 60px   — Display / marketing
```

### Typography Rules
- **Line height**: 1.2 for headings, 1.5–1.6 for body text
- **Letter spacing**: Slightly tighten headings (`-0.02em`), slightly loosen uppercase labels (`0.05em`)
- **Max line width**: 65–75 characters for body text readability
- **Font weight contrast**: Use at minimum 2 weights (e.g., 400 regular + 600 semibold)
- **Never use more than 2 font families** on a single project

---

## 3. Color System

### Building a Palette
```
Brand Primary:    1 hero color (used sparingly for CTAs, links, active states)
Brand Secondary:  1 complementary accent (used for secondary actions, tags)
Neutrals:         10-step gray scale (50–950) for text, borders, backgrounds
Semantic:         Success (green), Warning (amber), Error (red), Info (blue)
```

### Dark Mode Strategy
- Don't just invert colors — redesign lightness relationships
- Use `hsl()` and adjust lightness channel: light mode L=95% bg → dark mode L=10%
- Reduce saturation slightly in dark mode (vibrant colors glare on dark backgrounds)
- Shadows become ambient glows or are removed entirely
- Use elevated surfaces (lighter grays) instead of shadows for depth

### Color Application Rules
| Element | Light Mode | Dark Mode |
|---|---|---|
| Page background | `hsl(0, 0%, 98%)` | `hsl(0, 0%, 7%)` |
| Card surface | `hsl(0, 0%, 100%)` | `hsl(0, 0%, 11%)` |
| Primary text | `hsl(0, 0%, 9%)` | `hsl(0, 0%, 95%)` |
| Secondary text | `hsl(0, 0%, 45%)` | `hsl(0, 0%, 55%)` |
| Border | `hsl(0, 0%, 90%)` | `hsl(0, 0%, 18%)` |
| Primary accent | `hsl(220, 90%, 56%)` | `hsl(220, 90%, 64%)` |

---

## 4. Spacing & Layout

### Spacing Scale (8px grid)
```
--space-1:   4px     — Inline icon gaps
--space-2:   8px     — Tight element groups
--space-3:   12px    — Related elements
--space-4:   16px    — Default padding
--space-5:   20px    — Card padding
--space-6:   24px    — Section gaps
--space-8:   32px    — Section spacing
--space-10:  40px    — Major sections
--space-12:  48px    — Page-level spacing
--space-16:  64px    — Hero / feature sections
--space-20:  80px    — Large page sections
```

### Layout Patterns
- **Max content width**: 1200–1400px for marketing, 960–1080px for reading, full-width for dashboards
- **Grid**: CSS Grid for page layout, Flexbox for component internals
- **Responsive breakpoints**: `640px` (sm), `768px` (md), `1024px` (lg), `1280px` (xl)
- **Container padding**: 16px mobile → 24px tablet → 32px desktop

---

## 5. Component Quality Standards

### Buttons
- Minimum touch target: 44×44px (mobile), 36×36px (desktop)
- Visual hierarchy: Primary (filled) → Secondary (outlined) → Ghost (text-only)
- Hover: subtle background shift + slight translateY(-1px) lift
- Active: darken + translateY(0) press-down
- Loading state: spinner replaces label, button width stays fixed

### Cards
- Consistent border-radius: pick one (8px, 12px, or 16px) and apply everywhere
- Subtle shadow: `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`
- Hover shadow: `0 8px 24px rgba(0,0,0,0.08)` with smooth transition
- Content padding: 20–24px, uniform on all sides

### Inputs & Forms
- Label above input (not placeholder-as-label)
- Consistent border color → focused ring color transition
- Error messages appear below with red text + icon
- Success states: green checkmark, not just color

### Icons
- Use a single icon library (Lucide, Phosphor, SF Symbols, Material Symbols)
- Consistent size: 16px inline, 20px in buttons, 24px standalone
- Consistent stroke width across all icons
- Color: match surrounding text color (not arbitrary colors)

---

## 6. Visual Effects & Depth

### Shadow System
```css
--shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md:  0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
--shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.04);
```

### Glassmorphism (Use Sparingly)
```css
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}
```

### Gradients
- **Hero backgrounds**: Subtle radial gradients, mesh gradients
- **Text gradients**: Use only for hero/display text, never body copy
- **Border gradients**: `border-image` or pseudo-element overlay for premium card effects
- Keep gradient angle consistent (usually 135deg or 180deg)

---

## 7. Mobile-Specific Guidelines

### iOS Design Conventions
- Large title navigation bars with bold SF Pro Display
- Tab bars at the bottom with filled/outlined icon toggle
- Swipe-to-go-back gesture support
- Haptic feedback on meaningful interactions
- Safe area insets for notch/dynamic island

### Android / Material Design Conventions
- FAB (Floating Action Button) for primary action
- Top app bar with elevation on scroll
- Bottom navigation with label + icon
- Ripple effect on tap
- Edge-to-edge rendering with system bar transparency

### Responsive Image Strategy
- Use `srcset` and `sizes` for resolution switching
- Lazy load below-fold images with `loading="lazy"`
- Aspect ratio containers to prevent layout shift
- WebP/AVIF with fallback for older browsers