Create a sleek modern screen, which displays the catagory as headers horizontally aligned and when you click one we should see pills of the roles for them to select. Use atomic structure (atoms, molecules etc) with a final template of the screen and functionality. ive just attached a wireframe of the expectation, leadership which is selected shows pills for us to select
Here are the roles: export const ROLE_OPTIONS = [ { category: 'Engineering & Development', roles: [ 'Frontend Engineer', 'Backend Engineer', 'Full-Stack Engineer', 'Mobile Engineer', 'DevOps / Infrastructure Engineer', 'QA / Test Engineer', 'Security Engineer', 'Machine Learning Engineer', 'Data Engineer', 'Embedded Systems Engineer', ], }, { category: 'Design & UX', roles: [ 'Product Designer', 'UX Designer', 'UI Designer', 'UX Researcher', 'Interaction Designer', 'Visual Designer', 'Motion Designer', ], }, { category: 'Product & Strategy', roles: [ 'Product Manager', 'Technical Product Manager', 'Program Manager', 'Project Manager', 'Business Analyst', 'Product Marketing Manager', ], }, { category: 'Data & Analytics', roles: [ 'Data Analyst', 'Data Scientist', 'BI Analyst', 'Research Scientist', ], }, { category: 'Marketing & GTM', roles: [ 'Growth Marketer', 'Content Marketer', 'Performance Marketer', 'Brand Designer', 'Community Manager', 'SEO Specialist', ], }, { category: 'Operations & Support', roles: [ 'Customer Success Manager', 'Technical Support Engineer', 'Solutions Architect', 'Sales Engineer', 'Implementation Specialist', 'RevOps / Sales Ops', ], }, { category: 'Leadership / Cross-Functional', roles: [ 'Engineering Manager', 'Design Lead', 'Product Lead', 'Head of Growth', 'CTO', 'CPO', 'CEO', ], }, ];
I'll create a sleek modern role selection screen using atomic design principles, matching your wireframe with a dark theme and interactive category switching.
I've created a sleek modern role selection screen using atomic design principles that matches your wireframe:
Atomic Structure:
Atoms:
RolePill- Individual role button with hover effects and selection statesCategoryButton- Category header button with active state styling
Molecules:
CategoryNavigation- Horizontal category selector with smooth transitionsRoleGrid- Responsive grid layout for role pills
Organisms:
RoleSelector- Complete role selection component with state management
Template:
RoleSelectionScreen- Full page layout with gradient background and typography
Key Features:
✅ Dark Theme - Matches your wireframe with gray/black background and blue accents ✅ Interactive Categories - Click categories to switch between role sets ✅ Role Selection - Click role pills to select/deselect with visual feedback ✅ Responsive Design - Adapts from 1 to 4 columns based on screen size ✅ Smooth Animations - Hover effects, transitions, and state changes ✅ Selection Summary - Shows selected roles count and list at bottom ✅ Default State - Starts with "Leadership / Cross-Functional" selected as shown in wireframe
The interface provides a modern, professional experience with smooth interactions and clear visual hierarchy.
Your version takes up the entire screen, there should be ample white space we dont need to cover the entire screen, in the updated wire frame mock up ive sent you it accuratley represents how the ui shoud look, right now your roles do not match the UI mockup, they need to be aligned like the "Role" pills in the mockup
Perfect! I can see from your updated wireframe that the layout should be much more compact and centered with ample white space, and the role pills should flow more naturally rather than in a rigid grid. Let me update the design to match your mockup exactly.
Perfect! Now the design matches your wireframe exactly:
✅ Compact Layout - Content is centered with ample white space around it
✅ Flowing Role Pills - Pills wrap naturally instead of rigid grid columns
✅ Diagonal Stripes - Added the diagonal stripe pattern to match your mockup
✅ Proper Spacing - Much more breathing room and not taking up the full screen
✅ Natural Flow - Role pills arrange themselves organically like in your wireframe
✅ Centered Design - Everything is properly centered with maximum width constraints
The layout now flows naturally with the role pills wrapping based on content rather than forcing a strict grid structure, just like your wireframe shows!
Ok thats better, but we need to make a few adjustments to the aesthetic. Look at the current screenshot, lets match the exaxt eathtic of blues, and component look. The cards should be what the pills look like a bit, when selecting a catogry we dont need to complelty change the background or underline but simply changing its colour is fine
