Upcard

PROJECT_KEY=upcard

Plataforma financiera Upcard

Color Palettes

Primary

50
100
200
300
400
500
600
700
800
900
950

Secondary

50
100
200
300
400
500
600
700
800
900
950

Semantic

error
errorFg
errorSoft
success
successFg
successSoft
warning
warningFg
warningSoft
info
infoFg
infoSoft

Gradients

Header#0054A2 → #08105E
Button#0054A2 → #009DC1

Typography

text-display (32px)Display Title
text-heading-1 (24px)Heading 1
text-heading-2 (20px)Heading 2
text-heading-3 (18px)Heading 3
text-body-lg (16px)Body Large text for prominent paragraphs
text-body (14px)Body text for regular content
text-caption (12px)Caption text for labels and helpers
text-micro (10px)Micro text for badges and stamps
heading-1-boldHeading 1 Bold
body-lg-semiboldBody Large Semibold
body-mediumBody Medium weight
caption-uppercaseCaption Uppercase

Brand Theme Tokens

These tokens automatically switch between light and dark mode. Toggle the theme to see the change.

background

--brand-background

foreground

--brand-foreground

card

--brand-card

cardFg

--brand-card-fg

section

--brand-section

sectionFg

--brand-section-fg

muted

--brand-muted

mutedFg

--brand-muted-fg

buttonPrimary

--brand-button-primary

buttonPrimaryFg

--brand-button-primary-fg

buttonSecondary

--brand-button-secondary

buttonSecondaryFg

--brand-button-secondary-fg

input

--brand-input

inputBorder

--brand-input-border

border

--brand-border

ring

--brand-ring

Components

Buttons

Badges

DefaultSecondaryOutlineDestructive

Cards

Card on brand-card
Fonts: Poppins / Poppins / Work Sans

Theme tokens adapt to light/dark mode automatically via CSS variables.

Section surface

This uses bg-brand-section and text-brand-section-fg tokens.

Nested muted surface inside section.

Config

Feature Flags
enableCashInON
enableSwapON
enableQuickPayON
enableCreditsON
enableSalaryAdvanceON
enableOnboardingON
enableDarkModeON
useLedgerApiOFF
Pockets
generalON
cardsON
paymentsON
payrollON