UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — primitives

Button Set

Every button in this language is a pill. Primary, accent, outline and solid follow the theme; the two photo variants deliberately do not, because a button on an image must stay light-on-dark in both themes.

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

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

# Button Set — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

---

## What to build

Five pill buttons. **Every button in this language is fully rounded (999px).**
There is no square button, no `rounded-lg`, no 8px corner. Height 44–52px,
`padding: 0 22px`, weight 500, 14px.

| Variant | Use |
|---|---|
| `primary` | The main action. Ink-coloured fill, page-coloured label. |
| `accent` | Bronze fill. Warmer, slightly softer than primary. |
| `outline` | Secondary. Transparent with a visible border. |
| `solid` | Tertiary. Raised surface, quiet. |
| `photo` / `photo-outline` | Sitting on a photograph. **Fixed colours, not tokens.** |

Forward or outbound actions take a `→` inline SVG arrow. Nothing else gets an icon.

---

## Tokens

```css
:root{
  --bg:#EDE8DF; --bg2:#F6F3ED; --bg3:#E4DED2; --border2:#C6BDAC;
  --text:#22201D;
  --accent:#A38A6A; --accent-h:#8D7352; --on-accent:#FFFFFF;
  --radius-pill:999px;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:#151210; --bg2:#1E1A17; --bg3:#262119; --border2:#40382F;
  --text:#EDE7DD;
  --accent:#B39B7C; --accent-h:#C4AE91;
  --on-accent:#1B1613;   /* NOT white — see rule 1 */
}
```

---

## Rules — these are not preferences

1. **`--on-accent` is `#1B1613` in dark mode, not white.** Bronze is light enough
   there that white text on it fails WCAG AA. This is the single most common
   mistake made with this palette.
2. **Buttons on a photograph do not use theme tokens.** Use the fixed
   `#fff` / `#1B1613` pair. If you use `--text` for the label, dark mode turns it
   bone-white and you get white text on a white pill.
3. **Never use `--accent` for small text.** It is a fill colour. Text takes
   `--accent-text`, which is darkened in light mode and lightened in dark.
4. **Every corner is 999px.** A square button breaks the language immediately.
5. **Minimum height 44px** — this is the touch target, not a style choice.
6. `:focus-visible` sets `outline` only. Setting `border-radius` in a focus rule
   deforms the pill.
7. Transitions are `.2s`. Icons are inline SVG, `stroke="currentColor"`,
   `fill="none"`. No emoji, no icon font.

---

## Reference implementation

See `code.html` in this component folder. The dark gradient panel around the photo
variants is demo scaffolding — drop it and put the buttons on your real image.

Button Set — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

What to build

Five pill buttons. Every button in this language is fully rounded (999px). There is no square button, no rounded-lg, no 8px corner. Height 44–52px, padding: 0 22px, weight 500, 14px.

VariantUse
primaryThe main action. Ink-coloured fill, page-coloured label.
accentBronze fill. Warmer, slightly softer than primary.
outlineSecondary. Transparent with a visible border.
solidTertiary. Raised surface, quiet.
photo / photo-outlineSitting on a photograph. Fixed colours, not tokens.

Forward or outbound actions take a → inline SVG arrow. Nothing else gets an icon.

Tokens

:root{
  --bg:#EDE8DF; --bg2:#F6F3ED; --bg3:#E4DED2; --border2:#C6BDAC;
  --text:#22201D;
  --accent:#A38A6A; --accent-h:#8D7352; --on-accent:#FFFFFF;
  --radius-pill:999px;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:#151210; --bg2:#1E1A17; --bg3:#262119; --border2:#40382F;
  --text:#EDE7DD;
  --accent:#B39B7C; --accent-h:#C4AE91;
  --on-accent:#1B1613;   /* NOT white — see rule 1 */
}

Rules — these are not preferences

  1. --on-accent is #1B1613 in dark mode, not white. Bronze is light enough there that white text on it fails WCAG AA. This is the single most common mistake made with this palette.
  2. Buttons on a photograph do not use theme tokens. Use the fixed #fff / #1B1613 pair. If you use --text for the label, dark mode turns it bone-white and you get white text on a white pill.
  3. Never use --accent for small text. It is a fill colour. Text takes --accent-text, which is darkened in light mode and lightened in dark.
  4. Every corner is 999px. A square button breaks the language immediately.
  5. Minimum height 44px — this is the touch target, not a style choice.
  6. :focus-visible sets outline only. Setting border-radius in a focus rule deforms the pill.
  7. Transitions are .2s. Icons are inline SVG, stroke="currentColor", fill="none". No emoji, no icon font.

Reference implementation

See code.html in this component folder. The dark gradient panel around the photo variants is demo scaffolding — drop it and put the buttons on your real image.