simple-web-layouts

This skill creates webpage layouts that are simple on purpose.

Use it when the user wants a page that feels quiet, compact, dark, flat, and easy to scan instead of expressive, decorative, or highly art-directed.

The goal is not generic minimalism. The goal is a straightforward layout with clear hierarchy, small visual moves, and almost no ornament.

Core Direction

Design with these defaults unless the user asks otherwise:

• Dark theme with flat fills, not gradients
• Compact width and compact spacing
• Strong but small typography hierarchy
• Low-radius containers and simple rectangles
• One restrained accent color at most
• No hero gimmicks, no floating effects, no decorative illustrations
• Motion should be absent or barely noticeable

Visual Rules

Layout

• Prefer a centered block or a single-column stack
• Keep the composition narrow and readable
• Use obvious structure: title, list, rows, footer if needed
• Avoid empty “showcase” sections that do not help navigation or comprehension

Typography

• Favor plain, readable fonts; if unspecified, use `DejaVu Sans` or another neutral sans already available in the project
• Keep headings modest in size relative to the viewport
• Use normal sentence case unless the existing design suggests otherwise
• Avoid oversized display type and trendy font pairings

Color

• Use near-black backgrounds and dark gray surfaces
• Use borders and contrast sparingly but clearly
• If using an accent, apply it as a thin bar, small indicator, underline, or subtle text emphasis
• Never use gradients unless the user explicitly asks for them

Shape and Effects

• Use small or moderate border radii
• Avoid glassmorphism, glow, blur-heavy panels, and layered atmospheric effects
• Shadows should be soft and minimal, or skipped entirely
• Decorative texture should usually be omitted

Implementation Guidance

• Start with the simplest DOM structure that can express the content well
• Reduce copy; keep only text that helps the user navigate or understand the page
• Prefer CSS variables for colors and spacing
• Make mobile behavior straightforward: stack naturally, reduce padding, preserve alignment
• Keep hover states subtle: a slight background shift, border change, or text-color change is enough
• Respect `prefers-reduced-motion` when any motion exists

Avoid

• Large marketing heroes
• Overly wide layouts
• Huge paddings and oversized cards
• Multiple accent colors competing for attention
• Editorial flourishes, illustration systems, or novelty effects
• “Minimalist” designs that still feel performative or precious

Good Outcomes

The finished page should feel:

• simple
• compact
• dark
• usable
• calm
• deliberate

If there is any doubt between “clean” and “showy,” choose the cleaner option.