Design System Preview
freee.co.jp

DESIGN.md から抽出したデザイントークンのカタログ。freee Vibes Design System およびコーポレートサイトの computed style 実測値に基づく。

詳しく見る DESIGN.md を読む

01 / Colors

カラーパレット

Primary(ブランド)
Primary Blue
#2864f0
CTA・リンク・アクティブ
Primary Hover
#285ac8
ホバー時
Primary Dark
#1e46aa
h3 見出し・プレス時
Primary Darkest
#143278
最も暗いブルー
Blue Scale
Blue 50
#ebf3ff
Blue 100
#dce8ff
Blue 200
#aac8ff
Blue 300
#73a5ff
Blue 500
#2864f0
Blue 600
#3264dc
Blue 700
#285ac8
Blue 800
#1e46aa
Blue 850
#23418c
Blue 900
#143278
Semantic(意味的な色)
Danger
#dc1e32
エラー・削除
Warning
#ffb91e
警告・注意
Success
#00963c
成功・完了
Orange
#fa6414
通知・アクセント
Neutral(テキスト)
Text Heading
#323232
見出し・強調テキスト
Text Body
#595959
body デフォルト
Text Muted
#8c8989
プレースホルダー・ラベル
Heading Blue
#1e46aa
h3・キャプション強調
Surface & Border
White
#ffffff
コンポーネント背景
Background Light
#f7f5f5
カード・セクション背景
Background Lighter
#f0eded
軽いグレー背景
Border
#e9e7e7
区切り線・ボーダー
Input Border
#cccccc
フォーム入力枠(実測)

02 / Typography

タイポグラフィ階層

ヒーロー見出し — H2 Hero (40px)
40px / 500 / line-height: 1.5 / letter-spacing: 0.04em / color: #323232コーポレートサイト
セクション見出し — H2 (34px)
34px / 500 / line-height: 1.5 / letter-spacing: 0.04em / color: #323232コーポレートサイト
ブルー見出し — H2 Blue (24px)
24px / 500 / line-height: 1.5 / letter-spacing: normal / color: #2864f0コーポレートサイト
サブ見出し — H3 (24px)
24px / 500 / line-height: 1.5 / letter-spacing: normal / color: #1e46aa (Primary Dark)コーポレートサイト
ラベル強調 — Label (18px)
18px / 700 / line-height: 1.5 / color: #2864f0コーポレートサイト
本文テキスト — 業務をシンプルにする。freee は会計・人事労務・申告などのバックオフィス業務を、クラウドで効率化するサービスです。
16px / 400 / line-height: 1.5 / color: #595959 (Text Body)コーポレートサイト
ナビゲーションリンク — Nav Link (14px)
14px / 400 / line-height: 1.5 / color: #323232ヘッダーナビ
キャプション強調 — Caption (12px)
12px / 700 / line-height: 1.5 / color: #1e46aaコーポレートサイト
Vibes プロダクトUI フォントスタック
プロダクトUIサンプル — 0.875rem (14px) / 400 / line-height: 1.5。システムフォント(-apple-system, ヒラギノ角ゴ ProN)を使用。
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Kaku Gothic ProN, Arial, MeiryoVibes

記事組版サンプル

請求書・経費精算を効率化する方法

バックオフィス業務の中でも、請求書の作成・送付と経費精算は多くの企業で手作業が残る領域です。クラウド会計ソフトを導入することで、これらの業務を大幅に効率化できます。

クラウド会計による自動化

銀行口座やクレジットカードの明細を自動取得し、仕訳を推測して入力する機能により、手入力の工数を最大80%削減できます。AIが学習した仕訳パターンにより、精度は使うほど向上します。

経費精算のワークフロー

従業員がスマートフォンで領収書を撮影すると、OCRが金額・日付・取引先を自動認識します。承認フローもオンラインで完結するため、紙の回覧や押印が不要になります。

導入効果

月次決算の早期化、人的ミスの削減、リアルタイムな経営数値の可視化。これらの効果により、経理担当者は分析や戦略立案などの付加価値業務に集中できるようになります。

※ freee会計の導入企業アンケート結果より(2025年調査)

04 / Buttons

ボタンバリエーション

無料で始める
Primary CTA
radius: 8px / border: 2px
詳しく見る
Secondary
radius: 5px / border: 1px
削除する
Danger
radius: 8px
保存する
Success
radius: 8px
ピル型ボタン
Pill (Vibes)
radius: 99rem

05 / Cards

カードコンポーネント

freee会計

日々の記帳から決算・申告まで、会計業務をまるごとクラウドで効率化。銀行口座やクレジットカードと連携し、自動で仕訳を作成します。

詳しく見る

freee人事労務

勤怠管理、給与計算、年末調整、入退社手続きをワンストップで。労務管理のペーパーレス化を実現します。

詳しく見る

freee申告

法人税・消費税の電子申告に対応。会計データから申告書を自動作成し、e-Taxでそのまま提出できます。

詳しく見る
shadow: 0 0 1rem rgba(0,0,0,0.1), 0 0.125rem 0.25rem rgba(0,0,0,0.2) / radius: 0.75rem (12px) / Vibes dual shadow

06 / Forms

フォーム要素

デフォルト — border: 1px solid #cccccc, radius: 4px
フォーカス — border: #2864f0 (Primary Blue)
エラー — border: #dc1e32 (Danger)

07 / Elevation — Vibes デュアルシャドウ

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Card
0 0 1rem rgba(0,0,0,0.1),
0 0.125rem 0.25rem rgba(0,0,0,0.2)
Floating
0 0 1.5rem rgba(0,0,0,0.1),
0 0.25rem 0.5rem rgba(0,0,0,0.2)
Popup
0 0 2rem rgba(0,0,0,0.1),
0 0.375rem 0.75rem rgba(0,0,0,0.2)
Transition: 0.2s(インタラクティブ)/ 0.3s(フェード)

08 / Layout — Spacing & Radius

レイアウト

Spacing Scale(4px ベース)
XS
4px
S
8px
Base
16px
L
24px
XL
32px
XXL
48px
Border Radius Scale
4px
8px
12px
16px
24px
99rem
Container
Max Width 70rem (1120px)