Foundations
Tokens from design.md
Every value here is a CSS variable in
globals.css with the same name as design.md, and a Tailwind utility on top (for example bg-primary, text-fg-muted, rounded-md).Color
Primary
--color-primary#4F27C0 · #A78BFAActions, links, selection--color-primary-hover#3E1D9A · #C4B5FDHover--color-primary-active#321675 · #DDD6FEPressed--color-primary-subtle#F0EBFC · #2B2043Selected surfaces--color-primary-border#D6C8F5 · #57417FAccent borders--color-on-primary#FFFFFF · #1C1233Text on primary
Secondary and accent
--color-secondary#0F766E · #6CC3BATags, categories, charts--color-secondary-subtle#DFF3F0 · #152D2ASecondary surfaces--color-accent#BE185D · #FF8DABOne highlight per page--color-accent-subtle#FEE8EC · #411824Accent surfaces
Neutral
--color-background#F8F7FC · #100E17App canvas--color-surface#FFFFFF · #191620Cards, panels--color-surface-elevated#FFFFFF · #211D2BMenus, dialogs--color-surface-muted#F0EEF5 · #282431Secondary sections--color-border#E4DFEC · #37313FDividers, outlines--color-border-strong#C9C1D8 · #51485EEmphasised outlines--color-text-primary#211A2E · #F5F2FAHeadings, body--color-text-secondary#625A70 · #B9B1C7Supporting text--color-text-muted#827A90 · #92899FPlaceholders, hints
Semantic
--color-success#15803D · #4ADE80Paid, done--color-success-bg#DCFCE7 · #153423Success surface--color-warning#A16207 · #FACC15Pending, attention--color-warning-bg#FEF3C7 · #3B2C12Warning surface--color-error#B91C1C · #F87171Overdue, failed--color-error-bg#FEE2E2 · #3B1D22Error surface--color-info#1D4ED8 · #60A5FAInformation--color-info-bg#DBEAFE · #172B45Info surface
Typography · Sen
text-display48 / 700 / 1.1Secure rentalstext-h136 / 700 / 1.2Your vault, organisedtext-h230 / 600 / 1.25Your vault, organisedtext-h324 / 600 / 1.3Your vault, organisedtext-h420 / 600 / 1.4Your vault, organisedtext-body-lg18 / 400 / 1.6Collect rent on time without chasing anyone.text-body16 / 400 / 1.5Collect rent on time without chasing anyone.text-body-sm14 / 400 / 1.5Collect rent on time without chasing anyone.text-caption12 / 400 / 1.4Updated 2 minutes agotext-control14 / 600 / 1.4Save changes
Spacing
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px
Radius & elevation
xs4pxsm8pxmd12pxlg16pxxl24pxfull9999px
- shadow-sm
- shadow-md
- shadow-lg
Motion
Durations and curves live in src/lib/motion.ts for motion/react and as --motion-* / --ease-* CSS variables for transitions. Entrances use ease-out, exits use ease-in and run faster, and everything respects reduced motion.
Duration
--motion-instant100msHover tints, list highlights--motion-fast150msButtons, focus rings, small fades--motion-base200msMenus, tooltips, toggles--motion-moderate300msTabs, accordions, popovers--motion-slow450msDrawers, carousels, sheets--motion-slower700msCharts, page-level entrancesEasing · 700ms
--ease-standardMost property changes--ease-outThings entering the screen--ease-inThings leaving the screen--ease-in-outMoving between two places--ease-overshootPlayful popsSprings
spring.snappyIndicators, thumbsspring.gentlePanels, cards, layoutspring.bouncyLikes, checks, popsspring.sheetDraggable sheetsIcons · Hugeicons
@hugeicons/core-free-icons through the Icon wrapper: 16, 20 (default) or 24px at a 1.5 stroke. Icons use currentColor, so set color on the parent.
Mail01IconLockPasswordIconViewIconSearch01IconUserCircleIconSettings01IconHome01IconBuilding03IconWallet01IconSecurityCheckIconCalendar03IconFile01IconNotification02IconCheckmarkCircle02IconAlert02IconInformationCircleIconDelete02IconArrowRight02Icon