How a new page should look on paysight.io

Every new page, section or visual is built from the same Webflow components, classes and tokens as the home page. This page shows them in place, so any design can be checked against the real thing.

Jump to the checklist

See the components

Build it inside the site, not next to it

A new page has to look like it was made in the same Webflow project as the home page. Generic advice to be distinctive doesn't apply here: when the site and a design rule disagree, the site wins.

Reuse what's already there

The site navbar, section-cta and footer components

padding-global, container-large and padding-section classes on every section

Site color variables and the three site fonts

Tag pills, uppercase buttons with the arrow, one gradient phrase per heading

New visuals built from white cards, purple accents and soft shadows

What got the pricing draft rejected

A self-invented visual concept: a monospace receipt card, tilted, with a zigzag edge

A left-aligned two-column hero instead of the centered site hero

Its own navbar, footer and closing CTA

Headings at weight 600 in a fallback font

Sentence-case buttons with no arrow, and no tag pills

Dark-mode theming and invented color tokens

One accent, and it's purple

Use the Webflow variables in the Paysight collection, never new hex values. Green and red mean approved and declined, never decoration.

Headings

#1A1331, primary-900

Body text

#3D4353, grey-800

Muted text

#6B707B, grey-600

Brand purple

#835DF7, primary-500

Purple hover

#694AC6, primary-600

Lavender

#C4ADFD, quaternary

Lavender tint

#F3EFFF, primary-100

Gray section

#F8F8FB, color/bg/gray

Borders

#E9E9EA, grey-100

Dark section

#0D0037, tertiary

Status: approved

#22C55E, additional/green

Status: declined

#EF4444, additional/red

Google Sans Flex at weight 500

Headings and numbers in Google Sans Flex, body in Inter. JetBrains Mono only in tag pills and in tiny uppercase labels inside product visuals. Sentence case everywhere except tags and buttons.

Hero H1

heading-style-h1x
4.25rem / 1.1, weight 500, -0.04em

Approve more, lose less

H2, section heading

heading-style-h2
3rem / 1.2, weight 500, -0.034em

Every MID in one backend

h3
2.25rem / 1.2, weight 500

Routing rules that follow your volume

H4, card title

h4
1.5rem / 1.4, weight 500

Cascades and smart retries

Lead paragraph

text-size-medium
Inter 1.25rem, grey-600 under heads

Route every payment across your processors and recover more declines without touching your checkout.

Body

body default
Inter 1rem / 1.5, -0.03em, grey-800

Paysight keeps your card tokens in a vault you own, so you can add or drop a processor without losing a single subscriber.

Big number

performance_metrics-number
3.75rem, weight 500, primary-500

+12.4%

Tag

tag-primary
JetBrains Mono 0.75rem, uppercase, 0.1em

Every section, same nesting

Tone and background sit on the section. Content always lives inside padding-global, container-large and padding-section. Section heads are centered.

section_[page]-[name]: tone and background

padding-global: 2.5rem left and right

container-large: max-width 75rem, centered

padding-section-medium: 6rem top and bottom

Tag, then H2, then lead, then content

Spacing scale

Tag to heading

spacer-mediumx, 1.5rem

Heading to lead

spacer-small, 1rem

Section head to content

spacer-xlarge, 4rem

Section padding

6rem, 8rem on full-height sections

Containers

75rem, 64rem, 48rem

Card radius

2rem, 1.25rem, 1rem

Breakpoints

991, 767, 479px

Buttons, tags and cards

These are the live site classes. Copy the markup from the guideline file, and never put the brand name on a button.

Book a demo

See how it works

Standard card

White, radius 2rem, inset 1px #ECE7FB border. On gray sections it can drop the border. Lucide icon in a lavender circle.

Paysight-side card

Lavender wash fading to white at 45%. Use it for the Paysight side of a comparison or a highlighted plan.

Three tones, alternating

White by default, gray for product sections, dark once or twice a page at most. Cards on gray are white. Cards on dark are glass, like this one.

White

#FFFFFF. The default tone. Cards get an inset lavender-grey border.

Gray

#F8F8FB, color/bg/gray. The home page uses it for CRM, performance and testimonials. White cards sit on it.

Dark

#0D0037 with the Frame 631 background image. White headings, dark tag variant, glass cards.

A rotation, not a single color

Every background below already exists in Webflow as a class or asset. Reuse them in this order and never stack two dark sections back to back.

The page rhythm

Hero: lavender dots or ring pattern

White

Gray

Dark feature

White

Gray

section-cta, then footer

The CTA and footer are dark, so the section right before them should be white or gray.

Light backgrounds

Home hero

section_home-hero. Lavender #C4ADFD, 5px dot tile, white fade over the top 30%. Home and campaign heroes.

Product hero

section_product-hero and section_solution-hero. White, with the grey ring pattern fading in at the bottom. Inner pages.

White

The default content section.

Gray

#F8F8FB. Product walkthroughs, metrics, testimonials. White cards on top.

Dark backgrounds

Dark feature

Frame 631. Purple glow bottom left. section_home-orchestration, product tools, solution features.

Rising glow

Frame 1321317461. Glow rising from the bottom. section_home-connect, for integrations.

Dotted banner

blogtemp_bg. Dots with a glow top right. Inline CTA banners and blog CTAs, not full sections.

CTA arc

Footer.avif. Reserved for the section-cta component. Never reuse it elsewhere.

Patterns and fills

Lavender dot grid

pattern-hero.svg, 5px, dots #CFBEFA. Heroes only, always under a white fade.

Ring dots

oval-bg-frame.svg, 11px grey rings. Product and solution heroes, fading in from the bottom.

Visual panel dots

6px #E3D9FD dots on #F9F7FE. The stage behind product visuals.

