Empty State
Shared first-run shell for /dashboard/** — action-framed copy ("do this next", not "why is this empty"), a muted ghost preview of the real content shape instead of a decorative illustration (DESIGN.md bans those on functional screens), and a primary CTA.
Interview list — /dashboard/interviews
Ghost rows preview the real InterviewList shape instead of a generic illustration.
Пройди першу співбесіду
15 хвилин голосом — і вона з'явиться тут із оцінкою та розбором за критеріями.
Почати співбесіду| Prop | Type | Default | Description |
|---|---|---|---|
| visual | React.ReactNode | — | A muted ghost preview of the real content shape, never a decorative illustration. |
| title | string | — | Action-framed: what to do next, not why the screen is empty. |
| body | string | — | One supporting sentence. |
| ctaLabel / ctaHref | string? | — | Optional primary CTA link. |
Skill profile — /dashboard/profile and overview hero
GhostRadar sketches the hexagon SkillRadar will draw once there's data — SkillRadar itself returns null at zero coverage on purpose, so this is a separate, data-free silhouette, not a workaround.
Пройди першу співбесіду
Твій профіль навичок з'явиться тут одразу після першої оціненої співбесіди.
Почати співбесідуNo CTA
ctaLabel/ctaHref are optional — omit them when the empty state sits next to its own action elsewhere on the page.
Ще немає даних
Тут з'явиться інформація, коли вона буде.

Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer