The design system behind sKratch.
A mobile-first toolkit for personal & peer-to-peer lending — calm, clear, and indigo-forward. Foundations and components that make borrowing between people feel simple and trustworthy.
Clear about money
Amounts, rates and terms are always explicit and formatted. No surprises, no jargon.
Calm & reassuring
Lending can be awkward. The UI stays neutral and friendly, never pushy or loud.
Confident states
A consistent indigo-border + green-check pattern marks every choice and confirmation.
Color
Indigo is the single brand and primary color; neutrals carry structure on white. Each hue runs a 100→600 scale with fixed roles. Click any swatch to copy its hex.
Indigo · primary
Grayscale
Status
Accents
Roles by step — 100 light background · 200 light border · 300 strong accent / dark border · 400 dark background · 500 text · 600 dark text. Tokens: --indigo-400, --color-primary, --success-bg …
Typography
One neutral grotesque (Inter substitute) across the whole product. A six-step headline scale mixes Semi Bold and Medium, with Regular body and a small footnote.
Spacing & radius
An 11-step spacing scale keeps rhythm consistent; corners stay soft — pills for actions, 8–16px for surfaces.
--space-1 … --space-11--radius-sm … --radius-pillElevation
Three soft, neutral-gray shadows. Cards mostly use a hairline border plus Light; heavier shadows lift floating surfaces.
Iconography
A single line set — ~1.75px rounded stroke — with a few solid-circle badge variants for status. Finance glyphs (dollar, money bag, piggy bank, card) sit alongside standard UI icons.
Shown in Lucide as the nearest match — replace with exported Skratch SVGs for pixel accuracy. No emoji or unicode glyphs are used as icons.
Text fields
Labelled fields with a hairline border, 8px radius. Errors turn the border red with a footnote below. Prefix/suffix affixes handle currency and percentages.
Selection controls
Radios, checkboxes and toggles fill indigo when on and desaturate when disabled. The slider uses an indigo track, solid thumb, and soft halo — value shown in a floating bubble.
Cards
Loan cards summarise amount, purpose, rate and plan, ending in the relevant action. Purpose cards are selectable — the chosen one gains an indigo border and green check.
Messaging
Inline banners use the status hues at their lightest tint, with a circular badge icon and bold sentence-case copy.
Tooltip
A dark inverse-surface tooltip with a directional arrow on four sides.