Components

Every seenry-ui component and every contract class, in Paper’s character, in each state it can be in. Hover, focus and pressed states are drawn so you can compare them side by side; the live controls work too. Copy the markup from the source; the rules and the reasons are in SYSTEM.md.

Fonts
Newsreader 400 for titles and figures, Inter 400 to 600 for UI
Accent
Deep green one primary per view
Icons
Phosphor regular, 18px

Foundations

Warm page, white cards, one deep green. Every value on this page is a token in tokens.css; switch the theme to see the warm charcoal dark set.

Color

Surfaces separate by tone, never by shadow. Green means “do this” or “you are here”.

Page--bg
Card--surface
Quiet fill--surface-2
Hover--hover
Line--line
Strong line--line-strong
Text--text
Text 2--text-2
Text 3--text-3
Accent--accent
Accent subtle--accent-subtle
Ok--ok
Warn--warn
Bad--bad
Info--info
Chart 2--chart-2
Chart 3--chart-3
Chart 4--chart-4

Type

Serif for the page title, figures and dialog titles only. Inter for everything you read or click.

Figure · serif 44/48
--type-figure$128.40
Title · serif 34/42
--type-titleOctober
Stat · serif 30/36
--type-stat$4,716
Heading · Inter 600 16/24
--type-headingSpending by category
Body · Inter 400 15/22
--type-body$1,284 left to spend with 4 days to go.
Label · Inter 500 14/20
--type-labelAdd transaction
Small · Inter 400 13/18
--type-smallOct 27 · Suggested: Groceries

Space

--space-1 · 4
--space-2 · 8
--space-3 · 12
--space-4 · 16
--space-5 · 20
--space-6 · 24
--space-7 · 32
--space-8 · 48

Radius

8 control 10 menu 14 card pill

Buttons

One filled green button per view. Secondary is a white button with a warm line; ghost is for toolbars; danger is outlined until it is the only choice.

Variants ui-button

Primary
Secondary
Ghost
Danger

States

Default
Hover
Focus
Disabled
Loading
Primary hover

Sizes and icon buttons data-size · data-icon

Icon-only buttons always carry an aria-label.

Small · 32
Default · 40
Large · 44
Icon, ghost
Icon, secondary

Fields

A visible label above every field, help or error text below it. Fields are 40px tall, 44px on phones.

Text input ui-field · ui-input

Default
Hover
Focus
With help
Error
Disabled

Select, textarea, combobox ui-select · ui-textarea · ui-combobox

Select
Combobox, native datalist
Combobox, focus
Textarea

Slider ui-slider

A range input with its value beside it. The filled part of the track follows --fill.

Default
With help
Disabled

Choices

Checkboxes for independent choices, radios for one of several, switches for settings that apply immediately.

Checkbox ui-choice

Checked
Unchecked
Focus
Disabled
With help

Radio group ui-radio-group

Who can see this account?

Switch ui-switch

On
Off
Focus
Disabled

Selection

Segmented controls switch a view, tabs switch panels at the same level, chips filter a list.

Segmented control ui-segmented

Tabs ui-tabs

Due Monday, November 3. Estimated at $128.40.

Chips ui-chip

aria-pressed carries the state; a count can sit in small.

Default
Hover
Selected
Focus
Disabled
With icon

Layers

Menus, tooltips, dialogs, sheets, toasts and the command menu are the only things that float, so they are the only things with a shadow. Open them live, or read the open states drawn in place below.

Open live

Remove Daniel?

He loses access to shared accounts and budgets. His notes stay on past transactions.

Edit bill

 
↑ ↓ to move · Enter to open · Esc to close

Open states, drawn in place

Menu
Tooltip
Marked as paid

$128.40 to PG&E from SchoolsFirst checking.

Toast

Remove Daniel?

He loses access to shared accounts and budgets.
Dialog

Edit bill

Sheet
↑ ↓ to move · Enter to open
Command menu

Feedback

Status always has a word. Alerts say one sentence and offer at most one action. Progress is for work; a meter is usage against a limit.

Alerts ui-alert

Statements from PG&E usually arrive on the 30th.

All caught up. Every October transaction has a category.

Your Visa ending 2291 expires before the January renewal.

Status and badge ui-status · ui-badge

AutopayOk
Pay manuallyWarn
Payment failedBad
PendingInfo
Not connectedIdle
OwnerBadge
PaidDue soonNewBadge, tones

