Formwork
Library

Formwork study · Published · v1.0.0

Pondo · Extracted system

WarmEditorial

The portable design system extracted from Pondo: a calm, privacy-aware household-finance product built around cream, ink, green, and useful restraint.

  • Editorial
  • Warm
  • Finance
  • Product UI
Read raw guide
Status
Published · v1.0.0
Source project
Pondo
Suitable for
Personal finance · Household planning · Private records · Considered dashboards
Avoid for
Trading terminals · Dense operations consoles · Gamified products

01

Primary surface

A household ledger, made interactive.

The primary preview reconstructs Pondo's implemented My View hierarchy with illustrative records: private balance first, household context second, then cash flow, goals, bills, and activity. Nothing shown is production data.

Responsive product surfaceIllustrative records · Source-grounded layout

Dark anchorPersistent navigation and identity

Paper fieldContent, decisions, and breathing room

Green signalAction, focus, progress, and privacy

02

Visual thesis

Quiet does not mean vague.

Warm Editorial earns calm through explicit hierarchy, not by lowering contrast or removing information. Every important surface declares its job, scope, and next action.

“

One dark anchor is enough. Let type, rules, and useful whitespace do the rest.

  1. 01

    PrivateScope is visible wherever records can be misunderstood.

  2. 02

    CalmAccent color is scarce, motion is short, and values do not wobble.

  3. 03

    CapableOperational states receive the same composition as the happy path.

  4. 04

    Family-awarePersonal and household views share a system without losing their boundary.

03

Six decisions

The choices that make the direction hold.

Each decision connects a product problem to a visual rule and an observable consequence. The labels distinguish code-backed behavior from documented intent.

01Implemented

Use one ink navigation anchor and let cream carry the product.

Problem
Finance software often creates trust by making every important surface dark, glossy, or visually loud.
Consequence
The shell feels stable without forcing balances, reports, and household cards to compete for drama.
02Implemented

Give language to Newsreader and give controls, body copy, and money to Geist.

Problem
A strong serif can give utility software identity, but it can also make dense controls harder to scan.
Consequence
The product gets an editorial voice while numeric rows and forms stay compact and precise.
03Intentional

Prefer tonal surfaces, hairline dividers, and rows organized around one job.

Problem
Nested cards make changing household records feel like a wall of disconnected widgets.
Consequence
The hierarchy survives empty, populated, narrow, and data-heavy states with fewer containers.
04Implemented

Make scope visible beside balances, rows, navigation context, and the privacy toggle.

Problem
Personal and household money can look identical even when visibility and ownership differ.
Consequence
Privacy becomes something the interface explains, not a backend promise the user must remember.
05Implemented

State the takeaway in prose and use CSS bars as the supporting view.

Problem
Charts often ask people to decode color and geometry before they can answer a simple question.
Consequence
Reports remain readable, accessible, and lightweight without a chart runtime.
06Implemented

Create and edit in a stable sheet; confirm dirty dismissal and destructive work.

Problem
Inline editing makes lists jump and behaves poorly with mobile keyboards.
Consequence
The surrounding information stays put while the workflow gains predictable focus and recovery behavior.

04

Foundations

Warm paper. Sharp geometry. Exact roles.

These are semantic tokens, not a mood board. Every color and type role below comes from the active Pondo source or its canonical design guide.

04.1 · Color roles

Cream → sand → white creates depth. Ink anchors. Green acts.
01

Ink

Text and the single dark structural anchor.

#1F1B16
02

Cream

Primary canvas and PWA background.

#F7F4EC
03

Sand

Secondary surface, tracks, chips, and loading.

#F0EBDD
04

Surface

Working panels, forms, and overlays.

#FFFFFF
05

Green

Action, focus, progress, active state, privacy.

#1F4B3D
06

Green soft

Hover and secondary green emphasis.

#2F5E4F
07

Slate

Secondary copy; documented at 6.5:1 on cream.

#5C574C
08

Border

Warm rules, field boundaries, and grouping.

#DED5BE
09

Clay

Expenses, warning, badges, warm emphasis.

#A6491F
10

Gold

Fill-only accent, never small text on cream.

#D99A2B
11

Danger

Destructive action and error meaning.

