Small UI Inspiration Package for B2B Web Application
Budget: $30 – $250 USD
We are looking for a UI/UX designer to provide a small, practical UI inspiration package for our B2B web application.
This is a limited-scope project. We are not asking for full development, a complete design system, or a full application redesign. We only need clear visual ideas that our internal developers can use as a starting point.
Our application is a professional B2B web system used for dashboards, records, forms, reports, and operational workflows. We want it to look more modern, clean, trustworthy, and professional.
Budget
Our budget for this first phase is under USD $200.
Please only apply if you can provide useful design inspiration within this budget.
What We Need
Please provide:
2 different visual style directions for the web application
1 sample dashboard layout
1 sample data table/listing page layout
1 sample form/data capture page layout
Suggested colour palette
Suggested typography
Basic spacing and button/card style recommendations
Short notes explaining the design choices
Preferred Format
Preferred format:
Figma file, or
PDF presentation, or
Static mockup images
Optional bonus:
Basic CSS variables for colours
Bootstrap-friendly notes
Example button/card/table styling
Technology Context
Our app uses:
ASP.NET Core / Blazor
Bootstrap
Standard CSS
CSS variables for colours/themes
The freelancer does not need to code the application. We only need inspiration and practical visual direction.
What This Project Is Not
This is not a full application redesign.
This is not a full design system.
This is not a development project.
We do not need every screen designed. We only need a small set of examples that our developers can use to build the rest internally.
Expected Outcome
At the end, we want enough visual direction to decide on:
Overall look and feel
Colour palette
Dashboard layout
Table/list layout
Form layout
Basic component styling
Our internal team will then convert this into CSS variables, Bootstrap styles, and reusable templates.
How You Can Build The Rest Yourself
Once they give you mockups, your internal work should be:
Extract the colours into CSS variables in app.css.
:root {
--primary: #0f6b8f;
--secondary: #243447;
--background: #f5f7fa;
--surface: #ffffff;
--text: #1f2933;
--border: #d9e2ec;
}
Convert their styles into reusable Bootstrap overrides:
.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
}
.card {
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface);
}
Create a small internal UI reference page with examples of:
Buttons
Cards
Tables
Forms
Alerts
Badges
Navigation
Apply the same styles gradually across the app instead of redesigning everything at once.
Later, if needed, create multiple brand themes by swapping CSS variable files:
.theme-client-a {
--primary: #005f73;
--secondary: #0a9396;
}
.theme-client-b {
--primary: #2c3e50;
--secondary: #fdb241;
}
This is a limited-scope project. We are not asking for full development, a complete design system, or a full application redesign. We only need clear visual ideas that our internal developers can use as a starting point.
Our application is a professional B2B web system used for dashboards, records, forms, reports, and operational workflows. We want it to look more modern, clean, trustworthy, and professional.
Budget
Our budget for this first phase is under USD $200.
Please only apply if you can provide useful design inspiration within this budget.
What We Need
Please provide:
2 different visual style directions for the web application
1 sample dashboard layout
1 sample data table/listing page layout
1 sample form/data capture page layout
Suggested colour palette
Suggested typography
Basic spacing and button/card style recommendations
Short notes explaining the design choices
Preferred Format
Preferred format:
Figma file, or
PDF presentation, or
Static mockup images
Optional bonus:
Basic CSS variables for colours
Bootstrap-friendly notes
Example button/card/table styling
Technology Context
Our app uses:
ASP.NET Core / Blazor
Bootstrap
Standard CSS
CSS variables for colours/themes
The freelancer does not need to code the application. We only need inspiration and practical visual direction.
What This Project Is Not
This is not a full application redesign.
This is not a full design system.
This is not a development project.
We do not need every screen designed. We only need a small set of examples that our developers can use to build the rest internally.
Expected Outcome
At the end, we want enough visual direction to decide on:
Overall look and feel
Colour palette
Dashboard layout
Table/list layout
Form layout
Basic component styling
Our internal team will then convert this into CSS variables, Bootstrap styles, and reusable templates.
How You Can Build The Rest Yourself
Once they give you mockups, your internal work should be:
Extract the colours into CSS variables in app.css.
:root {
--primary: #0f6b8f;
--secondary: #243447;
--background: #f5f7fa;
--surface: #ffffff;
--text: #1f2933;
--border: #d9e2ec;
}
Convert their styles into reusable Bootstrap overrides:
.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
}
.card {
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface);
}
Create a small internal UI reference page with examples of:
Buttons
Cards
Tables
Forms
Alerts
Badges
Navigation
Apply the same styles gradually across the app instead of redesigning everything at once.
Later, if needed, create multiple brand themes by swapping CSS variable files:
.theme-client-a {
--primary: #005f73;
--secondary: #0a9396;
}
.theme-client-b {
--primary: #2c3e50;
--secondary: #fdb241;
}
Related categories:
Website Design
Graphic Design
CSS
User Interface / IA
Bootstrap
UX / User Experience
Figma
Web Design