MOBAPRO PRODUCT LANGUAGE
Mobapro Design System
Foundations, reusable components, and data-visualization patterns for Mobapro analytics and management experiences.
PRODUCT
MOBAPRO
RELEASE
v1.0
LIBRARY
DESIGN SYSTEM
01–05
Foundations
Type, color, spacing, border, icons
06–13
Components
Actions, forms, controls, states
14–19
Data & Analytics
Rankings, tables, charts, KPIs
FOUNDATIONS
Core visual language
The shared decisions that keep Mobapro interfaces legible, recognizable, and consistent across analytics and management surfaces.
01
Typography
Typography styles designed for multilingual data-heavy interfaces across iOS, Android, web, and Japanese environments.
Alphabet / iOS
Hiragino Sans W3–W6
Aa
Hiragino Sans W3
Type / Alphabet / Regular
Aa
Hiragino Sans W4
Type / Alphabet / Medium
Aa
Hiragino Sans W5
Type / Alphabet / SemiBold
Aa
Hiragino Sans W6
Type / Alphabet / Bold
Japanese / Android
Noto Sans JP
Aa
Noto Sans JP Regular
Type / Japanese / Regular
Aa
Noto Sans JP Medium
Type / Japanese / Medium
Aa
Noto Sans JP Bold
Type / Japanese / Bold
Type scale comparison
Responsive platform mapping
Token
Alphabet / iOS
Japanese / Android
Usage
Type / H1
30pt / Hiragino W6
30pt / Noto Sans JP Bold
Page heading
Type / H2
26pt / Hiragino W6
26pt / Noto Sans JP Bold
Section heading
Type / H3
20pt / Hiragino W5
24pt / Noto Sans JP Bold
Component heading
Type / Default
18pt / 16pt
16pt
Main content
Type / Notes 1
15pt
14pt
Supporting content
Type / Notes 2
12pt
12pt
Labels and metadata
Type / Notes 3
12pt
—
Compact UI annotation
02
Color System
A semantic color system for brand identity, charts, rankings, statuses, labels, feedback, and interface hierarchy.
Color Ratio
Interface distribution
White and pale blue-gray form the canvas; deep blue carries identity; cyan and semantic accents support data and state.
Color / Primary / Blue
#116ACC
Brand, links
Color / Primary / Cyan
#06B0C3
Support accent
Chart / Cyan
#06B0C3
Series A
Chart / Cyan / Soft
#C7F3F8
Series A fill
Chart / Blue
#116ACC
Series B
Chart / Blue / Soft
#E3EBFF
Series B fill
Chart / Yellow
#E0C200
Series C
Chart / Yellow / Soft
#FFF8CB
Series C fill
Chart / Pink
#EA6278
Series D
#FBD5DC
Series D fill
Chart / Green
#00B976
Positive series
Chart / Green / Soft
#CDF2E1
Positive fill
Semantic interface tokens
Color / role / usage
Text / Primary
#263342
Headings, values
Text / Secondary
#5D6B7A
Body copy
Text / Tertiary
#8793A1
Metadata
Text / Disabled
#BDBDBD
Unavailable content
Text / Inverse
#FFFFFF
On dark surfaces
Status / Error
#E45D55
Errors, destructive
Status / Error / Soft
#FCE0DE
Error background
Label / Neutral
#EEF1F4
Neutral tags
Border / Default
#DDE6F0
Dividers, inputs
Background / Default
#F1F6FC
Page canvas
Surface / Default
#FFFFFF
Cards, overlays
03
Spacing & Layout
Reusable spacing and layout rules to maintain consistency across dashboards and mobile interfaces.
Space / 4
Space / 8
Space / 12
Space / 16
Space / 24
Space / 32
Space / 40
Space / 48
Space / 64
Icon padding
4–8px
Optical breathing room inside compact controls
Form spacing
12–16px
Fields, labels, control groups
Card padding
24–32px
Default card inset and section rhythm
Section spacing
40–64px
Desktop page groups and dashboard grid
Layout rules
12-column desktop / 4-column mobile
Mobile padding
16px
Desktop page padding
40px
Card gap
16px
Data-table spacing
12px rows / 16px cells
Dashboard grid
12 columns / 24px gutter
04
Border & Radius
Borders separate dense information without visual noise; radii align with current Mobapro controls and containers.
Border / Default
1px
Border / Focus
2px
Border / Error
1px
Border / Selected
2px
Radius / Small
4px
Radius / Medium
8px
Radius / Large
12–16px
Radius / Pill
999px
05
Iconography
Reusable interface icons for navigation, editing, analytics, menus, and actions.
Icon anatomy
Full size 24px / margin 2px / stroke 2px
24 × 24px icon frame
2px optical margin · 2px stroke
Color states
Mobapro / Icon / Default
Default
Active
Disabled
Footer
Web Coupon
Delete
Cancel
Features
Menu
COMPONENTS
Reusable interface building blocks
Production patterns for actions, forms, controls, containers, labels, and async system behavior.
06
Buttons
Reusable action components for primary, secondary, destructive, and data-interaction flows.
Current Mobapro long button
Existing component states
Button
Default
Button
Outline
Button
Hover
Button
Pressed
Button
Disabled
Mobapro / Button / Primary, Secondary
Outline, Ghost, Destructive, Disabled
Primary
Secondary
Outline
Ghost
Delete
Disabled
Loading…
Large
Medium
Small
07
Text Fields
Text-input patterns for login, registration, settings, and forms.
Mobapro / Input / Default, Focus, Error
Filled and Disabled included
Store name
Placeholder
Store name
渋谷ストア
Store name
渋谷ストア
Focused input
Email *
invalid@
Enter a valid email address.
Password
••••••••••
8 or more characters
Store ID
MBP-1048
Registration input
Required field
Account name *
Enter account name
Opening date
2026 / 10 / 02
Textarea
Settings and notes
Add a note for the store team…
0 / 300
Image upload
Registration media
Upload image
PNG or JPG · 5MB max
08
Dropdowns & Pickers
Compact selection controls for reporting periods, coupon dates, and operating times.
Year and month dropdowns
Default · Focused · Filled · Disabled
Year
2026
Month
October
Period
All periods
日別
時間別
月別
Coupon date setting
Existing Mobapro picker pattern
キャンセル
選択
Date picker
Start / End
Start date
2026 / 10 / 01
—
End date
2026 / 10 / 31
Time picker
Start / End
Start time
09 : 00
—
End time
21 : 00
09
Selectors & Controls
Selection patterns use current Mobapro blue for active states and remain legible when disabled.
Radio
Selected / Unselected / Disabled
Selected option
Unselected option
Disabled option
Checkbox
Mobapro / Checkbox / Checked
Checked option
Unchecked option
Disabled option
Toggle
Mobapro / Toggle / On
Default
Checked
Disabled
10
Status & Labels
Semantic labels communicate information without relying on color alone.
Strong and soft labels
Info · Success · Warning · Error · Neutral
Info
Success
Warning
Error
Neutral
Info
Success
Warning
Error
Neutral
Existing status labels
Mobapro / Status / Error
新規作成
実施中
実施予定
実施済み
下書き
11
Filters
Filters narrow analytical views without obscuring active scope or reset behavior.
Analytics filter card
Default · Selected · Multiple active · Clear / Reset
Date range
Oct 1 – Oct 31
Store
3 selected
Staff
All staff
Payment
Card, QR
Category
Food
Active:
渋谷ストア
新宿ストア
Card
Food
Reset all
Clear
Apply filters
12
Feedback States
Clear feedback keeps data retrieval, updates, errors, and empty results understandable and actionable.
Empty
No data available.
Adjust filters
Loading
データ取得中
Error
Data retrieval failed.
Try again
Success
Update completed.
No Search Result
No matching results.
Clear search
Mobapro loading treatment
Loading / Data Retrieval
