Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics while maintaining strong layout structure, hierarchy, and usability for real-world applications.

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

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a clear direction: minimal, refined, editorial, futuristic, playful, industrial, etc. Avoid randomness.
• Constraints: Technical requirements (framework, performance, accessibility).
• Differentiation: What makes this interface feel premium and intentional?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Creativity must support usability, not break it.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

• Production-grade and functional
• Visually refined and intentional
• Cohesive with a clear aesthetic system
• Structured with proper layout hierarchy

Frontend Aesthetics Guidelines

Focus on:

• Typography: Use distinctive display fonts where appropriate, but maintain readability for UI. Avoid overuse of decorative fonts in dashboards.
• Color & Theme: Use a controlled palette. Brand color should be used intentionally, not everywhere.
• Motion: Use subtle, meaningful animations. Prioritize clarity over excessive motion.
• Spatial Composition: Maintain alignment and grid consistency. Avoid random layouts in dashboards.
• Backgrounds & Visual Details: Add depth using subtle gradients, shadows, and layering — not heavy visual noise.

Avoid generic AI design patterns and inconsistent styling.

Layout & Hierarchy System (CRITICAL FOR DASHBOARDS)

1. Layering System

Always structure UI into:

• Page layer → bg-background or bg-surface-base
• Section layer → grouped containers with spacing
• Card layer → bg-card with border and shadow

Never place content directly on the page without separation.

2. Spacing System

Use consistent spacing scale:

• 8px → small gaps
• 16px → internal padding
• 24px → between components
• 32px → between sections

Avoid arbitrary spacing values.

3. Card Design Pattern

All cards must follow:

• bg-card
• border border-border
• rounded-xl or rounded-2xl
• shadow-sm or shadow-md
• p-4 to p-6

Optional enhancements:

• hover:shadow-md
• transition-all duration-200

4. Grid & Alignment

• Use consistent grids (grid-cols-2, grid-cols-3, grid-cols-12)
• Maintain equal heights where needed
• Use consistent gap-4 or gap-6
• Align text and elements strictly

5. Color Usage Rules

• Brand color → buttons, active states, highlights
• Neutral colors → backgrounds, cards, text
• Avoid overusing brand color across the UI

6. Text Hierarchy

Use clearly:

• text-text-primary → headings
• text-text-secondary → descriptions
• text-text-muted → metadata only

Avoid excessive muted text.

7. Shadows & Depth

Use subtle elevation:

• shadow-sm → default
• shadow-md → emphasis

Avoid heavy shadows or glow effects in dashboards.

Tailwind Usage Rules

• Always use design tokens (bg-card, text-text-primary, etc.)
• Do not hardcode colors unless necessary
• Maintain consistency with global theme variables
• Prefer reusable patterns over one-off styling

Interaction Guidelines

• Hover → subtle (border, shadow, background)
• Transitions → duration-200 ease-out
• Clickable elements must be clearly visible
• Avoid hidden or confusing interactions

What to Avoid

• No random gradients or excessive decoration
• No inconsistent spacing
• No flat UI without borders or separation
• No overuse of muted text
• No mixing too many visual styles

Infloq Brand Guidelines

When building UI for Infloq, use the following established design system:

Color Palette

Brand Colors (Primary)

• Primary: #2520BE
• Hover: #3730D9
• Accent: #4F46E5
• Glow: #6366F1

Mascot (Dark Backgrounds)

• Default: #1C254F
• Light: #2D3A6B

UI Colors

• Border: #A5B4FC
• Section: #EEF2FF
• Background: #F8FAFF
• Card: #FFFFFF

Text Colors

• Primary: #0B1220
• Secondary: #475569
• Muted: #94A3B8
• OnDark: #E0E7FF
• OnDarkMuted: #C7D2FE

Typography

• Display: ClashDisplay
• Body: Inter

Usage Notes

• Use brand colors for CTAs and active elements
• Use mascot colors for dark sections
• Maintain strong contrast for readability
• Use gradients subtly for depth, not decoration

Final Principle

Creativity is important, but structure is mandatory.

Every UI must feel:

• Clear
• Consistent
• Well-spaced
• Visually separated
• Production-ready

The output should look like a real SaaS product, not an experimental design.