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:
- StationSearch Livewire component (public)
- Dashboard
- Welcome/Home page
- Settings pages (Profile, Security, Appearance)
- 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