Skip to content

design_guidelines.md

Latest commit

 

History

History
162 lines (126 loc) · 5.61 KB

design_guidelines.md

File metadata and controls

162 lines (126 loc) · 5.61 KB

Temporary Email Generator - Design Guidelines

Design Approach

Hybrid Strategy:

  • Public Interface: Reference-based design inspired by modern SaaS products (Stripe, Vercel, Linear) - clean, trustworthy, and minimal
  • Admin Interface: Material Design principles for data-heavy dashboard functionality

Core Principle: Create visual distinction between public-facing simplicity and admin-panel efficiency while maintaining brand coherence through typography and spacing consistency.

Typography System

Font Families:

  • Primary: Inter (Google Fonts) - headings, UI elements, buttons
  • Monospace: JetBrains Mono - email addresses, technical displays

Hierarchy:

  • Hero Heading: text-6xl font-bold (public hero)
  • Section Headings: text-4xl font-semibold
  • Card Titles: text-xl font-medium
  • Body Text: text-base font-normal
  • Small/Meta: text-sm
  • Email Displays: text-lg font-mono

Layout System

Spacing Primitives: Tailwind units of 4, 6, 8, 12, 16, 20

  • Component padding: p-6, p-8
  • Section spacing: py-16, py-20, py-24
  • Card gaps: gap-6, gap-8
  • Element margins: mb-4, mb-6, mb-8

Grid System:

  • Public features: 3-column grid (grid-cols-1 md:grid-cols-3)
  • Admin dashboard stats: 4-column grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-4)
  • Email inbox: Single column with card list
  • Domain management: Data table layout

Container Widths:

  • Public hero/content: max-w-6xl
  • Email generator interface: max-w-3xl centered
  • Admin dashboard: max-w-7xl
  • Forms: max-w-md

Component Library

Public Interface Components

Hero Section:

  • Full-width section with gradient mesh background image (abstract, tech-themed)
  • Centered content with max-w-4xl
  • Large heading + subtitle + primary CTA
  • Hero height: min-h-[600px] with content vertically centered

Email Generator Card (Primary Component):

  • Large centered card with prominent shadow and rounded corners (rounded-2xl)
  • Generated email display in monospace with large text
  • Copy button with icon (Font Awesome clipboard icon)
  • Generate new email button (large, primary)
  • Domain selector dropdown
  • Timer display showing expiration countdown
  • Layout: All elements stacked vertically with generous spacing (gap-6)

Inbox View:

  • Email list as stacked cards (space-y-4)
  • Each email card shows: sender badge, subject line, timestamp, unread indicator
  • Click to expand full email content within card
  • Empty state with illustration placeholder comment
  • Auto-refresh indicator (subtle pulse animation on refresh icon)

Features Section:

  • 3-column grid showcasing benefits
  • Icons from Font Awesome (shield, clock, trash-alt)
  • Feature cards with icon, title, short description
  • Section padding: py-20

Admin Interface Components

Admin Login:

  • Centered login card (max-w-md)
  • Replit Auth integration button
  • Minimalist design with logo placement

Admin Dashboard Layout:

  • Sidebar navigation (fixed, w-64)
  • Main content area with top bar showing admin user info
  • Sidebar items: Dashboard, Domains, Email Logs, Settings
  • Active state highlighting for current page

Statistics Cards:

  • 4-column grid showing key metrics
  • Each card: large number, label, icon, trend indicator
  • Metrics: Total Emails, Active Addresses, Domains, Success Rate
  • Material Design elevation (shadow-md)

Domain Management Table:

  • Full-width data table with striped rows
  • Columns: Domain Name, Status Badge, Created Date, Email Count, Actions
  • Action buttons: Edit, Delete, Toggle Active (icon buttons)
  • Add Domain button (prominent, top-right)
  • Search/filter bar above table

Email Logs View:

  • Searchable table with pagination
  • Columns: Email Address, Created At, Expires At, Domain, Messages Received
  • Filter by domain dropdown
  • Export functionality button

Shared Components

Buttons:

  • Primary: Large rounded buttons with medium font weight
  • Secondary: Outlined buttons
  • Icon buttons: Circular, icon-only (admin actions)
  • Copy buttons: Backdrop blur with semi-transparent background when over images

Form Elements:

  • Consistent input styling: rounded-lg, border treatment, focus states
  • Labels above inputs with small font size
  • Helper text below inputs in muted style
  • Form groups with mb-6 spacing

Navigation:

  • Public: Horizontal nav bar with logo left, login link right
  • Admin: Vertical sidebar with grouped navigation items

Modals/Dialogs:

  • Centered overlay with backdrop blur
  • Modal content: rounded-lg card with header, body, footer sections
  • Used for: Domain edit form, email detail view, confirmations

Icons

Library: Font Awesome (CDN)

  • Public: envelope, copy, clock, shield-alt, trash-alt, refresh
  • Admin: dashboard, globe, list, cog, users, chart-line, plus, edit, trash, check, times

Images

Hero Section Image:

  • Abstract gradient mesh or geometric pattern background
  • Tech-themed with modern aesthetic (purples, blues, abstract shapes)
  • Placement: Full hero section background with overlay darkening
  • Style: High-quality, professional, conveys security and technology

Empty State Illustrations:

  • Inbox empty state: Simple line illustration
  • Use placeholder comments: <!-- EMPTY STATE ILLUSTRATION: Inbox -->

Accessibility

  • All form inputs with proper labels and aria-labels
  • Keyboard navigation support for all interactive elements
  • Focus indicators on all focusable elements
  • Sufficient contrast ratios throughout
  • Screen reader friendly status messages for email generation/copy actions

Responsive Breakpoints

  • Mobile (base): Single column layouts, full-width cards, stacked navigation
  • Tablet (md): 2-column grids, sidebar navigation remains
  • Desktop (lg): Full multi-column layouts, optimal spacing