{"id":13410398,"url":"https://github.com/systemdesigndao/ton-design-system","last_synced_at":"2025-03-14T16:32:11.046Z","repository":{"id":43832430,"uuid":"446574301","full_name":"systemdesigndao/ton-design-system","owner":"systemdesigndao","description":"Non official TON based Design System. Inspired by TON Brand Assets and Telegram Community Design System.","archived":false,"fork":false,"pushed_at":"2024-03-03T19:54:11.000Z","size":3029,"stargazers_count":40,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-19T03:23:47.116Z","etag":null,"topics":["tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/systemdesigndao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-10T20:37:34.000Z","updated_at":"2024-06-06T22:32:56.821Z","dependencies_parsed_at":"2024-03-03T20:35:49.319Z","dependency_job_id":"8f706e38-03fe-48f2-91f3-6e9d841e0c2a","html_url":"https://github.com/systemdesigndao/ton-design-system","commit_stats":null,"previous_names":["systemdesigndao/ton-design-system","designervoid/ton-design-system"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/systemdesigndao%2Fton-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/systemdesigndao%2Fton-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/systemdesigndao%2Fton-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/systemdesigndao%2Fton-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/systemdesigndao","download_url":"https://codeload.github.com/systemdesigndao/ton-design-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243152862,"owners_count":20244662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","typescript"],"created_at":"2024-07-30T20:01:06.640Z","updated_at":"2025-03-14T16:32:11.001Z","avatar_url":"https://github.com/systemdesigndao.png","language":"TypeScript","funding_links":[],"categories":["👨‍🎨 UX/UI"],"sub_categories":["Get Help"],"readme":"[![Telegram System Design DAO Forum][telegram-system-design-dao-badge]][telegram-system-design-dao-url]\n\n[telegram-system-design-dao-badge]: https://img.shields.io/badge/-System%20Design%20DAO%20Forum-2CA5E0?style=flat\u0026logo=telegram\u0026logoColor=white\n[telegram-system-design-dao-url]: https://t.me/systemdesigndao_forum\n\n# TON Design System\n\n\u003chttps://ton.org/en/brand-assets\u003e\n\n## TDS Wiki\n\n[Home](https://github.com/systemdesigndao/ton-design-system/wiki)  \n[Quick start](https://github.com/systemdesigndao/ton-design-system/wiki/Quick-start)  \n[dotlottie](https://github.com/systemdesigndao/ton-design-system/wiki/dotlottie)  \n\n## Package size\n\n```sh\n/\n@designervoid/ton-design-system\n/\nlib/\nfolder\n20.8 kB\npackage/\nfolder\n13.3 kB\npublic/\nfolder\n28.3 kB\nLICENSE.md\ntext/markdown\n1.09 kB\nREADME.md\ntext/markdown\n2.03 kB\npackage.json\napplication/json\n516 B\n```\n\n[verify on the npm code tab](https://www.npmjs.com/package/@designervoid/ton-design-system?activeTab=code)\n\n## Repository size\n\n```sh\ngit count-objects -vH\ncount: 733\nsize: 3.45 MiB\nin-pack: 1666\npacks: 2\nsize-pack: 3.20 MiB\nprune-packable: 55\ngarbage: 0\nsize-garbage: 0 bytes\n```\n\n## TDS Highlights\n\n- Advantages of TailwindCSS\n\n  TailwindCSS offers flexibility and scalability with its utility-first approach.  \n  It allows for fast, customizable UI development without imposing design constraints.\n\n- Awesome DX (Developer Experience)\n\n  TailwindCSS improves developer experience by offering instant feedback, comprehensive documentation, and tools like `rsbuild` for optimized development workflows.\n\n- Atomic CSS\n\n  TailwindCSS automates the generation of atomic classes, where each class does one specific thing, ensuring small, reusable, and predictable CSS.\n\n- Design Tokens\n\n  Design tokens provide a system for values like colors, typography, and spacing.  \n  The example includes the golden ratio for generating dynamic spacing, font sizes, and more, ensuring design consistency across the app.\n\n- Lightweight\n\n  TailwindCSS is lightweight, especially with tools like patterns-vanjs, which offer a lean, production-ready solution for creating fast and optimized products.\n\n- Ready to go patterns\n\n  A folder (registry/patterns) with pre-built, customizable UI patterns, enabling quick prototyping and reusable components for rapid development.  \nCheckout [stable patterns](https://github.com/systemdesigndao/ton-design-system/tree/master/registry#stable-patterns).\n\n- CLI\n\n  You can copy projects and components from the `registry` with the CLI. See [TDS Wiki Quick Start](https://github.com/systemdesigndao/ton-design-system/wiki/Quick-start).\n\n## Usage\n\nAtomic Components using Declarative components with [Raw Framework](https://github.com/systemdesigndao/ton-design-system/tree/master/registry/raw-framework#raw-ui-framework)\n\n\n```ts\nimport { tags } from './package/raw'\n\nconst { div, button } = tags;\n\nexport const Button = () =\u003e {\n  return (\n    div(\n      { className='px-2 py-2 h-full flex' }, \n      button(\n        { class: \"custom-classname\", variant=\"default\" }, \n        'Cross-platform button (default)'\n      )\n    );\n};\n```\n\n## More examples\n\n- Examples of usages within [`ton-design-system/registry`](https://github.com/systemdesigndao/ton-design-system/blob/master/registry/README.md#contain)\n- Example of usage with [`next-typescript`](https://github.com/designervoid/ton-design-system-next-typescript)\n- Example of usage with [`rn-typescript`](https://github.com/designervoid/ton-design-system-rn-typescript)\n\n![Screenshot](./docs/images/App.jpeg)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsystemdesigndao%2Fton-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsystemdesigndao%2Fton-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsystemdesigndao%2Fton-design-system/lists"}