Money Forward DESIGN.md

Overview

Visual Theme & Atmosphere

Money Forward (マネーフォワード) is the Japanese fintech that started as a personal household-budgeting app (Money Forward ME) and grew into a full business platform — cloud accounting, invoicing, payroll, and expense tools (Money Forward Cloud) plus financial-institution products (Money Forward X). Its design language carries the central tension of all serious fintech: it must feel trustworthy enough to hold your money and your books, yet light enough that a non-accountant can use it. The answer SmartHR-adjacent peers reach for is restraint, and Money Forward Cloud reaches for it too — a calm white canvas, a confident blue primary, warm-gray neutrals, and a danger red held in reserve for the moments that actually matter (deleting a ledger entry, voiding an invoice).

The signature primary is a blue gradient — royalBlue #3B7DE9 lightening down to cobalt #0054AC — applied to the primary button, the one action the user should take on any given screen. This gradient-on-button treatment is a deliberate Money Forward Cloud fingerprint: where flatter design systems use a solid fill, MF Cloud's primary button reads as a subtly dimensional, polished blue pill (well, a 4px-radius rectangle), signaling "press me, this is safe." Text is a warm dark gray (nightRider #333333), not pure black; secondary text drops to nobel #999999. The whole palette is built from a hand-curated, plainly-named color list (aliceBlue, cobalt, royalBlue, venetianRed, nightRider, linkWater…) rather than a generative ramp — a small, opinionated set that keeps the product coherent across dozens of Cloud modules.

Typography leads with Noto Sans JP — the explicit first choice in the theme's font stack — backed by the platform-native chain (-apple-system, Hiragino Sans, ヒラギノ角ゴ ProN W3, Meiryo). The type scale is a fine-grained ladder from 10px to 24px, reflecting the data-dense reality of accounting tables. The radius is small and businesslike: components round at 4px. Everything signals competence and care: this is software that touches your tax filing, and it dresses accordingly — clean, blue, legible, and never loud.

Key Characteristics:

