KKinly
v0.1 · Next 16 · React 19 · Tailwind v4

Money you can look at without flinching.

Kinly is an interface language for money — warm paper, deep-ink text, one deliberate teal, hairline structure instead of shadow. Every value here is a token; one file re-themes the whole system. Pick an accent — the theme switch above keeps it and swaps light for dark.

Walk the canvasRead the principles

Theme lab

One template, four accents.

Pick an accent — the theme switch in the header keeps it and just swaps light for dark.

template.json · paper · syncing

Total balance

$1,700

Up $150 this month

Spent this month

$740

Left to spend

$170

Monthly spend

--chart-1
FebMarAprMayJunJul
Whole Foods · Groceries-$34
Salary — April · Income+$1,300
tokens--background--card--primary--success9 tokens · oklch
Screens
146
Demo apps
5
Accents
4

01Principles

Six rules that settle most arguments.

Kinly is opinionated in a small number of places so it can be flexible everywhere else. When a decision is contested, one of these six usually answers it.

  • Calm by default
  • Structure over decoration
  • Money first
  1. 01

    Paper, not screen

    Surfaces sit on a warm off-white at hue 80. Cards are crisp white so they lift without a shadow. Nothing is pure #fff on pure #000.

  2. 02

    One accent, spent carefully

    A single deep teal marks the primary action. If two things on a screen are teal, one of them is wrong.

  3. 03

    Hairlines over elevation

    Structure comes from 1px borders at 10% ink. Shadows appear only where something genuinely floats — dialogs, popovers, drag states.

  4. 04

    Money is tabular, always

    Every amount uses tabular lining figures so columns align down the page and digits do not shift as values update.

  5. 05

    Wrap, never truncate

    Labels and payees wrap instead of clipping, and controls use min-heights over fixed heights so the longest string never gets cut off.

  6. 06

    Calm at a glance

    Status colour is reserved for state that changes a decision. Neutral is the default answer, not a fallback.

02Colour

Warm neutrals. One teal, spent once.

Components reference roles, never raw hues. Neutral surfaces carry the interface; the accent appears only where an action lives; status colour is reserved for state that changes what you would do next.

  • oklch throughout
  • Role before value
  • 4.5:1 body contrast

Surfaces & ink

Backgroundvar(--background)

Canvas

Cardvar(--card)

Sheet

Mutedvar(--muted)

Quiet fill

Foregroundvar(--foreground)

Deep ink

Intent

Primaryvar(--primary)

Action

Successvar(--success)

On track

Warningvar(--warning)

Attention

Destructivevar(--destructive)

Overdue

The accent budget

One teal per screen

Everything on the left is neutral by design: rules, fills, labels, secondary actions. Exactly one element is allowed to be teal, and it is always the thing you most likely came to do.

Primary actionEverything else

03Typography

A serif for voice. A sans for work.

Fraunces carries headings and amounts — it gives the system a human, editorial register that most finance apps refuse themselves. Inter does everything else.

  • Fraunces · Inter · JetBrains Mono
  • 13.5px body
  • Tabular figures

Display family

Fraunces · Serif

SOFT 30 · WONK 0

Aa Bb

A warm, slightly wonky serif with soft, humanist shapes — drawn for headings, amounts, and long-form reading alike.

Numeric

Amounts · Tabular

tnum

$1,700

Spent
$1,100
Left
$550
Saved
+$160

Fixed-width figures keep columns still. A digit changing from 1 to 8 must never move the number beside it.

Type scale

Eight roles, one rhythm

Size / line-height · weight
Display
32 / 1.1 · 500
April budget
Section
24 / 1.15 · 500
Six jars, one plan
Card title
18 / 1.3 · 600
Northbank ···4821
Body
13.5 / 1.55 · 400
Weekly grocery run — shared with Maya.
Label
13 / 1.2 · 500
Paid from
Caption
12 / 1.55 · 400
Apr 12 · Groceries
Money
15 / 1.2 · 500 · tnum
$34
Mono
12.5 / 1.4 · 400
--primary

04Shape & rhythm

One radius, divided four ways.

Every corner in the system derives from a single 10px base. Control heights come in three, and spacing in eight steps — small enough to memorise, which is the point.

  • --radius: 0.625rem
  • 36px default control
  • 56px section rhythm

Radius ladder

Derived, never guessed

sm
Small buttons, kbd, chips
6px
md
Buttons, inputs, selects
8px
lg
Cards, dialogs, popovers
10px
xl
Sheets, large surfaces
14px
full
Badges, avatars, pills
9999px

The ladder, in use

ChipsmButtonmdCardlgSheetxlBadgefull

Control heights

32px
smTable and toolbar actions
36px
defaultEverything else
44px
lgPrimary CTA, mobile targets

Spacing

1
4px
1.5
6px
2
8px
3
12px
4
16px
6
24px
8
32px
14
56px

05Elevation

A shadow is a promise that it moves.

