DESIGN.md から抽出したデザイントークンのカタログ。14px ベースの業務ツール型タイポグラフィ、ヒラギノ角ゴ Pro 優先のフォントスタック、weight 500 の見出し階層を可視化。
毎月の収入と支出を正確に記録することで、お金の流れが見えるようになります。マネーフォワードでは、銀行口座やクレジットカードと連携して、自動で家計簿を作成します。
銀行口座、証券口座、ポイント、電子マネーなど、複数の資産を一つの画面で確認できます。総資産の推移をグラフで可視化し、資産形成の進捗を把握しましょう。
カテゴリごとに予算を設定し、支出が予算を超えそうな場合はアラートで通知します。食費、交通費、日用品など、どこにお金を使っているかを分析できます。
| 日付 | 内容 | カテゴリ | 金額 |
|---|---|---|---|
| 04/01 | 給与振込 | 収入 | +350,000 |
| 04/03 | 家賃引き落とし | 住宅 | -95,000 |
| 04/04 | スーパーマーケット | 食費 | -4,280 |
| 04/05 | 電気料金 | 光熱費 | -8,650 |
| 04/05 | 交通系ICチャージ | 交通費 | -3,000 |
| 04/06 | 投資信託 積立 | 投資 | -33,333 |
給与、副業収入、配当金などの合計です。先月比 +12,000円。
固定費と変動費の合計です。予算 200,000円 に対して残り 13,570円。
| 項目 | マネーフォワード | freee |
|---|---|---|
| ブランドカラー | #4db848 (Green) | #2864f0 (Blue) |
| 本文 font-size | 14px（業務ツール的） | 16px（標準的） |
| line-height | 1.5 (21px) | 1.7 (27.2px) |
| 見出し weight | 500 (medium) | 700 (bold) |
| 和文フォント | ヒラギノ角ゴ Pro 優先 | Noto Sans JP / ヒラギノ角ゴ ProN |
| 欧文フォント | 和文フォント内蔵 | Helvetica Neue 先頭 |
| palt | 未使用 | 見出しで使用 |
| CSS Custom Properties | なし | Vibes Design System で使用 |
| border-radius | 4px（角張った印象） | 8px（やわらかい印象） |
| デザインシステム | 従来型CSS | Vibes（体系化済み） |