TON Design System

https://ton.org/en/brand-assets

TDS Wiki

Home
Quick start
dotlottie
yanot-charts
ton-connect

TDS Highlights

• Advantages of TailwindCSS

  TailwindCSS offers flexibility and scalability with its utility-first approach.
  It allows for fast, customizable UI development without imposing design constraints.

• Awesome DX (Developer Experience)

  TailwindCSS improves developer experience by offering instant feedback, comprehensive documentation, and tools like rsbuild for optimized development workflows.

• Atomic CSS

  TailwindCSS automates the generation of atomic classes, where each class does one specific thing, ensuring small, reusable, and predictable CSS.

• Design Tokens

  Design tokens provide a system for values like colors, typography, and spacing.
  The example includes the golden ratio for generating dynamic spacing, font sizes, and more, ensuring design consistency across the app.

• Lightweight

  TailwindCSS is lightweight, which offer a lean, production-ready solution for creating fast and optimized products.

• Ready to go patterns

  A folder (registry/patterns) with pre-built, customizable UI patterns, enabling quick prototyping and reusable components for rapid development.
  Checkout patterns.

• CLI

  You can copy projects and components from the registry with the CLI. See TDS Wiki Quick Start.

More examples

• Examples of usages within ton-design-system/registry
• Example of usage with next-typescript
• Example of usage with rn-typescript

License

MIT