#B4231F
12

Paper pair

Warm light text on the ink navigation anchor.

#F4EFE3

04.2 · Type and figures

Language gets warmth. Utility gets precision.
DisplayNewsreader400–600

Personal money, family goals.

UtilityGeist12–56

A quiet sans carries controls, supporting copy, and every financial figure without competing with the information.

₱124,860.000123456789 · Personal money, family goals.
Spacing4 / 8

A 4 px base rhythm. Mobile page padding lands between 16 and 24 px; major sections normally separate by 24–32 px.

Shape0 px

Panels, fields, and standard controls stay square. Pills are reserved for behavior that is actually pill-like.

Depth1 rule

Use a tonal shift or a warm hairline. Shadows belong to transient sheets, dialogs, and menus—not permanent cards.

Motion160–200

Short state feedback only. Skeleton pulse stops under reduced motion; adopting apps should extend that fallback globally.

05

Responsive system

The hierarchy stays. The frame adapts.

Pondo does not shrink a desktop dashboard into a phone. It preserves the order of decisions while changing navigation placement, action density, and edit-surface behavior.

Desktop · lg and above

Persistent rail, bounded canvas.

  • 256 px sticky ink navigation
  • Content capped near 1152 px
  • Two columns only for distinct jobs
  • Primary report can span the full track
Mobile · below lg

Bottom tasks, single-column work.

  • Five-position ink bottom navigation
  • Safe-area and fixed-nav content allowance
  • Full-height keyboard-aware edit sheets
  • Rows protect names, scope, and amounts

Stable order

01Page identity02Scope or privacy03Primary value04Next action05Supporting records

06

Component language

Portable primitives, honest boundaries.

The visible primitives below render the same typed React source published with the study. Product-bound patterns remain reference implementations until data, auth, routing, and Base UI assumptions are deliberately separated.

Copyable

Header + progress

Published source rendered

Savings

Goals show what the money is for; accounts show where it sits.

Family trip₱68,500 of ₱100,000
Emergency fund42%

A stable page opening and labeled progress pattern for goals, onboarding, limits, or completion.

Source
registry/warm-editorial/components.tsx
Dependencies
React, tokens.css, components.css
States
with or without description, 0–100, positive, warning

Copyable

Empty state

Published source rendered
＋

No saving goals yet

Create a goal to give shared savings a clear purpose.

Explains what is absent, what will appear, and the next real action without inventing a separate onboarding surface.

Source
registry/warm-editorial/components.tsx
Dependencies
React, tokens.css, components.css
States
framed, unframed, icon, action, no action
Reference only

Balance card

Populated · empty · total · spendable

Product money, privacy, query, and route types remain embedded.
Reference only

Action sheet

Open · dirty · keyboard · discard

Base UI plus mobile viewport and Pondo form behavior.
Reference only

Confirm dialog

Default · danger · pending · disabled

Accessible primitive with a clear external dependency.
Reference only

Select

Open · selected · highlighted · invalid

Base UI supplies keyboard, type-ahead, focus, and positioning.
Reference only

Page loading

Nine route-shaped variants · reduced motion

Still assumes Pondo layout and Tailwind utilities.
Reference only

Reports

Data · section empty · route error

Domain data and money privacy remain intentionally product-bound.

07

Applied screens

The character survives real work.

These workflow studies are reconstructed from current Pondo components with illustrative records. Each tests a different pressure point: explanation, progress, and mobile creation.

Reports

Text names the takeaway; paired CSS bars support it without becoming the only representation.

Savings

Purpose, exact progress, remaining amount, and contribution history share one disciplined surface.

Mobile add sheet

Task-first creation sits above the stable bottom navigation and keeps every destination reachable.

08

Accessibility + states

The system includes the days when nothing works.

The direction treats focus, loading, absence, failure, disabled controls, and reduced motion as part of the experience—not cleanup for later.

Focus
Focused control

Visible green ring or border with an offset. Icon-only controls carry an accessible name.

Loading

Route-shaped status region; decorative bones are hidden and pulse only when motion is allowed.

Empty
No goals yet＋ Create a goal

Names the absence, explains future content, and points to a real next action.

Error
Page could not loadYour records were not changed.

