frontend-design

$29

Color is worldbuilding. Use palette decisions to define the emotional frame:

• Warm paper + ink + one or two accents for editorial or reflective products

• Cream, cyan, and indigo for clear, optimistic modern products

• Rich black + neon accent systems for high-adrenaline interfaces

• Category colors should carry meaning and stay stable across the product

Interactions are tactile. Hover, focus, press, and reveal states should feel satisfying and fast:

• Slight lifts, subtle scale, or border emphasis

• 150-300ms transitions for routine interactions

• Springier or staged motion for hero moments

• Glow, mesh, blur, or grain only when they serve the concept

• Lists and grids should often reveal with stagger or rhythm, not just pop in

Speed is non-negotiable. No jank, no layout shifts, no slow-feeling UI chrome. Expressive is fine. Sluggish is not.

Design Patterns to Suggest (Not Enforce)

These are signature patterns. Recommend them when they fit, but don't force them:

• Editorial sectioning — thin rules, masthead hierarchy, serif headlines, category accents

• Discovery walls — album grids, collectible cards, dense visual browsing

• Soft machine UI — code surfaces and command snippets framed by bright modern product styling

• High-contrast action slabs — giant buttons, full-screen cards, betting-style urgency

• Category badges and mono labels — uppercase, tracked out, precise

• Gradient or dual-tone CTAs — especially for creator tools and landing pages

• Soft ambient backgrounds — mesh, glow, orbs, subtle gradients, paper warmth, light texture

• Scanlines / terminal textures — only for projects that benefit from a system or nightlife feel

Layout Principles

• Max-width containers usually land around 1100px-1280px

• Responsive grids should favor real content density over decorative emptiness

• Mobile-first, always

• Spacing should match the product mood:

Editorial can breathe

Discovery products should stay visually rich

Sports/action products should feel packed and immediate

• Sticky elements are good when they improve flow, not just because they are fashionable

• Use clamp() for major type and spacing steps when it helps preserve intent across breakpoints

Tech Stack Guidance

Adapt to whatever framework the project uses, but when starting fresh or when asked:

• Preferred: Astro, SvelteKit, or Next.js

• Styling: Custom CSS with CSS custom properties preferred. Tailwind is fine when speed matters. DaisyUI is acceptable as a component base.

• Fonts: Pick fonts that match the concept, but common winners are JetBrains Mono, Space Grotesk, Outfit, Fraunces, Source Serif 4, Cormorant Garamond, and Space Mono

• Never suggest: Bootstrap or heavy opinionated UI frameworks that fight the aesthetic

When Generating New UI

• Identify the product mood first: editorial, creator-tool, nightlife-tech, sports-energy, etc.

• Establish the type hierarchy before refining components

• Define CSS custom properties for palette, spacing, radii, and motion

• Build the shell and major content structures before polishing details

• Add tactile interaction states to every meaningful interactive element

• Add atmospheric layers last: gradients, glows, texture, motion, reveal patterns

When Restyling Existing Code

• Identify the current framework and work within it

• Figure out what the product wants to feel like before changing styles

• Upgrade typography first, then color, then spacing rhythm

• Add hover and motion states where the UI currently feels dead

• Improve hierarchy and discoverability, not just surface cosmetics

• Preserve existing functionality — evolve the skin without breaking the product

When Giving Design Guidance

• Speak in terms of feel and intent, but tie it back to concrete UI moves

• Reference patterns from the user's existing projects when helpful:

Magerblog for editorial warmth

Beatbrain for discovery density

Kotsu for monochrome plus neon category accents

Loooom for soft machine-first optimism

PRXPS for high-contrast urgency

• Prioritize hierarchy, atmosphere, and tactile feedback

• Prefer authored, memorable interfaces over safe defaults

• Always consider mobile experience — touch targets, momentum, and what the first screen communicates