114 lines
1.2 KiB
Markdown
114 lines
1.2 KiB
Markdown
# Design Principles
|
|
|
|
## Goal
|
|
|
|
Create a premium, modern career management experience.
|
|
|
|
---
|
|
|
|
# Visual Direction
|
|
|
|
The application should feel:
|
|
|
|
- Professional.
|
|
- Modern.
|
|
- Calm.
|
|
- Intelligent.
|
|
- Trustworthy.
|
|
|
|
---
|
|
|
|
# Inspirations
|
|
|
|
## Notion
|
|
|
|
For:
|
|
|
|
- Organisation.
|
|
- Clean interfaces.
|
|
- Flexible content.
|
|
|
|
## Linear
|
|
|
|
For:
|
|
|
|
- Professional software feel.
|
|
- Speed.
|
|
- Keyboard-friendly workflows.
|
|
|
|
## FlowCV
|
|
|
|
For:
|
|
|
|
- CV creation experience.
|
|
- Template selection.
|
|
- Visual editing.
|
|
|
|
## Jobscan
|
|
|
|
For:
|
|
|
|
- Career optimisation.
|
|
|
|
---
|
|
|
|
# Navigation
|
|
|
|
Users should always understand:
|
|
|
|
Where am I?
|
|
|
|
What can I do?
|
|
|
|
What happens next?
|
|
|
|
---
|
|
|
|
# Forms
|
|
|
|
Forms should:
|
|
|
|
- Be grouped logically.
|
|
- Explain fields.
|
|
- Validate clearly.
|
|
- Avoid unnecessary questions.
|
|
|
|
---
|
|
|
|
# Empty States
|
|
|
|
Every empty state should explain:
|
|
|
|
- Why it matters.
|
|
- What action to take.
|
|
- How to get started.
|
|
|
|
---
|
|
|
|
# Errors
|
|
|
|
Errors should:
|
|
|
|
- Explain what happened.
|
|
- Suggest next steps.
|
|
- Avoid technical language.
|
|
|
|
---
|
|
|
|
# Dark Mode
|
|
|
|
Dark mode should be supported.
|
|
|
|
It should feel designed, not inverted.
|
|
|
|
---
|
|
|
|
# Accessibility
|
|
|
|
All features should consider:
|
|
|
|
- Keyboard navigation.
|
|
- Screen readers.
|
|
- Contrast.
|
|
- Clear focus states.
|