---
name: design-skill
description: "Create responsive editorial landing pages from zero visual reference using oversized typography, warm neutrals, thin rules, rounded controls, restrained abstract geometry, and quiet motion."
---

# Design Skill

This is the standalone, shareable version of the reusable skill in `design-skill/SKILL.md`. It is intentionally self-contained: a new implementation should not need the existing website, screenshots, proprietary assets, or copied CSS to reproduce the style.

## Design direction

Make the page feel like an independent magazine translated into a product site:

- oversized, tightly tracked display type and generous whitespace;
- warm paper, stone, peach, caramel, and near-black ink;
- hairline rules, editorial labels, rounded controls, and sparse arrows;
- one quiet abstract motif such as concentric orbit lines or a cropped circle;
- an asymmetric hero with a dominant copy column and a smaller note/artifact column;
- slow, useful reveals and hover lifts with reduced-motion support.

Avoid neon, glossy gradients, generic SaaS blue, dense card grids, excessive shadows, and icon-heavy navigation.

## Tokens

```css
:root {
  --ink: #11100e;
  --ink-soft: #3f3934;
  --muted: #817a73;
  --line: #dedad5;
  --paper: #f4f3f0;
  --paper-warm: #fffaf3;
  --peach: #f7eadb;
  --accent: #b27455;
  --brown: #342219;
  --success: #6c966d;
  --radius-sm: 12px;
  --radius-md: 17px;
  --radius-lg: 22px;
  --max-width: 1640px;
  --gutter: clamp(22px, 8.5vw, 165px);
}
```

## Default landing-page structure

1. Header with centered wordmark, simple text navigation, and one dark CTA.
2. Two-column hero: eyebrow, short headline, lede, primary CTA, secondary link, thesis note, abstract proof panel, and scroll cue.
3. Warm showcase section containing a product surface, portfolio index, data snapshot, or CSS-built concept artifact.
4. Three numbered value propositions separated by ruled lines.
5. Spacious testimonial or statement with author line and three trust metrics.
6. Ruled events, latest work, or examples list.
7. Dark closing story/CTA with low-opacity orbit geometry.
8. Minimal footer with wordmark, philosophy line, and text links.

For a shorter page, use header → hero → showcase → three benefits → CTA → footer.

## Typography and layout

- Use one display face and one neutral sans; if no font is supplied, use `Arial, Helvetica, sans-serif`.
- Headings: regular weight, `line-height: .82–.96`, `letter-spacing: -.08em to -.11em`.
- Body: `16–20px`, `line-height: 1.35–1.5`, muted ink.
- Metadata: `10–12px`, uppercase, `letter-spacing: .1em–.14em`.
- Use a 12-column mental grid, max width near `1640px`, and fluid gutters.
- Desktop section padding: `88px–160px`; mobile: `58px–88px`.
- Prefer borders before shadows. Use `12–14px` control radii, `16–18px` card radii, and `20–22px` surface radii.

## Zero-reference visual anchor

Build imagery-free visual interest with CSS: two or three accent-colored circles, a small focal dot or square, a clipped pale-peach panel, a ruled list, and a neutral dashboard or portfolio mockup made from text and divs. Place the motif partially outside the viewport. Do not use external assets unless supplied or explicitly requested.

## Motion and accessibility

Use 600–900ms `power3.out` hero entrances with a 70–120ms stagger, one-time section reveals, and 180–260ms hover transitions. Implement real behavior for buttons, menus, filters, and links. Provide semantic headings, focus states, keyboard access, good contrast, and a `prefers-reduced-motion: reduce` path.

## Build and QA workflow

Inspect the existing stack, turn the brief into one promise/one proof/three reasons/one CTA, establish tokens, build desktop then mobile rules, wire interactions, and render at desktop and mobile widths. Check wrapping, overflow, contrast, focus, CTA behavior, and disabled-motion behavior. Preserve working app behavior when modifying an existing page.