Skip to main content

This page has been translated using TexTra by NICT. Please note that the translation may not be completely accurate.
If you find any mistranslations, we appreciate your feedback on the "Request form for improving the automatic translation ".

[Version 1.3.4] Modified or updated styles and components

*Added version to title

[Style]' Layout Columns' changed to' Layout'

Overview

  • The "layout column" has been changed to "layout", and "layout (for business and management systems)" has been added separately from the general "layout".
  • We have changed the layout breakpoints and column spacing guidelines. Breakpoints have been simplified for practical needs and development efficiency.
  • The standard guideline for the maximum width of a desktop page has been changed to 1,280 px. (The guideline for the maximum width of content is 1,120 px.)
  • Layout guidelines frequently used in business and management systems have been added. The main target is the layout on the desktop where menus and drawers are deployed on the left side of the screen used on the system screen, management screen, etc.

The difference between the layout column before the change and the layout after the change is introduced.

[Style] Change "Rounded Corner" to "Corner Shape"

Overview

  • We redefined the guideline by changing the definition of "rounded corner" to "corner shape."
  • By taking a wide scope of styles, we have added guidelines to help you choose the right style for your diverse service needs.

The difference between the rounded corner before the change and the shape of the corner after the change is introduced.

[Component] button size added

Overview

  • The primary, secondary, and tertiary button sizes have been expanded to Large, Medium, Small, and X-Small, and the guidelines have been updated.
  • Set size guidelines including the minimum width for each size.
  • Changed the Status color of the button.
  • Added properties and guidelines, such as the front and back icons that accompany buttons.
  • Added layout guidelines for multiple buttons.
  • We added examples of button stylization to which "Corner Shape" and "Color" of "Style" are applied.
  • The back to top button (Pagetop), which was previously included in the Button component, has been separated as the "Scroll Top Button".

The difference between the button before the change and the button after the change is introduced.

Components Breadcrumbs have been componentized.

Overview

  • Breadcrumbs have been componentized as "Breadcrumb List".
  • Added usage guidelines for desktop and mobile.
  • We have made a guideline for dealing with long breadcrumbs that include line breaks.

It introduces the difference between the breadcrumbs before and after the change.

Other changes and amendments

Language Selector, Text Area, Global Navigation

  • Remove Unused Properties

Text Link

  • The color of Active was the same as Hover, so it was corrected.

Library (Text Styles)

  • Since "Capture" remained, it was changed to "Caption".

Divider

  • Changed the "Standard Component" statement and modified the "Margin" sample figure.

Text Link

  • Modify the scope of the focus ring frame to include the icon that opens a new window.

Design system Usage Guide

  • Unified font to Noto Sans JP

Utility Links

  • Change "Reference Example" (delete SNS related links)

Icon

  • Added "Location" icon (Material Icon)

Design Data

You can view design Figma from the Data Community provided by the design tool Figma.

Figma Community

Related Links