Custom Laravel/PWA UI Kit Design
Budget: $30 – $250 USD
Project Overview:
We are looking for an experienced UI/UX designer to create a custom UI Kit tailored to our finalized brand identity (logo and digital identity are ready). This UI Kit is for a life planner web-based application to be developed as a Progressive Web App (PWA) using Laravel and TailwindCSS.
The UI Kit must include both web and mobile versions of all components and layout samples, ensuring consistency and responsiveness across devices.
Objective:
Develop a modern, consistent, and mobile-first UI Kit that reflects our brand and supports native-like PWA experiences. This kit will be used by our frontend developers as the base for building actual application screens.
Key Features & Requirements:
- Must follow PWA design principles to feel like a native mobile app.
- Include both desktop and mobile versions for all components and screens.
- Must respect and match our brand guidelines (colors, typography, logo).
- Must be responsive (mobile-first design).
- Deliverables must be in Figma (preferred), Adobe XD, or Sketch.
- Include style variables or design tokens to aid developer handoff.
UI Kit Components to Include:
✅ Color Palette (Light and Dark Modes)
✅ Typography (Headers, Paragraphs, Buttons)
✅ Buttons (Primary, Secondary, Ghost, Disabled, Loading)
✅ Input Fields (Text, Number, Textarea, Date, Password)
✅ Select Menus, Checkboxes, Toggles, Radio Buttons
✅ Cards, Modals, Tabs, Alerts, Breadcrumbs
✅ Navigation (Header/Top Bar, Footer, Sidebar, Mobile Nav)
✅ Tables (Header, Row Styles, Pagination Elements)
✅ Forms Layout (Inline and Stacked)
✅ Calendar Components and Basic Task Item Layout
✅ Icon Suggestions Matching the Theme (Optional)
✅ Sample Screen Layouts (for both web and mobile):
- Add, Edit, View, List Screens
- Login/Register
- Dashboard
- Profile Settings
- Calendar View
- Task Details
- Notifications
- Empty State / Error Pages
PWA Visual Strategy Document:
We will provide a visual document highlighting PWA Design Strategies with clear visual examples (e.g., app shell structure, navigation behavior, gesture zones, offline loaders, etc.). The designer is expected to apply these strategies across all components.
To Apply, Please Share:
- Your portfolio with similar UI Kits or design systems.
- Any experience working with PWA or mobile-first UI.
- Your estimated delivery time.
What We Provide:
- Logo
- Digital Brand Guidelines PDF (colors, typography, tone)
- Visual strategy document for PWA-native UX
- Sample screen references (if needed)
This includes web-based design considerations by default, ensuring that all UI components are optimized for both desktop and mobile PWA experiences.
We are looking for an experienced UI/UX designer to create a custom UI Kit tailored to our finalized brand identity (logo and digital identity are ready). This UI Kit is for a life planner web-based application to be developed as a Progressive Web App (PWA) using Laravel and TailwindCSS.
The UI Kit must include both web and mobile versions of all components and layout samples, ensuring consistency and responsiveness across devices.
Objective:
Develop a modern, consistent, and mobile-first UI Kit that reflects our brand and supports native-like PWA experiences. This kit will be used by our frontend developers as the base for building actual application screens.
Key Features & Requirements:
- Must follow PWA design principles to feel like a native mobile app.
- Include both desktop and mobile versions for all components and screens.
- Must respect and match our brand guidelines (colors, typography, logo).
- Must be responsive (mobile-first design).
- Deliverables must be in Figma (preferred), Adobe XD, or Sketch.
- Include style variables or design tokens to aid developer handoff.
UI Kit Components to Include:
✅ Color Palette (Light and Dark Modes)
✅ Typography (Headers, Paragraphs, Buttons)
✅ Buttons (Primary, Secondary, Ghost, Disabled, Loading)
✅ Input Fields (Text, Number, Textarea, Date, Password)
✅ Select Menus, Checkboxes, Toggles, Radio Buttons
✅ Cards, Modals, Tabs, Alerts, Breadcrumbs
✅ Navigation (Header/Top Bar, Footer, Sidebar, Mobile Nav)
✅ Tables (Header, Row Styles, Pagination Elements)
✅ Forms Layout (Inline and Stacked)
✅ Calendar Components and Basic Task Item Layout
✅ Icon Suggestions Matching the Theme (Optional)
✅ Sample Screen Layouts (for both web and mobile):
- Add, Edit, View, List Screens
- Login/Register
- Dashboard
- Profile Settings
- Calendar View
- Task Details
- Notifications
- Empty State / Error Pages
PWA Visual Strategy Document:
We will provide a visual document highlighting PWA Design Strategies with clear visual examples (e.g., app shell structure, navigation behavior, gesture zones, offline loaders, etc.). The designer is expected to apply these strategies across all components.
To Apply, Please Share:
- Your portfolio with similar UI Kits or design systems.
- Any experience working with PWA or mobile-first UI.
- Your estimated delivery time.
What We Provide:
- Logo
- Digital Brand Guidelines PDF (colors, typography, tone)
- Visual strategy document for PWA-native UX
- Sample screen references (if needed)
This includes web-based design considerations by default, ensuring that all UI components are optimized for both desktop and mobile PWA experiences.