# VendePay Design System

> Canonical, public and machine-readable context for frontend work in the new VendePay.

Canonical URL: https://design.vendepay.com.br
Current human reference: https://design.vendepay.com.br/current
Full Markdown context: https://design.vendepay.com.br/ai/context.md
Structured manifest: https://design.vendepay.com.br/ai/design-system.json
Expanded plain text: https://design.vendepay.com.br/llms-full.txt
Repository: https://github.com/Vendepay-Org/nova-vendepay-ux
Language: pt-BR
Last verified: 2026-08-26

## How to use this context

1. Read AGENTS.md or CLAUDE.md in the repository being changed.
2. Load this file and /ai/context.md before planning user-facing work.
3. Inspect executable code, contracts, migrations and tests for current behavior.
4. Reuse the implemented frontend design system before creating local UI variants.
5. Synchronize nova-vendepay-ux when a shared experience changes and cross-link the pull requests.

## Source priority

1. Executable product code, contracts, migrations and tests.
2. Implemented tokens and components in each frontend design system.
3. Living documentation at /current and in nova-vendepay-ux.
4. June 2026 `.dc.html` artifacts, which are historical snapshots only.

Never use `public/artifacts` or `/viewer` as the current product specification. When an old prototype conflicts with code or `/current`, ignore the obsolete behavior and document the divergence.

## Current product invariants

- Checkout: one `Checkout principal` and one `Estilo principal` per product. Do not design multiple checkouts or campaign-specific checkout selection.
- Global pricing: one base price converted dynamically. Sellers do not define a separate price per currency.
- Product V1: one primary offer and one primary plan; minimum base-currency price 10; statement descriptor required.
- Withdrawal: one manual/on-request flow. PIX and crypto are payout destinations of that same flow, not separate products or automatic withdrawal experiences.
- Financial language: never expose provider or internal architecture names to sellers.
- KYC: unified PF/PJ/PEP and document journey; incomplete validation may block both selling and payout.
- Sale status enums: PENDING, PAID, FAILED, REFUND_REQUESTED, REFUNDED and CHARGED_BACK. Display REFUNDED as `Estorno`.
- Payments: distinguish backend/runtime capability from availability shown to the seller; do not promise a payment method only because a contract supports it.

## Visual baseline

- React 19, TypeScript, vanilla-extract, Base UI and Lucide.
- Poppins for titles, KPIs and monetary values; Open Sans for body, labels and descriptions.
- Brand #04D361; light accent #049366; dark accent #0BF372; deep teal #00454C.
- Light canvas #F8F9FA, border #E6E9EF, tertiary text #667085.
- Dark canvas #070707, border #29292E, tertiary text #8A8A96.
- Base spacing 8px; large radius 16px; minimum touch target 44px.
- Use color, icon and label together for status. Use tabular numerals and explicit currency for money.

## Product repositories

- Core and checkout: https://github.com/Vendepay-Org/nova-vendepay
- Seller frontend: https://github.com/Vendepay-Org/nova-vendepay-frontend
- Admin frontend: https://github.com/Vendepay-Org/nova-vendepay-gestao-frontend

## Suggested prompt

Read the repository AGENTS.md or CLAUDE.md, then load https://design.vendepay.com.br/llms.txt and https://design.vendepay.com.br/ai/context.md. Use executable code as behavioral truth and the VendePay living reference as shared UX truth. Do not implement historical `.dc.html` behavior literally. Reuse current tokens and components, validate desktop and mobile, and synchronize the UX repository when the shared experience changes.