Frontend Design

Frontend Design Skill

This skill provides UI/UX design patterns and visual implementation guidelines for Splits Network applications using DaisyUI v5 and TailwindCSS.

Memphis Design System (CRITICAL — Read First)

Memphis pages (*-memphis/ routes, showcase pages in apps/corporate/src/app/showcase/) use the Memphis design system (@splits-network/memphis-ui) instead of standard DaisyUI. The rest of this skill applies to non-Memphis pages only.

When to Use Memphis vs Standard DaisyUI

• Memphis: Any file in a *-memphis/ directory, any showcase page, any new page being migrated to Memphis
• Standard DaisyUI: Existing non-Memphis pages, utility components in packages/shared-ui/

Memphis Styling Hierarchy (use components and named classes BEFORE raw Tailwind)

1. Memphis UI React components (@splits-network/memphis-ui) — FIRST. 101 components with correct styling baked in. Check packages/memphis-ui/src/react/components/index.ts.
2. Memphis plugin CSS classes (btn, badge, card, input, select, etc.) — named classes with border tiers baked in.
3. Memphis CSS theme classes (bg-coral, text-dark, border-interactive) — for elements not covered above.
4. Local components ({feature}-memphis/components/) — must use memphis-ui primitives internally.
5. Raw Tailwind — LAST RESORT, only for layout/spacing/grid. Never for visual styling when a component or class exists.

// ❌ WRONG on Memphis pages — raw Tailwind for a button
<button className="bg-coral text-dark border-4 border-dark font-bold uppercase px-6 py-3">Submit</button>

// ✅ CORRECT — use the Memphis UI component
import { Button } from '@splits-network/memphis-ui';
<Button variant="primary" size="md">Submit</Button>

// ✅ ALSO ACCEPTABLE — use the plugin CSS class
<button className="btn btn-coral btn-md">Submit</button>

Memphis design rules: no shadows, no rounded corners, no gradients, Memphis palette only (coral, teal, yellow, purple, dark, cream), geometric decorations.

See .claude/memphis/references/design-principles.md for full Memphis guidelines.

Core Principles (Standard DaisyUI — Non-Memphis Pages)

Design System Foundation

• DaisyUI v5: Primary component library with semantic components
• TailwindCSS: Utility-first CSS framework for custom styling
• Semantic Colors: Use DaisyUI color names (primary, secondary, base-100, etc.) for theme compatibility
• Consistency: Follow established patterns for predictable user experience

Visual Hierarchy

• Clear information hierarchy with typography scales
• Appropriate use of color for emphasis and status
• Strategic use of whitespace for content grouping
• Consistent spacing using Tailwind's spacing scale

Accessibility First

• Semantic HTML elements (<button>, <fieldset>, <nav>)
• ARIA labels where needed
• Keyboard navigation support
• Sufficient color contrast

Color System

Semantic Colors (DaisyUI)

// ✅ Use semantic colors for theme compatibility
<button className="btn btn-primary">Primary Action</button>
<div className="bg-base-100 text-base-content">Content</div>
<span className="text-error">Error message</span>

// ❌ Avoid hardcoded Tailwind colors for theme-dependent elements
<button className="bg-blue-500 text-white">Bad</button>

Color Categories

Brand Colors:

• primary - Primary brand actions (submit, confirm)
• secondary - Secondary brand actions
• accent - Accent highlights

UI Colors:

• base-100 - Page background (lightest)
• base-200 - Elevated surface
• base-300 - More elevated surface
• base-content - Text on base colors

Semantic Status:

• success - Success states and confirmations
• warning - Warning states and cautions
• error - Error states and destructive actions
• info - Informational messages

Neutral:

• neutral - Neutral actions and content
• neutral-content - Text on neutral backgrounds

Color Usage Guidelines

// Page backgrounds
<div className="bg-base-100">Main content area</div>

// Cards and elevated surfaces
<div className="card bg-base-200">Card content</div>

// Status indicators
<span className="badge badge-success">Active</span>
<span className="badge badge-warning">Pending</span>
<span className="badge badge-error">Failed</span>

// Text colors
<p className="text-base-content">Body text</p>
<h1 className="text-base-content">Heading</h1>
<span className="text-primary">Link or emphasis</span>

Typography

Font Scales

// Headings
<h1 className="text-4xl font-bold">Page Title</h1>
<h2 className="text-3xl font-semibold">Section Heading</h2>
<h3 className="text-2xl font-semibold">Subsection</h3>
<h4 className="text-xl font-medium">Card Title</h4>

