DESIGN.md · Analysis

CBRJ Relocation Services

cbr-japan.com · 25 May 2026 · 47 colors · Noto Sans JP

CBRJ Relocation Services

A professional relocation platform for foreign workers in Japan, combining institutional trust with warm, accessible design. The brand bridges corporate formality and human-centered service through a dual-accent color system.

Colors

surface#ffffff

surface-dim#f8f9fa

surface-bright#ffffff

surface-container-lowest#f0f2f5

surface-container-low#e9ecef

surface-container#dbecf6

surface-container-high#d0d0d0

surface-container-highest#bdbdbd

on-surface#111827

on-surface-variant#6b7280

inverse-surface#1f2937

inverse-on-surface#f3f4f6

outline#9ca3af

outline-variant#d1d5db

surface-tint#dbecf6

primary#003d8a

on-primary#ffffff

primary-container#d0e3f7

on-primary-container#001d47

inverse-primary#5b9eff

secondary#bc002d

on-secondary#ffffff

secondary-container#ffd9e0

on-secondary-container#5a0015

tertiary#c04646

on-tertiary#ffffff

tertiary-container#f5d5d5

on-tertiary-container#601515

error#d32f2f

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#d0e3f7

primary-fixed-dim#a8c8e8

on-primary-fixed#001d47

on-primary-fixed-variant#002d6a

secondary-fixed#ffd9e0

secondary-fixed-dim#ffb3c1

on-secondary-fixed#5a0015

on-secondary-fixed-variant#8a0024

tertiary-fixed#f5d5d5

tertiary-fixed-dim#e8b5b5

on-tertiary-fixed#601515

on-tertiary-fixed-variant#8a2e2e

background#ffffff

on-background#111827

surface-variant#e9ecef

Typography

display: fontFamily: Noto Sans JP · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Noto Sans JP · fontSize: 40px · fontWeight: 700 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Noto Sans JP · fontSize: 32px · fontWeight: 700 · lineHeight: 40px · letterSpacing: -0.01em
title-lg: fontFamily: Noto Sans JP · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: 0.05em
body-lg: fontFamily: Noto Sans JP · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.02em
body-md: fontFamily: Noto Sans JP · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Noto Sans JP · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Noto Sans JP · fontSize: 13px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

CBRJ Relocation Services is a professional housing and relocation platform designed for foreign workers and international talent entering Japan. The brand embodies 'Institutional Warmth'—a design philosophy that combines corporate credibility (deep navy blues, structured layouts) with human accessibility (warm accent reds, illustrated communities, conversational typography). The UI evokes trust through precision while remaining approachable; every interaction feels guided by a knowledgeable partner rather than a faceless bureaucracy. The emotional response is one of reassurance: complex relocation logistics are transformed into a clear, step-by-step journey. Voice: professional yet personable, precise without jargon, solution-focused. Example: 'Your housing is arranged before you arrive—we handle the paperwork, you focus on settling in.'

Colors

