11st has released its design system website. The 11STREET Design System is a system that has been systematized and advanced since 2016. It is said that the design system site was established to widely publicize the design philosophy shared by designers, developers, and planners.

The Design System logo has a simple form. It combines 11 rectangular pillar shapes with continuously changing circles, squares and triangles. At the end, I put a dot that feels like a firm conclusion. It feels like a combination of '11' and 'something', but it doesn't seem to be connected to 'street'. Looping animations of moving circles and squares were applied here and there. It has a sharp, dripping shape, but moves subtly like jelly.

The brand tab consists of Principle, Logo, and Font.

We defined the values and principles pursued by 11th Street. 11th Street's answers regarding Universal, Intuitive, Customer, Data, and Interaction were defined in sentences. You can check the rules to follow when using the logo in various environments, and check detailed values for margins and kerning. You can download the 11th Street logo for print and screen. You can download the 11STREET Gothic font, which contains the signpost symbolizing 11th Street. We offer three thicknesses: Light, Regular, and Bold.

The Foundation tab consists of Accessibility, Color, Grid, Iconography, Spacing, and Typography.

Anyone can find easy-to-use guidelines for contrast, writing, and touch. You can check the RGB and HEX values of the gorgeous 11th Street brand colors in detail, as well as the primary and secondary colors and colors for each service. It provides thin, rounded icon guidelines with 8pt base spacing and 24pt base in a 4-tier structure grid. The product uses Noto Sans CJK KR and Apple SD Gothic Neo. The anchor body size is 14pt. It is unusual to increase the font size by 1pt for iOS and mobile web compared to Android.

The Component tab contains components that make up various materials used in the product.

Frequently used elements such as accordions, badges, and buttons are explained in detail. It guides you through what the element does and what its default state is. The elements that make up the component are explained separately, and the different states according to conditions are organized in a table. We provide detailed guidance on how to construct the layout, interaction rules, spacing when placing, etc. It is noticeable that the level of importance has been divided into four. I'm curious in what situations Specialty is used.

More and Sources

• https://design.11stcorp.com/