// Body Text
<p className="text-base">Standard body text (16px)</p>
<p className="text-sm">Secondary text (14px)</p>
<p className="text-xs">Caption text (12px)</p>

// Large Text
<div className="text-5xl font-bold">Hero Text</div>

Font Weights

• font-normal (400) - Body text
• font-medium (500) - Emphasis, labels
• font-semibold (600) - Subheadings
• font-bold (700) - Headings, strong emphasis

Text Utilities

// Alignment
<p className="text-left">Left aligned</p>
<p className="text-center">Center aligned</p>
<p className="text-right">Right aligned</p>

// Text truncation
<p className="truncate">Long text that gets cut off with ellipsis...</p>
<p className="line-clamp-3">Text limited to 3 lines</p>

// Text transform
<span className="uppercase">Uppercase</span>
<span className="capitalize">Capitalize Each Word</span>

Layout Patterns

Container Widths

// Full width
<div className="w-full">100% width</div>

// Max width with centering
<div className="max-w-7xl mx-auto px-4">Large container</div>
<div className="max-w-4xl mx-auto px-4">Medium container</div>
<div className="max-w-2xl mx-auto px-4">Small container</div>

// Fixed widths
<div className="w-64">256px (16rem)</div>
<div className="w-96">384px (24rem)</div>

Flexbox Layouts

// Horizontal with space between
<div className="flex justify-between items-center">
  <div>Left content</div>
  <div>Right content</div>
</div>

// Vertical stack with gap
<div className="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

// Centered content
<div className="flex items-center justify-center min-h-screen">
  <div>Centered content</div>
</div>

// Responsive horizontal to vertical
<div className="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid Layouts

// Equal columns
<div className="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

// Responsive columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

// Auto-fit columns
<div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div>Responsive item</div>
</div>

Spacing Scale

Use consistent spacing from Tailwind's scale (0.25rem increments):

• gap-1 (0.25rem / 4px)
• gap-2 (0.5rem / 8px)
• gap-4 (1rem / 16px) - Common for components
• gap-6 (1.5rem / 24px)
• gap-8 (2rem / 32px) - Common for sections

// Component spacing
<div className="space-y-4">Vertical stack with 1rem gap</div>
<div className="space-x-2">Horizontal inline with 0.5rem gap</div>

// Padding
<div className="p-4">Equal padding all sides</div>
<div className="px-4 py-2">Horizontal 1rem, vertical 0.5rem</div>

// Margins
<div className="mb-6">Margin bottom 1.5rem</div>
<div className="mx-auto">Center horizontally</div>

Component Patterns

Buttons

// Primary actions
<button className="btn btn-primary">Save Changes</button>

// Secondary actions
<button className="btn btn-outline">Cancel</button>
<button className="btn btn-ghost">Dismiss</button>

// Destructive actions
<button className="btn btn-error">Delete</button>

// Button with icon
<button className="btn btn-primary">
  <i className="fa-duotone fa-regular fa-check"></i>
  Confirm
</button>

// Button sizes
<button className="btn btn-xs">Extra Small</button>
<button className="btn btn-sm">Small</button>
<button className="btn btn-md">Medium (default)</button>
<button className="btn btn-lg">Large</button>

// Button group
<div className="join">
  <button className="btn join-item">Left</button>
  <button className="btn join-item">Center</button>
  <button className="btn join-item">Right</button>
</div>

// Loading state
<button className="btn btn-primary" disabled>
  <span className="loading loading-spinner loading-sm"></span>
  Loading...
</button>

Cards

// Basic card
<div className="card bg-base-200">
  <div className="card-body">
    <h3 className="card-title">Card Title</h3>
    <p>Card content goes here.</p>
    <div className="card-actions justify-end">
      <button className="btn btn-primary">Action</button>
    </div>
  </div>
</div>

// Card with image
<div className="card bg-base-200">
  <figure>
    <img src="/image.jpg" alt="Description" />
  </figure>
  <div className="card-body">
    <h3 className="card-title">Card with Image</h3>
    <p>Content below image</p>
  </div>
</div>

// Horizontal card (responsive)
<div className="card bg-base-200 sm:card-side">
  <figure className="w-full sm:w-48">
    <img src="/image.jpg" alt="Description" />
  </figure>
  <div className="card-body">
    <h3 className="card-title">Horizontal Card</h3>
    <p>Content beside image on larger screens</p>
  </div>
</div>

// Card grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div className="card bg-base-200">
    <div className="card-body">Content</div>
  </div>
  {/* More cards */}
</div>

Forms (DaisyUI v5 Pattern)

