---
name: wpsubscription-brand-guidelines
description: "Design, build, or substantially improve a page in the WPSubscription visual style. Use for marketing pages, landing pages, feature and pricing sections, use-case pages, comparison pages, and any interface that needs WPSubscription's brand color, Sansation and Inter typography, section rhythm, and component patterns."
metadata:
  author: wpsubscription
  site: https://wpsubscription.co
---

# Design pages like WPSubscription

Act as an excellent WPSubscription designer, information architect, and design
engineer. Turn the available material into a page that reads as WPSubscription-
authored. Shape the argument and the interface together: the visual system below
is the authority, and restraint is the house style.

## WPSubscription product and brand context

WPSubscription is a WordPress plugin that adds subscription billing to WooCommerce
— recurring payments, split payments, free trials, automatic renewals, and full
lifecycle management, with no transaction fees. It works with Stripe, PayPal,
Paddle, Razorpay, and Mollie.

The audience is WooCommerce store owners, freelancers, and agencies who are
evaluating or already running a subscription store. Write to someone competent and
busy. The tone is practical and confident, never breathless — no hype adjectives,
no invented metrics, no urgency theatre.

## Use this priority order

When guidance conflicts, resolve in this order: the caller's explicit request, then
the rules in this document, then existing patterns on wpsubscription.co, then
Tailwind defaults. Never invent a color, radius, or type size when a token covers
it. When something genuinely isn't specified here, choose the quietest option that
matches the surrounding page.

## Integrate with the caller's project

The site is Astro 7.1 with Tailwind CSS v4 wired through `@tailwindcss/vite`. All
tokens, utility classes, and keyframes live in `src/styles/global.css` under
`@theme` and `@layer components` — there is no `tailwind.config.*` file. Read that
file before adding anything; the class you need usually already exists.

Images are imported from `src/assets/`, never referenced through `/public/` paths.
Raster imports return `ImageMetadata` for Astro's `<Image />`; SVGs are imported
with a `?url` suffix and rendered with a plain `<img>`, because `<Image />` does
not support SVG.

## Authoritative WPSubscription visual system

Treat this section as the design authority.

**Color.** The brand accent is a wide-gamut orange, `color(display-p3 0.980392
0.364706 0.098039 / 1)`, with `#f53003` as the sRGB fallback and a darkened
`color(display-p3 0.833 0.310 0.083 / 1)` for hover. Use it through `bg-accent`,
`text-accent`, `border-accent`, and alpha variants like `bg-accent/8` — never a
hardcoded hex. Supporting tokens are `#072929` deep green for contrast sections,
`#ffe6d7` light orange tint, `#f9f9f9` page background, and `#e7e5e4` default
border. Accent is for CTAs, eyebrows, icons, and highlights only; it never becomes
a background wash.

**Grays.** `text-gray-900` for headings, `text-gray-700` for body,
`text-gray-500` for muted text, captions, and prices. `text-gray-400` is
decorative only — separator dots and dark-card sub-labels. Card and section borders
are `border-gray-100` or `border-gray-200`; the vertical guide lines are
`border-gray-950/[0.06]`; alternate section fills are `bg-gray-50`; dark cards are
`bg-gray-950`.

**Typography.** Sansation for all headings, applied globally to `h1`–`h6`; Inter
for body. Use the semantic classes rather than raw utilities: `.hero-title` for
page H1s, `.section-title` for section H2s, `.subsection-title` for large panel
H3s, `.card-title` for small card H3s, and `.section-label` for the uppercase
accent eyebrow that sits above section headings. Extend them with positional or
spacing utilities inline — `class="section-title lg:text-5xl mb-4"` — but never
replace their font, weight, or color. `text-3xl` through `text-7xl` are fluid via
`clamp()`; do not override them with fixed values. All H1, H2, and H3 text is
Title Case: capitalize major words, leave articles, short prepositions, and
coordinating conjunctions lowercase unless first or last.

**Grid and rhythm.** Content sits in `max-w-7xl` with `px-4 sm:px-8`. Fixed
`border-x border-gray-950/[0.06]` guide lines run at those edges on every page.
Sections use `py-24` by default, tightening to `py-16` or `py-20`; section headers
get `mb-14`; card grids use `gap-6`, or `gap-4` when tight.

