Design System
freee logo

freee

freee is Japan's leading cloud accounting / HR / payroll SaaS, and its design system Vibes is fully open-source at github.com/freee/vibes. The token files (stylesheets/lv0/_colors.scss, _size.scss, _fonts.scss) form a clean, semantic, three-tier architecture: scale tokens ($vbColorsP01–P10 for primary blues

01

Color Palette

Accent

Neutrals

Semantic

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 600 · 1.25
Design at scale
34px34px · 600 · 1.25
Section heading
heading-lg24px · 600 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
Inter
Open · OFL
Designed by Rasmus Andersson. Variable font with full weight range.
Install via Google Fonts
Fallback
freee-logo` from Google Fonts.
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
Primary
Apple System (Blink)
Systemno install needed
Chrome alias for Apple system font on macOS.
Not publicly distributed.
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycomfortable
Base unit4px
Section gap32px
Card padding16px
Element gap8px

Border Radius

ElementValuePreview
buttons4px
inputs4px
cards4px
dialogs4px
badges4px

Elevation

Shadow 1
Shadow 2
Shadow 3
Shadow 4
Shadow 5
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • Use the three-tier token system: scale ($vbColorsP07) → semantic ($vbPrimaryColor) → component-level. Always reference semantic over scale where possible.
  • lead with $vbPrimaryColor (#285ac8) for brand actions and links. It's the same value — links should match buttons in this system.
  • Use the named font-size tokens ($vbHeadline1FontSize, $vbNormalFontSize) instead of raw rem values. The 5-step scale is the contract.
  • apply $vbLineHeight: 1.5 universally. Japanese readers need generous vertical breathing room.
  • Use the locale font stack with -apple-system first and Hiragino/Meiryo CJK fallbacks. The brand freee-logo font is for the wordmark only.
  • snap to the 4dp spacing scale (4 / 8 / 16 / 24 / 32 / 48). Never use intermediate values like 6, 10, or 14.
  • Use the named z-index tokens ($vbModalZIndex, $vbPopupZIndex, etc.). The hierarchy spans 100 → 4000 with deliberate gaps.
  • Use status colors with the matching family (e.g., RE02 bg + RE05/RE07 text for alerts).

Don't

  • invent new color values. The 9 hue scales × 5-10 shades cover virtually any need.
  • Use bright accent blue ($vbAccentColor: #73a5ff) as a primary CTA. It's reserved for hover states and secondary emphasis.
  • Use display sizes above 24dp. freee is enterprise SaaS — restraint is the voice.
  • invent custom shadow values — use $vbCardShadow, $vbFloatingShadow, $vbPopupShadow for the three elevation tiers.
  • Use arbitrary z-index values like 9999 — that breaks the layered system.
  • mix hue families in a single status badge (e.g., never red bg with orange text).
05

Components

Buttons

Primary
Background`#285ac8` (`$vbPrimaryColor`)
Text`#ffffff`
Radius4px
Padding8px 16px (basic) — small `4px 16px`, large `12px 24px`
Font14px / 500-700
Disabledoverlay `rgba(0,0,0,0.12)` (`$vbThinScrimColor`)
Height36px (`$vbFormControlHeight`)
Use: Primary CTAs, brand actions
Small
Background`#285ac8`
Text`#ffffff`
Radius4px
Padding4px 16px
Font14px / 500
Height24px (`$vbFormControlSmallHeight`)
Use: Compact buttons in dense tables
Large
Background`#285ac8`
Text`#ffffff`
Radius4px
Padding12px 24px
Font16px / 700
Height48px (`$vbFormControlLargeHeight`)
Use: Hero CTAs, mobile-friendly forms
Accent
Background`#73a5ff` (`$vbAccentColor`)
Text`#ffffff`
Radius4px
Padding8px 16px
Use: Hover/secondary brand actions

Inputs

Default
Background`#ffffff`
Text`#323232` (`$vbBlackColor`)
Border1px solid `#8c8989` (`$vbBaseColor3`)
Radius4px
Padding8px 12px
Focusborder `#285ac8` (`$vbPrimaryColor`)
Height36px (`$vbFormControlHeight`)
Errorborder `#dc1e32` (`$vbAlertColor`); helper text in same red
Use: Standard form input
Small
Background`#ffffff`
Border1px solid `#8c8989`
Radius4px
Height24px
Use: Compact inputs, dense tables

Cards

Standard Panel
Standard Panel
Background`#ffffff`
Border1px solid `#e9e7e7` (`$vbBaseColor2`)
Radius4px
Padding16px (`$vbBasicSize`)
Use: Default card / panel surface
Subtle Panel
Subtle Panel
Background`#f7f5f5` (`$vbColumnColor`)
Border1px solid `#e9e7e7`
Radius4px
Padding24px (`$vbLargeSize`)
Use: Subtle differentiation panel

Badges

Success
Success
Background`#cdebd7` (GR02)
Text`#006e2d` (GR07)
Radius4px
Padding2px 8px
Font12px / 500
Use: Success / confirmation status
Alert
Alert
Background`#fad2d7` (RE02)
Text`#dc1e32` (RE05 / `$vbAlertColor`)
Radius4px
Padding2px 8px
Font12px / 500
Use: Errors, destructive states
Notice
Notice
Background`#fff0d2` (YE02)
Text`#be8c14` (YE07 / `$vbNoticeColor`)
Radius4px
Padding2px 8px
Font12px / 500
Use: Warnings, notices
Info
Info
Background`#dce8ff` (P02)
Text`#285ac8` (P07)
Radius4px
Padding2px 8px
Font12px / 500
Use: Informational status