Bento Style

What is included

Everything needed to make the result.

• Public skill file
• Starter instructions
• Open preview

---
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