Design system

Copied from the app's design-system-web (Costnora v2) with yarn ds:sync.

Typography

displayTrack every trip together

displayLargeTrack every trip together

pageTitleTrack every trip together

titleLargeTrack every trip together

titleMediumTrack every trip together

titleSmallTrack every trip together

bodyLargeTrack every trip together

bodyMediumTrack every trip together

bodySmallTrack every trip together

labelLargeTrack every trip together

labelMediumTrack every trip together

labelSmallTrack every trip together

Colors (Tailwind-mapped tokens)

surface-card

surface-secondary

background-primary

background-secondary

accent

text-label

income

income-tint

expense

expense-tint

success

warning

error

info

Buttons

Badges

incomeexpensesuccesswarningerrorinfoneutral

Cards

Default

Elevated

Flat secondary

Form controls

NameEmailEnter a valid email address.PasswordAt least 8 characters, with a number and an uppercase letter.Box shapeDisabled

Currency

Euro (EUR)

Email me a monthly summary

Empty state

No transactions yetAdd your first expense or income and it will show up here.

Section label & field

Project detailsName

Round icon buttons & segmented pill

Chips & avatars

Hero cards

Net this month€2,480.50+€320 this month

Total spent€1,214.00Lisbon trip