The color system uses a dual-accent strategy: Primary (#003D8A, deep institutional blue) conveys trust, authority, and professional competence—used for navigation, secondary CTAs, and structural elements. Secondary (#BC002D, vibrant crimson-red) is the brand's signature accent, reserved for primary CTAs, key highlights, and emotional emphasis—this is the color users click on. Tertiary (#C04646, warm rust-red) provides a softer alternative for supporting elements and hover states. The gradient badge (linear-gradient(to right, #003D8A, #546EB2, #BC696C)) bridges both accents and signals premium service. Surface colors range from pure white (#ffffff) for primary content areas to soft grays (#dbecf6, #e9ecef) for containers and secondary surfaces. On-surface text (#111827) maintains 7:1 contra

Typography

The type system is built on Noto Sans JP, a humanist sans-serif optimized for Japanese and Latin scripts, ensuring clarity across multilingual contexts. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks, commanding attention without aggression. Headline-lg (40px, 700 weight) and headline-md (32px, 700 weight) structure content hierarchy and are used for section titles. Title-lg (28px, 600 weight) bridges headlines and body copy, appearing in card titles and subsections. Body-lg (18px, 400 weight, 0.02em tracking) and body-md (16px, 400 weight, 0.01em tracking) form the reading layer; the 0.01–0.02em positive letter-spacing improves legibility in Japanese text and creates a spacious, premium feel. Label-md (14px, 600 weight) and label-sm (1

Layout

The layout follows a mobile-first, fluid-to-fixed progression. On mobile (< 481px), the container is full-width with 15px horizontal padding, creating a 24px gutter. At tablet (481px–1023px), the max-width becomes 750px with centered alignment. At desktop (1024px+), the max-width expands to 1200px with 24px gutters. The hero section uses a full-bleed background image (background-size: 100%, background-position: top -10px center) with a minimum height of 530px on mobile, scaling to 600px+ on larger screens. Section spacing follows a consistent rhythm: 60px padding-top/bottom on mobile, scaling to 80px on desktop (lg spacing token). The grid model is 12-column, though most sections use a single-column or two-column layout for clarity. White-space is generous—the hero's CTA wrap uses flex-wra

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base): No shadow; elements sit on the surface (#ffffff) or surface-container (#dbecf6). Level 2 (Standard Cards & Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on cards, input fields, and dropdown panels; background-color shifts to surface-container-low (#e9ecef). Level 3 (Primary CTAs & Elevated Surfaces): box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), applied to primary buttons and hero badges; this stronger shadow (25% opacity vs. 15%) signals actionability and importance.

Shapes

The shape philosophy is 'Structured Warmth'—combining sharp, professional corners with selective rounding to humanize key interactive elements. Buttons use rounded.lg (15px border-radius), a moderate curve that feels approachable without being playful; this applies to primary CTAs, secondary buttons, and hero action elements. Input fields and standard cards use rounded.DEFAULT (8px) or rounded.md (10px), maintaining a clean, business-like appearance. The hero subtitle badge uses rounded.lg (15px) to match button styling, creating visual cohesion. Dropdown panels and modals use rounded.md (4px–

Components

Action Elements Buttons are the primary interaction mechanism. The primary CTA (button-primary) uses secondary red (#BC002D) background with white text, 17px vertical padding, 15px horizontal padding, 15px border-radius, and box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25). On hover, the background transitions to primary blue (#003D8A) with transition: all 0.3s ease, signaling a state change. The secondary button (button-secondary) inverts this: white background, primary blue text, 1.5px solid border in primary blue, and on hover shifts to primary blue background with white text. The outline button (button-outline) uses transparent background, secondary red text, 1.5px border, and on hover fills with secondary-container (#ffd9e0) to maintain the red accent family. All buttons use label-md ty

---
version: alpha
name: CBRJ Relocation Services
description: >-
  A professional relocation platform for foreign workers in Japan, combining institutional trust with warm, accessible
  design. The brand bridges corporate formality and human-centered service through a dual-accent color system.
logo:
  src: https://www.cbr-japan.com/wp-content/uploads/2022/03/logo_cbrj_black.svg
colors:
  surface: '#ffffff'
  surface-dim: '#f8f9fa'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f0f2f5'
  surface-container-low: '#e9ecef'
  surface-container: '#dbecf6'
  surface-container-high: '#d0d0d0'
  surface-container-highest: '#bdbdbd'
  on-surface: '#111827'
  on-surface-variant: '#6b7280'
  inverse-surface: '#1f2937'
  inverse-on-surface: '#f3f4f6'
  outline: '#9ca3af'
  outline-variant: '#d1d5db'
  surface-tint: '#dbecf6'
  primary: '#003d8a'
  on-primary: '#ffffff'
  primary-container: '#d0e3f7'
  on-primary-container: '#001d47'
  inverse-primary: '#5b9eff'
  secondary: '#bc002d'
  on-secondary: '#ffffff'
  secondary-container: '#ffd9e0'
  on-secondary-container: '#5a0015'
  tertiary: '#c04646'
  on-tertiary: '#ffffff'
  tertiary-container: '#f5d5d5'
  on-tertiary-container: '#601515'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#d0e3f7'
  primary-fixed-dim: '#a8c8e8'
  on-primary-fixed: '#001d47'
  on-primary-fixed-variant: '#002d6a'
  secondary-fixed: '#ffd9e0'
  secondary-fixed-dim: '#ffb3c1'
  on-secondary-fixed: '#5a0015'
  on-secondary-fixed-variant: '#8a0024'
  tertiary-fixed: '#f5d5d5'
  tertiary-fixed-dim: '#e8b5b5'
  on-tertiary-fixed: '#601515'
  on-tertiary-fixed-variant: '#8a2e2e'
  background: '#ffffff'
  on-background: '#111827'
  surface-variant: '#e9ecef'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 4px
  DEFAULT: 8px
  md: 10px
  lg: 15px
  xl: 20px
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1200px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 4px 10px rgba(0, 0, 0, 0.25)
layout:
  containerMaxWidth: 1200px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 17px 15px
    height: 48px
    boxShadow: 0 4px 10px rgba(0, 0, 0, 0.25)
  button-primary-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    transition: all 0.3s ease
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 17px 15px
    height: 48px
    border: 1.5px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    transition: all 0.3s ease
  button-outline:
    backgroundColor: transparent
    textColor: '{colors.secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 0 18px
    height: 40px
    border: 1.5px solid {colors.secondary}
  button-outline-hover:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.secondary}'
    transition: all 0.3s ease
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    transition: background-color 0.3s ease
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.outline-variant}
  badge-primary:
    backgroundColor: 'linear-gradient(to right, #003D8A, #546EB2, #BC696C)'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.lg}'
    padding: 5px 10px 7px 10px
    boxShadow: 0 4px 10px rgba(0, 0, 0, 0.25)
  hero-subtitle:
    background: 'linear-gradient(to right, #003D8A, #546EB2, #BC696C)'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.lg}'
    padding: 5px 10px 7px 10px
    boxShadow: 0 4px 10px rgba(0, 0, 0, 0.25)
    display: inline-block
  nav-link:
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    padding: 10px 0
    textDecoration: none
  nav-link-hover:
    opacity: '0.7'
    transition: opacity 0.3s ease
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction mechanism. The primary CTA (button-primary) uses secondary red (#BC002D) background with white text, 17px vertical padding, 15px horizontal padding, 15px border-radius, and box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25). On hover, the background transitions to primary blue (#003D8A) with transition: all 0.3s ease, signaling a state change. The secondary button (button-secondary) inverts this: white background, primary blue text, 1.5px solid border in primary blue, and on hover shifts to primary blue background with white text. The outline button (button-outline) uses transparent background, secondary red text, 1.5px border, and on hover fills with secondary-container (#ffd9e0) to maintain the red accent family. All buttons use label-md ty

Edit, then copy or download.