• Blue gradient primary — royalBlue #3B7DE9 → cobalt #0054AC on the primary button (a Money Forward Cloud signature)
• Warm dark-gray text nightRider #333333 (never pure black); secondary nobel #999999
• Hand-curated, plainly-named palette (aliceBlue / cobalt / royalBlue / venetianRed / linkWater / solitude…) — small and opinionated, not a generative ramp
• Danger held in reserve: venetianRed #D0021B for destructive actions only
• Noto Sans JP-led font stack with full platform-native JP fallbacks
• Fine-grained type scale 10 / 12 / 13 / 14 / 16 / 18 / 20 / 24px — built for dense accounting tables
• Small businesslike radius — 4px on buttons, blocks, and inputs
• Open-source design system: Money Forward Cloud UI (cloud-react-ui) published on GitHub with a typed styled-components theme
• Subtle gradients on buttons (white→solitude on default, royalBlue→cobalt on primary) for gentle dimensionality
• Calm white + warm-gray (solitude #ECF2FD, linkWater #D4D8DD) surfaces — trustworthy, never flashy

Primary tasks

• See bank, credit card, and e-money accounts in one view
• Work through the invoice and expense screens at month-end
• Run payroll for staff inside the same cloud suite
• Delete a ledger entry or void an invoice

Brand Narrative

Money Forward, Inc. was founded in Japan with a deceptively simple idea: most people and most small businesses have a fragmented, anxious, opaque relationship with their own money. Bank balances, credit cards, e-money, and accounts live in separate silos; bookkeeping is a chore done in spreadsheets or on paper; and the cost of not knowing where your money is is paid in stress. Money Forward's founding product, Money Forward ME, attacked the consumer side — automatically aggregating accounts into one view so an individual could finally see their money (お金の見える化, "making money visible"). From there the company built Money Forward Cloud — accounting, invoicing, payroll, expenses for businesses — and Money Forward X, embedded-finance products for financial institutions.

The design language flows from that mission of visibility and forward motion. One, money must always be shown exactly and clearly — hence the dense, legible type scale, the tabular discipline, the warm-gray-on-white calm that lets figures be the loudest thing on screen. Two, the product must feel trustworthy — hence the confident blue primary, the restraint in using danger red, the businesslike 4px radius, and the absence of anything flashy or gimmicky around the user's finances. Three, it must feel empowering, not intimidating — hence plain-language copy and a UI that a small-business owner who is not an accountant can actually operate.

Money Forward's design organization publishes openly: the corporate design site (design.moneyforward.com) articulates a "User Focus" stance — designing things that "move users' lives and the world forward," with explicit attention to accessibility for people with visual impairments — and the engineering org open-sourced the Money Forward Cloud UI component library (cloud-react-ui) on GitHub, where the blue-gradient primary, the curated palette, and the typed theme all live in public. The system is, like the company, methodical and trustworthy by design.

Principles

1. Make money visible, exactly. Figures are the product; the UI exists to display them clearly. UI implication: Dense legible type, tabular alignment, warm-gray calm so amounts are the loudest element. Never approximate or decoratively obscure a number.

2. Trust through restraint. A fintech that holds your books cannot be flashy. UI implication: Confident blue primary, danger red held in reserve, businesslike 4px radius, gradients-not-gimmicks. Competence is the aesthetic.

3. Empower the non-expert. Money Forward serves individuals and SME owners, not accountants. UI implication: Plain-language labels and helper copy; explain what a figure means; never hide behind jargon. A first-time user should be able to complete the task.

4. User Focus — move lives forward. The stated design stance: design that improves the user's life and "moves the world forward." UI implication: Optimize for the user's actual goal (see my money, file this invoice), not for engagement metrics or visual flair. Accessibility (including for visual impairments) is part of this commitment.

5. One coherent product across many modules. ME, Cloud, and X span very different surfaces. UI implication: The shared token theme + curated palette + cloud-react-ui components keep every module recognizably Money Forward. Don't fork the palette per team.

Personas

Personas are fictional archetypes informed by Money Forward's publicly-described user base (Japanese individuals and SME owners/finance staff), not real individuals.

鈴木 大輔 (Daisuke Suzuki), 41, Tokyo. Owner of a 12-person design studio. Uses Money Forward Cloud for accounting and invoicing because he is not an accountant and needs the software to be obvious. Lives in the invoice and expense screens at month-end. Trusts MF because the figures always reconcile and the danger actions are clearly gated.

伊藤 さやか (Sayaka Ito), 29, Fukuoka. Salaried worker who uses Money Forward ME on her phone to aggregate her bank, credit card, and e-money into one view. Checks it on her commute. Wants her money visible and her future plannable; gets anxious when a finance app is cluttered or hides fees.

渡辺 経理 (Kei Watanabe), 35, Osaka. Finance/accounting staffer at a mid-size company. Power user of Money Forward Cloud's payroll and expense modules. Cares about throughput, exact figures, and audit-trail clarity. Will tolerate a dense UI; will not tolerate an ambiguous one near money.

Colors

Money Forward Cloud UI ships a hand-curated color object (plain English names) and maps it to component roles in a typed theme. Values below are transcribed from the open-source cloud-react-ui theme.

Brand / Primary (blue)

• royalBlue (#3B7DE9): The primary brand blue — start of the primary-button gradient, the canonical "Money Forward blue." This is the reference primary_color.
• cobalt (#0054AC): Deep blue — end of the primary-button gradient, hover/pressed depth.
• sanMarino (#5176AE) / steelBlue (#4772B3) / cornflowerBlue (#6594DA): Supporting blue family for accents, links, secondary emphasis.
• solitude (#ECF2FD): Very light blue — default-button gradient bottom, subtle blue tint surface.
• aliceBlue (#F5FAFF) / darkenAliceBlue (#EDF5FE): Lightest blue tints for hover/selected rows.

Text

• nightRider (#333333): Default text color — warm dark gray, never pure black.
• nobel (#999999): Notes / secondary / disabled text.
• dimGray (#666666): Mid-gray supporting text.
• white (#FFFFFF): Text on the blue primary, page surface.

Status

• venetianRed (#D0021B): Danger / destructive / error text and accents. Held in reserve.
• sunsetOrange (#EC4949) / salmon (#F57575): Lighter error/alert tints.
• apple (#65AB51): Green for success/positive.
• cornSilk (#FCF8E3) / mcKenzie (#8A6D3B): Warning notice bg + text (warm yellow family).
• mistyRose (#FFEEEB) / redSnow (#FFF4F4) / amour (#FAEFF0): Error/danger tint backgrounds.

Neutrals / Borders / Surfaces

• linkWater (#D4D8DD): Standard component border (buttons, blocks).
• hawkesBlue (#D5DBE3) / darkenSolitude (#E1E5EB): Border / divider variants.
• cloudGrey (#EFF1F4) / whiteSmoke (#F7F7F7) / whisper (#EEEEEE): Light gray surfaces, section backgrounds.
• gainsboro (#D8D8D8) / silver (#BEBEBE) / darkGray (#AAAAAA) / veryRightGray (#CCCCCC): Disabled / icon grays.
• rhino (#424954) / vulcan (#32373F) / stormGrey (#787E8D) / lightSlateGrey (#7C8291): Dark neutral text/chrome.

Typography

Font Stack

"Noto Sans JP", -apple-system, BlinkMacSystemFont, Helvetica, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif

Noto Sans JP is the explicit lead, backed by the full platform-native Japanese chain. There is no custom brand webfont; the priority is crisp Japanese + alphanumeric rendering for financial data.

Type Scale (text-size tokens)

Weights

• normal and bold only — a two-weight system. Hierarchy comes from size + color, not many intermediate weights.

Conventions

• large (14px) is the working default for body and buttons — sized for dense accounting UIs, not editorial reading.
• Tabular financial data stays legible at 12–14px; the fine xSmall/small tiers handle footnotes.
• Bold is for emphasis and headings, not decoration.
• Never hardcode a single Latin font — always carry the Noto Sans JP + native chain.

Layout

Density

Money Forward Cloud is high-density — accounting and invoicing screens are tables, ledgers, and forms. The fine type scale (10–14px workhorse range) and tight 4px radius reflect that: every pixel of vertical space matters when a screen lists 200 transactions. White Blocks with 1px linkWater borders carve the dense canvas into legible regions.

Spacing & Structure

• App-shell: left navigation across Cloud modules + top header + dense main content
• Blocks (4px radius, 1px border) group related fields/data
• Light gray surfaces (cloudGrey #EFF1F4, whiteSmoke #F7F7F7) separate sections without heavy shadow
• Forms and tables are the central artifacts

Responsive Behavior

Touch & Mobile

• Button sizes (28/32/42px) keep medium+ comfortably tappable; large (42px) clears touch minimums
• Money Forward ME (the consumer budgeting app) is mobile-first; Cloud is desktop-first but responsive
• Financial figures keep tabular alignment across breakpoints

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• spacing: [12,16,52]

Elevation & Depth

Elevation is subtle and gradient-led rather than shadow-heavy. The most distinctive depth cue is the button gradient (white→solitude default, royalBlue→cobalt primary), which gives controls gentle dimensionality without a drop shadow.

• Buttons: gradient fill + 1px border; pressed state uses a faint box-shadow: 0 0 2px rgba(212, 216, 221, 0.3)
• Blocks/cards: flat — 1px linkWater border + light gray page bg separates them
• Modals/dropdowns: light shadow + scrim
• Z-index governed by the theme's zIndex scale (e.g. backdrop 200)

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.active: 0 0 2px rgba(212,216,221,0.3)

Motion & Easing

Money Forward's motion is restrained and confidence-building. A product that touches taxes and ledgers earns trust through predictability; motion clarifies state, it does not entertain.

Durations:

Easings:

Spring stance. Spring / overshoot easing is forbidden on Money Forward product surfaces. Bouncy motion undermines the calm-competence register a fintech needs. Confidence about money is the goal, not delight.

Signature motions.

1. Primary button hover. The blue gradient flips (#3B7DE9→#0054AC becomes #0054AC→#3B7DE9) over motion-fast / ease-standard — a subtle, dimensional press affordance, no scale or bounce.
2. Default button hover. Same gradient-flip treatment on the white→solitude default button.
3. Modal enter. Backdrop scrim fades in (zIndex 200) over motion-modal / ease-enter; dialog appears with opacity + slight translate. Controlled.
4. Row/expand reveal. Table rows and accordions expand over motion-standard / ease-enter; data lands without layout jump.

Reduce motion. Under prefers-reduced-motion: reduce, all motion-* collapse to motion-instant; gradient flips become immediate; modals appear without translate. Accessibility outranks polish.

Verified: 2026-05-19 (omd:add-reference — JP batch) Tier 1 sources: https://github.com/moneyforward/cloud-react-ui (open-source theme — royalBlue #3B7DE9 → cobalt #0054AC primary gradient, venetianRed #D0021B danger, nightRider #333333 text, linkWater #D4D8DD border, 4px radius, button sizes 28/32/42, Noto Sans JP font stack, 10–24px type scale); https://design.moneyforward.com (live — "User Focus" stance, corporate-orange #ED7100 brand layer). Tier 2 sources: getdesign.md / refero — not separately fetched (official open-source DS supersedes). Conflicts unresolved: Brief-supplied #316AD6 not found as a literal token; using verified Cloud-product primary royalBlue #3B7DE9. Corporate brand layer (design.moneyforward.com) uses orange #ED7100 — documented in source note, product-blue treated as canonical for UI generation.

Components

Buttons

Primary

• Background: linear-gradient(to bottom, royalBlue #3B7DE9, cobalt #0054AC 100%)
• Text: #FFFFFF
• Border: 1px solid rgba(0, 0, 0, 0.15)
• Radius: 4px
• Icon color: #FFFFFF
• Hover: linear-gradient(to bottom, cobalt #0054AC, royalBlue #3B7DE9) (gradient flips)
• Active: box-shadow: 0 0 2px rgba(212, 216, 221, 0.3)
• Use: The single primary action per screen (Save / Submit)

Default (Secondary)

• Background: linear-gradient(to bottom, white #FFFFFF, solitude #ECF2FD)
• Text: nightRider #333333
• Border: 1px solid linkWater #D4D8DD
• Radius: 4px
• Icon color: silver #BEBEBE
• Hover: linear-gradient(to bottom, solitude #ECF2FD, white #FFFFFF) (gradient flips)
• Use: Secondary / cancel actions

Danger

• Background: linear-gradient(to bottom, white #FFFFFF, solitude #ECF2FD)
• Text: venetianRed #D0021B
• Border: 1px solid linkWater #D4D8DD
• Radius: 4px
• Icon color: venetianRed #D0021B
• Use: Destructive actions (delete entry, void invoice) — danger lives in the text/icon, not a red fill

Settings

• Background: linear-gradient(to bottom, white #FFFFFF, solitude #ECF2FD)
• Text: royalBlue #3B7DE9
• Border: 1px solid linkWater #D4D8DD
• Radius: 4px
• Icon color: royalBlue #3B7DE9
• Use: Configuration / settings affordances

Disabled

• Background: linkWater #D4D8DD
• Text: nobel #999999
• Border: 1px solid rgba(0, 0, 0, 0.1)
• Radius: 4px
• Use: Unavailable actions

Sizes

• small: height 28px, padding 0 16px, font 14px
• medium: height 32px, padding 0 12px, font 14px
• large: height 42px, padding 0 52px, font 14px

Blocks / Cards

Block

• Background: white #FFFFFF
• Border: 1px solid linkWater #D4D8DD
• Radius: 4px
• Use: Content panel / card container; padding and width are composed per use

Inputs

Text Field

• Background: #FFFFFF
• Text: nightRider #333333
• Border: 1px solid linkWater #D4D8DD
• Radius: 4px
• Focus: border royalBlue #3B7DE9
• Use: Form fields (inferred from theme border/primary tokens — the workhorse of a cloud-accounting UI)

Error Field

• Border: venetianRed #D0021B
• Helper text: venetianRed #D0021B, small (12px)
• Use: Validation failure (inferred from status tokens)

Notices

Error Notice

• Background: mistyRose #FFEEEB / redSnow #FFF4F4
• Text: venetianRed #D0021B
• Radius: 4px
• Use: Error / danger banners

Warning Notice

• Background: cornSilk #FCF8E3
• Text: mcKenzie #8A6D3B
• Use: Caution banners

Success Notice

• Background: light green tint
• Text: apple #65AB51
• Use: Positive confirmation (inferred from status tokens)

Published component roster (25 published, none measured here)

@moneyforward/cloud-react-ui publishes 25 components, enumerated from the directories under src/components/ in the repository this reference cites (https://github.com/moneyforward/cloud-react-ui, read 2026-09-19). No value, state or geometry below is asserted by this reference.

Backdrop, Block, Box, Button, Checkbox, CircularProgress, Dropdown, FlashMessage, Heading, Icon, Link, Modal, Notification, Pagination, ProgressLabel, Radio, SearchPanel, Select, StatusLabel, Steps, Switch, Table, Text, TextField, Tooltip

Names are the repository's own directory names, which are also the exported component names.

What this reference's eight entries are

The eight stylings in §4 carry use: strings that describe purpose — "Single primary action per screen", "Secondary / cancel actions" — with no selector, no capture id, and no class from the package. This reference has no verification_v2 block and so no surface record either.

Several of the eight share a name with a published component. None is claimed as a rendered instance of one, and none of the 25 above carries a measured value here.

States

Do's and Don'ts

• DO use the blue gradient (#3B7DE9 → #0054AC) for the one primary action per screen. DON'T make it a flat solid — the subtle gradient is the MF Cloud signature.
• DO keep danger in the text/icon (venetianRed #D0021B) on a neutral button. DON'T use a solid red fill for delete unless it's a truly catastrophic confirmation — MF holds red in reserve.
• DO use warm dark gray #333333 for text. DON'T use pure #000000.
• DO lead with Noto Sans JP and carry the native JP fallback chain. DON'T hardcode a Latin-only font.
• DO use the 4px radius everywhere. DON'T introduce 8px+ rounded corners — MF Cloud is businesslike-square.
• DO pick from the curated named palette (royalBlue, cobalt, linkWater, solitude…). DON'T invent new hexes — the small palette is deliberate.
• DO respect the dense type scale (14px working default). DON'T inflate body to 16–18px — accounting tables need the density.
• DO use gradients on buttons for gentle dimensionality. DON'T add drop shadows to flatten controls — the gradient is the depth.

Voice & Tone

Money Forward's voice is clear, reassuring, and quietly empowering — the brand's stated design stance is "User Focus," delivering work that moves users' lives and the world forward (the name is the thesis). In a category where users are anxious about money, taxes, and bookkeeping, the copy's job is to make the user feel capable, not audited. It writes in standard polite Japanese (丁寧語), plain and concrete, avoiding both intimidating accounting jargon and false cheerfulness. Numbers are sacred — figures, dates, and amounts are always exact and never softened. The consumer ME app voice is a touch warmer and more personal ("your money, your future"); the Cloud/business voice is a touch more professional. Both stay calm.

Forbidden patterns. Hype superlatives (業界No.1, 革新的), false cheer around money loss, exclamation-mark buttons, approximating any financial figure, emoji in product chrome, condescending "don't worry" copy that hides what's actually happening, and jargon walls that make a non-accountant feel excluded.

Voice samples.

• 保存 / 登録 — primary action verbs.
• "User Focus" — MF Design's stated stance: deliver designs that move users' lives and the world forward.
• The corporate mission frames MF around making money / money-management approachable and moving users "forward."

Agent Prompt Guide

Quick Color Reference

• Primary (gradient): royalBlue #3B7DE9 → cobalt #0054AC
• Text: nightRider #333333; secondary nobel #999999 / dimGray #666666
• Danger: venetianRed #D0021B
• Border: linkWater #D4D8DD; light surface solitude #ECF2FD / cloudGrey #EFF1F4
• Success apple #65AB51 / Warning cornSilk #FCF8E3 bg + mcKenzie #8A6D3B
• Radius: 4px everywhere

Example Component Prompts

• "Create a Money Forward Cloud primary button: linear-gradient(to bottom, #3B7DE9, #0054AC) bg, white text, 1px rgba(0,0,0,0.15) border, 4px radius, 14px text, height 32px, padding 0 12px. Hover: flip the gradient. Active: 0 0 2px rgba(212,216,221,0.3) shadow."
• "Build a MF Cloud default button: linear-gradient(to bottom, #FFFFFF, #ECF2FD), #333333 text, 1px #D4D8DD border, 4px radius. Danger variant: same shape but #D0021B text + icon."
• "Design a MF Cloud Block: white bg, 1px #D4D8DD border, 4px radius, holding a form. Labels at 13px, inputs with #D4D8DD border focusing to #3B7DE9, helper text 12px #999999."
• "Create a MF Cloud transaction table: dense rows at 13–14px, #333333 text, alternating #F7F7F7 row tint, 1px #D4D8DD separators, financial figures right-aligned tabular."

Iteration Guide

1. Blue gradient primary (#3B7DE9→#0054AC) — one per screen, and keep the gradient.
2. Text is #333333, not black. Secondary #999999.
3. Danger lives in text/icon (#D0021B) on a neutral button — red fill is reserved.
4. Noto Sans JP first, full native fallback chain.
5. 4px radius everywhere — businesslike, never 8px+.
6. Dense type scale — 14px working default; don't inflate.
7. Curated palette only — royalBlue/cobalt/linkWater/solitude; no ad-hoc hexes.
8. Gradients carry depth, not drop shadows.

Governance

Known Gaps

• Contrast, button-disabled. Text #999999 on #d4d8dd measures 1.99:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.