P
PAYQR Design System
Reusable foundations and interface components for PAYQR operations, settings, payment flows, and device management.
PAYQR
v1.0
DESIGN SYSTEM
OPERATIONS UI · OCT 2026
A
FOUNDATIONS
Core visual decisions that keep PAYQR operational interfaces consistent, legible, and implementation-ready.
01
Color System
Semantic colors used across PAYQR for actions, navigation, system states, forms, and feedback.
White
Light Gray
Gray
Dark Gray
Orange
Green
Cyan
Red
Color / Primary / 500
#FF5121
Primary buttons, active navigation, selected states, highlighted menu items, confirmation actions.
Color / Primary / 50
#FFE7DF
Selected sidebar rows, active navigation backgrounds, soft highlights and secondary orange surfaces.
Color / Success / 500
#20B55A
Success, available, completed and confirmed operational states.
Color / Info / 500
#00B8C8
Focused input borders, active fields and informational highlights.
Color / Error / 500
#FF0000
Validation, required indicators, warning icons, failed states and destructive feedback.
Color / Neutral / 0
#FFFFFF
Primary surfaces, cards and input backgrounds.
Color / Neutral / 50
#F7F7F7
Light and disabled backgrounds.
Color / Neutral / 100
#EEEEEE
Disabled controls and input backgrounds.
Color / Neutral / 300
#D6D6D6
Dividers and default borders.
Color / Neutral / 400
#B5B5B5
Placeholder and disabled text.
Color / Neutral / 500
#929292
Secondary icons and supporting text.
Color / Neutral / 700
#555555
Secondary text and default icons.
Color / Neutral / 900
#222222
Main text and high-emphasis content.
02
Typography
Typography styles optimized for Japanese operational interfaces and clear data-heavy workflows.
Noto Sans JP
Primary UI typeface · Japanese + Latin
会計業務
PAYQR
Regular 400
Medium 500
SemiBold 600
Bold 700
Display / Page
Type / H1
Bold · 32px
会計業務 — PAYQR Design System
Page titles and documentation covers
Section Heading
Type / H2
Bold · 24px
店舗情報 / Payment Settings
Primary page sections
Subheading
Type / H3
SemiBold · 20px
メニュー設定
Card and form group headings
Body Large
Type / Body / Large
Regular · 18px
スタッフコードを入力してください
Prominent instructions and summaries
Body
Type / Body
Regular · 16px
店舗情報と支払い設定を確認します
Default operational UI copy
Caption
Type / Caption
Regular · 14px
確定 · 入力内容を確認してください
Labels, controls and helper text
Small
Type / Small
Regular · 12px
更新日時 2025年9月1日
Metadata and compact table details
03
Spacing
A compact 4px-based scale for component internals, forms, navigation and documentation layouts.
Space / 4
4px
Space / 8
8px
Space / 12
12px
Space / 16
16px
Space / 24
24px
Space / 32
32px
Space / 40
40px
Space / 48
48px
Internal component padding
Buttons, fields, controls
12–16px
Form spacing
Label-to-field and field-to-field rhythm
16–24px
Section spacing
Documentation and application regions
24–40px
Navigation spacing
Icon-to-label and row separation
8–16px
04
Border & Radius
Borders communicate interaction state; radii keep PAYQR surfaces approachable while preserving a compact operational character.
Border tokens
State styles for inputs, selected controls and validation
Default
1px solid Neutral / 300
Focus
2px solid Info / 500
Error
2px solid Error / 500
Selected
2px solid Primary / 500
Radius tokens
Large rounded action buttons may use the pill radius
Radius / Small
4px
Radius / Medium
8px
Radius / Large
16px
05
Icons
Functional icons used across navigation, settings, forms, and device operations.
PAYQR / Icon / Default
Recommended sizes: 20px compact controls · 24px navigation and actions
Icon / Default
Icon / Active
Icon / Disabled
Payment
Staff
Refund
Discount
Store
Specification
Device
Add
Back
Calendar
Warning
Menu
B
COMPONENTS
Reusable interface patterns for operations, settings, payment flows, transaction data, and device management.
06
Buttons
Primary, secondary, outlined, disabled, and destructive actions used across PAYQR.
PAYQR / Button
Minimum width 120px · 24px horizontal padding · Medium radius · Body/Captions Bold
Large · 56
Medium · 48
Small · 40
PAYQR / Button / Primary
確定
PAYQR / Button / Secondary
次へ
PAYQR / Button / Outline
編集
PAYQR / Button / Neutral
戻る
PAYQR / Button / Disabled
確定
PAYQR / Button / Destructive
削除
Default
確定
Hover
確定
Pressed
確定
Disabled
確定
Source-linked PAYQR button recipes
Reference components preserve production proportions and interaction variants.
確定
戻る
Large
56px
確定
Medium
48px
確定
Small
40px
確定
07
Input Fields
Text, number, date, and assisted input components used across PAYQR forms.
PAYQR / Input / Default · Focus · Filled · Error · Disabled · Date
48px field height · 8px radius · 14px horizontal inset
Focus = Info / 500
Default
Text*
Text
Focused
Text*
Text
Filled
Text*
店舗コード 001
Disabled
Text
変更できません
Error
Text*
99999
入力内容を確認してください
Number · 0–9999
スタッフコード*
0〜9999
Currency / amount
金額
¥ 12,800
Store number
店舗番号
000184
Date
取引日
yyyy/mm/dd
Prefix input
T
Text input
Setting code
Text
Text
*
Text
Text
Text
*
|
Text
08
Field States
Implementation guidance that makes the visual and behavioral differences between field states immediately clear.
Empty
Label + placeholder
Text
Text
Focused
Cyan 2px border
Text
Text
Filled
Entered text
Text
PAYQR Store
Disabled
Lower contrast
Text
Not editable
Error
Red border + icon
Text
Invalid
入力内容を確認してください
Required
Red asterisk
Text*
Text
09
Selection Controls
Controls used for selecting operational states, settings, and options.
Radio
Default · Selected · Disabled
未選択
選択済み
選択済み
Checkbox
Default · Selected · Disabled
無効
有効
有効
Toggle
Default · Selected · Disabled
OFF
ON
ON
Segmented status selector
Operational state selection
未設定
有効
無効
Use a single selected value. Selected segments use Primary / 500; disabled controls reduce contrast without changing layout.
10
Navigation
Sidebar and header navigation patterns used throughout PAYQR administration and device settings.
PAYQR / Navigation / Sidebar / Default · Active
Anatomy: icon · label · row container · active indicator
Active = Primary / 50 + 500
会計業務
スタッフコード
戻し処理コード
割引コード
店舗番号
仕様
テキスト
印字文字の変更
デバイス権限
店舗情報
メニュー設定
11
Header / Top Bar
Top-level navigation for menu settings and administrative screens.
PAYQR / Header
Orange back area · page title · white top bar · horizontal divider · ARUNAS logo
Height · 80px
戻る
メニュー設定
01 Back action / 戻る
02 Page title / メニュー設定
03 Context area
04 ARUNAS brand
12
Status Controls
Compact operational status controls used in data and transaction views.
PAYQR / Status / Active · Success · Neutral · Disabled
Pill labels stay compact for tables, filters and transaction results
発行済
戻し処理済
取消済
無効
Transaction ID
取引日時
金額
Status
TX-240901-0184
2025/09/01 10:42
¥12,800
発行済
TX-240901-0183
2025/09/01 10:31
¥4,250
取消済
TX-240901-0182
2025/09/01 10:18
¥8,900
戻し処理済
TX-240901-0181
2025/09/01 09:54
¥2,100
無効
Active · Orange
Current or issued status
Success · Green
Completed or returned successfully
Neutral · Gray
Cancelled or historical
Disabled · Light gray
Unavailable or inactive
13
Cards & Containers
Surface patterns used to group actions, information, and operational content.
Surface / Default · Selected · Disabled
Padding 20–24px · Radius 8–12px · Neutral / 300 border · restrained shadow
Default
Selected
Disabled
店舗情報
Primary surface for editable settings and operational information.
Updated 2025.09.01
メニュー設定
Neutral surface for supporting groups and low-priority configuration.
Updated 2025.09.01
支払い設定
選択中
Selected card uses Primary / 500 border and soft orange feedback.
Updated 2025.09.01
デバイス権限
Disabled cards remain visible but clearly unavailable.
Updated 2025.09.01
端末接続
利用可能
Status card uses semantic feedback without changing its structure.
Updated 2025.09.01
キャンセル
変更を保存
14
Numeric Keypad
Numeric input pattern used for transaction values, codes, and device operations.
PAYQR / Keypad / Default
Number display · 0–9 · 00 · Clear C · confirm 確定
Default
Filled
Pressed
Disabled
DEFAULT · CONFIRM DISABLED
0
1
2
3
4
5
6
7
8
9
C
0
00
確定
FILLED / ACTIVE
12,800
1
2
3
4
5
6
7
8
9
C
0
00
確定
PRESSED
12,800
1
2
3
4
5
6
7
8
9
C
0
00
確定
DISABLED
0
1
2
3
4
5
6
7
8
9
C
0
00
確定
15
Date & Time Picker
Date selection pattern for transaction filters and settings.
PAYQR / Date Picker
Wheel picker with explicit cancel and select actions
Header · キャンセル / 選択
Selected rows use darker text and a neutral selection band. Inactive rows remain visible at lower contrast to communicate scroll direction. Example: 2025年 · 9月 · 1日.
SELECTED DATE
2025年 9月 1日
キャンセル
日付を選択
選択
YEAR
2024年
2025年
2026年
MONTH
8月
9月
10月
DAY
31日
1日
2日
Developer handoff
Implementation checklist for consistent PAYQR product delivery.
PAYQR
v1.0
12-column
Naming
Use PAYQR / Category / Component / Variant. Keep state names Default, Hover, Pressed, Disabled, Focus and Error.
Layout
4px spacing base. 48px default controls. 8px component radius. 16px section radius. Avoid one-off dimensions.
Accessibility
Do not rely on color alone. Pair status color with labels or icons. Preserve readable contrast and 44px targets.
Behavior
Focus uses cyan, validation uses red, selected uses orange, completed uses green. Disabled states retain structure.