// Text input with label
<fieldset className="fieldset">
  <legend className="fieldset-legend">Email Address *</legend>
  <input
    type="email"
    className="input w-full"
    placeholder="you@example.com"
    required
  />
  <p className="fieldset-label">We'll never share your email</p>
</fieldset>

// Select dropdown
<fieldset className="fieldset">
  <legend className="fieldset-legend">Select Role</legend>
  <select className="select w-full">
    <option value="">Choose...</option>
    <option value="recruiter">Recruiter</option>
    <option value="admin">Administrator</option>
  </select>
</fieldset>

// Textarea
<fieldset className="fieldset">
  <legend className="fieldset-legend">Description</legend>
  <textarea
    className="textarea w-full h-24"
    placeholder="Enter details..."
  />
</fieldset>

// Two-column layout
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <fieldset className="fieldset">
    <legend className="fieldset-legend">First Name</legend>
    <input type="text" className="input w-full" />
  </fieldset>
  <fieldset className="fieldset">
    <legend className="fieldset-legend">Last Name</legend>
    <input type="text" className="input w-full" />
  </fieldset>
</div>

// Form actions
<div className="flex gap-2 justify-end mt-6">
  <button type="button" className="btn btn-ghost">Cancel</button>
  <button type="submit" className="btn btn-primary">Save</button>
</div>

Navigation

// Top navbar
<nav className="navbar bg-base-200">
  <div className="navbar-start">
    <a className="btn btn-ghost text-xl">Brand</a>
  </div>
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Dashboard</a></li>
      <li><a>Jobs</a></li>
      <li><a>Candidates</a></li>
    </ul>
  </div>
  <div className="navbar-end">
    <button className="btn btn-primary">Sign In</button>
  </div>
</nav>

// Sidebar navigation
<aside className="w-64 bg-base-200 min-h-screen">
  <ul className="menu p-4">
    <li><a><i className="fa-duotone fa-regular fa-house"></i> Dashboard</a></li>
    <li><a><i className="fa-duotone fa-regular fa-briefcase"></i> Jobs</a></li>
    <li><a><i className="fa-duotone fa-regular fa-users"></i> Candidates</a></li>
  </ul>
</aside>

// Breadcrumbs
<div className="breadcrumbs text-sm">
  <ul>
    <li><a>Home</a></li>
    <li><a>Jobs</a></li>
    <li>Software Engineer</li>
  </ul>
</div>

// Tabs
<div role="tablist" className="tabs tabs-box">
  <button role="tab" className="tab tab-active">Overview</button>
  <button role="tab" className="tab">Applications</button>
  <button role="tab" className="tab">Settings</button>
</div>

Tables

// Basic table
<div className="overflow-x-auto">
  <table className="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td><span className="badge badge-success">Active</span></td>
        <td>
          <button className="btn btn-ghost btn-xs">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

// Zebra striping
<table className="table table-zebra">
  {/* ... */}
</table>

// Pinned columns
<table className="table table-pin-cols">
  <thead>
    <tr>
      <th>Name</th>
      <td>Email</td>
      <td>Phone</td>
      <th>Actions</th>
    </tr>
  </thead>
  {/* Columns with <th> stay pinned when scrolling */}
</table>

Lists

// Simple list
<ul className="list">
  <li className="list-row">
    <div>Item label</div>
    <div>Item value</div>
  </li>
  <li className="list-row">
    <div>Another label</div>
    <div>Another value</div>
  </li>
</ul>

// List with icons
<ul className="list">
  <li className="list-row">
    <i className="fa-duotone fa-regular fa-check text-success"></i>
    <div className="list-col-grow">Completed task</div>
    <span className="text-sm text-base-content/60">2 hours ago</span>
  </li>
</ul>

// Card-based list
<div className="space-y-4">
  <div className="card bg-base-200">
    <div className="card-body">
      <div className="flex justify-between items-center">
        <div>
          <h4 className="font-semibold">Item Title</h4>
          <p className="text-sm text-base-content/60">Item description</p>
        </div>
        <button className="btn btn-ghost btn-sm">View</button>
      </div>
    </div>
  </div>
</div>

Badges and Status

// Status badges
<span className="badge badge-success">Active</span>
<span className="badge badge-warning">Pending</span>
<span className="badge badge-error">Failed</span>
<span className="badge badge-info">New</span>

// Badge sizes
<span className="badge badge-xs">Extra Small</span>
<span className="badge badge-sm">Small</span>
<span className="badge badge-md">Medium</span>
<span className="badge badge-lg">Large</span>

// Outlined badges
<span className="badge badge-outline badge-primary">Outlined</span>

// In context
<div className="flex items-center gap-2">
  <h3 className="text-lg font-semibold">Job Title</h3>
  <span className="badge badge-success">Open</span>
