fuel-price/.superdesign/README.md

SuperDesign Context Files for Fuel Price Application

This directory contains comprehensive design system documentation for the Fuel Price (Laravel Starter Kit) application.

Generated Files

1. init/components.md (274 lines)

Shared UI Primitives & Components

Lists all reusable Blade components (7 total) with full source code:

• x-action-message: Temporary status messages
• x-app-logo: Branding component
• x-app-logo-icon: SVG logo icon
• x-auth-header: Centered auth page header
• x-auth-session-status: Session status display
• x-desktop-user-menu: User profile dropdown
• x-placeholder-pattern: Loading state pattern

Also documents Flux v2 components used throughout the application.

2. init/layouts.md (347 lines)

Complete Layout Hierarchy

Full content of 7 layout files:

• layouts/app.blade.php: Main app wrapper
• layouts/app/sidebar.blade.php: Authenticated layout with header/sidebar
• layouts/auth.blade.php: Auth wrapper
• layouts/auth/simple.blade.php: Centered auth layout
• layouts/auth/card.blade.php: Card-based auth layout
• layouts/auth/split.blade.php: Split-screen auth layout
• partials/head.blade.php: Shared head section

Includes usage patterns and color scheme documentation.

3. init/routes.md (120 lines)

Route Configuration & Summary

Complete files:

• routes/web.php: Public and authenticated routes
• routes/settings.php: Settings page routes

Plus detailed route summary table covering:

• 19 total routes (web + Fortify)
• Route grouping by protection level
• Livewire component routes mapping

4. init/theme.md (298 lines)

Design Tokens & Configuration

Complete content:

• resources/css/app.css: Tailwind imports and custom theme
• Color palette: Zinc neutral scale + semantic colors
• Typography: Instrument Sans font configuration
• Spacing system: 4px base unit scale
• Dark mode implementation
• Vite build configuration
• Flux theme setup

5. init/pages.md (291 lines)

Page Dependency Trees

Full-page component documentation with dependency trees:

1. StationSearch Livewire component (public)
2. Dashboard
3. Welcome/Home page
4. Settings pages (Profile, Security, Appearance)
5. Authentication pages (Login, Register, Password Reset, Email Verification, 2FA)

Includes data flow documentation and page transition patterns.

6. init/extractable-components.md (386 lines)

Reusable Component Analysis

16 components identified by category:

• 3 Form components (Search, Select, Loading Button)
• 6 Data Display components (Card, Stats, Legend)
• 2 Navigation components (Sidebar Nav, User Menu)
• 3 Layout components (Auth layouts)
• 2 Feedback components (Messages)
• 1 Map/Visualization component
• 2 Typography components

Includes reusability scoring table and extraction recommendations.

7. init/design-system.md (494 lines)

Complete Design System

Comprehensive design documentation:

• Brand identity & philosophy
• Color system: Zinc palette + semantic colors
• Typography: Typeface, hierarchy, weights
• Spacing & layout: Grid system, breakpoints
• Borders & radius: Border weight, color, radius scales
• Component patterns: Forms, Buttons, Cards, Navigation
• Data visualization: Map colors, marker styles
• Animations & transitions: Page transitions, component effects
• Accessibility: Contrast, interactive elements, typography
• Dark mode: Colors, images, implementation
• Responsive behavior: Breakpoints, layout adjustments

Project Stack

• Framework: Laravel 11
• UI Library: Livewire 3 (classic components)
• Styling: Tailwind CSS v4
• UI Components: Flux UI v2
• JavaScript: Alpine.js
• Font: Instrument Sans (400, 500, 600 weights)
• Map Library: Leaflet
• Map Tiles: OpenStreetMap

Key Features

• Dark-mode-first design with light mode support
• Responsive mobile-first architecture
• Comprehensive authentication UI (Fortify-based)
• Interactive fuel station search with Leaflet maps
• Settings/profile management
• Accessibility-focused component design

Color Palette

Primary

• Zinc neutral scale (50-950)

Semantic

• Success: Green-500 (#22c55e)
• Warning: Amber-500 (#f59e0b)
• Error: Red-500 (#ef4444)
• Info: Slate-500 (#64748b)

File Organization

All context files are in init/ subdirectory for SuperDesign import.

Total: ~2,210 lines of comprehensive design documentation

Generated: April 6, 2026