Four rungs, and the first does most of the work. Structure is a one-pixel hairline; a shadow is spent only on what genuinely floats above the page, so when you see one, you know it can be dismissed.

  • hairline first
  • shadow-sm · md · lg
  • --scrim behind modals
  1. 01Flat
    1px hairline

    Cards, tables, panels, every band — the default answer.

  2. 02Raised
    shadow-sm

    A button you can press, the one elevated card variant.

  3. 03Floating
    shadow-md

    Menus, popovers, tooltips, toasts — anchored to something.

  4. 04Modal
    shadow-lg + scrim

    Dialogs and sheets — the page behind drops under --scrim.

06Layout

Three measures, one floor.

Pages are cut to a reading, band or canvas width and centred in it. Everything is designed from the phone up: at 320px nothing may run past the edge, and a wide table becomes a list of records.

  • reading 672
  • band 1180
  • canvas 1440
  • floor 320

Measures, to scale

Reading
672px

Docs, long copy, a single form.

Band
1180px

Every section on the site; 20px gutters.

Canvas
1440px

Component canvas, tables, the app shell body.

Breakpoints

320
The floor — nothing may overflow.
390
The design phone.
md · 768
Tables stop being record lists.
lg · 1024
Rails dock; two-column sections.
xl · 1280
The band reaches its full measure.

07Motion

Motion explains change. It never invents it.

Kinly moves in four durations and three curves — short enough that nothing waits on an animation, calm enough that nothing bounces. Amounts are the exception that proves it: a balance is replaced at 0ms, because a number sliding into place suggests a direction the money didn't take.

  • Nothing overshoots
  • Numbers never animate
  • Reduced motion honoured

Sequence

Four recipes, played at size

Ready on scroll
  1. 01Press
  2. 02Surface entry
  3. 03State change
  4. 04Row settle

Ready on scroll. The four recipes advance while this section is on screen.

Now playing

Press

slowed 8× · 120ms

Progress against time for --ease-standard. Every curve in Kinly ends flat — nothing overshoots the value it was heading for.

01Queued

Press

A control takes its pressed fill and drops one pixel. The tap is answered before the work behind it has started.

120ms · --ease-standard
02Queued

Surface entry

Popovers and menus fade up two pixels from 98%. Enough to place them on the page; not enough to watch.

180ms · --ease-entrance
03Queued
Round-upsTo Emergency fund

State change

Fill and thumb travel together on one curve, so a toggle reads as a single event instead of two.

120ms · --ease-standard
04Queued
Trader Joe’s$42.18
Shell$38.40

Row settle

A row that just landed carries a teal wash that fades out. The amount inside it is final from the first frame.

1200ms wash · 0ms value

Duration ladder

Five steps, and one of them is zero

instant
0ms
fast
120ms
default
180ms
slow
260ms
settle
1200ms

Easing

standardAnything that stays on screen
entranceSurfaces arriving — decelerate in
exitSurfaces leaving — accelerate out

The one allowed loop

Importing from Northbankunknown length

Ambient motion is allowed in exactly one place: work whose completion is genuinely unknown. The moment there is a number, the loop stops and the number is shown.

01

Immediate

Focus, hover and live values answer at once. Nothing that reports state waits on an animation.

02

Tactile

Motion joins a direct action to its visible result, and it ends where the finger let go.

03

Honest

An amount is replaced, never animated. Motion may explain a change; it must never invent a direction.

04

Inclusive

Reduced motion keeps every final state and every meaning. Nothing is only legible while it moves.

08Components

Eighty-five primitives, all of them awake.

These are live controls on a working surface, not a screenshot of an inventory. Focus them, toggle them, drag the slider. The canvas runs wider than the page because a design system does.

  • Live states
  • Keyboard ready
  • Radix underneath
Scroll the canvas→

Action · hierarchy and size

Button · ButtonGroup
One commitment per screen
8 variants

Variants

Sizes · 32 / 36 / 44px

Split action

Input · money and search

InputGroup · Slider
Fields that carry units
$
⌘K
20%
$340 of 4$80 each month

Choice · one, many, either

Radio · Switch · Toggle
Deciding, not guessing

Split method

$17 each
$34
Leftovers stay in the jar next month

Range

Disclosure · progressive detail

Accordion · Tabs
Detail on request
$1,240 out so far this month.

Each payday Kinly splits income across six jars, so the number you see is what is genuinely left.

Shortcuts

⌘NAdd expense

Pick · choose from a set

Select · Combobox
Short lists, and searchable ones
Six options are a Select. Four hundred are a Combobox.

Date · a range, not a pair

DatePicker · DateRangePicker
Calendars with presets
Backfill never picks tomorrow; reports start from a preset.

Hint · one-line gloss

Tooltip
Answers at the pointer

Tooltip · one-line gloss

Ready to assign

$170

Tooltips gloss a word. They never carry a form.

Overlay · ask before acting

Dialog · AlertDialog
One decision per overlay
2 layers

Dialog · edit in place

AlertDialog · the second tap