Card glow

#1A1331 with purple radial glows. Featured cards and media. White 18% dots can sit on top.

Images are built, not exported

Site visuals are small, believable slices of the product: one card, one flow or one table, floating on a soft panel. These four are built in HTML and CSS from the same recipe the home page uses.

Chargeback protection

Northwind Goods

$214.90

Order

NW-40213

Date

Oct 14

Card

Visa 4417

Dispute avoided

Record card with a floating badge

One white card, label and value rows, a lavender result pill. One element floats over the top edge to add depth.

Alert flow

Real time

Alert received

From the card network, in real time

Refund issued

Resolved before it escalates

Chargeback avoided

Dispute ratio unchanged

Flow with steps

Purple icon circles linked by dotted lavender connectors. The last step turns green. A mono live label sits top right.

Transactions

Live

Txn

Status

Amount

#tx44

approved

$49.00

#tx35

declined

$129.00

#tx72

retried

$87.40

#tx85

approved

$49.00

Data table with status pills

A 1px lavender border that fades from the top right corner. Mono uppercase headers, soft green, red and purple status pills, Google Sans amounts.

Routing logic

card BIN

region

currency

approval rate

MID A

US card to MID A

Routed

MID B

EU card to MID B

Idle

Dark stack for dark sections

Deep purple cards on a glow panel. The active row gets a purple outline and glow, inactive rows stay quiet. Use it inside Frame 631 sections.

How to build a visual

Build it in HTML, CSS or SVG so it stays sharp and editable. No PNG screenshots.

Show one idea per visual: one record, one flow or one table.

White cards, radius 1.25rem, soft purple glow 0 -16px 62px rgba(131,93,247,.1).

Google Sans Flex for titles and amounts, Inter for rows, JetBrains Mono for tiny uppercase labels and status pills.

Lucide icons in purple circles with white strokes, or lavender circles with purple strokes.

Status colors only: green approved, red declined, purple retried or active, amber pending.

Realistic but invented data: made-up store names, order numbers and last four digits. No real customers.

Add depth with one floating element or a card cropped by the panel edge, never with tilts or 3D.

Calm, quick and earned

Motion shows that something arrived or changed. It never decorates. Everything runs once, starts when the element is on screen, and switches off for reduced motion.

Section reveal

Tag, heading, text and content slide up 2rem and fade in as the section enters the viewport. It plays once and doesn't replay when scrolling back up.

400ms, ease-out-quad
delays 0, 0.2, 0.3, 0.4s
Webflow IX2 slide-from-bottom

Hover

Buttons and links change color only. Clickable cards may lift by 4px with a slightly stronger shadow. Arrows can nudge 2px to the right.

200ms ease, color and background
cards 300ms, translateY -4px

State changes

Inside visuals, a status pill turning green, a row highlighting or a node lighting up fades between states. No jumps and no bounce.

300 to 400ms ease
background, color, box-shadow

Data

Counters count up, bars fill and connector lines draw once, only after the visual is fully on screen. The final numbers must be readable without the animation.

counters 1.2s, bars 0.9s
lines 1.4s, cubic-bezier(.2,.7,.2,1)

Ambient loops

Allowed only inside product visuals: a live dot pulsing, or a value ticking slowly like a live MRR. Keep it to one loop per screen, and never move text people are reading.

live dot ping 2s infinite
max one loop per viewport

Reduced motion

With prefers-reduced-motion on, everything renders in its final state immediately: no reveal, no counters, no loops. Test it before review.

transition none, animation none
final state shown

Never

A page-load sequence that animates the whole page

Parallax, scroll-jacking or pinned scroll stories

Bounce, elastic or spring easing

Tilted, rotating or 3D-flipping cards

Autoplaying carousels of text or testimonials

A different fade-in effect on every card

On Webflow-built sections, reuse the IX2 slide-from-bottom interaction. For embeds, use an IntersectionObserver in the page footer script and put keyframes in the page head code, since the builder can't hold them.

Motion, constraints and publishing

Motion

Reuse the IX2 slide-from-bottom reveal on sections built in Webflow. For embedded visuals, trigger animations with an IntersectionObserver in the page footer script. The Motion section above has the full timings.

Webflow builder

Classes without CSS are dropped, and a second class becomes a combo that needs its own styles. No pseudo-elements, nested selectors or keyframes in the builder; put those in page head code. Images use the S3 hosted URL.

Publishing

A production publish is full-site and pushes every staged change. Work on staging or a draft page. Before going live, every page needs a 1200 by 630 OG image in the site look, plus an SEO title and description.

The checklist, every time

Run through it before a page reaches Vlad, with a screenshot of the new page next to the home page.

Site navbar, section-cta and footer components, not copies

Every section uses padding-global, container-large and padding-section

Centered hero on section_home-hero: tag, H1 with gradient phrase, lead, one primary button, visual

Each section head has a tag pill, an H2 at weight 500 and a lead in text-size-medium

Tones alternate white, gray and dark, with no more than two dark sections

Only site color variables, with purple as the only accent

Google Sans Flex 500 for headings and numbers, Inter for body, mono only in tags and visual labels

Buttons are button-primary or link_arrow-cta with the arrow, and no brand name

Icons from Lucide only

Copy says ecom and operators

No dark-mode theming and no invented visual concept

Checked at desktop, 991, 767 and 479px

Copy the structure from these

Home

/ (the master reference)

Payment CRM

/product/payment-crm

Payment Orchestration

/product/payment-orchestration

Resolvo

/product/resolvo

Paysight × Compaytence

/compaytence (latest approved custom page)

1 Terenure Place, Terenure, Dublin 6, Ireland, D6W FN23 
Company Reg. No. 760371
VAT No. IE4280069RH