Design
The locked screen layout, the brand palette, the temporary monogram, and how Olga should look.
Phase 1
The design brief in one line: quiet confidence. Sophisticated and understated, no trendy visual tricks. The interface should feel like a well-run office, not a dashboard demo.
The screen layout
The layout is locked (the "Original layout"):
| Column | Specification |
|---|---|
| Left | Narrow navigation column with icons for every section — 44–48px wide |
| Middle | Main content area, showing whichever section the user selected |
| Right | Olga's panel — 240–280px wide by default, collapsible |
On mobile, the navigation and Olga adapt rather than shrink: Olga becomes a full-screen overlay opened by a button, and every screen works in the browser on phones and tablets — there is no downloadable app in Phase 1.
Brand colors
| Role | Color | Value |
|---|---|---|
| Main | Deep Charcoal | ~#2A2A2A |
| Accent | Warm Copper — used sparingly, for buttons and highlighted items | ~#B87333 |
| Background | Warm off-white / cream | ~#FBFAF6 |
| Secondary text | Soft charcoal | ~#5A5A5A |
| Borders | Warm mid-gray | ~#D4D0CB |
Status colors
Green (on track / success), yellow (at risk / caution), and red (off track / critical) are status colors only — they show the state of a metric, a priority, or an issue, and are never used as brand elements.
The monogram (temporary)
Until the real logo arrives in Phase 4, the mark is the letter "O" as a monogram — warm copper on a deep charcoal circle, or the reverse. Simple and timeless; it also serves as Olga's identity mark in her panel.
How Olga should look
Olga's visual treatment is her voice rendered in the interface:
- No cartoon avatar — just the "O" monogram
- No "typing…" animations that pretend she's thinking
- No sparkles, lightning bolts, or "AI-powered" badges
- Clean typography — the words do the work
- Real formatted content — lists, task breakdowns, and tables render as actual structure, not plain text squeezed into a chat bubble
The words on the screen
Every button label, empty state, and error message follows Olga's voice, and the full set is reviewed jointly by the founder and the designer:
| Surface | How it reads |
|---|---|
| Empty states | Brief and welcoming |
| Confirmations | Clear and direct |
| Errors | Honest about what happened |
| Buttons | Concise and active |
Accessibility
The design must meet WCAG 2.1 AA:
- Everything works with keyboard only
- Works with screen readers
- Colors have sufficient contrast — including the status colors against the cream background
Accessibility is part of the definition of done, not a later pass — see Acceptance criteria.