Destructive actions wait behind a second tap.

Menu · actions on demand

DropdownMenu · ContextMenu
Actions where the row is

ContextMenu · no hunting

DoorDash — Noodle House

Dining · Apr 12 · $7.40
Right-click
Menus never carry two destructive items, and never carry a journey.

Status · state that changes a decision

Badge · Alert · Progress
Colour with a word attached

Badges

ClearedPendingOver by $14SharedOptional

Jar progress

Groceries$120 / $200
Savings$160 / $160

States · known and unknown

Skeleton · Spinner · Banner
Loading with a shape in mind

Northbank needs re-authentication

Balances are 3 days stale until you reconnect.

Spinner · indeterminate waits

SyncingImporting 14…

Skeleton · the known shape

People · presence and sync

AvatarGroup · StatusDot
Who’s in, and how fresh

AvatarGroup · the overflow is explicit

SAJDMK+3
Shared with 5 people

StatusDot · sync at a glance

Northbank checkingSynced 4 minutes ago
Amex PlatinumSyncing…
Ally savingsNeeds re-authentication

Meta · detail on request

DescriptionList · CopyButton
Facts that don’t need design
Account number
0847 1123
Routing number
021000021
Reference
KIN-8F2A-4410

CopyButton · quiet, then certain

Activity · a history in hairlines

Timeline
Events read downward
  1. 1

    Rent

    $2,100

    Auto-pay · Checking ···4821

  2. 4

    Con Edison

    $128.40

    Estimated

  3. 9

    Mint Mobile

    $30

    Card ···7702

  4. 12

    Chalk Climbing

    $89

    Card ···7702

Data · the ledger

Table
Amounts align down the page
tabular-nums
PayeeJarAmount
Whole FoodsGroceries$34
DoorDash — Noodle HouseDining$7.40
Rent for AprilRent$360
April salaryIncome+4$80

Rows · accounts and jars

Item · Avatar
The list, hairline-ruled
Northbank ···4821

Checking · synced 2h ago

$980
Summit Credit ···9034

Savings · synced 2h ago

$640
Paylink

Wallet · synced 6h ago

$51
MAQBShared with 2 people

Numbers · one scale, tabular

Amount · Delta
Every figure on the same grid
tabular-nums

Amount · the scale

xs$1,284.50
sm$1,284.50
md$1,284.50
lg$1,284.50
signed+$480

Delta · up is not always good

Savings rate+11.2%
Spending this month+11.2%
Transactions imported+11.2%

Budget · against a limit

Meter
Limits overshoot; bars don’t lie
Groceries$412 of $600
Eating out$268 of $300
Transport$214 of $180

Over by $34

Progress tops out at its maximum. A meter keeps its bar and turns coral.

Absence · empty and attached

Empty · Attachment
No transactions yet

Connect a bank, or add the first one by hand.

receipt-whole-foods-04-12.pdf248 KB · PDF

Path · breadcrumbs and steps

Breadcrumb · Stepper
Where you are, and what’s left

Breadcrumb

Stepper · what’s left

  1. 1

    Connect an account

    Northbank, Amex, or a CSV

  2. 2

    Confirm categories

    We guess; you correct

  3. 3

    Set a budget

    Envelopes for the month

Conversation · asking about money

Message · Bubble
Answers in plain words
Why is Dining over budget?
Eleven DoorDash orders totalling $57 — nearly double March. Most were weekday lunches.

09Data

Twelve charts, no charting library.

Every chart is hand-rolled SVG sharing one categorical palette, one tooltip treatment, and one focus model — so a dashboard reads as a single surface instead of a collection of widgets.

  • Categorical only
  • --chart-1…5
  • Focusable series
Groceries−6% vs March
$170
Dining out+18% vs March
$97
Transportflat
$100
Utilities−2% vs March
$78
ColumnChart6 months · interactive
HorizontalBarsranked categories
GoalProgressListtarget vs current
Emergency fund$2,600 / $3,600
72% · $1,000 to go
Japan trip$1,100 / $1,600
69% · $500 to go
New laptop$1,400 / $1,400
100% · Complete
Chart palettecategorical only
--chart-1Teal
--chart-2Terracotta
--chart-3Indigo
--chart-4Amber
--chart-5Rose

Checked for colour-blind separation and 3:1 against the card. Use in order; green and red are status, never series.

10In situ

Six real screens, running inside this page.

Everything above is inventory — tokens, primitives, charts, motion. This is what they add up to. Each panel below is a live route from the screen library, embedded as itself: same tokens, same components, same theme you are reading in. Six different chassis, one language.

  • Live routes
  • Not screenshots
  • Six chassis
01/06/dashboard-001Open in a tab
Loading /dashboard-001 …

Household overview

Safe-to-spend as arithmetic you can check — balances, less the bills that must clear, less what the envelopes still owe.

These six are a sample. The library carries 146 built screens across 13 groups — every one of them a route in this repository, on these tokens.

Browse the screen library