Progress and meter ui-progress · ui-meter

Importing 90 days62%
Progress
Connecting to SchoolsFirstWorking
Progress, unknown length
Transport$344 of $400
Meter, under
Groceries$812 $88 left of $900
Meter, close
Dining out$386 $36 over $350
Meter, over

Loading and empty ui-skeleton · ui-empty

Loading

No bills yet

Hearth finds them in your transactions after the first month, or add one now.

Empty

Data

Big numbers in the serif, everything else in Inter with tabular figures. Money is signed: −$142.38 out, +$3,412.50 in.

Stat strip ui-stat-strip

Net worth
$186,420
+$2,140 since September
Spent this month
$4,716
of $6,000 budgeted
Saved this month
$1,350
18% of take-home pay

Table ui-table-wrap · ui-table

Sort by a header, search, filter and page; the table hook in seenry-ui.js does the work.

DateMerchantCategoryAmount
Oct 28Whole Foods MarketGroceries−$142.38
Oct 28Blue Bottle CoffeeDining out−$11.50
Oct 27Lumen Health payrollIncome+$3,412.50
Oct 27Trader Joe’sGroceries−$64.18
Oct 25Tartine BakeryDining out−$36.75
Oct 21Whole Foods MarketGroceries−$118.90

List ui-list · ui-list-item · ui-list-meta

A ui-list-meta placed directly in the list is a day heading.

  • Today, Wednesday Oct 28
  • Tuesday, Oct 27

Data list ui-data-list

Biller
Pacific Gas and Electric
Pays from
SchoolsFirst checking
Due
The 3rd of each month
Status
Pay manually

Detail panel ui-detail · ui-detail-head · ui-detail-row

Timeline ui-timeline · ui-timeline-item

Who, what, when. The mark carries the status; the sentence says it.

  1. Hearth estimated November at $128.40

    From last November’s bill and the June rate change

  2. Maya paid $117.16 from SchoolsFirst checking

  3. Daniel paid $115.02, one day late

    No late fee was charged

  4. Maya turned off autopay

Charts

Always the conventional form: a line for a trend, bars for amounts per period, meters for spending against a budget, one stacked bar for parts of a whole. No donuts, no gauges.

Line, trend over time ui-chart · ui-chart-axis

Bars, amount per period ui-chart · ui-chart-legend

Stacked bar, parts of a whole ui-chart-legend

Five slices at most; fold the rest into “everything else”.

Housing 46%Groceries 17%Dining out 8%Transport 7%Everything else 22%

Content

Cards, people, disclosure and code. Cards are white with a faint line and no shadow.

Cards ui-card

The second card is a link: the whole surface is one target.

Emergency fund

$9,400 of $12,000. At $350 a month you reach it in July.

Review 5 transactions

Four need a category, one needs splitting.

Avatars ui-avatar · ui-avatar-group

MADefault
DALarge
Group

Accordion ui-accordion

Who can see my accounts?
Everyone in the household sees shared accounts. Private accounts count toward budgets, but only you see the transactions.
What happens when I go over a budget?
Nothing is blocked. The category turns red with the amount over, and the weekly summary mentions it once.

Code and keys ui-code · ui-kbd

A code block carries a copy button marked data-copy.

Set data-status="warn" on a meter to mark a budget that is close. Press ⌘ K to search, Esc to close.

Install with plain CSS
<link rel="stylesheet" href="seenry-ui.css">
<link rel="stylesheet" href="systems/paper/tokens.css">
<link rel="stylesheet" href="systems/paper/system.css">

Patterns

Larger pieces the blocks are built from: the page header, a filter bar, settings rows, the danger zone and the sign-in frame.

Page header ui-page-header · ui-page-title · ui-page-sub · ui-page-actions

October

$1,284 left to spend with 4 days to go.

Filter bar and section head ui-filter-bar · ui-section · ui-section-head

Transactions

Export CSV
11 of 64 shown

Settings rows and danger zone ui-settings-group · ui-settings-row · ui-danger

Budget

Rules Hearth uses each month.

Month starts on

Match it to payday.

Leave or delete

These can’t be undone.

Delete household

Removes budgets, notes and history.

Sign-in frame ui-auth

The full flow, with create account and the error state, is in blocks/sign-in.html.

Welcome back

Sign in to see where the household stands.

or with email