jobtrackingapp/docs/ui-modernisation/visual-correction/OWNER_FLAT_VISUAL.md

Jobjakt — A3 Visual Correction: Clean, Flat, Modern UI

I want to make an important correction to the ongoing A3 UI/UX implementation.

The current application still looks too much like the original interface, with excessive cards, outlined containers, nested boxes and visually cluttered sections.

I do not want boxes inside boxes inside boxes.

The approved A3 previews were significantly cleaner, and I want the actual application to match that visual direction much more closely.

This is owner feedback on the ongoing approved A3 implementation. It does not revoke the existing foundation approval or require restarting the design process.

1. Main design direction

Adopt a cleaner, flatter, more cohesive visual system across the entire application.

Prioritise:

• Minimal unnecessary borders.
• Fewer card backgrounds.
• Clear typography and visual hierarchy.
• Better spacing and alignment.
• Less visual noise.
• More consistent controls.
• More usable content space.
• Clear distinction between primary and secondary actions.
• Smooth, cohesive workflows.
• Professional, contemporary SaaS styling.

The result should feel like a modern application, not a dashboard built from dozens of independent Material UI cards.

Flat does not mean everything must be borderless. Use borders, backgrounds and elevation where they communicate meaningful structure, but not by default.

2. Use the approved A3 design as the reference

Inspect the actual approved design assets and documentation, including:

docs/product-modernisation/08-a3-handoff/

Review the consolidated A3 prototype and selected layouts, including the original A1 dashboard, D1 foundation, B1 application tracking, CV editor and application details.

Compare actual rendered Jobjakt screens against those prototypes.

Do not treat the existing implementation as the visual reference merely because it is already implemented.

I want the actual application to move towards the approved A3 visual quality.

Do not generate new design concepts or restart the design selection process.

3. Remove excessive nested containers

Audit the use of:

• MUI Card.
• MUI Paper.
• Outlined Box components.
• Container borders.
• Nested surface backgrounds.
• Unnecessary dividers.
• Repeated section headers.
• Excessive panel padding.
• Redundant card shadows.
• Nested accordion surfaces.

Identify places where multiple visual containers represent one continuous workflow.

Flatten these layouts.

For example, instead of:

Page → Card → Card → Section → Outlined Panel → Control

Prefer:

Page → Clear section heading → Content and controls

Use typography, spacing and subtle section dividers to establish hierarchy.

Avoid enclosing an entire page in a card and then placing more cards inside it.

Use contained cards for genuinely distinct objects such as independent dashboard widgets, where appropriate.

Do not remove necessary semantic grouping or accessible controls merely to eliminate visible borders.

4. CV Builder — Immediate priority

The current mobile CV Builder is especially cluttered.

The screenshot shows:

• A large bordered CV information panel.
• Download and editor controls inside that panel.
• Another bordered editing-controls panel.
• Nested tabs and AI tools.
• Additional outlined controls inside those sections.
• Truncated tab labels at narrow widths.
• Excessive vertical space used before the actual editing content.

Redesign this to feel like one cohesive editing workspace.

CV header

Use a compact document header with:

• Back navigation.
• CV title.
• Save status.
• Primary action where appropriate.
• Secondary actions in a menu.

Avoid a large card solely to display the CV title and actions.

Editing controls

Use a clean, integrated toolbar.

Avoid enclosing the whole toolbar inside another bordered container.

Tabs

Use lightweight, accessible tabs.

Ensure every tab remains usable on narrow screens.

Consider scrolling tabs, a suitable overflow control or a more compact navigation pattern.

Do not clip text.

AI tools

Use simple, readable sections.

Avoid unnecessary cards around every AI suggestion.

Use subtle row separation and expandable details where useful.

Keep AI contextual and optional.

Desktop layout

Preserve the approved A3 arrangement:

• Editor on the left.
• Live preview on the right.

Mobile layout

Use a dedicated mobile editing experience.

• Prioritise the actual editing area.
• Provide an intuitive Edit/Preview switch.
• Avoid wasting vertical space on toolbars.
• Keep essential actions accessible.
• Preserve scroll position and editing state where practical.
• Ensure fixed bottom navigation doesn't obscure content.

Do not remove undo/redo, version history, AI tools, template controls, export options or other existing functionality.

5. Simplify global navigation

Review the current desktop and mobile headers.

The existing mobile header uses too much space and has too many separate outlined icon controls.

Follow the approved A3 approach:

