jobtrackingapp/docs/redesign/DESIGN_SYSTEM.md

Design System

Visual direction

Modern SaaS with Scandinavian restraint.

The interface should feel:

• clean,
• professional,
• informative,
• calm,
• polished,
• alive without being flashy.

Avoid both extremes:

• sterile all-white minimalism,
• overly colourful startup dashboards full of gradients and decoration.

Colour

Use one primary brand colour.

The exact colour is intentionally not yet locked.

Support:

• semantic success,
• warning,
• error,
• neutral/information colours,

but these should not compete with the primary brand colour.

Dark mode must have its own thoughtfully designed surface hierarchy rather than simply inverting the light theme.

Typography

Typography should prioritise readability in data-heavy screens.

Use a modern UI typeface with:

• strong numeral readability,
• clear differentiation between headings and body copy,
• good support for Norwegian characters,
• robust rendering at small UI sizes.

Avoid excessive font-size variation.

Spacing

Introduce a consistent spacing scale.

Current spacing inconsistencies should be treated as a redesign defect, not patched page by page.

Use spacing to communicate hierarchy:

• tighter within related controls,
• moderate between fields/components,
• generous between page sections.

Density

Default density: comfortable.

Provide a user preference for at least:

• Comfortable
• Compact

This should affect tables and other dense data surfaces without making every part of the app arbitrarily configurable.

Surfaces

Use restrained cards/panels.

Not every section needs a card border.

Prefer hierarchy through:

• spacing,
• subtle backgrounds,
• typography,
• dividers,
• grouped surfaces.

Avoid excessive nested cards.

Navigation

Desktop:

• collapsible left sidebar,
• grouped sections,
• clear active state,
• icon + label,
• tooltips when collapsed.

Mobile:

Use a mobile-specific navigation pattern, likely a bottom navigation for the most important destinations plus a secondary menu for the remainder.

Final mobile navigation should be determined during implementation testing.

Components

Build or standardise a shared component system for at least:

• Button
• IconButton
• Input
• Textarea
• Select
• Combobox
• Checkbox
• Radio
• Switch
• Date/time control
• Search field
• Form field
• Form validation state
• Card / surface
• Metric card
• Table
• Mobile data card
• Tabs
• Segmented control
• Status badge
• Tag/chip
• Tooltip
• Popover
• Dropdown menu
• Dialog
• Drawer
• Sheet
• Toast
• Banner
• Empty state
• Skeleton
• Loading indicator
• Pagination
• Command palette
• Breadcrumb where genuinely useful
• Page header
• Section header
• Chart container
• Timeline
• Task row
• Notification row
• AI suggestion / AI action component
• Diff/review component

Tables

Use tables as the default desktop presentation for Jobs because they support fast scanning and comparison.

Tables should support where useful:

• sorting,
• filtering,
• column visibility,
• clear status badges,
• keyboard accessibility,
• responsive transformation.

Do not horizontally squeeze desktop tables into unusable mobile layouts.

Cards

Use cards where they add value:

• dashboard metrics,
• mobile job representation,
• summary information,
• documents/templates,
• contextual recommendations.

Do not replace all tables with cards merely to look modern.

Job view switch

Jobs page should provide a clear switch between:

• Table
• Board

This should not feel like navigating to another feature.

CV builder

Desktop preferred structure:

• editor/settings area,
• live document preview.

The redesign should make this cleaner and more discoverable.

Recommended capabilities:

• drag/drop sections,
• live pagination,
• page boundaries,
• zoom,
• undo/redo,
• version history where practical,
• inline AI suggestions,
• limited document styling,
• easy template switching.

CV visual controls

Keep customisation intentionally bounded:

• template,
• accent colour,
• font,
• font size,
• margins,
• section spacing,
• section order.

Avoid turning the builder into a general-purpose word processor.

Motion

Target subtle-to-polished motion.

Use animation for:

• drawers,
• dialogs,
• view transitions,
• hover/focus feedback,
• Kanban movement,
• skeleton/loading transitions,
• expandable sections.

Typical interaction motion should be restrained and fast.

Respect prefers-reduced-motion.

Icons

Use one consistent icon family.

Avoid mixing multiple visual icon styles.

Branding and logo

A new logo is required.

The logo should work in:

• full wordmark,
• compact sidebar mark,
• favicon/app icon,
• light mode,
• dark mode.

Avoid a generic "AI sparkle" logo as the primary identity.