F FourIA GitHub ↗

Style Guide - Lerma

On this page

Design Philosophy

Create a world-class, premium SPA experience with subtle micro-interactions, clean typography, and polished visual design. Focus on usability and aesthetics following modern design principles.

Color Palette

Use the daisyUI themes as a foundation, with custom accent modifications:

  • Primary: oklch(58% 0.233 277.117) - Vibrant purple for primary actions
  • Secondary: oklch(58% 0.233 277.117) - Consistent branding
  • Accent: oklch(60% 0.25 292.717) - Cyan accents
  • Background: Use light theme default, dark theme available via toggle

Typography

  • Font Family: System font stack for performance
  • Headings: Bold, clean hierarchy with consistent sizing
  • Body: Readable, well-spaced for accessibility

Layout Principles

  1. Sidebar Navigation: Fixed left sidebar for main navigation (SPA feel)
  2. Content Area: Fluid content with max-width constraints for readability
  3. Consistent Spacing: Use Tailwind spacing scale (4, 6, 8, etc.)
  4. Responsive Design: Mobile-first approach with breakpoints

Component Guidelines

  • Fixed sidebar with logo at top
  • Navigation items with icons and labels
  • Active state indicator (highlighted background)
  • Hover effects on navigation items
  • Smooth transitions between states

Home/Welcome Component

  • Hero greeting with user context
  • Quick stats overview cards
  • Route cards showing available sections
  • Clear visual hierarchy

Cards

  • Rounded corners (rounded-xl)
  • Subtle shadows for depth
  • Hover lift effect
  • Consistent padding

Buttons

  • Primary: Filled with primary color
  • Secondary: Outlined or ghost
  • Hover transitions (scale, opacity)
  • Focus states for accessibility

Micro-interactions

  • Hover: Subtle scale (1.02) and shadow increase
  • Active: Slight press effect (scale 0.98)
  • Transitions: 200-300ms ease-out for smooth feel
  • Loading: Skeleton states with pulse animation

Spacing & Layout

  • Base unit: 4px (Tailwind default)
  • Section padding: p-6 to p-8
  • Card padding: p-4 to p-6
  • Gap between cards: gap-4 to gap-6

Animations

  • Use transition utility for smooth state changes
  • Duration: 200ms for micro-interactions, 300ms for larger transitions
  • Easing: ease-out for most animations

Icons

  • Use Heroicons via the <.icon> component
  • Consistent sizing: size-4 for inline, size-6 for featured
  • Stroke width: 1.5px for outline icons