Name Stylish

Overview

Name Stylish is a digital-maximalist name generator that celebrates creative self-expression through Unicode typography and emoji integration. Serving gamers, social media creators, and digital enthusiasts, the platform transforms ordinary text into 10,000+ stylish variations using fancy fonts, symbols, and decorative characters. The aesthetic is "Vibrant Playfulness"—a collision of gradient energy (indigo-to-purple transitions), clean white surfaces, and emoji-rich microcopy that makes the interface feel alive and approachable. The emotional response is instant delight: users arrive expecting a utility and discover a playground.

The brand voice is enthusiastic yet accessible, playful without condescension. Vocabulary leans into gaming culture ("Free Fire," "PUBG"), social media vernacular ("Insta," "aesthetic"), and casual confidence ("Find your perfect name style"). Tone is encouraging and celebratory—never gatekeeping, always inviting. Example sentence in brand voice: "Your stylish name is just three clicks away—copy, paste, and own your vibe."

Colors

The color system is built on a vibrant-to-neutral contrast model. Primary (#8b5cf6, a rich violet) is the signature accent used on all CTAs, active states, and interactive focus rings—it commands attention without aggression. Secondary (#6366f1, indigo) and Tertiary (#7c3aed, deep purple) provide harmonic depth for gradients and supporting UI elements. The header uses a linear-gradient(135deg, #6366f1 0%, #a855f7 100%) to create visual momentum and brand recognition. Surfaces are cool-neutral: surface (#f8fafc, near-white with blue undertone) provides breathing room, while surface-container-lowest (#e2e8f0, light slate) creates subtle depth for cards and containers. On-surface text is #1e293b (dark slate), ensuring 7:1+ contrast for accessibility. Outline tokens (#cbd5e1, soft gray) define

Typography

The type system uses Poppins exclusively, a geometric sans-serif that reinforces the playful, modern brand personality. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence. Headline-lg (40px, 600 weight) titles major sections; headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) maintain readability at 1.5x line-height ratio, critical for emoji-heavy content. Label-md (14px, 600 weight, 0.05em tracking) emphasizes buttons and badges with subtle letter-spacing for precision. Label-sm (12px, 500 weight) is reserved for secondary metadata. On small labels over busy backgrounds (e.g., category chips), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0

Layout

The layout follows a fluid 12-column grid with a max-width of 1300px, centered on viewport. Hero section spans full width with 40px (lg spacing) vertical padding top/bottom, creating breathing room. The main input field (filter + search) occupies 90% width on desktop, 95% on tablet, with 24px (gutter) horizontal margins. Category chips below the input use a horizontal scroll container on mobile, flex-wrap on desktop, with 12px (sm spacing) gap between items. Content sections (Popular Design, results grid) use 24px (gutter) padding and 19px gap between cards in a 3-column grid (responsive to 2 columns at 768px, 1 column below). Container max-width of 1300px prevents text from stretching beyond comfortable reading width (65–75 characters per line). White-space philosophy: generous vertical s

Elevation & Depth

Depth is achieved through a three-tier shadow and surface system. Level 1 (Base): flat surfaces at surface (#f8fafc) with no shadow, establishing the default plane. Level 2 (Cards & Inputs): box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on cards and input fields, creating subtle lift. Level 3 (Buttons & Modals): box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) on primary buttons and floating action buttons, signaling interactivity. On hover, buttons elevate to box-shadow: 0 6px 14px rgba(139, 92, 246, 0.35), adding color-tinted depth. The header uses backdrop-filter: blur(10px) with -webkit-backdrop-filte

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are generous enough to feel friendly and modern, yet precise enough to maintain clarity. Buttons use 1rem (16px) border-radius, creating a pill-like softness that invites interaction. Input fields use 11.52px (0.72rem) radius, slightly tighter than buttons to signal containment. Cards use 15px (0.9375rem) radius, balancing approachability with definition. Category chips use 100px border-radius (effectively full-rounded at their height), emphasizing their role as discrete, playful tags. The header logo icon uses 0.5rem (8px) radius for a

Components

Action Elements Primary buttons use backgroundColor: #8b5cf6, textColor: #ffffff, padding: 12px 24px, height: 48px, border-radius: 1rem, and box-shadow: 0 4px 10px rgba(0, 92, 246, 0.3). On hover, the background shifts to #7c3aed, shadow expands to 0 6px 14px rgba(139, 92, 246, 0.35), and transform: translateY(-2px) adds micro-elevation. Transition timing is 0.3s ease. Secondary buttons use transparent background with 1px solid border (#cbd5e1), textColor: #8b5cf6, and the same padding/height. On hover, backgroundColor becomes #f1f5f9 and borderColor shifts to #8b5cf6. Circular icon buttons (share, copy) are 55px × 55px, border-radius: 50%, backgroundColor: #8b5cf6, with box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3). On hover, scale(1.08) and shadow deepens to 0 6px 14px rgba(139, 92, 246,

Do's and Don'ts

**Do**

• Do use the primary violet (#8b5cf6) exclusively for CTAs and active states—it's the brand's signature accent and must remain distinctive.
• Do maintain 40px (lg spacing) between major sections to create visual rhythm and prevent cognitive overload from emoji-rich content.
• Do apply box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) on all focused interactive elements for accessible keyboard navigation.
• Do use Poppins at 600+ weight for headlines and 400 weight for body text to create clear hierarchy without relying on size alone.
• Do pair the gradient header (indigo-to-purple) with white text and 0.9 opacity on nav links to maintain contrast and elegance.

**Don't**

• Don't use primary (#8b5cf6) on non-interactive elements—reserve it for buttons, links, and focus states to preserve its call-to-action power.
• Don't apply shadows deeper than 0 4px 10px rgba(0, 0, 0, 0.3) on cards; the light aesthetic demands subtlety.
• Don't mix border-radius values arbitrarily—stick to the graduated scale (8px → 16px → 15px → 100px) to maintain visual coherence.
• Don't reduce line-height below 1.5x on body text, especially when emoji are present; readability suffers at 1.4x or lower.
• Don't override the Poppins font-family with system fonts or fallbacks; the geometric personality is core to brand recognition.