frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces with a modern, minimalistic, and luxury aesthetic. Every design should feel premium, refined, and intentional.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Core Design Philosophy

MODERN: Clean lines, contemporary patterns, cutting-edge but timeless. Think Apple, Stripe, Linear.

MINIMALISTIC: Every element earns its place. Generous whitespace. Restraint is sophistication. Remove until you can't.

LUXURY: Premium feel through subtle details. Quality over quantity. Refined typography. Deliberate color. Attention to micro-interactions.

Design Principles

Before coding, commit to these principles:

1. •Less is More: Strip away the unnecessary. If an element doesn't serve a clear purpose, remove it.
2. •Whitespace as Design: Generous negative space creates breathing room and elegance.
3. •Typographic Hierarchy: Let typography do the heavy lifting. One or two carefully chosen fonts.
4. •Subtle Motion: Elegant transitions, not flashy animations. Think 200-300ms, ease-out curves.
5. •Monochromatic with Accent: Dark backgrounds (deep blacks, navys) or clean whites with one accent color.
6. •Premium Details: Subtle borders, refined shadows, glass effects, grain textures.

Aesthetic Guidelines

Typography

• •Display fonts: DM Sans, Satoshi, Geist, Instrument Sans, Plus Jakarta Sans, Cabinet Grotesk
• •Body fonts: Inter (sparingly), SF Pro, System UI for performance
• •Approach: Large, bold headings with tight letter-spacing. Refined, readable body text.
• •Sizing: Generous scale difference between heading and body (e.g., 4xl+ headings, base body)

Color Palette

Dark themes (preferred for luxury feel):

• •Background: #0a0a0f, #09090b, #0f0f14, #000000
• •Surface: rgba(255,255,255,0.02-0.05), subtle glass effects
• •Borders: rgba(255,255,255,0.05-0.1)
• •Text: White for primary, gray-400/500 for secondary
• •Accent: One saturated color (blue, purple, emerald) used sparingly

Light themes (when appropriate):

• •Background: Pure white #ffffff or warm off-white
• •Surface: Subtle grays for cards
• •Text: Near-black #09090b
• •Accent: Muted, sophisticated tones

Layout & Spacing

• •Container: Max-width 1200-1400px, generous horizontal padding (6-8 units)
• •Sections: 24-32 units vertical padding
• •Grid: Clean, asymmetric when purposeful
• •Cards: Subtle borders, large border-radius (xl-3xl), minimal shadow

Motion & Interaction

• •Transitions: 200-400ms, ease-out or custom cubic-bezier
• •Hover states: Subtle scale (1.02), opacity shifts, border color changes
• •Page loads: Gentle fade-in or slide-up with staggered delays
• •Avoid: Bouncy animations, excessive movement, attention-grabbing effects

Visual Details

• •Gradients: Subtle, often radial, for depth and atmosphere
• •Shadows: Very subtle or none. When used, multi-layer for realism
• •Borders: 1px, low opacity, creates definition without heaviness
• •Blur effects: Backdrop blur for glass morphism when appropriate
• •Texture: Subtle grain overlays add premium feel

Anti-Patterns (NEVER do these)

• •Colorful gradients on buttons
• •Heavy drop shadows
• •Excessive border-radius (full rounded on large elements)
• •Multiple accent colors competing
• •Busy backgrounds or patterns
• •Generic stock illustrations
• •Cluttered layouts with too many elements
• •Animations that delay content visibility
• •Cookie-cutter component libraries without customization

Implementation Standards

Then implement working code (React/TypeScript for this project) that is:

• •Production-grade and functional
• •Visually refined and premium
• •Cohesive with intentional restraint
• •Meticulously polished in every detail

Project-Specific Context

This is a Freelancelyst - a Next.js 15 (App Router) project for a web development agency. When building frontend components:

• •Use React with TypeScript
• •Use Tailwind CSS for styling
• •Follow the existing component structure in app/_components/
• •Place landing page components in app/_components/landing/
• •Supports i18n with lang prop (TLocale type)
• •Dark theme is the default (#0a0a0f background)
• •Use lodash get() for safe dictionary access
• •Accent color: Blue (#3b82f6 / blue-500) with purple secondary

Design Reference

The current landing page follows evo-mobile.ru style:

• •Deep black backgrounds
• •Blue gradient accents
• •Clean card layouts with subtle borders
• •Generous spacing
• •Professional, trustworthy feel

Remember: Luxury is in the restraint. Modern is in the simplicity. Quality is in the details.