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.4.0] Styles and components have been added, modified or updated

Version 1.4.0 has been published. The additions, fixes, and updates made this time are as follows.

New Style color 2.0 added

Note: You can continue to use the existing "color" guides.

Overview

  • We have updated the color code and added it to the Color Guide, which can be used for various services.
  • "Color 2.0" aims to enable designers to flexibly build a color scheme suitable for each service.
  • We revised the definition of color usage, including semantic and link colors.
  • Colors added or changed in "Primitive Colors 2.0" are available from Color Style in the Figma Library. In addition, from the viewpoint of accessibility, a reference display of the Trust ratio of colors has been added.

Screen capture of the entire Color 2.0. From top to bottom, we present the key colors, common colors, functional colors, accent colors, semantic colors, neutral colors, and primitive colors 2.0.

New Style elevation added

Overview

  • Elevation is a visual effect in which an element, such as a button or card, casts a shadow over the surface beneath it, for example, using a drop shadow. This makes the element appear to float slightly from the background, creating a sense of vertical depth and separation (elevation).
  • We provide the concept of elevation and necessary guidelines to be set so that the level appropriate for each service can be systematized.

Elevation Screen Capture

Added [New Component] notation banner

Overview

  • This notification banner is used when the site / service presents important information related to the entire site / service or on a page or element basis to the user regardless of the user's action. It is possible to request user action on the notification. It is possible to respond to requests for notification of maintenance or notification of information that needs to be addressed by the user.
    *Use the "Snack Bar" component for requests such as status notifications for every user action (planned for 1.4.1).
  • We specified components for different notification purposes using the semantic color of the color revision.
  • Guidelines for use and implementation are provided.

Notification Banner Screen Capture

[New Component] Added emergency banner

Overview

  • An emergency banner is a component that occupies the first view and alerts the user even if it interrupts the communication that should be made on the website. It is used for urgent announcements, for example, when an event that affects the life or property of the user occurs and it is necessary to notify immediately. An emergency banner is a component that transmits messages more quickly, and is styled with the highest priority on ensuring that all users are aware of the implementation in the simplest structure.
  • Guidelines for use and implementation are provided.

Emergency Banner Screen Capture

Added New Component resource list

Overview

  • The resource list displays a list of objects that consist of multiple pieces of common optional information.
    It supports the request to display a list of the status of multiple objects.
  • Component variations and usage guidelines are provided for a variety of applications.

Screen Capture of Resource List

Added [New Component] progress indicator

Overview

  • A progress indicator signals that processing is in progress for a user action. You might want to tell the user that you are waiting for a response to a data retrieval request.
  • Circular and linear styles are provided for each use, and parts and prototypes are provided for creating animations.
  • Guidelines for use and implementation are provided.

Progress indicator screen capture

The following are the changes / modifications made this time.

Modify Style Color

  • The chip of the color chart 900 of Sea of primitive color was the same color as 800, so this was corrected.
    Screen captures of the Sea color chart for primitive colors before and after the change

Modify Style typography

  • Corrected the example of "When indentation is provided" in "Bullet" (corrected indentation and bullet)
    Screen captures before and after typography changes

Modify Component button

Fixes (This fix was made shortly after the release of version 1.3.4.)

The button component of the old ver. 1.3.3 has been added as an archive component.

After updating design system version 1.3.4, we received a report that updating the design system library in the file we were working on caused some layers in the button component (such as text and size) to revert to the default component. We have made changes to design system version 1.3.4 and updated the library and Figma Community files to version 1.3.5.

  • Button components from design system version 1.3.3 are returned as archived components. They are not visible in the library because they have been archived, but buttons created from version 1.3.3 or earlier button components that have been modified in the working file are not updated and the changes are retained.
    Screen captures before and after button changes

Modify Component dividers (Menu List, Mobile Menu, Accordion

Modified parts
  • You have set the color of the lightest divider component to Sumi-500 (con Trust ratio of 3:1 or higher). This will change the divider to Sumi-500 in other components that use the divider component.
    Screen captures before and after divider change

Design Data

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

Figma Community