⚠️ Deprecated (2026-07-17). pesty-design is now the default Pesty design system for all new frontend work. Use this skill only when maintaining an existing dark-navy internal tool or dashboard that already uses these tokens. For anything new, use pesty-design.
Pesty Frontend Skill
Mode Detection
Determine mode before writing any code:
- Dashboard / internal tool — dark navy default, full token set, Epilogue headings, accessible at
pestymarketing.com/internal/
- Client report — light theme override, Arial for print-compat, max-width 860px, accessible at
pestymarketing.com/clients/
- Single-page tool / one-pager — dark navy default; confirm if ambiguous
Mandatory Rules (ALL modes)
Read references/design-tokens.md first. Then:
- Start every new file by copying the
:root block from references/design-tokens.md into <style>. Never hardcode color or spacing values.
- Google Fonts — always include this exact link in
<head>:<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700;800&family=Montserrat:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
- Pill scale — 11px for status badges / delta / labels; 28px for KPI data values. Never swap these.
- Logo — always
<img src="logo.png"> inside a flex anchor:<a style="display:flex;align-items:center"><img src="logo.png" style="display:block;height:28px;width:auto"></a>
Never inline SVG. Never use a color logo variant.
- 3+ actions in a row — use text pill links, not icon-only buttons.
- CSS-only animations — no JS animation libraries unless the user asks explicitly.
- Single-file HTML — unless the project already has a multi-file structure.
- Spacing — 8pt grid only: 4/8/12/16/24/32/48/64/80px. No arbitrary values.
- Transitions — name specific properties, never
transition: all. Standard: 150ms ease.
- Shadows — navy-tinted base:
rgba(0, 35, 48, ...). Never pure black rgba(0,0,0,...).
Dashboard / Internal Tool Mode
Standard rules apply. Additionally:
One-pager delta: a single-page tool / one-pager follows this Dashboard Mode section as its base (dark navy, same token set, same fonts) — the only difference is scope: one file, one view, no topbar navigation between sections. If ambiguous whether a request is a full dashboard or a one-pager, confirm with the user before building.
- Background:
var(--bg) (#001c28 dark navy) — never light background for internal tools
- Body font: Montserrat 13px,
--text color, -webkit-font-smoothing: antialiased
- Page titles: Epilogue 800,
--white color, letter-spacing: -0.5px
- Section headers: Montserrat 13px 600,
--text-secondary, uppercase, letter-spacing: 0.5px, red left-border accent (border-left: 3px solid var(--accent))
- Container:
max-width: 960px standard; up to 1200px for data-dense dashboards
- Topbar: flex,
align-items: center, justify-content: space-between, border-bottom: 1px solid var(--border-subtle)
Read references/patterns.md for complete topbar, card, table, and pill boilerplate.
Client Report Mode
- Use light theme token override from
references/design-tokens.md
- Font: Arial (no Google Fonts load — print/PDF safe)
- Max-width: 860px, white surface cards, standard semantic colors for status
- Logos: base64-embedded in
<img src="data:image/png;base64,..."> for full portability
- No CSS animations
- Self-contained: no external dependencies beyond inline CSS
Anti-Patterns — Never Do
| Never |
Instead |
| Inter, Roboto, system-ui as body font |
Montserrat |
| Light background on internal dashboard |
Dark navy #001c28 |
| Purple gradients |
var(--accent) red or var(--blue) accents |
| Inline SVG logo |
<img src="logo.png"> |
| Hero-scale (64px) text for status pills |
11px pill text, 28px for KPI values only |
translateY hover lifts |
Background/border color change only |
transition: all |
Name specific properties |
Pure black shadows rgba(0,0,0,...) |
rgba(0, 35, 48, ...) navy-tinted |
| Hardcoded hex colors in styles |
var(--token-name) |
| Font sizes below 11px |
Use --text-secondary or lighter weight instead |
| Bottom-border section separators |
border-left: 3px solid var(--accent) |
| Mixed border radii |
8px cards, 9999px pills, 4px bars |
text-align: center on topbar flex |
Explicit align-items: center on flex containers |
Maintained by Pesty Marketing · Browse the full skill catalog.
1---2name: pesty-frontend3description: DEPRECATED — superseded by the pesty-design skill, which is now the default for all new Pesty frontend work. Use this skill ONLY when maintaining an EXISTING dark-navy internal dashboard or tool that already uses these tokens (Epilogue + Montserrat, #001c28 background). For anything new, use pesty-design instead.4---56> **⚠️ Deprecated (2026-07-17).** `pesty-design` is now the default Pesty design system for all new frontend work. Use this skill only when **maintaining an existing dark-navy internal tool or dashboard** that already uses these tokens. For anything new, use `pesty-design`.78# Pesty Frontend Skill910## Mode Detection1112Determine mode before writing any code:1314- **Dashboard / internal tool** — dark navy default, full token set, Epilogue headings, accessible at `pestymarketing.com/internal/`15- **Client report** — light theme override, Arial for print-compat, max-width 860px, accessible at `pestymarketing.com/clients/`16- **Single-page tool / one-pager** — dark navy default; confirm if ambiguous1718---1920## Mandatory Rules (ALL modes)2122Read `references/design-tokens.md` first. Then:23241. **Start every new file** by copying the `:root` block from `references/design-tokens.md` into `<style>`. Never hardcode color or spacing values.252. **Google Fonts** — always include this exact link in `<head>`:26 ```html27 <link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700;800&family=Montserrat:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">28 ```293. **Pill scale** — 11px for status badges / delta / labels; 28px for KPI data values. Never swap these.304. **Logo** — always `<img src="logo.png">` inside a flex anchor:31 ```html32 <a style="display:flex;align-items:center"><img src="logo.png" style="display:block;height:28px;width:auto"></a>33 ```34 Never inline SVG. Never use a color logo variant.355. **3+ actions in a row** — use text pill links, not icon-only buttons.366. **CSS-only animations** — no JS animation libraries unless the user asks explicitly.377. **Single-file HTML** — unless the project already has a multi-file structure.388. **Spacing** — 8pt grid only: 4/8/12/16/24/32/48/64/80px. No arbitrary values.399. **Transitions** — name specific properties, never `transition: all`. Standard: `150ms ease`.4010. **Shadows** — navy-tinted base: `rgba(0, 35, 48, ...)`. Never pure black `rgba(0,0,0,...)`.4142---4344## Dashboard / Internal Tool Mode4546Standard rules apply. Additionally:4748**One-pager delta:** a single-page tool / one-pager follows this Dashboard Mode section as its base (dark navy, same token set, same fonts) — the only difference is scope: one file, one view, no topbar navigation between sections. If ambiguous whether a request is a full dashboard or a one-pager, confirm with the user before building.4950- Background: `var(--bg)` (#001c28 dark navy) — never light background for internal tools51- Body font: Montserrat 13px, `--text` color, `-webkit-font-smoothing: antialiased`52- Page titles: Epilogue 800, `--white` color, `letter-spacing: -0.5px`53- Section headers: Montserrat 13px 600, `--text-secondary`, uppercase, `letter-spacing: 0.5px`, red left-border accent (`border-left: 3px solid var(--accent)`)54- Container: `max-width: 960px` standard; up to 1200px for data-dense dashboards55- Topbar: flex, `align-items: center`, `justify-content: space-between`, `border-bottom: 1px solid var(--border-subtle)`5657Read `references/patterns.md` for complete topbar, card, table, and pill boilerplate.5859---6061## Client Report Mode6263- Use light theme token override from `references/design-tokens.md`64- Font: Arial (no Google Fonts load — print/PDF safe)65- Max-width: 860px, white surface cards, standard semantic colors for status66- Logos: base64-embedded in `<img src="data:image/png;base64,...">` for full portability67- No CSS animations68- Self-contained: no external dependencies beyond inline CSS6970---7172## Anti-Patterns — Never Do7374| Never | Instead |75|---|---|76| Inter, Roboto, system-ui as body font | Montserrat |77| Light background on internal dashboard | Dark navy `#001c28` |78| Purple gradients | `var(--accent)` red or `var(--blue)` accents |79| Inline SVG logo | `<img src="logo.png">` |80| Hero-scale (64px) text for status pills | 11px pill text, 28px for KPI values only |81| `translateY` hover lifts | Background/border color change only |82| `transition: all` | Name specific properties |83| Pure black shadows `rgba(0,0,0,...)` | `rgba(0, 35, 48, ...)` navy-tinted |84| Hardcoded hex colors in styles | `var(--token-name)` |85| Font sizes below 11px | Use `--text-secondary` or lighter weight instead |86| Bottom-border section separators | `border-left: 3px solid var(--accent)` |87| Mixed border radii | 8px cards, 9999px pills, 4px bars |88| `text-align: center` on topbar flex | Explicit `align-items: center` on flex containers |8990---9192> Maintained by [Pesty Marketing](https://pestymarketing.com) · Browse the [full skill catalog](https://pestymarketing.com/agent-skills/).
Pesty-Marketing