For the complete documentation index, see llms.txt. This page is also available as Markdown.

Toss Design System (TDS)

TDS stands for Toss Design System. It is the design system used across the Toss community, and it is the common design language that makes up Toss products as well as a developer tool. TDS helps designers, developers, planners, and other roles collaborate using the same standards, regardless of job function.

TDS Benefits

  • It can provide users with a consistent product experience.

  • Designers can focus on solving problems rather than implementing UI.

  • Developers can build 3 to 5 times faster than when creating custom UI themselves.


Notes on using TDS

To use TDS safely and correctly, please review the information below first.

License information

If you use this UI Kit, the license termsare considered accepted.

  1. Intellectual property rights: All rights to all materials provided by Toss through the Apps in Toss (Appintoss) service, including intellectual property rights, belong to Toss. Partners may use these materials only within the scope of using the Apps in Toss service.

  2. Scope of usage rights: Toss's permission to use TDS is a limited right for providing the Apps in Toss service. You cannot obtain deliverables or additional rights beyond this scope.

  3. Compliance obligations and actions in case of violations: Partners must comply with this guide and relevant laws and regulations. If they fail to do so, Toss may suspend the provision of the Apps in Toss service or take other necessary measures.


Component list

We introduce 11 core TDS components most frequently used in Apps in Toss. Click each component to see detailed usage instructions and examples.

Cover

Badge

Cover

Border

Cover

BottomCTA

Cover

Button

Cover

Asset

Cover

ListRow

Cover

ListHeader

Cover

Navigation

Cover

Paragraph

Cover

Tab

Cover

Top