UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — surfaces

Editorial Card

The workhorse surface of this language. 28px corners, a hairline border, near-invisible shadow, and an image that keeps a margin from the card edge rather than bleeding to it.

Open preview
Theme
Warm Editorial
Category
surfaces
JavaScript
none
Breakpoint
auto-fit grid
Min width
320px

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

# Editorial Card — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

---

## What to build

The workhorse surface of this language. A raised warm panel with **28px corners**,
a hairline border, and a shadow so soft it reads as depth rather than as a shadow.

Order inside the card: image, eyebrow, title, body, link. The link sits at the
bottom on `margin-top:auto` so cards of unequal text still align their footers.

Cards sit in an auto-fit grid with a 24px gap.

---

## Tokens

```css
:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F;
  --accent:#A38A6A; --accent-text:#7D6644; --accent-b:rgba(163,138,106,.30);
  --radius:28px; --radius-md:16px;
  --shadow-sm:0 1px 2px rgba(34,32,29,.05);
  --shadow-md:0 18px 48px -24px rgba(34,32,29,.22);
  --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"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92;
  --accent:#B39B7C; --accent-text:#C0A888; --accent-b:rgba(179,155,124,.28);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 18px 48px -24px rgba(0,0,0,.7);
}
```

---

## Rules — these are not preferences

1. **The image stays inside the padding.** It takes `--radius-md` (16px) and keeps
   a margin from the card edge. Bleeding an image to the card border belongs to a
   harder design language, not this one.
2. **Card corners are 28px.** Not 8, not 12. Large and soft is the whole point.
3. **No hard drop shadow.** `--shadow-sm` at rest, `--shadow-md` on hover — both
   wide and nearly invisible. A crisp shadow makes this palette look cheap.
4. **Hover is: border to `--accent-b`, shadow to `--shadow-md`, `translateY(-2px)`.**
   All three, or none.
5. **The eyebrow is `--accent-text`, never `--accent`.** At 11.5px the fill bronze
   does not clear AA.
6. **Body text stops at ~60ch.** Longer measures break the editorial rhythm.
7. Make the whole card clickable with `::after{inset:0}` on the link rather than
   wrapping the heading in an anchor — it keeps the heading in the outline for
   screen readers.
8. Give every image real `alt` text, `loading="lazy"` and explicit dimensions.

---

## Reference implementation

See `code.html` in this component folder. Swap the Unsplash URLs for your own
images; keep the `aspect-ratio` so the grid stays even.

Editorial Card — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

What to build

The workhorse surface of this language. A raised warm panel with 28px corners, a hairline border, and a shadow so soft it reads as depth rather than as a shadow.

Order inside the card: image, eyebrow, title, body, link. The link sits at the bottom on margin-top:auto so cards of unequal text still align their footers.

Cards sit in an auto-fit grid with a 24px gap.

Tokens

:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F;
  --accent:#A38A6A; --accent-text:#7D6644; --accent-b:rgba(163,138,106,.30);
  --radius:28px; --radius-md:16px;
  --shadow-sm:0 1px 2px rgba(34,32,29,.05);
  --shadow-md:0 18px 48px -24px rgba(34,32,29,.22);
  --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"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92;
  --accent:#B39B7C; --accent-text:#C0A888; --accent-b:rgba(179,155,124,.28);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 18px 48px -24px rgba(0,0,0,.7);
}

Rules — these are not preferences

  1. The image stays inside the padding. It takes --radius-md (16px) and keeps a margin from the card edge. Bleeding an image to the card border belongs to a harder design language, not this one.
  2. Card corners are 28px. Not 8, not 12. Large and soft is the whole point.
  3. No hard drop shadow. --shadow-sm at rest, --shadow-md on hover — both wide and nearly invisible. A crisp shadow makes this palette look cheap.
  4. Hover is: border to --accent-b, shadow to --shadow-md, translateY(-2px). All three, or none.
  5. The eyebrow is --accent-text, never --accent. At 11.5px the fill bronze does not clear AA.
  6. Body text stops at ~60ch. Longer measures break the editorial rhythm.
  7. Make the whole card clickable with ::after{inset:0} on the link rather than wrapping the heading in an anchor — it keeps the heading in the outline for screen readers.
  8. Give every image real alt text, loading="lazy" and explicit dimensions.

Reference implementation

See code.html in this component folder. Swap the Unsplash URLs for your own images; keep the aspect-ratio so the grid stays even.