Components
Library
The following Figma file contains the page designs for the corporate site and IR site, along with the components featured on these pages. You can copy and use these elements as needed.
When creating websites related to Digital Garage, please follow this library in accordance with internal or project team guidelines.
Grid
By using grids, you can easily recreate a user-friendly and well-organized design.
It also allows for more efficient design work.
For PC
The base grid for a design width of 1490px uses a 10px pitch. For the corporate and IR sites, a margin of 70px is applied on both the left and right sides.
Example of Use
Corporate Site Top Page
IR Site Top Page
Corporate Site News Page
Corporate Site Company Profile Page
For Mobile
The base grid for a design width of 375px uses a 10px pitch. It includes 40px margins on the left and right sides, with a 30px grid in the center.
Example of Use
IR Site Top Page
Corporate Site Portal Page
Corporate Site News Page
Corporate Site Company Profile Page
Button
Multiple buttons will be used depending on the background color and the functionality required.
Filled Button
Basic Button: The width is variable.
You can add a custom icon after the label to emphasize the action. The width is variable.
For the 'back' action, an icon may be added before the label. The width is variable.
For cases with limited space or when the function is self-explanatory, you may use an icon-only button.
States
Default
Hover
Ghost Button
Basic Button: The width is variable.
You can add a custom icon after the label to emphasize the action. The width is variable.
For the 'back' action, an icon may be added before the label. The width is variable.
For cases with limited space or when the function is self-explanatory, you may use an icon-only button.
States
Default
Hover
Confirm Button
It will primarily be used on the contact page.
States
Default
Disabled
Checkbox
States
Active
Inactive
Disabled
Radio Button
States
Active
Inactive
Disabled
Table
Table Header
It will be used for table headers.
Table Data
It will be used to display text or numbers within the table.
Example of Use
A table is created by combining Table Header and Table Data. Below is an example.
Tag
Tags are used to clearly indicate the category of articles and other content. The following three types of tags are provided based on their intended use.
For News Release
Default
Hover
For Solution
Default
For DG Portal
Default
Hover
Navigation
Header
It will always be displayed at the top of the screen to make it easier to access other pages.
For Corporate Site PC
For IR Site PC
For Corporate Site PC Expanded
For Corporate Site Mobile
For IR Site Mobile
For Corporate Site Mobile Expanded
Footer
It will function as a sitemap by providing links to all pages and related sites.
For Corporate Site PC
For IR Site PC
For Corporate Site Mobile
For IR Site Mobile
Side Navigation
Anchor link navigation will be implemented on pages with a lot of information to make it easier to access specific content.
Active
Inactive
Example
For Group Company/Service Web Site
Corporate and service sites related to the Digital Garage Group should place the following components at the bottom of the footer.
For PC
For Mobile
Example of Use
Exceptions
The following cases are exceptions and are excluded from component placement.
- Items that have already been published without placement of the group logo.
- Companies or services established through collaboration with other companies.
- Other exceptions approved by the company.
Breakpoints
For the Corporate and IR sites, the following settings are recommended:
- Up to 359px: The appearance will scale down as it would at 360px.
- 360px to 999px: The Mobile Design will be applied, and only the width will change.
- 1000px to 1279px: The appearance will scale down as it would at 1280px.
- 1280px to 1800px: The PC Design will be applied, and only the width will change.
- 1801px and above: The left and right margins will expand.