--- id: money-forward name: Money Forward country: JP category: fintech homepage: "https://moneyforward.com" primary_color: "#3B7DE9" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=moneyforward.com&sz=128" verified: "2026-05-19" omd: "0.1" ds: name: Money Forward Cloud UI url: "https://github.com/moneyforward/cloud-react-ui" type: system description: Money Forward's open-source React component library and theme tokens for the Money Forward Cloud business suite — buttons, forms, and a typed styled-components theme published on GitHub. tokens: source: prose-derived extracted: "2026-06-09" colors: primary: "#3b7de9" primary-hover: "#0054ac" brand: "#3b7de9" canvas: "#ffffff" surface: "#ecf2fd" foreground: "#333333" muted: "#999999" on-primary: "#ffffff" hairline: "#d4d8dd" error: "#d0021b" success: "#65ab51" warning-bg: "#fcf8e3" warning-text: "#8a6d3b" error-bg: "#ffeeeb" typography: family: { sans: "Noto Sans JP", mono: "Noto Sans JP" } xSmall: { size: 10, use: "Fine print, dense table footnotes" } small: { size: 12, use: "Captions, helper text" } middle: { size: 13, use: "Secondary labels, table cells" } large: { size: 14, weight: 400, use: "Body / button default" } xlarge: { size: 16, use: "Emphasized body" } xxlarge: { size: 18, weight: 700, use: "Subheadings" } xxxLarge: { size: 20, weight: 700, use: "Section headings" } xxxxLarge: { size: 24, weight: 700, use: "Page headings" } spacing: [12, 16, 52] rounded: { sm: 4, md: 4, lg: 4, full: 9999 } shadow: active: "0 0 2px rgba(212,216,221,0.3)" components_harvested: true components: button-primary: { type: button, bg: "linear-gradient(to bottom,#3b7de9,#0054ac)", fg: "#ffffff", border: "1px solid rgba(0,0,0,0.15)", radius: "4px", height: "32px", padding: "0 12px", font: "14px / 400", states: "hover gradient flips, active 0 0 2px rgba(212,216,221,0.3)", use: "Single primary action per screen" } button-default: { type: button, bg: "linear-gradient(to bottom,#ffffff,#ecf2fd)", fg: "#333333", border: "1px solid #d4d8dd", radius: "4px", font: "14px / 400", states: "hover gradient flips", use: "Secondary / cancel actions" } button-danger: { type: button, bg: "linear-gradient(to bottom,#ffffff,#ecf2fd)", fg: "#d0021b", border: "1px solid #d4d8dd", radius: "4px", use: "Destructive actions, danger in text not fill" } button-disabled: { type: button, bg: "#d4d8dd", fg: "#999999", border: "1px solid rgba(0,0,0,0.1)", radius: "4px", use: "Unavailable actions" } block: { type: card, bg: "#ffffff", border: "1px solid #d4d8dd", radius: "4px", use: "Content panel / card container" } input: { type: input, bg: "#ffffff", fg: "#333333", border: "1px solid #d4d8dd", radius: "4px", focus: "border #3b7de9", use: "Form fields" } notice-error: { type: card, bg: "#ffeeeb", fg: "#d0021b", radius: "4px", use: "Error / danger banner" } notice-warning: { type: card, bg: "#fcf8e3", fg: "#8a6d3b", use: "Caution banner" } --- # Design System Inspiration of Money Forward ## 1. 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 ## 2. Color Palette & Roles 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. ## 3. Typography Rules ### 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) | Token | Size | Typical Use | |---|---|---| | `xSmall` | `10px` | Fine print, dense table footnotes | | `small` | `12px` | Captions, helper text | | `middle` | `13px` | Secondary labels, table cells | | `large` | `14px` | Body / button default | | `xlarge` | `16px` | Emphasized body | | `xxlarge` | `18px` | Subheadings | | `xxxLarge` | `20px` | Section headings | | `xxxxLarge` | `24px` | Page headings | ### 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. ## 4. Component Stylings ### 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) ## 5. Layout Principles ### 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 ## 6. Depth & Elevation 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`) ## 7. 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. ## 8. Responsive Behavior | Width | Behavior | |---|---| | Desktop | Full Cloud app shell: left module nav + header + wide dense tables shown in full | | Tablet | Left nav collapses; tables gain horizontal scroll or column priority | | Mobile | Single column; nav becomes a drawer; tables reflow toward stacked rows; ME (consumer) app is mobile-first | ### 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 ## 9. 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. --- ## 10. 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. | Context | Tone | |---|---| | Buttons | Short JP verb — `保存`, `登録`, `次へ`. Imperative-polite, no exclamation. | | Form/field copy | Plain and concrete; explain what a figure means and what happens after submit. | | Money & dates | Always exact, always formatted (`¥`, comma-grouped, era/Gregorian dates). Never approximate. | | Empty states | Blameless; one line + one action. Never implies the user mismanaged anything. | | Errors | State cause + fix in one calm sentence; one polite acknowledgment max, no apology-flood. | | Success | Quiet confirmation (`保存しました`). The ledger being correct is the reward. | | Consumer (ME) | Slightly warmer, future-facing ("お金の見える化") — empowerment, not anxiety. | | Business (Cloud) | Slightly more formal/professional, efficiency-framed. | **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." ## 11. 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. ## 12. 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. ## 13. 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. ## 14. States | State | Treatment | |---|---| | **Empty (no transactions/data)** | White Block on light-gray page, one plain line (`#333333`) explaining what will appear, one blue-gradient primary to add the first record. No clutter. | | **Empty (filter no results)** | Calm single line in `dimGray #666666` (`該当するデータがありません` pattern); offer to clear the filter. | | **Loading (table/page)** | Skeleton rows in `whiteSmoke #F7F7F7` / `cloudGrey #EFF1F4` at final dimensions; no layout shift on data arrival. | | **Loading (inline action)** | In-button spinner; button keeps width and `4px` radius; label swaps to loading. | | **Error (field)** | Border swaps to `venetianRed #D0021B`; 12px helper text in `#D0021B`: cause + fix, one sentence. | | **Error (page/system)** | Error notice: bg `mistyRose #FFEEEB`, text `#D0021B`. States the condition plainly, offers retry. No apology-flood. | | **Success** | Quiet — success notice (text `apple #65AB51`) or inline `保存しました`. The correct ledger is the reward. | | **Disabled** | bg `linkWater #D4D8DD`, text `nobel #999999`, 1px `rgba(0,0,0,0.1)` border. Palette swap is the signal. | | **Skeleton** | Gray blocks at exact final size; never on already-known financial figures; respects reduced-motion. | | **Destructive confirm** | Modal with explicit consequence stated; the confirm action carries `venetianRed #D0021B`. Money actions are gated, never one-tap-destructive. | ## 15. 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:** | Token | Value | Use | |---|---|---| | `motion-instant` | 0ms | Toggle/checkbox commits, selection | | `motion-fast` | 150ms | Button hover gradient flip, focus ring, small reveals | | `motion-standard` | 250ms | Dropdown open, accordion, tab switch | | `motion-modal` | 300ms | Modal/dialog enter-exit | **Easings:** | Token | Curve | Use | |---|---|---| | `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | The default | | `ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | Things arriving (dropdowns, modals) | | `ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | Dismissals | **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:** 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); 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. --- Source: https://oh-my-design.kr/design-systems/money-forward · Raw twin of references/money-forward/DESIGN.md Install 440 quality-graded references for your AI coding agent: npx oh-my-design-cli install-skills