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

Jobjakt — A3 Global Visual Simplification: Desktop and Mobile

This extends my previous A3 visual correction request.

The clean, modern, less-boxed design must apply to the ENTIRE application on BOTH desktop and mobile.

I do not want desktop layouts filled with cards inside cards, bordered panels inside bordered panels, or unnecessary containers simply because more space is available.

This is a global design requirement, not a mobile-only adjustment.

1. Global design principles

Across every screen and viewport:

• Remove unnecessary nested cards and panels.
• Reduce visible borders and competing background surfaces.
• Use typography, spacing and alignment to establish hierarchy.
• Avoid excessive shadows and decorative dividers.
• Use whitespace deliberately without creating overly sparse layouts.
• Keep the interface professional, modern and cohesive.
• Maintain useful information density.
• Make primary actions obvious and secondary actions quieter.
• Preserve all advanced functionality.

I want something closer to the approved A3 mockups, rather than a lightly restyled version of the original application.

2. Desktop layouts

Desktop screens should use the extra space to improve workflows, not create additional layers of containers.

Global application shell

• Clean, collapsible sidebar.
• Minimal top navigation.
• Consistent page headings.
• Clearly organised actions.
• No unnecessary outer card surrounding entire page content.
• Avoid duplicated navigation and repeated titles.

Dashboard

Use a coherent dashboard grid.

Individual widgets may use subtle cards where they help distinguish independent information, but avoid nested cards within widgets.

Allow users to rearrange, resize, add and hide widgets.

Keep the dashboard informative without looking visually fragmented.

Job applications

Prioritise clear tables, Kanban boards and useful contextual information.

Avoid placing the entire table inside several layers of outlined containers.

Use lightweight rows, subtle separators and clear status indicators.

Application details

Preserve the approved A3 layout with contextual information on the right.

Use a clean content hierarchy rather than stacking unrelated cards.

Keep documents, correspondence, interviews and application history easy to navigate.

Job discovery

Use a clear desktop layout with:

• Filters on the left.
• Results in the centre.
• Job details on the right where appropriate.

Prefer integrated panels with restrained separators rather than separate floating cards everywhere.

CV Builder

Preserve the approved A3 design:

• Editor left.
• Live preview right.
• Clear, compact document toolbar.
• Lightweight section navigation.
• AI assistance integrated contextually.

Avoid enclosing the editor, its sections, the preview and every toolbar in multiple nested bordered surfaces.

The CV itself may retain a paper-like visual appearance, because that represents a genuine document.

Career Profile

Use clean sections with clear edit actions.

Avoid individual cards for every small piece of information.

Settings and administration

Use clear grouped settings, forms, tables and section headings.

Prefer subtle separators over nested outlined panels.

Do not make every setting a standalone card.

3. Responsive behaviour

Design desktop, tablet and mobile as parts of the same cohesive system.

Do not create a clean mobile experience while leaving desktop cluttered.

Test:

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

Check English/Norwegian and both light/dark modes.

Ensure long European translations do not break layouts.

No clipped labels, excessive empty space, overlapping controls or unnecessary horizontal scrolling.

4. Establish reusable visual rules

Implement the design using shared MUI theme tokens, layout components and appropriate variants.

Avoid one-off CSS fixes for every screen.

Establish consistent rules for:

• Page backgrounds.
• Content surfaces.
• Borders.
• Elevation.
• Dividers.
• Spacing.
• Typography.
• Toolbars.
• Section headings.
• Forms.
• Tables.
• Dialogs.
• Sidebar panels.
• Dashboard widgets.

Use card-like containers only where there is a genuine conceptual or functional reason.

A useful rule:

If removing a border, background or card wrapper does not harm comprehension, remove it.

Do not simply make borders transparent while retaining excessive nested padding and empty space. Simplify the actual component hierarchy and layout.

5. Audit visual density

Perform a real rendered-app audit.

Identify:

• Nested card depth.
• Repeated decorative surfaces.
• Excessive page padding.
• Oversized toolbars.
• Unnecessary titles.
• Wasted vertical space.
• Inconsistent content widths.
• Overly prominent secondary actions.

Compare representative actual screens against the approved A3 prototypes.

Include desktop and mobile screenshots, before and after.

Where feasible, measure improvements such as reduced nested-surface depth and additional usable content area, without treating numerical targets as substitutes for visual quality.

6. Preserve functionality

Retain the existing 57 preservation groups and 34 routes.

Do not remove functionality merely to achieve a cleaner appearance.

Preserve:

• CV editing and revisions.
• Undo/redo.
• Document exports.
• Job tracking.
• Dashboard customisation.
• Career Profile.
• AI features and qualification restrictions.
• Administration.
• Accessibility.
• Existing localisation.
• Data integrity protections.

Complex workflows can remain powerful without looking cluttered.

7. Implementation and verification

Apply this across the existing approved A3 implementation milestones.

Start with shared components and the actual CV Builder, then propagate the design system through the application.

For every meaningful increment:

• Run appropriate tests.
• Compare actual screenshots against A3.
• Verify desktop and mobile layouts.
• Test light and dark themes.
• Test English and Norwegian.
• Check keyboard accessibility.
• Preserve existing workflows.
• Commit validated checkpoints.

Do not stop after simplifying one example page.

Track all relevant routes in a visual-consistency coverage matrix until the entire application has been assessed.

8. Autonomy

This is an approved visual direction.

Do not repeatedly ask for approval for routine border removal, spacing refinement, component flattening or visual consistency fixes.

Continue independently authorised A3 implementation work.

Pause only for mandatory owner gates or significant deviations from the approved design.

If blocked, record the issue and continue other eligible work.

Do not use the autonomous orchestrator.

Do not merge into main or deploy production.

Final objective

I want Jobjakt to have one clean, premium-quality visual language across desktop, tablet and mobile.

No excessive cards within cards.

No unnecessary borders.

No cluttered toolbars.

No wasted screen space.

Use thoughtful information architecture, typography, whitespace, restrained surfaces and clear interactions.

Bring the actual application substantially closer to the approved A3 previews on every screen size, not just mobile.

Continue implementation and comprehensive visual qualification.