Skip to content
DesignMunkDesignMunk Submit a site

BranditScan

branditscan.com
From scan to takedown—fully automated.
AI Software Framer Homepage Matter
Share Visit site
branditscan.com DESKTOP · 1440
BranditScan

AI Breakdown

Design export

---
version: alpha
name: BranditScan
description: From scan to takedown—fully automated.
colors:
  primary: "#07100c"
  secondary: "#5fd581"
  tertiary: "#7f42fd"
  neutral: "#f5f8f5"
  brand-aqua-wish: "#9de6c8"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Matter Medium
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.21
  headline-md:
    fontFamily: Matter Medium
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.47
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: Matter Medium
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.043em
  headline-xs:
    fontFamily: Matter Medium
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.29
  body-md:
    fontFamily: Matter Regular
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 24px
  md: 30px
spacing:
  xs: 2px
  sm: 10px
  md: 18px
  lg: 28px
  xl: 60px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
    padding: 16px 34px
    height: 51px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px 34px
    height: 51px
  button-link:
    textColor: "{colors.tertiary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "#000000"
    rounded: "{rounded.sm}"
    padding: 28px 24px 40px
---

# BranditScan: Purple CTA Pills and Clickable Receipts

## Overview

BranditScan's UI balances urgency with reassurance. The palette is light and fresh, with violet accents for actions and mint/aqua for supportive surfaces. Copy is direct and utility-led; layout favors quick scanning of proof, stats, and toggles. Density is medium: generous padding on cards, compact chips and badges, and a single, high-contrast primary CTA per section.

## Colors

