01 Foundations
Not a payments brand. Structured creativity.
Crowded camps to avoid: fintech blue/green, creator-economy play, SaaS blobs, AI sparkles. The open territory is structured creativity — warm enough for creators, serious enough for professionals. Personality: 75% human, 75% bold, 75% approachable, 60% playful, 55% accessible. The customer is the hero; Prosubs is the infrastructure.
01
Create
02
Sell
03
Get paid
04
Manage
05
Repeat & grow
- 01Raw canvas, never hospital white.
- 02The symbol is never explained literally.
- 03Numbers get big — prices in Syne, never body weight.
- 04Hard 4px offset shadows. No blurs.
- 05Talk to one person: you.
- 06Sentence case wins.
- 07Sage mint is earned.
- 08Real people, real work. No handshake stock.
- 09Don't make subscriptions the whole story.
- 10If it doesn't help someone sell what they do — cut it.
02 Colour
Terracotta Commerce palette
Proportion: 60% canvas · 25% terracotta/ink · 10% secondary · 5% mint.
Raw off-white
#FAF7F2
--color-canvas · 60%
Default background everywhere. Never #FFFFFF.
Terracotta
#C96F4A
--color-terracotta · 25% with ink
Primary accent — CTAs, links, the mark.
Ink black
#111827
--color-ink · 25% with terracotta
Text and structural borders.
Brick crimson
#C94A4C
--color-crimson · 10% accents
Urgency-only. Rare.
Ochre gold
#C9A74A
--color-ochre · 10% accents
Idea / status tags. Not body text — fails AA on canvas.
Deep amethyst
#8E4AC9
--color-amethyst · 10% accents
Structure / depth tags.
Sage mint
#4AC99A
--color-mint · 5%
Confirmations and growth metrics only. Earned, not decorative.
Contrast — don't guess
Terracotta and ochre on off-white are the most likely WCAG AA failures. Body copy and small UI always sit on ink. Terracotta is for large type, fills, and the mark. Ochre/amethyst/crimson live on tags, not surfaces.
03 Type
Bricolage Grotesque, Sora, Syne, Inter
Hero / H1
Turn what you do into something people can buy.
Bricolage Grotesque ExtraBold · 56–80px · 1.0–1.05 · sentence case. Landing heroes specifically.
Section / H2
Package it. Share it. Get paid.
Bricolage Grotesque Bold · 32–40px · 1.1 · sentence case.
Subsection / H3
Your next customer shouldn't need a manual.
Bricolage Grotesque Bold · 20–24px · 1.2.
Eyebrow / label
New feature
Sora Bold · 12px · uppercase is reserved for this role only.
Body
Prosubs should feel like the smart friend who happens to know how to run a business.
Sora Regular · 15–16px · 1.6. Floor is 15px.
Button / CTA
Start selling
Sora SemiBold · 14–15px · sentence case · imperative.
Numbers get big
₦250,000A price never renders in body weight. Product stats use Syne too.
Headings
All headings use Bricolage Grotesque.
Heroes, section titles, and H3 sit in Bricolage Bold / ExtraBold. Prices and stats use Syne. Sora stays on body and UI. Inter stays on dense product chrome.
04 The mark
Motion, not a decoded letter
Official artwork is a continuous ribbon-like S that reads as motion — one becomes many — without becoming a multiplication sign. The terracotta wordmark is the primary lockup on product chrome. Use the symbol on favicons, avatars, and tight spaces. Do not caption or explain the shape on-page.
Symbol
Min 24px digital / 8mm print.
Wordmark
Min 140px digital / 32mm print.
Combination
Min 140px digital / 32mm print.
Wordmark on canvas
Terracotta on ink
Symbol on brand field (favicon/avatar)
Clear space equals the height of the symbol bounding box on all sides. Misuse: no drop shadows, gradients, glows, bevels, rotation, skew, stretch, recolour outside the palette, outlines on the wordmark, or backgrounds that fail AA.
05 Graphic language
Four primitives, three patterns, three fields
The PDF's applications section is the part the handoff under-spec'd. Every graphic — section divider to merch — is built from this kit, not invented ad hoc.
Circle
A person or a moment.
Block
An offer. Structure.
Tilt beam
Motion and energy.
Multiplication dots
One → many, at micro scale.
Multiplication grid — heroes and campaign headers only.
Staggered block stack
Section dividers and print collateral. Not dashboard chrome.
Tactile halftone dots are for photography in print. Never on UI screenshots or product interfaces.
New feature
Your next customer shouldn't need a manual.
Try it this week →
Now live
One offer. Many customers. A real business.
Start selling →
Launch offer
Package your value. Get paid on schedule.
Package your offer →
Flyer rules from the PDF: one idea, one headline, one CTA. Logo and handle top-left. CTA bottom-left, flush with the grid. Same layout on all three fields.
06 Components
Build once, then paint pages
Ink border, canvas fill, no soft shadow.
12
Active offers
3
Renewals due
07 Voice & journey
Talk like a capable partner
Say
- Turn your service into an offer.
- Package it. Share it. Get paid.
- Nothing packaged yet. Pick one thing you already do well and price it.
- It's live. Go share the link.
Avoid
Seamlessly leverage our comprehensive subscription infrastructure to unlock scalable monetization pathways across your customer lifecycle.
Sign-up
“I can do this.”
Reduce intimidation. No pattern, no heavy brand.
Creating an offer
“Oh, this is easy.”
Make productization feel effortless.
Publishing
“I'm ready to sell.”
Create momentum.
First payment
“Someone bought my service.”
Celebrate with multiply/expand — not a generic check pop.
Customer management
“I know what's happening.”
Turn complexity into clarity.
Renewal
“Prosubs is helping me stay on top of my business.”
Demonstrate ongoing value.
The specialist
“I'm good at what I do. I just need an easier way to sell it.”
Clear offers, simple checkout, professional presentation.
The creator
“I have an audience. I need to turn that attention into revenue.”
Easy monetization, multiple offer formats, repeat purchases.
The expert
“People already pay me for my knowledge. I want the process more structured.”
Productization, professional positioning, client management.
The small business owner
“I need fewer tools and less manual work.”
Payments, customer tracking, renewals, revenue visibility.
The experience seller
“People buy access to what I create.”
Ticketing, events, payments, customer information.
08 Motion
Snap. No bounce.
- Multiply — one element becomes several, sparingly, at real milestones.
- Transform — one shape, one decisive state change.
- Snap — move into place. Buttons translate 2px on hover; no overshoot.
- Expand / reward — success grows; it doesn't bounce a checkmark.
09 Applications beyond the site
The identity has to work on a tote
- Heavyweight tees: wordmark or “Sell what you do.”
- Raw canvas totes: symbol alone, one colour.
- Die-cut stickers: terracotta and ink symbols.
- Notebooks: terracotta cover band, dot grid.
- Business cards: uncoated warm stock, raw ink edges.
- Email: logo, one accent, almost no pattern.
10 Rollout
What ships in this pass vs later
| Surface | Layer | Note |
|---|---|---|
| / | Marketing | Landing — first proof of the system. |
| /pricing | Marketing | Exists; restyle after tokens. |
| /blog | Marketing | Content; inherit canvas + type. |
| /login, /register | Auth | Emotional target: I can do this. |
| /[slug] | Storefront | Conversion page — no multiplication grid. |
| /subscribe/[id] | Checkout | Price in display type. Manual Paystack QA required. |
| /dashboard and app | Product | Out of website-redesign scope. Tokens still apply. |
Still needed: photography of real work (not stock), and a call on whether checkout restyles with marketing or after payment QA. Dashboard remains a separate project.