---
name: simple-web-layouts
description: Build restrained webpage layouts with compact spacing, dark flat surfaces, and simple visual structure. Use for landing pages, indexes, and content pages that should feel clean, quiet, and intentionally plain.
license: MIT
compatibility: opencode
metadata:
  audience: developers
---

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.