Loopera — Design System

Colors

Semantic color tokens that adapt to light and dark mode. Always use semantic tokens in components — never raw palette values.

Brand Palette

50

100

200

300

400

500 ★

600

700

800

900

950

Semantic Tokens — Backgrounds

bg-base

Base page

bg-subtle

Hover / Alt rows

bg-surface

Cards, panels

bg-elevated

Modals, floats

bg-brand

Primary actions

bg-brand-subtle

Tinted areas

Status Colors

Success

#10B981

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Typography

Inter is the primary typeface — clean, versatile, and purpose-built for screens. The type scale uses a fluid progression from 10px to 60px.

Type Scale

--text-6xl60px / Display

R$ 42,800

--text-5xl48px / Title

Dashboard

--text-4xl36px / H1

Your Balance

--text-3xl30px / H2

Recent Transactions

--text-2xl24px / H3

Monthly Overview

--text-xl20px / H4

Savings Goal

--text-lg18px / Lead

Secure, fast, and effortless financial management.

--text-base16px / Body

Your account balance updates in real time. All transfers are processed securely within 24 hours on business days.

--text-sm14px / UI

Transfer funds between accounts or to any bank.

--text-xs12px / Caption

LAST UPDATED · 2 MINUTES AGO

Font Weights

Light 300 · --font-light

Regular 400 · --font-regular

Medium 500 · --font-medium

Semibold 600 · --font-semibold

Bold 700 · --font-bold

Extrabold 800 · --font-extrabold

Black 900 · --font-black

Spacing

8px base grid. Use these tokens for all margin, padding, and gap values.

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

--space-2496px

--space-32128px

Border Radius

Consistent rounding creates a friendly, modern feel without losing professionalism.

none

0px

xs

2px

sm

4px

md

6px

lg

8px

xl

12px

2xl

16px

3xl

24px

full

9999px

Shadows

Elevation creates hierarchy. Use shadows to differentiate interactive surfaces and floating layers.

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--shadow-brand

Buttons

Buttons are the primary driver of user action. Use primary for the main CTA, secondary for alternatives, and ghost for tertiary actions.

Variants

Sizes

With Icons

Badges

Use badges to surface status, categories, and labels at a glance.

Status

Inactive Processing Completed Pending Failed

Labels (no dot)

Checking Premium Approved On Hold Declined

Inputs

Form controls follow a consistent anatomy: label → field → hint/error. Always pair inputs with a visible label.

Account Holder

Full name as it appears on your card.

Amount

Enter the amount to transfer.

Card Number

Invalid card number. Please check again.

Account ID

This field is read-only.

Transfer Note

Max 140 characters.

Cards

Cards group related content into a contained surface. Use card-interactive for clickable items.

Stat Cards

Total Balance

R$ 42,800

+8.2% this month

Monthly Spend

R$ 3,240

−2.1% vs last month

Savings Rate

24.5%

On track

Investments

R$ 18,400

+12.7% YTD

Finance Card (Debit / Credit)

Loopera

•••• •••• •••• 4821

Card Holder

Felipe S.

Expires

09/28

Loopera

•••• •••• •••• 7734

Card Holder

Maria L.

Expires

03/27

Alerts

Inline feedback messages for system events and user actions.

ℹ️

Maintenance scheduled

The system will be unavailable on Sunday from 2–4 AM UTC.

✅

Transfer completed

R$ 1,200.00 was successfully sent to Ana Clara.

⚠️

Unusual activity detected

We noticed a login attempt from a new device. Please verify.

🚫

Payment declined

Insufficient funds. Add money or use a different payment method.

Avatars

Represent users and entities with initials or photos.

Sizes

FS

Colors

FS

AL

MR

JP

+3

Avatar Group

FS

AL

MR

JP

+5

Patterns

Composed patterns for common fintech UI scenarios.

Transaction List

Recent Activity See all

🛒

Mercado Livre

Today · 14:32

−R$ 349,90

Done

💸

Pix · Ana Clara

Today · 09:15

+R$ 1.200,00

Pix

⚡

Electricity Bill

Yesterday · 08:00

−R$ 187,50

Bill

🍔

iFood

Yesterday · 20:44

−R$ 52,90

Food

Progress / Savings Goal

Emergency Fund R$ 6.800 / R$ 10.000

Vacation Fund R$ 2.100 / R$ 5.000

New Laptop R$ 4.800 / R$ 4.800

Quick Actions

Add

Send

Exchange

Pay

More