cesnimda
4ce2df0a2b
CI / backend (push) Successful in 52s
CI / frontend (push) Successful in 14s
Deploy Staging / deploy (push) Successful in 18s
CI / backend (pull_request) Successful in 52s
CI / frontend (pull_request) Successful in 15s
Security / secrets (push) Successful in 4s
Security / dependencies (push) Successful in 55s
Security / secrets (pull_request) Successful in 4s
Security / dependencies (pull_request) Successful in 54s
46 lines
3.2 KiB
Markdown
46 lines
3.2 KiB
Markdown
# Design Brief (locked via interview)
|
|
|
|
The confirmed design direction from the Phase 4A interview. This governs the UX/UI
|
|
redesign, design system, themes, and search experience.
|
|
|
|
## Direction in one line
|
|
**An approachable, professional, "anyone can pick it up" email tool in the spirit of
|
|
Notion & Arc — a polished, responsive web app that is fast and premium without being
|
|
intimidating.**
|
|
|
|
## Confirmed preferences
|
|
| Dimension | Decision | Design implication |
|
|
|-----------|----------|--------------------|
|
|
| Reference feel | **Notion / Arc, but professional** | Friendly, spatial, low learning curve — not a power-user speed tool (not Superhuman). |
|
|
| Density | **Balanced** | Comfortable, readable rows; efficient but not cramped. |
|
|
| Input model | **Pointer-first / discoverable** | Clickable UI is the backbone. Command palette + shortcuts are **accelerators for power users**, layered on top — never required. |
|
|
| App metaphor | **Polished web app** | Exceptional in-browser experience; shareable URLs; no native-desktop assumptions. |
|
|
| Platforms | **Desktop (Win + Mac/Linux), Tablet, Mobile** | **Fully responsive** is mandatory — layouts must gracefully collapse desktop → mobile. |
|
|
| Default theme | **Dark-first** | Design primarily for a layered dark UI; light theme fully first-class (genuine white, not grey). |
|
|
| Motion | **Subtle & smooth** | Gentle, quick transitions and tasteful micro-interactions. Respect `prefers-reduced-motion`. |
|
|
| Colour personality | **Warm ∩ cool blend, green accent** | Accent built around **`#3ba31f`** (refined into an accessible ramp); neutrals lean subtly warm. |
|
|
| Icons | **Clean line, rounded** (Lucide-style) | Consistent stroke weight, soft corners. |
|
|
| Speed vs polish | **Balanced** | Polish is welcome only when it never costs perceptible speed. |
|
|
| Audience | **Mainstream, power-capable** | Simple by default; power features revealed progressively. |
|
|
| Accessibility | **Deferred (nice-to-have)** | AA basics baked in cheaply; deeper a11y is a pre-launch backlog item. See below. |
|
|
|
|
## The pivotal insight
|
|
The original brief leaned "keyboard-first"; the interview corrected this to
|
|
**discoverable-first**. That reframes the flagship **search** away from a syntax you
|
|
must learn (`from:x after:y`) toward an **inviting, visual, assisted** experience —
|
|
filter chips, live suggestions, and natural language — with the power syntax still
|
|
available underneath. This single decision shapes the entire redesign.
|
|
|
|
## Accent colour note
|
|
`#3ba31f` = rgb(59,163,31). It's a strong differentiator (most email apps default to
|
|
blue) and bridges warm/cool. It will be developed into a full ramp (50→900); the
|
|
**interactive** shade will be nudged for WCAG AA contrast on dark surfaces and on
|
|
buttons, and green will **never be the sole signal** for selection/status (always
|
|
paired with icon/shape) so the design is colour-blind-safe by construction.
|
|
|
|
## Deferred: accessibility
|
|
Per the user, accessibility is a **nice-to-have to revisit before public launch**, not
|
|
a hard requirement now. Cheap AA basics (contrast, focus rings, reduced-motion,
|
|
non-colour-only state) are still baked in; high-contrast mode, full screen-reader
|
|
semantics, font-scaling controls, and formal colour-blind audits are **backlog**.
|