# 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.