Structure of LINE Design System Fundamental element of LINE Design System INDEX LDS G FOR LINE GLOBAL FAMILY SERVICE Overview of LDS G Foundation Component Basic Component + Design Theme set Relationship with FE Development LDS M FOR LINE MESSENGER Foundation Basic Component and Team Component Common UX Guideline EPILOGUE FOR USER
LDSG - Design System for LINE Global Family Service Feature-type service under LINE App including Messenger function Additional features included in LINE App Design System in Native App Base Family service with independent brand in LINE ’00’ form Additional features included in LINE App Design System in the Web Base
Design are provided in these guidelines as a center of truth and as assistance to align LINE services with a unified design language. LINE Voice At LINE we bring information, services, and people closer together. Color Guidelines to help create a consistent brand experience by providing standardized color and usage guides. Typography Guidelines to help clearly distinguish information based on type scale and color. Iconography LINE icons are the most efficient tool for conveying ideas and objects to users. Layout Guidelines for margin and spacing between all screens and components used in the LINE service.
Grid includes 2px padding in top, bottom, left and right. Icons are drawn inside the padding area. The grid is based on 24x24px and can be adjusted for size and purpose. Key Shape defines the basic frame of each icon. Icons with similar proportion should be consistent. Radius Radius Radius is freely used between 0 and 2px. It is used to show the motif of the icon more effectively. It does not necessarily need to be applied to all corners in a batch. Angle Angle Angles are typically used in 45 degree increments, and 15 degrees if necessary. The default Stroke is 1.3pt and can be changed depending on the size, location and purpose of the icon. It is recommended that the stroke outlines be created to fit pixel dimensions.
75 70 65 40 45 35 30 25 20 15 10 LINE Black 60 55 50 90 100 85 95 80 75 70 65 40 45 35 30 25 20 15 10 Line White Dimmed Effect Dimmed Effect 1 Line Black 85% Dimmed Effect 2 Line Black 70% Dimmed Effect 3 Line Black 30% Lime #A5F2A5 Lime #82ED82 Lime #5FDE5F Lime #2CC939 Lime #2CAB33 Lime #257A2F Lime #1D571D Lime #BDD9BF Lime #91CF94 Lime #54BA57 Lime #35A13A Light green #93EDBF Light green #64E8A4 Light green #35DB80 Light green #15BD66 Light green #18A352 Light green #187A41 Light green #16592D Light green #BAD9C5 Light green #85C79B Light green #4BB875 Light green #2A9C5B Orange #FFCFBF Orange #FFA182 Orange #FF875C Orange #FF6F36 Orange #FF5E1F Orange #F24500 Orange #C43100 Orange #FAD3C5 Orange #FA9E7F Orange #F5765D Orange #E35F42 Teal #8EEDD9 Teal #5CE5C8 Teal #20D6BE Teal #19BFA1 Teal #14A37B Teal #137856 Teal #145E4E Teal #BAD9CF Teal #7CC9B0 Teal #46B897 Teal #24967C Amber #FFF9CC Amber #FFEB94 Amber #FFD86B Amber #FFC53D Amber #FCB321 Amber #FA9E1E Amber #F78411 Amber #FFE8C2 Amber #FFDD80 Amber #FFB55D Amber #F7821B Cyan #8CEDED Cyan #5BE3DE Cyan #26D1D1 Cyan #1CB8B8 Cyan #10A1A1 Cyan #107575 Cyan #155C5C Cyan #BDD9D9 Cyan #7DCDCF Cyan #41B6B9 Cyan #1F9399 Red #FCC5CB Red #FF96A3 Red #FF697A Red #FF334B Red #E5172F Red #C9162B Red #85101E Red #F2CED2 Red #F68A94 Red #EB6570 Red #D44652 Yellow #FDFFE5 Yellow #FBFFBF Yellow #FDFF78 Yellow #FFFC33 Yellow #FFF200 Yellow #FFE500 Yellow #FFD900 Yellow #FCFAD2 Yellow #FFF8AB Yellow #FFEA80 Yellow #FFDF6B Light blue #90EAFC Light blue #60DEF7 Light blue #11CDF2 Light blue #00B8E5 Light blue #0093C4 Light blue #066A91 Light blue #084F6B Light blue #C1D8DE Light blue #7FC6D6 Light blue #3FAFC9 Light blue #268CAD Sky blue #ABDCFF Sky blue #78CBFF Sky blue #40B6FF Sky blue #1A9CFF Sky blue #0279D4 Sky blue #095796 Sky blue #1C476B Sky blue #C5D6E3 Sky blue #8FBEE3 Sky blue #5BA2DB Sky blue #3F84C4 Blue #C2D2FF Blue #96B2FF Blue #638DFF Blue #4270ED Blue #2F59CC Blue #2D4796 Blue #32457A Blue #CCD3E5 Blue #9FB6EC Blue #658EE1 Blue #4E73CC Indigo #CACAFC Indigo #A2A2FC Indigo #7979F7 Indigo #5F5FED Indigo #4545D1 Indigo #3D389C Indigo #383878 Indigo #CFCFE5 Indigo #A6A6ED Indigo #7979D9 Indigo #5F5FBA Deep purple #D4C4F5 Deep purple #BD9FF5 Deep purple #A17DF5 Deep purple #8556E3 Deep purple #6B3CC9 Deep purple #532F99 Deep purple #47346B Deep purple #D3CCE5 Deep purple #B59FE8 Deep purple #9473D6 Deep purple #7956B0 Purple #EDC8F7 Purple #DD9CF7 Purple #CE7AF0 Purple #C355D9 Purple #AF36C7 Purple #762D85 Purple #562E5E Purple #DBCCE3 Purple #C89BE0 Purple #A771C9 Purple #81529E Magenta #FCCAE7 Magenta #FF9CCD Magenta #FF70B0 Magenta #F74397 Magenta #DE2C7F Magenta #BF0659 Magenta #8A0E46 Magenta #EBCCDD Magenta #ED91BC Magenta #E569A0 Magenta #C74A82 Rainbow Color Primary Color Line Green for iOS Line Blue 400 Line Navy 600 Line Navy 600 Line Navy 500 Line Navy 400 Line Navy 800 Line Navy 850 Line Navy 900 Line Red Line Green for Android Line Blue 500 Line Blue 600 Line Gray 900 Line Blue 700 Line Black Line White Line Gray 100 Line Gray 400 Line Gray 800 Line Gray 750 Line Gray 850 Line Gray 870 Line Gray 500 Line Gray 150 Line Gray 600 Line Gray 650 Line Gray 300 Line Gray 350 Line Gray 200 Line Gray 250 Line Gray 700 Primary Color Rainbow Color Color Opacity
Video Player. Input. Dialogs. Progress Indicator. Spinner. Message. List header Basic Component Timeline. Openchat. Profile. Story. Avatar. Search. Call. Chatlive. Faceplay Team Component 9 99 999 9 99 999 N 9 New file New post New post To top New post New post To top New file Brand Price Color Category Mammut Vionic Creed WWWWWWWWWW… GIVENCHY WWWWWWWWWW… GIVENCHY Creed Shopping Brand Price Color Category GIVENCHY Shopping Brand Price Try again by changing No search Shopping
Olivia News 8 Timeline Explore Explore 8 Timeline Explore Explore Wallet Gold 100 Chat Chat Top - Main tab Top - Main tab Title Default Avatar Top - Sub tab Top - Sub tab Title Button Title Button Button Button Title Button Button Button Button Title Button Button Button Title Button Iphone 8 Iphone X Bottom Bottom Home 8 Chats Calls Home 8 Chats Calls Home 8 Chats Timeline Calls Home 8 Chats Timeline News Wallet Home 8 Chats Timeline Calls Home 8 Chats Timeline News Wallet Search Bar Search Bar Empty Empty Image type Close Button Back + Close Button Search Search Search Enter a maximum search text enter a Search Search Search Search Enter a maximum search text ent Search Toolbar Toolbar Iphone 8 Iphone X Your current wifi location is unknown. Please check the status and reset An unknown error has occurred Your current wifi location is unknown. Please check the status and reset Setting Your current wifi location is unknown. Please check the status and reset Button Your current wifi location is unknown. Please check the status and reset An unknown error has occurred Tab Tab Text S News All Item Item Ite Item Icon Progress Progress 100MB 0MB Loading… 100MB 25MB Downloading 100MB 25MB Download Fai Loading… Uploading Po Upload failed
description of the tool maximum length is 3 lines. can be adjusted position. se enter a description of the tool tip. maximum length is 3 lines. Arrows be adjusted position. on Text Image Icon Icon Icon Please enter a 1 line text Description text Title text Please enter a Sub text Please enter a Title text Please enter a 1 line text Enter a text Enter a text Hey How’s it going Summer Hey How’s it going Summer Shared to Timeline Shared to Timeline Please enter 2 line text Please enter 2 line text Please enter 2 line text Please enter 2 line text Please enter 2 line text Blue Mono Capsule Button Capsule Button New post New post To top New file New post New post To top New file Large Active Medium Small Text Button Text Button Icon Button Icon Button Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Button text Chat Report Setting Shop card Video Call Add Accept Membership Album Coupon Join Navigation Follow Delivery Call Block Friends add Location Keep Delete Join Order Note Service Join Book Following Investment Reload Button Button Button Button Single Solid Button Solid Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Double Button
the text of a tooltip is used and it includes an arrow that indicates the subject of the tooltip. 2. Text Area The content of a tooltip is displayed. 3. Button Area (Optional) If selected, an action such as redirecting to the respective page, will be executed. 4. Close Button Area (Optional) A button that closes the tooltip is located. Text Type It is used for a tooltip that has only text without a button. Text Type It is used for a tooltip that has only text without a button. Button Type Used if additional actions through a button are required. Button Type Used if additional actions through a button are required. Types Types The component type is distinguished depending on whether the action button is included. he width of tooltip and the location of the arrow can be adjusted depending on the case. However, they are not allowed to modify the margin and text between BG and the text area nor the button style. Design QA must be carried out for the modified width and the arrow location. $PNNPO(VJEFMJOF $PNNPO(VJEFMJOF Because the tooltip has no area within its components that allow for customization, do not detach the symbol for use. )PXUPVTF4LFUDITZNCPMT )PXUPVTF4LFUDITZNCPMT -BZPVU -BZPVU Tooltips should follow the common layout rules. Tooltips should be placed while maintaining at least 5pt margins on the left, right, top, and bottom, excluding the status-bar.
Please enter a description of popup Popup component Title Description of Chack item 1 Image Area Contents Area Control Component Button Component Media Area Contents Area Button Component Caption Please enter a title text here enter a title text Caption Please enter a title text here enter a title text Caption Please enter a title text here enter a title text Body Body Title Label Button 1 Service
the confirmation part of ‘Delete’ Learn about hoot Provide the ‘Confirmation’ Through specific contextual examples Learn about points where the user meets ‘Share’ ‘The Share module’, and ‘Share feedback’ Learn about what type of ‘Feedback’ you should use depending on the results of user behavior Learn about how to effectively provide ‘Selection UX’ Learn about the type of ‘Navigation’ and usage patterns used in LINE
Share Module Share Feedback Share Feedback Use respective share icons for iOS and Android. Design to the characteristics of the platform as much as possible so that the user can quickly recognize the feature. Share is the action of sharing good things with friends. This page also covers ongoing improvements to the Share Module, so for projects that plan to implement the new share related functionality should refer to updates to this page. Share consists of the following steps: When the user clicks the Share Icon, they will be presented with a screen to select and share. This UI currently known as the “Friends picker” in the existing LINE app, will also be implemented in the ‘Share module’ Previously, inconsistent feedback was being provided when users share contents.From now on when the share process is complete in LINE, display will always remain on the current screen. Share UX Guideline
Modal top navigation Modal top navigation Use respective share icons for iOS and Android. Design to the characteristics of the platform as much as possible so that the user can quickly recognize the feature. Modal is a floating state accessible from the the main flow of the service. If ‘Modal’ is used well, it can perform major tasks whilst maintaining context without interrupting the original flow. In this guide, you will learn about the differences between general ‘Forward navigation’ and ‘Modal’, what type of ‘Modal’ is used, and how to use it. The Modal’s top navigation is often an area of confusion because it is used extensively in LINE. There are many inquiries about the location of the X button, especially for the full-screen modals. Therefore the following guide may be helpful: The priority of a modal is the completion of an action. The primary action intended for progression of task must be on the right. The close button therefore located on the left. This is also consistent with the back button in forward navigation located on the left. This is the basic configuration. Some cases are not recommended, but depending on the modal, there may be no primary action. In this case, closing the modal can be assigned as the primary action, thus the X button can come to the right. Unlike the sub-pages in LINE,the Webapp services in LINE have a long enough flow to be identified as an independent service. The button to return to the previous page must be provided on the left, so the X button is always on the right. If confirmation and exit are possible at the same time, you can omit the X button via the task button. Modal UX Guideline
Enter a contents Description Button. Avatar. Controls. Tabs. Input. Overlays. Chips. Top Navigation Basic Component Universal Theme set Very long text label Very long text label Very long text label Very long text label Very long text label Chips text Chips text Chips text Layout. Page
in context is designed with Primary + Filled buttons. When the action button accompanies conditions and the conditions are not met, it is represented as Disabled. General Usage General Usage The Secondary action may be expressed with the Primary Outline or Primary Text Only button instead of the Filled Secondary button. For secondary action For secondary action It provides buttons in three patterns according to the presence of icons and text. We support three design types and variations for each button pattern. Variant Variant The variant refers to variations in style elements, such as the color, border, etc. The primary and the three variants are provided by default. You may add or change the style elements as needed. The LDS G library provides Sketch symbols with Primary as the default. Other variants can be changed and used through Override. All of variant examples are included in the Preview file. Content: The content area where the icons and text of buttons are displayed 1-1. Icon (Optional) Area where the icons that represent the use and nature of the button are displayed It may be placed on the left or right according to the button type. 1-2. Button text Indicates the use of the button and no more than two lines are entered. The center alignment is the default setting. 2. Button container Visual area that surrounds the button icons and text The design style varies according to the element pattern.
a modular system that allows LINE Designers to freely customize the content area of the Pop-up for a variety of needs. However, remember that it is important to deliver consistent experience within LINE services. To help you, LDS provides appropriate Pop-up design guidelines. Please refer to: 209. Popup UX Guidelines If you have any suggestions or inquiries, please visit our slack feedback channel.
line_devday2020
kitsuya0828
chanyou0311
tammyeverts
emiki
fumiyasac0921
koichiotomo
ishikawa_satoru
iotengineer22
sygyzmundovych
tsumita
barometrica
smt7174
sferik
jacobian
chriscoyier
reverentgeek
ufuk
irinanazarova
pauljervisheath
keavy
trallard
addyosmani
destraynor