**Sections.** `<SectionBox>` is the primary wrapper and supplies the site's rhythm:
`border-y border-gray-950/[0.06]` plus 10×10px white corner dots with
`border-gray-300` and a 3px radius, sitting where the guide lines meet the section
borders. Write it bare — `<SectionBox>` — and let the defaults apply. Its only
acceptable props are `bottomDots` on a page's last section, and rarely `borderX`
or `p`. Never pass `bg` or `py`; background and vertical padding come from the
page rhythm and the slot content. Adjacent sections alternate `bg-white` and
`bg-gray-50`. Only the hero and edge-to-edge visuals sit outside a SectionBox.

**Components.** `.btn-primary` is the accent-filled CTA and takes a trailing arrow
SVG for navigation actions; `.btn-secondary` is the white bordered companion. Both
are typically `px-8 py-3.5`. `.card` is the standard white card —
`border-gray-100 rounded-2xl p-6` with an `hover:border-accent/20 hover:shadow-sm`
lift. `.section-header` wraps an eyebrow, an `h2`, and a description paragraph as a
centered intro block. `.faq-item` is a CSS-only `<details>` accordion with a
grid-height animation; wrap FAQ lists in `max-w-3xl mx-auto`, and emit matching
`FAQPage` JSON-LD through the page's `schema` prop whenever FAQs appear.

Icons sit in accent-tinted rounded squares — `w-10 h-10 rounded-xl bg-accent/8
border border-accent/15` — and list checkmarks in `w-5 h-5 rounded-full
bg-accent/10 border border-accent/20`. Badges are `text-xs font-semibold px-2
py-0.5 rounded-full` with a tinted background, matching text, and matching border.
Radii are limited to `rounded-lg` for buttons and inputs, `rounded-xl` and
`rounded-2xl` for cards, and `rounded-full` for pills.

A canonical section:

```html
<SectionBox>
  <div class="section-header">
    <p class="section-label mb-3">Features</p>
    <h2>Built For Recurring Revenue</h2>
    <p>Supporting description text.</p>
  </div>
  <div class="grid md:grid-cols-3 gap-6">
    <div class="card">…</div>
  </div>
</SectionBox>
```

**Motion and background.** Animation is hero-only. Heroes stagger `hero-blur-in`
over `0.7s cubic-bezier(0.16,1,0.3,1)` with 60–100ms delay increments, and the
image strip below uses `hero-blur-in-up` at 360ms. Body sections are static.
Heroes carry a faint accent grid — two 1px `linear-gradient` lines at
`rgba(245,48,3,0.025)` on a 48px cell for the homepage, `0.03` on 60px for inner
pages — and a single soft glow behind the H1: `w-[700px] h-[500px] bg-accent/5
blur-[120px] rounded-full`. Both are `pointer-events-none` and `aria-hidden`.

## Reject generated-design reflexes

Do not ship any of these recognizable defaults: emoji standing in for icons;
hardcoded hex colors instead of tokens; gradient-soaked hero backgrounds; purple-
to-blue accent drift; glassmorphism panels; drop shadows heavier than the card
hover lift; border radii outside the four allowed values; font sizes outside the
fluid scale; raw Tailwind font, weight, or color utilities stacked onto headings
instead of the semantic title classes; scroll-triggered reveals on body sections;
centered text in long-form prose; three-column feature grids where every card is
an icon, a bold noun, and two lines of filler; invented statistics or testimonial
quotes; and any content section missing the `border-y border-gray-950/[0.06]`
rhythm.

Do not overcorrect into a sterile anti-design template. The system is quiet, not
empty — accent color, the corner-dot rhythm, and confident typographic scale are
what make a page look WPSubscription-authored.

## Accessibility and responsive behavior

`text-gray-500` is the contrast floor for any readable text; never use
`text-gray-400` or lighter for descriptions, labels, prices, or feature lists.
Decorative elements — corner dots, guide lines, glows, grid backgrounds — carry
`aria-hidden="true"` and `pointer-events-none`. Meaningful icons need accessible
text; decorative ones stay hidden. Build mobile-first inside the `max-w-7xl` /
`px-4 sm:px-8` frame. The FAQ accordion is native `<details>`/`<summary>`, so keep
it working without JavaScript and keyboard-navigable.