Design reference 02 · Clarity & editorial
Precision SaaS
Explain a software product through concrete capabilities, evidence, and a credible path into its interface.
Download design ZIP · Open interactive specimen
Design specification
Philosophy and fit. Explain a software product through concrete capabilities, evidence, and a credible path into its interface. Suitable for subscription software, professional tools, and product launches needing a conventional commercial structure.
Visual grammar. Use a tidy horizontal navigation, asymmetric hero with product copy beside a real interface preview, alternating capability sections, a compact comparison table, and a direct closing action. A neutral grotesk, pale grey surfaces, charcoal text, and a single blue accent establish order. Reserve rounded containers for genuine interface groupings; screenshots should show readable features, not floating abstract rectangles.
Specimen and flow. *RelayDesk* presents a small client request tracker. Visitors inspect a worked request, compare three fictional plans, then open an interactive sample inbox. Supporting states include a populated request detail and an empty workspace with a useful first action.
Adaptation and identity. Mobile promotes copy before the preview and presents plan differences as labelled sections. Preserve capability-led storytelling and visible product evidence; avoid generic metric claims, gradient decoration, and autoplay demos. Effort: medium.
Files for a coding model
Reference images
- Desktop — 1440 × 1000 viewport
- Phone — 390 × 844 viewport
- Supporting state — 1440 × 1000 viewport
- Full page — 1440 × 1000 viewport
Supporting routes
Reuse
Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.