- **primary (#07100c):** Near-black for headlines, body text, and high-contrast icons.
- **secondary (#5fd581):** Safety-mint accent for success states and supportive highlights.
- **tertiary (#7f42fd):** Electric violet for primary CTAs, emphasis text, and key icons.
- **neutral (#f5f8f5):** Soft off-white for page backgrounds and card surfaces.
- **brand-aqua-wish (#9de6c8):** Aqua wash used for backgrounds, badges, and subtle dividers.
- **surface (#f5f8f5):** Default card and section surface color (alias of neutral).
- **on-surface (#07100c):** Default text/icon color on light surfaces (alias of primary).

## Typography

- Headings use Matter Medium at four tiers: 48px (lg) for hero and major section titles; 36px (md) for section leads; 28px (sm) for card titles; 21px (xs) for strong labels. Tracking tightens at md/sm for a confident, product tone.
- Body text uses Matter Regular at 16px with 1.5 line height for readable paragraphs and long-form explanations.
- Availability: Matter is self-hosted (custom) and not available from Google Fonts. When Matter is unavailable, substitute with Inter, Plus Jakarta Sans, or Work Sans — each offers a modern, neutral sans with similar x-height and weight range. Pair Medium/Bold of the substitute for headings and Regular for body.
- Weight usage: keep headings at 500 (Medium) and body at 400. Avoid heavier weights; emphasis should come from color and size, not bolding.

## Layout

Spacing is token-driven and slightly asymmetric to feel lively. Use xs=2px for hairline offsets, sm=10px for compact gaps and chip padding, md=18px for intra-card spacing, lg=28px for section gutters and component stacking, and xl=60px for hero paddings and major section breaks. Cards and proof blocks stack in a responsive multi-column grid; maintain generous outer margins and keep critical CTAs aligned on the same vertical as headings.

## Elevation & Depth

Hierarchy relies on soft shadows and tonal contrast. Use md shadow for most cards, xl for hero-adjacent floating panels, and lg (violet-tinted) to spotlight interactive elements or the primary CTA group. When shadows are reduced for accessibility, switch to neutral backgrounds with clear spacing and thin borders in brand-aqua-wish. The inner highlight is used sparingly on inputs or chips to suggest affordance.

## Shapes

Rounded corners are part of the voice. Cards use sm=24px; primary/secondary buttons use md=30px for a pill profile at 51px height. Keep radii consistent within a section: avoid mixing square elements with 30px pills. Chips and badges echo the 30px language even when smaller.

## Components

- Buttons
  - Primary: background #7f42fd, text #ffffff, 30px radius, 16px×34px padding, 51px fixed height. Reserve for the single key action per section.
  - Secondary: text #07100c on transparent or light surfaces, 30px radius, same padding/height; pair with a subtle md shadow or aqua border when contrast is low.
  - Link: text #7f42fd, underline on hover, radius 0.
- Card: background #f5f8f5, text #000000, radius 24px, padding 28px 24px 40px, md shadow for lift.

Distinctive components on this page:

### Announcement Marquee
- Full-width ticker at the very top for "V2" announcements. Use neutral background, primary text, and 10px vertical padding with 18px gaps between items.

### Proof Chips Row
- Small badges (e.g., partner status, creators count) arranged in a horizontal stack under the hero CTA. Use brand-aqua-wish backgrounds with primary text and sm spacing.

### Action Demo Panel
- In "See It In Action," stack multiple metric cards with one prominent toggle. Cards use 24px radius, md shadow; headings at 28px, body at 16px. Primary CTA remains violet.

### Social Proof Cards
- Portrait snapshot cards with captions and removal counts. Frame each in a 24px card with md shadow; keep chips and captions at 16px body.

### UrLinks Pro Promo Block
- Violet accent headline, countdown timer, and CTA. Use lg spacing, 30px pill buttons, and a light aqua background strip to separate from core content.

### Receipts Comparison Table
- "We Prove It" table with linked metrics. Head labels at 21px, numbers at 36px. Use subtle row separators in brand-aqua-wish and keep CTAs outside the table to avoid distraction.

### Pricing & Concierge Cards
- Premium plan: 24px card, 28px internal gaps, primary CTA. Concierge plan uses a darker header band or stronger shadow for emphasis; maintain 51px button height.

### FAQ Accordion
- 21px question headings, 16px answers. Use inner highlight for affordance and 10px vertical gaps between items.

## Do's and Don'ts

- Do reserve #7f42fd for the single most important action in any viewport; secondary actions should use text-only or aqua borders.
- Do keep cards at 24px radius and pill elements at 30px; mixing radii in the same block weakens the system.
- Do space sections with xl (60px) and stack elements inside with lg (28px) for a steady rhythm.
- Don't apply heavy shadows everywhere; use md by default and lg/xl only to spotlight hero elements.
- Don't place primary text on tinted backgrounds that reduce contrast; default to #07100c on #f5f8f5.
- Don't introduce new accent colors; stick to mint/aqua for support and violet for action/emphasis.

## Agent Prompt Guide

Quick color reference
- Text: #07100c
- Background: #f5f8f5
- Border: #9de6c8
- Accent/CTA: #7f42fd

1) Build a hero with proof chips
- Background #f5f8f5. H1 set in Matter Medium at 48px/1.21, color #07100c. Supporting line in Matter Regular 16px/1.5. Primary CTA: 51px tall, 16px 34px padding, 30px radius, background #7f42fd, text #ffffff. Under the CTA, add a row of small proof chips on #9de6c8 with #07100c text and 10px gaps. Use md shadow for the CTA only.

2) Create a feature card grid
- Each card: background #f5f8f5, text #07100c, radius 24px, padding 28px 24px 40px, shadow md. Title in Matter Medium 28px; body in Matter Regular 16px. Include a link action in #7f42fd with underline on hover. Grid uses 28px gutters.

3) "See It In Action" panel with toggle
- Stack 3–4 metric cards (as above) and a single control row with a pill toggle styled like the secondary button (30px radius, 51px height, text #07100c, thin border #9de6c8). Headline at 36px Matter Medium; keep primary CTA in #7f42fd.

4) Pricing callout with two plans
- Section title at 36px Matter Medium. Plan cards use 24px radius, 28px internal spacing. Primary plan CTA uses #7f42fd pill (51px height). Secondary actions use link style in #7f42fd. Keep borders and dividers in #9de6c8 for subtle separation.

## Similar Brands

- DeleteMe: Like BranditScan, it sells peace of mind with proof and plain language; palette is calmer and fewer accent shadows.
- Surfshark: Security market with energetic greens/purples and big CTAs; operates on darker backgrounds and heavier gradients.
- Cloudflare: Trust badges and performance claims organized into scannable cards; typography is more technical and less rounded.
- DMCA.com: Similar service emphasis and proof blocks; design is more conventional with smaller radii and fewer accent colors.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago