Formwork
Library

Personal design study · Published

Based on Pondo

WarmEditorial

A calm household-finance direction shaped by warm paper, strong type, clear privacy cues, and restrained green.

  • Editorial
  • Warm
  • Finance
  • Product UI
Open design guide
Works well for
Personal finance · Household planning · Private records · Considered dashboards
Less suited to
Fast-moving trading tools · High-density workspaces · Gamified products

01

Primary surface

A household ledger, made interactive.

A clear hierarchy keeps personal balances first, household context nearby, and supporting activity easy to scan. Every record shown here is illustrative.

Responsive product previewIllustrative example · No real account data

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.

Six choices connect common product problems to visual rules that can be used again.

01Design rule

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.
02Design rule

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.
03Design rule

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 layout stays clear as records grow, disappear, or move onto a smaller screen.
04Design rule

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 at the moment it matters.
05Design rule

State the takeaway in words, then support it with simple bars.

Problem
Charts often ask people to decode color and geometry before they can answer a simple question.
Consequence
Reports stay clear without making charts the only way to understand the result.
06Design rule

Edit in a stable sheet and warn before unfinished changes are discarded.

Problem
Inline editing makes lists jump and behaves poorly with mobile keyboards.
Consequence
The surrounding information stays put while editing remains focused and easy to recover from.

04

Foundations

Warm paper. Sharp geometry. Exact roles.

Every color and type choice has a clear job. Together they create warmth without losing precision.

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 application 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 with strong contrast 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.
DisplayNewsreaderHeadings

Personal money, family goals.

UtilityGeistInterface

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

₱124,860.000123456789 · Personal money, family goals.
SpacingSteady

A compact, consistent rhythm keeps dense information calm without making the page feel sparse.

ShapeSquare

Panels, fields, and standard controls stay sharp. Rounded shapes are reserved for controls that truly need them.

DepthOne layer

Tonal shifts and warm hairlines create structure. Shadows appear only when something temporarily sits above the page.

MotionBrief

Motion stays short and useful, and it steps aside when reduced motion is preferred.

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.

Large screens

Persistent rail, bounded canvas.

  • A persistent ink navigation rail
  • A centered, comfortable reading width
  • Two columns only for distinct jobs
  • Important reports can use the full width
Small screens

Bottom tasks, single-column work.

  • Five clear bottom-navigation destinations
  • Content stays clear above the navigation
  • Editing moves into one focused screen
  • Rows protect names, scope, and amounts

Stable order

01Page identity02Scope or privacy03Primary value04Next action05Supporting records

06

Reusable patterns

Patterns worth carrying forward.

Some ideas can travel easily between products. Others are most useful as references for hierarchy, behavior, and state design.

Reusable

Header + progress

Pattern in use

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.

Variations
with or without description, 0–100, positive, warning

Reusable

Empty state

Pattern in use
＋

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.

Variations
framed, unframed, icon, action, no action
App-specific

Balance card

Total · spendable · private

Keep its hierarchy, then rebuild it around the next product’s information.
Adaptable

Action sheet

Editing · keyboard · discard warning

A focused editing surface that keeps the surrounding page steady.
App-specific

Page loading

Page-shaped · reduced motion

Loading keeps the shape of the destination instead of showing a generic spinner.
App-specific

Reports

Data · empty · recovery

Written takeaways and simple bars make the result understandable at a glance.

07

Applied screens

The character survives real work.

Three workflow examples test the direction against explanation, progress, and mobile creation.

Reports

Text names the takeaway; simple 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

Keyboard focus stays visible, and icon-only buttons always include a clear label.

Loading

Loading keeps the page structure recognizable without distracting motion.

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

Buttons explain what is happening and prevent accidental repeated actions.

Reduced motion
Motion off

The same hierarchy remains clear when animation is reduced or removed.

Designed for real use

Keyboard focus · loading and recovery · narrow-screen layoutFocus and recovery remain visible without relying on motion alone.

09

Behind the direction

Kept light on purpose.

The interface spends its energy on useful feedback, stable information, and clear navigation—not decorative effect.

Interaction

Movement appears only when it helps.

Sheets, selections, privacy controls, and progress respond clearly. The rest of the page stays calm and steady.

Navigation

The frame stays familiar.

Navigation remains in a predictable place while the working content changes, helping the product feel continuous rather than fragmented.

Information

Numbers stay stable and easy to scan.

Balances use consistent formatting, tabular figures, and restrained updates so attention stays on meaning rather than movement.

10

Lessons + limits

What held up, and where to stop.

The strongest parts of the direction are also the simplest. Its limits become clear when a product needs more urgency, density, or expressive color than this quiet system should carry.

Origin and influence

Warm Editorial grew from three saved interface references. One suggested the cream canvas and dark navigation anchor, another informed the compact mobile rhythm, and a third shaped the breathing room of the desktop layout.

Because the original source links were not saved, this study avoids reproducing their imagery and focuses on the resulting design rules: visible privacy, clear personal and household boundaries, stable editing surfaces, and reports that explain their takeaway in words.

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 many competing colors, extremely dense operational screens, playful reward loops, or constant real-time urgency. Dark surfaces work best as one structural anchor rather than a complete theme, and motion should remain restrained.

11

Design materials

Keep the direction close.

The full notes, foundations, and reusable patterns remain available when this direction is useful for another project.

01Available

Design guide

The complete direction: visual rules, responsive behavior, states, and practical limits.

Open
02Available

Foundations

The colors, type, spacing, geometry, and motion choices collected in one reusable file.

Open
03Available

Reusable patterns

A small set of page, progress, empty-state, and segmented-control patterns.

Open