Frontend Design System

Frontend Design System

This skill provides the standards and patterns for building user interfaces in the dashboard application. The goal is to create a premium, dynamic, and highly polished user experience that "wows" the user.

1. Design Philosophy

• High-End Aesthetics: We do not build "MVP-looking" apps. We build refined, polished interfaces.
• Glassmorphism & Depth: Utilize layers, blurs (backdrop-blur-xl), and subtle transparencies (bg-white/40) to create depth.
• Vibrant Colors: Use the project's primary and secondary palette, but often via gradients or low-opacity tints (bg-primary/10) rather than solid blocks of harsh color.
• Dynamic Motion: Nothing should feel static. Smooth transitions (duration-500, duration-700), micro-interactions on hover, and entrance animations are required.

2. Component Usage

All standard UI elements must come from the internal component library.

Reference Documentation:

• UI Component Library (lib-vue-components) - Contains full list of available components and their props.

// Import path
import { Card, Button, Icon } from 'pilotui/elements.ts';
import { Modal } from 'pilotui/complex.ts';

Key Components

• Card: The building block for content.
• Button: Use for actions.
• Icon: Wrapper for Iconify icons. PREFERRED SET: iconify solar--*-bold-duotone or *-bold.
• PageHeader: Standard top-of-page layout with title, subtitle, and actions.
• Breadcrumb: Navigation hierarchy component.

3. Layout Patterns

Main Page Shell

Pages normally live within a DashboardShell (via default layout). Content should be centered with max-width.

<template>
    <div class="relative min-h-screen">
		<!-- Decorative Background Elements -->
        <div
            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
        </div>
        <div
            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
        </div>

        <!-- Standard Container -->
        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
            
            <!-- Standard Header Block -->
            <PageHeader
                overline="Section Label"
                title="Page Title"
                subtitle="Descriptive text goes here."
            >
                <template #actions>
                    <!-- Optional Right-side Actions/Status -->
                </template>
            </PageHeader>

            <!-- Content Grid -->
            <div class="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
                <slot />
            </div>
        </div>
    </div>
</template>

Card Styling

Cards should rarely be just plain rectangles.

Premium Card Recipe:

• Rounding: rounded-[2.5rem] or rounded-3xl (generous curves).
• Background: bg-white dark:bg-gray-800.
• Shadow: Light idle shadow shadow-[0_4px_20px_rgba(0,0,0,0.03)] -> Deep hover shadow hover:shadow-[0_40px_80px_rgba(var(--primary-rgb),0.15)].
• Interaction: group hover:-translate-y-3 transition-all duration-700.
• Decorations: Use absolute positioned gradients or icons in the background of cards to add texture.

4. Typography Standards

• Titles (H1-H2): font-black, tracking-tight.
• Body: font-medium (avoid thin weights for body text to maintain legibility and premium feel).
• Labels/Meta: text-[10px] or text-xs, font-bold, uppercase, tracking-widest (typographic spacing is key for the premium look).
• Colors:
  • Primary text: text-gray-900 / dark:text-white
  • Secondary text: text-gray-500 / dark:text-gray-400
  • Accent text: text-primary

5. Visual Effects & Assets

Gradients

Use gradients to create "glows".

• Example: bg-gradient-to-br from-primary via-primary-dark to-secondary

Glassmorphism

• Use backdrop-blur-md or backdrop-blur-xl.
• Combine with bg-white/10 or bg-white/70.
• Add border border-white/20 for the "glass edge" look.

Background Elements

Add "blobs" behind the main content to avoid empty whitespace looking boring.

<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>

6. Development Checklist

When creating a new page or component:

1. Did I use Card and Button from the library?
2. Are the borders rounded enough (rounded-2xl+)?
3. Is there an entrance animation (e.g., animate-fade-in-up)?
4. Are interactable elements responsive to hover (scale, shadow, lift)?
5. Is Dark Mode supported (dark: variants)?
6. Did I use the "Solar" icon set (iconify solar--...)?
7. Is the typography hierarchy clear (Big titles, tiny uppercase labels)?

Source: navidshad/frameflow — distributed by TomeVault.