</div>

Modals and Drawers

// Modal with HTML dialog
<button => document.getElementById('my_modal').showModal()}>
  Open Modal
</button>

<dialog id="my_modal" className="modal">
  <div className="modal-box">
    <h3 className="text-lg font-bold">Modal Title</h3>
    <p className="py-4">Modal content goes here</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn">Close</button>
      </form>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

// Drawer
<div className="drawer">
  <input id="my_drawer" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    <label htmlFor="my_drawer" className="btn btn-primary drawer-button">
      Open Drawer
    </label>
  </div>
  <div className="drawer-side">
    <label htmlFor="my_drawer" className="drawer-overlay"></label>
    <div className="menu bg-base-200 min-h-full w-80 p-4">
      <h3 className="text-lg font-bold mb-4">Drawer Title</h3>
      {/* Drawer content */}
    </div>
  </div>
</div>

Alerts and Messages

// Success alert
<div className="alert alert-success">
  <i className="fa-duotone fa-regular fa-circle-check"></i>
  <span>Your changes have been saved successfully!</span>
</div>

// Error alert
<div className="alert alert-error">
  <i className="fa-duotone fa-regular fa-circle-exclamation"></i>
  <span>Failed to save changes. Please try again.</span>
</div>

// Warning alert
<div className="alert alert-warning">
  <i className="fa-duotone fa-regular fa-triangle-exclamation"></i>
  <span>This action cannot be undone.</span>
</div>

// Info alert
<div className="alert alert-info">
  <i className="fa-duotone fa-regular fa-circle-info"></i>
  <span>New features have been released!</span>
</div>

// Alert with actions
<div className="alert alert-warning">
  <i className="fa-duotone fa-regular fa-triangle-exclamation"></i>
  <span>Your session will expire in 5 minutes.</span>
  <div>
    <button className="btn btn-sm btn-ghost">Dismiss</button>
    <button className="btn btn-sm btn-primary">Extend Session</button>
  </div>
</div>

Loading and Empty States

Loading Indicators

// Spinner
<span className="loading loading-spinner loading-lg"></span>

// Loading dots
<span className="loading loading-dots loading-md"></span>

// Loading in button
<button className="btn btn-primary" disabled>
  <span className="loading loading-spinner loading-sm"></span>
  Loading...
</button>

// Skeleton loading
<div className="space-y-4">
  <div className="skeleton h-8 w-3/4"></div>
  <div className="skeleton h-4 w-full"></div>
  <div className="skeleton h-4 w-5/6"></div>
</div>

// Card skeleton
<div className="card bg-base-200">
  <div className="card-body">
    <div className="skeleton h-6 w-1/2 mb-4"></div>
    <div className="skeleton h-4 w-full mb-2"></div>
    <div className="skeleton h-4 w-3/4"></div>
  </div>
</div>

Empty States

// Empty state with icon
<div className="flex flex-col items-center justify-center py-12 text-center">
  <i className="fa-duotone fa-regular fa-inbox text-6xl text-base-content/30 mb-4"></i>
  <h3 className="text-xl font-semibold mb-2">No items yet</h3>
  <p className="text-base-content/60 mb-4">
    Get started by creating your first item
  </p>
  <button className="btn btn-primary">Create Item</button>
</div>

// Empty search results
<div className="text-center py-8">
  <i className="fa-duotone fa-regular fa-magnifying-glass text-4xl text-base-content/30 mb-4"></i>
  <h3 className="text-lg font-semibold mb-2">No results found</h3>
  <p className="text-base-content/60">
    Try adjusting your search filters
  </p>
</div>

// Error state
<div className="flex flex-col items-center justify-center py-12 text-center">
  <i className="fa-duotone fa-regular fa-triangle-exclamation text-6xl text-error mb-4"></i>
  <h3 className="text-xl font-semibold mb-2">Something went wrong</h3>
  <p className="text-base-content/60 mb-4">
    We couldn't load this content. Please try again.
  </p>
  <button className="btn btn-primary">Retry</button>
</div>

Responsive Design

Breakpoints

Tailwind breakpoints:

• sm: - 640px and up
• md: - 768px and up
• lg: - 1024px and up
• xl: - 1280px and up
• 2xl: - 1536px and up

Common Responsive Patterns

// Hide/show on mobile
<div className="hidden md:block">Desktop only</div>
<div className="block md:hidden">Mobile only</div>

// Responsive columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Items */}
</div>

// Responsive text sizes
<h1 className="text-2xl md:text-4xl lg:text-5xl">Responsive Heading</h1>

