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, especially with tools like patterns-vanjs, 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.

Usage

Atomic Components using Declarative components with Raw Framework

import { tags } from './package/raw'

const { div, button } = tags;

export const Button = () => {
  return (
    div(
      { className='px-2 py-2 h-full flex' }, 
      button(
        { class: "custom-classname", variant="default" }, 
        'Cross-platform button (default)'
      )
    );
};

More examples

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

License

MIT