Technical detail stays private; recovery remains specific and nearby.

Disabled

Pending work retains a specific label, blocks repeats, and does not erase context.

Reduced motion
0.01 ms

The portable pack removes transitions globally; Pondo currently proves this most directly on skeletons.

Checked in practice

Main signed-in journey · visible focus · 390 px mobile layoutSupported by automated checks, but not presented as a full accessibility review.

09

Implementation notes

Lightweight by product decision, not by omission.

The implementation spends JavaScript on interaction and data, not on visual effect. The visual system itself is CSS variables, type, layout, semantic markup, and small state transitions.

Framework
Next.js 16 · React 19 · strict TypeScript
Rendering
App Router with React Server Components by default
Styling
Tailwind CSS v4 plus semantic CSS variables
Primitives
Base UI, shadcn source, Lucide line icons
Data UI
Integer minor units, tabular figures, CSS-native charts
Checks
Signed-in flow, accessibility checks, narrow-screen fit
Rendering path

Server first, client where behavior begins.

Authenticated pages default to React Server Components. Forms, privacy state, sheets, custom selects, charts with interaction, and PWA behavior become client components only where needed.

Navigation path

Persistent shell, intent-based warming.

The App Router swaps page content inside a shared shell. Private links disable automatic prefetch and warm on focus, pointer, or touch intent, with a delayed 2 px pending rule.

Data path

Stable numbers, restrained refresh.

Money begins as integer minor units. TanStack Query uses a 60-second stale time, no window-focus refetch, reconnect refetch, and no automatic retry in the current provider.

Known exceptions

The source is documented, not idealized.

Dark mode is provisional. Generic scaffolded button sizes include sub-44 px options. Reduced-motion treatment is not centralized for every transition. Visual regression baselines are absent.

10

Lessons + limits

What held up, and where to stop.

The source repository can prove the implemented choices and document intended boundaries. It cannot reveal missing reference attribution or manufacture a process story, so those gaps stay visible.

Origin and influence

Pondo’s repository records a three-image internal reference set. One image established the cream canvas and dark navigation anchor, another informed mobile navigation and compact controls, and a third shaped desktop breathing room and panel rhythm. The original URLs and creators are not recorded, so this study does not invent an attribution or reproduce proprietary assets.

The resulting implementation is its own product system: privacy-aware balances, personal-versus-household scope, a persistent desktop rail, a mobile task bar, stable action sheets, and reports made from text plus CSS-native bars.

What held up

The strongest decisions were also the simplest. One ink-colored anchor supplies enough contrast for the whole application. Newsreader creates identity without entering dense controls. Hairline dividers and tonal surfaces organize changing records more reliably than nested cards. Green remains meaningful because it is reserved for action, focus, progress, and privacy.

Limits and exceptions

Warm Editorial is deliberately quiet. It is a poor fit for products that need simultaneous high-saturation categories, compressed terminal density, playful reward loops, or constant real-time urgency. Pondo’s dark token block is provisional, its repository has no visual-regression baseline, and reduced-motion handling is explicit for skeletons rather than centralized across every transition. Those limits are documented here instead of being polished out of the study.

11

Adopt this direction

Start with the rules. Copy only what survives.

The guide and tokens are complete, and the small React primitives are intentionally separated from Pondo's business data. The registry is not yet installable, so every artifact says exactly what it is.

01Available

Design guide

The full portable direction: rules, components, responsive behavior, states, adoption sequence, and limits.

Open artifact
02Copyable

Token sheet

Scoped cream, ink, green, type, spacing, geometry, motion, and reduced-motion CSS variables.

Open artifact
03Copyable

React primitives

Typed page header, empty state, progress, and segmented control. Pair with the published component CSS.

Open artifact
04Planned

Registry item

Generated shadcn-compatible JSON is intentionally not claimed until Formwork has build-time generation and schema validation.

Not published yet

Recommended sequence

  1. 01Copy and scope the tokens.
  2. 02Load Newsreader + Geist or approved equivalents.
  3. 03Build the page field and one dark anchor.
  4. 04Add scope, focus, and operational states.
  5. 05Copy only the primitives the product actually needs.
  6. 06Validate mobile, keyboard, zoom, and reduced motion.