Protect paid Meta ad ROAS — and convert buyer-intent comments
into pipeline.
The single source of truth for the ROAS Shield design system — logos, colour, typography, voice, and the press kit. Built on shadcn + Tailwind, documented here so every surface stays in family.
02
Logo
Four variants, each as a single-colour SVG that inherits its tone from currentColor. Drop one in any context, set the colour with text-*, and the mark follows.
03
Logo usage
The shield carries the brand. Treat it carefully — these are the rules that keep it recognisable.
Do — clear space
Reserve clear space equal to the height of the chevron on every side.
Do — minimum size
16 px logomark · 20 px lockup. Below that the chevron starts to fill in.
Do — on solid surfaces
Plain backgrounds (white, zinc-950, brand blue). Always check 4.5:1 contrast.
Don't — distort
Never stretch, squash, rotate, or skew the shield. Scale uniformly.
Don't — recolour
The mark is brand blue, foreground (zinc-950), or white. No other hues.
Don't — busy backgrounds
Never place the logo on patterns or photos without a solid scrim.
04
Colour
One brand accent (blue-600), a tight semantic taxonomy, and a zinc neutral ramp. Click any hex to copy. Every value maps to a Tailwind token from the locked theme in globals.css.
Brand
The single accent colour. Reserved for primary CTAs, the active nav-link underline, and the logomark.
Brand Blue
#2563EBbg-primary • text-primary
blue-600. Confident, trustworthy, performance-marketing-fluent without veering into fintech-corporate. Mapped to --primary.
Brand Blue (dark)
#3B82F6dark:bg-primary
blue-500. Slightly brighter so it holds contrast against the zinc-950 surface in dark mode.
Semantic
Status taxonomy. These map 1:1 to the moderation pipeline (hide / approve / queue / destructive) — never used decoratively.
Success
#059669text-emerald-600 • bg-emerald-50
emerald-600. Approve, allow, trust-strip checkmarks.
Warning
#D97706text-amber-600 • bg-amber-50
amber-600. Queue for review, plan threshold breach.
Destructive
#DC2626bg-destructive • text-destructive
red-600. Delete buttons + delete badges only — mapped to --destructive.
Buyer intent
#7C3AEDtext-violet-600 • bg-violet-50
violet-600. Reserved for buyer-intent surfacing — the one place the product converts ROI directly.
Neutrals
Zinc ramp from shadcn — every surface, border, and body-text tone comes from this scale.
Foreground
#09090Btext-foreground • bg-foreground
zinc-950. Body text, headings, the foreground token.
Muted foreground
#71717Atext-muted-foreground
zinc-500. Subheads, captions, hint text.
Border
#E4E4E7border-border • bg-border
zinc-200. Dividers and card hairlines.
Muted surface
#F4F4F5bg-muted
zinc-100. Tinted backgrounds for footers and call-outs.
Background
#FFFFFFbg-background
White. The default canvas in light mode.
05
Typography
Inter — loaded via next/font/google, weights 400 + 600 only. The two-weight constraint enforces visual restraint and keeps the rendered page light.
Display
Protect paid ad ROAS.
text-5xl md:text-6xl • font-semibold • tracking-tightH1
Convert buyer-intent comments into pipeline
text-4xl • font-semibold • tracking-tightH2
Built ad-first for performance marketers
text-3xl • font-semibold • tracking-tightH3
Ad-level intelligence
text-xl • font-semiboldBody
See campaign, ad set, and ad context next to every comment. Filter by campaign and spot the ads attracting the most spam.
text-base • leading-relaxedBody small
Used for table rows, dense metadata, and footnotes.
text-sm • text-muted-foregroundCaption
© 2026 ROAS Shield · Meta Graph API v24.0
text-xs • text-muted-foregroundNumeric
£0.06 / comment · 1,043,201 processed
tabular-nums • feature-settings: "tnum"06
Voice & tone
Confident, performance-marketing-fluent, plain-spoken. The audience is DTC operators and agency strategists — they smell corporate fluff in one sentence.
Do
Protect paid ad ROAS — and convert buyer-intent into pipeline.
Don't
Leverage industry-leading AI-powered solutions to optimise stakeholder engagement.
Do
Ad-set, creative, ROAS, CPL, retargeting audience.
Don't
Social interactions, engagement touchpoints, audience listening.
Do
Hide this comment on the Facebook ad it appeared on.
Don't
Suppress this engagement event from the ad creative’s impression context.
Do
Hidden comments are recoverable in one click. Delete requires per-rule opt-in.
Don't
Auto-delete every comment matching the spam classifier.
Do
£0.06 per moderated comment at Scale. 60 days of history pulled on connect.
Don't
Industry-leading volume at unmatched value (no number cited).
Do
We use ads_read only. We do not edit or pause your campaigns.
Don't
A complete advertising operations platform (we are not).
07
Iconography
All icons come from lucide-react. Sizes are 4-pt aligned: sm = 14px (h-3.5), md = 16px (h-4), lg = 20px (h-5). Stroke is locked to the lucide default (1.5).
ShieldBrand logomark base shape
ShieldCheckTrust strip + protection guarantees
ShieldAlertPolicy violation alerts
TargetAd-level intelligence sections
MessageSquareComment + reply surfaces
BarChart3Analytics + reporting
SparklesAI-generated content callouts
ZapLatency + speed callouts (webhooks <500ms)
08
Spacing & radius
Tailwind's 4-pt scale. We use 1, 2, 3, 4, 6, 8, 12, 16, 20, 24— almost never the in-between steps. Radius is locked to four tokens from the shadcn theme.
gap-14pxgap-28pxgap-312pxgap-416pxgap-624pxgap-832pxgap-1248pxgap-1664pxrounded-sm4pxrounded-md6pxrounded-lg8pxrounded-xl12px09
Sample applications
How the system holds together across surfaces.
ROAS Shield
Protect paid Meta ad ROAS — and convert buyer-intent comments into pipeline.
Alex Doe
Founder, ROAS Shield
roasshield.com · [email protected]
Q2 board review · 2026
10
Downloads
Every asset you need to write or design about ROAS Shield — logos, app icons, social cards, favicons, and the full brand-kit ZIP. Everything is generated from the four master SVGs above; re-running the generator is byte-stable.
ROAS Shield brand kit
SVGs + key PNGs + every social card + colours + README, zipped. One download, everything you need.
logomark-16.png
16×16
logomark-32.png
32×32
logomark-48.png
48×48
logomark-64.png
64×64
logomark-96.png
96×96
logomark-128.png
128×128
logomark-144.png
144×144
logomark-152.png
152×152
logomark-167.png
167×167
logomark-180.png
180×180
logomark-192.png
192×192
logomark-256.png
256×256
logomark-384.png
384×384
logomark-512.png
512×512
logomark-1024.png
1024×1024
logomark-on-white-180.png
180×180 on white
logomark-on-brand-180.png
180×180 on brand
logomark-on-white-256.png
256×256 on white
logomark-on-brand-256.png
256×256 on brand
logomark-on-white-512.png
512×512 on white
logomark-on-brand-512.png
512×512 on brand
logomark-on-white-1024.png
1024×1024 on white
logomark-on-brand-1024.png
1024×1024 on brand
Regenerating brand assets (developers)
Every PNG, JPG, ICO, social card, app icon, favicon, manifest, and brand-kit ZIP listed here is generated from the four master SVGs by a single script. To rebuild:
node apps/web/scripts/generate-brand-assets.mjs
The script is idempotent — re-running produces byte-identical output (deterministic PNG compression, fixed ZIP mtime). To add a new asset, edit apps/web/scripts/generate-brand-assets.mjs and commit both the script change and the regenerated files.