The Laptizo.pk article detail design system: a softly tinted split hero with an uncropped cover, a sticky left-hand contents index, spacious editorial typography, orange-accented summaries and tables, green and red callouts, interactive checklists, research resources, and a compact Read Next section.
What Is Blog Detail UI?
This is a reusable design prompt extracted from Laptizo.pk's /articles/[slug] pages. It captures the actual article layout and component system: a softly tinted split hero, uncropped framed cover, sticky left-hand index, generous reading rhythm, warm summary and table treatments, contextual callouts, checklists, research sources, and compact related reading.
The frontmatter's skillPrompt is the complete copy-ready generation prompt. Its palette provides the core color swatches; the prompt also documents the exact semantic callout colors, responsive measurements, and component states.
The Vibe
A practical buying guide with the care of an editorial publication.
The reader arrives with a question. The hero explains the subject, the summary provides an early answer, the index makes the long page manageable, and the content modules make evidence easy to compare. Navy creates hierarchy, orange adds brand warmth, teal guides navigation, and paper-colored panels separate useful information from continuous prose.
When to Use It
Use this template for detailed technology articles, laptop buying advice, market price guides, and tutorials with several sections. A straightforward article can use just prose and the index; a researched guide can add summaries, tables, figures, checklists, and sources using the same visual system.
Design Rules — The Essential Decisions
Two Different Grids
The hero is approximately 52.5% text and 47.5% cover. The article body is approximately 28% contents and 72% prose, after accounting for the column gap. Both become single-column layouts below 1024px, but the contents changes into a collapsed disclosure rather than remaining a sidebar.
The Cover Is Artwork, Not a Background
The cover keeps its natural image ratio inside a white frame with a small rotated backing layer. The page title remains selectable HTML beside it. This preserves both the artwork and the clarity of the article header, including when the source cover contains its own subject lettering.
Reading Text and Interface Text Have Different Roles
Article paragraphs use #1C1A17 at 16px with a 1.8 line height. Metadata and panel descriptions use the quieter #575757. Headings use #022539. Prose links are amber; navigational and resource links are teal. These distinctions are part of the design, not interchangeable color choices.
Component Geometry Communicates Function
The hero cover is rounded and softly elevated. Summaries, tables, callouts, checklists, and source lists have square outer frames, while their inner tiles and icon holders are rounded. That contrast keeps the reading tools structured without making the whole page feel rigid.
Long-Form Content Needs Working Navigation
The index includes H2/H3 headings and the actual titles of summary, checklist, and resources components. It tracks the active reading position, keeps desktop selection visible, and closes the mobile disclosure after a jump. A static list of links reproduces only part of this design.