• Grouped, collapsible desktop sidebar.
• Hybrid mobile navigation.
• Compact top app bar.
• Clearly prioritised actions.
• Consistent active states.
• Contextual secondary controls.

Do not duplicate primary navigation actions unnecessarily between header and bottom navigation.

Avoid unnecessary outlined circles around every icon.

Keep language and account controls accessible without allowing them to dominate the interface.

6. Apply this across the whole application

This is not only a CV Builder change.

Carry the same visual principles into:

• Dashboard.
• Job applications.
• Application details.
• Job discovery.
• Career Profile.
• CV templates.
• CV import.
• Cover letters.
• Calendar.
• Correspondence.
• Documents.
• Settings.
• Automations.
• Administration.
• Onboarding.

Avoid rebuilding every page independently.

Improve shared layout primitives, design tokens and component variants so that the cleaner styling remains consistent.

However, do not introduce a blanket CSS override that removes all borders indiscriminately.

Use intentional component-level design.

7. Mobile-first visual qualification

The screenshot was captured at approximately 320 px width.

This width must be properly supported.

Test at least:

• 320 px.
• 360 px.
• 390 px.
• 430 px.
• 768 px.
• 1024 px.
• 1440 px.

Check both:

• English and Norwegian Bokmål.
• Light and dark themes.

Also account for longer future European translations.

Verify:

• No clipped tabs.
• No unexpected horizontal scrolling.
• No overlapping controls.
• No text hidden behind fixed navigation.
• No excessively narrow content columns.
• No unnecessary vertical padding.
• Appropriate touch targets.
• Clear content hierarchy.
• Accessible keyboard and focus behaviour.

Do not solve narrow-screen issues by hiding important features without a usable alternative.

8. Visual hierarchy

Establish a consistent hierarchy using:

1. Page heading.
2. Section heading.
3. Primary content.
4. Supporting content.
5. Contextual actions.

Avoid using bordered containers as the main method of distinguishing all five levels.

Prefer typography, spacing and alignment.

Use accent colours deliberately.

Not every action needs a coloured background.

Primary actions should stand out because they matter, not because nearly every button has a prominent fill.

9. Compare with the prototypes

Create side-by-side comparisons of:

• Approved A3 prototype.
• Current application before changes.
• Updated application after changes.

Do this for representative desktop and mobile screens.

Pay particular attention to visual density, borders, nested surfaces, padding, navigation, typography and readability.

Capture actual browser screenshots.

Use the existing A3 design specifications as the primary reference.

Do not claim visual parity without inspecting the rendered application.

10. Preserve functionality

All 57 preservation groups and 34 routes remain mandatory.

Preserve existing application functionality, including:

• CV revisions.
• Undo/redo.
• Imports and exports.
• Career Profile data.
• Dashboard customisation.
• Authentication.
• Job application records.
• AI qualification restrictions.
• Administration.
• Existing language behaviour.
• Accessibility functionality.
• RD21 protections.

This is a visual and UX improvement, not permission to delete advanced features.

11. Validation and checkpoints

Implement the corrections through the existing approved A3 workstream.

Prioritise shared design-system improvements and the CV Builder mobile experience, then apply the same approach to other screens as their milestones are implemented.

For each completed increment:

• Run relevant tests.
• Run typecheck, lint and build.
• Capture browser screenshots.
• Check English/Norwegian and both themes.
• Verify mobile layouts.
• Review preservation requirements.
• Record visual differences against A3.
• Commit validated changes.
• Continue to the next authorised increment.

Do not repeatedly ask for approval for ordinary spacing, border or component-style improvements already covered by this direction.

Retain genuine mandatory milestone gates.

If another workstream is blocked, continue independent authorised work.

12. What I want to see

The result should be:

Clean, cohesive, spacious where appropriate, but still information-dense and functional.

I want Jobjakt to feel like one professionally designed application rather than multiple boxed interfaces stacked inside one another.

The UI should look much closer to the selected A3 previews.

Avoid excessive decorative containers, oversized cards, repetitive headings and unnecessary borders.

Do not use the autonomous orchestrator.

Do not merge into main or deploy production.

Final instruction

Treat this as an important design correction for the ongoing A3 implementation.

Begin by auditing the current nested-container patterns and improving the actual mobile CV Builder and shared layout components.

Then propagate the improvements through the remaining approved A3 implementation milestones.

Keep the design clean and consistent across desktop and mobile.

The objective is to match the sophistication and simplicity of the approved A3 previews, not merely to restyle the original interface.