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 хвилин голосом — і вона з'явиться тут із оцінкою та розбором за критеріями.

Почати співбесіду
PropTypeDefaultDescription
visualReact.ReactNodeA muted ghost preview of the real content shape, never a decorative illustration.
titlestringAction-framed: what to do next, not why the screen is empty.
bodystringOne supporting sentence.
ctaLabel / ctaHrefstring?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.

Ще немає даних

Тут з'явиться інформація, коли вона буде.

Sergiy Klimkovych

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