UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — sections

Anchored Hero

The gradient is anchored to the copy in the lower left instead of darkening the whole frame. The photograph keeps its brightness, the text still clears contrast, and the buttons use the fixed photo variants rather than theme tokens.

Open preview
Theme
Warm Editorial
Category
sections
JavaScript
none
Breakpoint
768px
Min width
320px

Paste this into Claude, Cursor or Copilot — or point the agent at https://ui-deploy.com/r/warm-editorial/hero-anchored/prompt.md 

# Anchored Hero — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

---

## What to build

A full-bleed photographic hero with the copy anchored bottom-left: eyebrow,
display headline, lead paragraph, two buttons.

The thing that makes it work is the gradient. It is **anchored to the text** —
opaque where the copy sits, fully transparent by 68% up the frame. The photograph
keeps its own brightness; only the part carrying words is darkened.

---

## Tokens

```css
:root{
  --accent:#A38A6A;
  --radius:28px; --radius-pill:999px;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{ --accent:#B39B7C; }
```

The hero sits on a photograph, so most of its colours are fixed rather than
themed. That is intentional — see rule 2.

---

## Rules — these are not preferences

1. **Anchor the gradient, never blanket the image.**
   ```css
   background:linear-gradient(to top,
     rgba(21,18,16,.88) 0%, rgba(21,18,16,.45) 32%, transparent 68%);
   ```
   A flat `rgba(0,0,0,.5)` over the whole photo is the single most common way
   this component gets ruined. For a centred hero, darken both ends and leave
   the middle open instead.
2. **The buttons do not use theme tokens.** Fixed `#fff` / `#1B1613` and a
   white-alpha outline. With `--text` the label turns bone-white in dark mode
   and disappears against the white pill.
3. **The headline ends with a full stop.** `Restore your body with calm,
   structured recovery.` — house style, deliberate.
4. **Scale the display type with `clamp()`**, not breakpoint jumps.
   `clamp(36px, 6.4vw, 84px)`, line-height `.98`, tracking `-.035em`.
5. **Lead paragraph stops at ~58ch.**
6. **Corners are 28px** — the hero is a rounded panel inside the container, not
   a bleed to the window edge.
7. Below 400px the buttons stack full width. Nothing scrolls horizontally at 320px.
8. Give the image real `alt` text and explicit dimensions.

---

## Reference implementation

See `code.html`. Replace the Unsplash URL with your own photograph — natural light,
warm white rooms, calm portraits. High-saturation or blue-toned images fight this
palette and will look wrong no matter how good the code is.

Anchored Hero — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

What to build

A full-bleed photographic hero with the copy anchored bottom-left: eyebrow, display headline, lead paragraph, two buttons.

The thing that makes it work is the gradient. It is anchored to the text — opaque where the copy sits, fully transparent by 68% up the frame. The photograph keeps its own brightness; only the part carrying words is darkened.

Tokens

:root{
  --accent:#A38A6A;
  --radius:28px; --radius-pill:999px;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{ --accent:#B39B7C; }

The hero sits on a photograph, so most of its colours are fixed rather than themed. That is intentional — see rule 2.

Rules — these are not preferences

  1. Anchor the gradient, never blanket the image. ```css background:linear-gradient(to top, rgba(21,18,16,.88) 0%, rgba(21,18,16,.45) 32%, transparent 68%); ``` A flat rgba(0,0,0,.5) over the whole photo is the single most common way this component gets ruined. For a centred hero, darken both ends and leave the middle open instead.
  2. The buttons do not use theme tokens. Fixed #fff / #1B1613 and a white-alpha outline. With --text the label turns bone-white in dark mode and disappears against the white pill.
  3. The headline ends with a full stop. `Restore your body with calm, structured recovery.` — house style, deliberate.
  4. Scale the display type with clamp(), not breakpoint jumps. clamp(36px, 6.4vw, 84px), line-height .98, tracking -.035em.
  5. Lead paragraph stops at ~58ch.
  6. Corners are 28px — the hero is a rounded panel inside the container, not a bleed to the window edge.
  7. Below 400px the buttons stack full width. Nothing scrolls horizontally at 320px.
  8. Give the image real alt text and explicit dimensions.

Reference implementation

See code.html. Replace the Unsplash URL with your own photograph — natural light, warm white rooms, calm portraits. High-saturation or blue-toned images fight this palette and will look wrong no matter how good the code is.