Tender

Tender is a site for a spend, card or fintech product: cream paper, forest-green panels, real amounts in mono type. One light theme, hairlines and grain, one orange accent.

The hero is a brushed-metal payment card that tilts toward the cursor, drifts when idle and flips in after a "card approved" preloader you can turn off with one property. Toasts slide in with real amounts. Below it:

• a live card maker: pick a finish, a limit and a holder, watch the budget update

• six live widgets: receipts, approvals, currency, ledger, freelancer card and client rebilling

• a pinned four-step "how it works" with a phone that follows the steps

• a calculator that turns team size and transactions into hours and money

• monthly or annual pricing over three plans, plus FAQ and a logo ticker

Sections, nav, footer, forms, 404 and privacy pages are native Framer. Logos, plans and FAQ are CMS collections. The card, widgets, maker and calculator are code components with property controls, and their colours follow the 49 color styles, so a new palette re-tints them too. 30 text styles, Desktop, Tablet and Phone layouts, reduced motion respected.

Framer Skills

Five skills for Framer's agent, plus a /design-system page showing every style, component and layout rule they rely on.

• /design-system: add pages and sections in Tender's grid and styles

• /rebrand: another company's name, colours, card finishes and copy

• /content: plans, FAQ, logos, toasts, card holders and calculator numbers

• /effects: tune the card, preloader and widgets through properties

• /before-publish: check every page at Desktop, Tablet and Phone

Try: /rebrand Rebrand this for Quartermaster, an expenses tool for film crews. Deep navy and amber instead of forest and tangerine, keep the cream paper and the metal card."

Suits spend and expense tools, fintech, and finance products for agencies and studios.