Colors

Theme color palette used across the application.

Purple

Purple 25#FBFAFD
Purple 50#F8F5FC
Purple 100#F5F2FA
Purple 200#E8E0F4
Purple 300#D9CCED
Purple 400#C6B2E3
Purple 500#4100A4

Black

White#FFFFFF
Black 15#F7F7F7
Black 25#E5E5E5
Black 50#CCCCCC
Black 100#B2B2B2
Black 200#999999
Black 300#7F7F7F
Black 400#4D4D4D
Black 500#000000

States

Red 50 / 500#FFEBEC / #FB3748
Orange 50 / 500#FFF3EB / #FA7319
Green 50 / 500#E0FAEC / #1FC16B
Blue 50 / 500#EBF1FF / #335CFF

Accent

Accent (app)#C6B2E3

Maps to purple-400 from Mode 1; use for secondary CTAs / highlights.

Typography

Font styles and text hierarchy.

Use utility classes from globals.css (–1% letter spacing on all).

Heading H1.typo-h1 · 36px / 500
Heading H2.typo-h2 · 32px / 500
Heading H3.typo-h3 · 28px / 500
Heading H4.typo-h4 · 24px / 500
Label X-large.typo-label-xl · 18px / 300 upper
Label Large.typo-label-lg · 16px / 300 upper
Label Small.typo-label-sm · 12px / 300 upper
Label X-small.typo-label-xs · 10px / 300 upper
Subheading X-large.typo-sub-xl · 18px / 400
Subheading Large.typo-sub-lg · 16px / 400
Subheading Small.typo-sub-sm · 14px / 400
Subheading X-small.typo-sub-xs · 12px / 400
Paragraph X-large.typo-p-xl · 18px / 400
Paragraph Large.typo-p-lg · 16px / 500
Paragraph Medium.typo-p-md · 14px / 400
Paragraph Small.typo-p-sm · 12px / 400
Paragraph X-small.typo-p-xs · 10px / 500

Buttons

Interactive button components in all variants, sizes, and states.

Variants

Sizes

States

Loading Transition

Click to toggle loading state — text fades up, spinner slides in from below.

Pill Buttons

Full Width

Badges

Status and label badges in different variants.

PurpleGreenGrayOutline

Inputs

Text input fields with various states.

USST
This field is required
Optional helper text

Amount Input with Actions

USST

Select

Dropdown select component.

USDY
OUSG
USST
Select a token to proceed

Tabs

Tab navigation with sliding pill indicator and content transitions.

Overview content — the pill slides smoothly between tabs, and content fades with scale + blur.

Slider

Range slider with spring-animated fill for fluid tracking.

Lock Duration50 %
Disabled40 %

Tooltips

Contextual tooltips that grow from the arrow tip. Very fast (100ms).

Hover me (top)Hover me (bottom-left)Hover me (top-right)

Alert Banners

Contextual alerts with enter/exit animations. Click dismiss to see exit transition.

Transaction Stepper

Multi-step transaction flow indicator with animated step transitions.

Approve USDY

Allow contract to use your tokens

Deposit Collateral

Lock your collateral in the vault

Mint USST

Receive USST tokens

Confirmation

Transaction complete

Cards

Card components with hover interactions — StatCard brackets grow outward on hover.

StatCard

Hover to see the card lift and corner brackets grow outward.

$0.99
USST Price
$2.709M
Collateral Available

MetricValue

$138.02Total Rewards
$2.674MUSST Minted
12D 0HRemaining

TokenDisplay

U
USDY
O
OUSG
U
USST
S
STBL
E
ETH
B
BNB

DetailRow

Collateral Locked
$500.12
USST Minted
$290.77
Maturity Date
23/04/25

InfoTooltip

Hover the icons to see tooltips appear from the arrow tip.

Small
Medium
Large

Tables

Data tables with sorting and pagination.

IDStatus
001USDY$500.12Active
002OUSG$290.77Pending
003USST$1,200.00Active
004STBL$800.50Completed
1-4 of 4

Pagination (standalone)

...1-10 of 940

NavItem

Click between items — the active indicator slides smoothly via layoutId.

Dashboard
Mint
Portfolio

BackButton

BackBack to Portfolio