// Responsive padding
<div className="p-4 md:p-6 lg:p-8">Content</div>

// Responsive flexbox direction
<div className="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

// Mobile menu pattern
<div className="navbar bg-base-200">
  <div className="navbar-start">
    <div className="dropdown">
      <label tabIndex={0} className="btn btn-ghost lg:hidden">
        <i className="fa-duotone fa-regular fa-bars"></i>
      </label>
      <ul className="menu dropdown-content mt-3 p-2 shadow bg-base-200 rounded-box w-52">
        <li><a>Dashboard</a></li>
        <li><a>Jobs</a></li>
      </ul>
    </div>
  </div>
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal">
      <li><a>Dashboard</a></li>
      <li><a>Jobs</a></li>
    </ul>
  </div>
</div>

Design Tokens

Custom Theme Configuration

/* apps/portal/src/app/globals.css */
@import "tailwindcss";
@plugin "daisyui" {
    themes:
        light --default,
        dark --prefersdark;

    /* Or custom theme */
    themes:
        light,
        dark,
        custom --default;
}

/* Custom theme definition */
@plugin "daisyui/theme" {
    name: "custom";
    default: true;
    color-scheme: light;

    --color-primary: oklch(55% 0.3 240);
    --color-secondary: oklch(70% 0.25 200);
    --color-accent: oklch(65% 0.25 160);

    --color-base-100: oklch(98% 0.02 240);
    --color-base-200: oklch(95% 0.03 240);
    --color-base-300: oklch(92% 0.04 240);
    --color-base-content: oklch(20% 0.05 240);

    --radius-box: 0.5rem;
    --radius-field: 0.25rem;
}

Using CSS Variables

// Access theme colors in custom styles
<div style={{ backgroundColor: 'var(--color-primary)' }}>
  Custom styled element
</div>

// Or use Tailwind utilities
<div className="bg-primary text-primary-content">
  Theme-aware component
</div>

Best Practices

Component Composition

// ✅ Compose with DaisyUI and Tailwind utilities
<div className="card bg-base-200 shadow-xl">
  <div className="card-body">
    <h2 className="card-title text-2xl">Title</h2>
    <p className="text-base-content/80">Description</p>
  </div>
</div>

// ❌ Don't fight against utility classes
<div style={{ padding: '15px', borderRadius: '12px' }}>
  <h2 style={{ fontSize: '24px' }}>Bad practice</h2>
</div>

Consistency

// ✅ Consistent spacing and sizing
<div className="space-y-4">
  <div className="card bg-base-200">Content 1</div>
  <div className="card bg-base-200">Content 2</div>
</div>

// ✅ Consistent button styles for similar actions
<div className="flex gap-2">
  <button className="btn btn-primary">Save</button>
  <button className="btn btn-ghost">Cancel</button>
</div>

Accessibility

// ✅ Proper semantic HTML
<nav>
  <ul className="menu">
    <li><a href="/dashboard">Dashboard</a></li>
  </ul>
</nav>

// ✅ ARIA labels for icons
<button aria-label="Delete item" className="btn btn-ghost btn-sm">
  <i className="fa-duotone fa-regular fa-trash"></i>
</button>

// ✅ Focus states
<button className="btn focus:ring-2 focus:ring-primary">
  Accessible Button
</button>

Performance

// ✅ Use Tailwind utilities instead of custom CSS
<div className="flex items-center gap-2">Fast</div>

// ❌ Avoid inline styles when utilities exist
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  Slower
</div>

Common Mistakes to Avoid

1. ❌ Using Tailwind color names instead of semantic DaisyUI colors

   // Bad - won't adapt to theme changes
   <div className="bg-blue-500 text-white">Content</div>
   
   // Good - theme-aware
   <div className="bg-primary text-primary-content">Content</div>
   

2. ❌ Inconsistent spacing

   // Bad - random spacing values
   <div className="mb-3">
   <div className="mb-5">
   <div className="mb-7">
   
   // Good - consistent spacing scale
   <div className="mb-4">
   <div className="mb-4">
   <div className="mb-4">
   

3. ❌ Fighting DaisyUI component styles

   // Bad - overriding with !important
   <button className="btn !bg-red-500 !text-white">Button</button>
   
   // Good - use DaisyUI modifiers
   <button className="btn btn-error">Button</button>
   

4. ❌ Not using responsive utilities

   // Bad - not responsive
   <div className="grid grid-cols-3">
   
   // Good - responsive columns
   <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
   

Resources

• TailwindCSS Documentation
• Tailwind Color Reference
• Project: docs/guidance/form-controls.md - Form implementation patterns