{"id":30142945,"url":"https://github.com/lotesystem/lote-design-system","last_synced_at":"2025-08-11T06:22:24.716Z","repository":{"id":53766749,"uuid":"347613938","full_name":"lotesystem/lote-design-system","owner":"lotesystem","description":"🎡 A design system helps to build websites rapidly","archived":false,"fork":false,"pushed_at":"2021-03-26T11:12:09.000Z","size":5765,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-03T08:55:05.855Z","etag":null,"topics":["component-library","css-in-js","design-system","grid-system","icons","javascript","lerna-monorepo","monorepo","react","reactjs","reset-css","storybook","styled-components","theme"],"latest_commit_sha":null,"homepage":"https://lotesystem.github.io/lote-design-system/","language":"JavaScript","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/lotesystem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-14T11:09:06.000Z","updated_at":"2021-03-26T11:12:12.000Z","dependencies_parsed_at":"2022-09-11T15:22:46.076Z","dependency_job_id":null,"html_url":"https://github.com/lotesystem/lote-design-system","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/lotesystem/lote-design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotesystem%2Flote-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotesystem%2Flote-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotesystem%2Flote-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotesystem%2Flote-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lotesystem","download_url":"https://codeload.github.com/lotesystem/lote-design-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lotesystem%2Flote-design-system/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269838664,"owners_count":24483259,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component-library","css-in-js","design-system","grid-system","icons","javascript","lerna-monorepo","monorepo","react","reactjs","reset-css","storybook","styled-components","theme"],"created_at":"2025-08-11T06:22:21.590Z","updated_at":"2025-08-11T06:22:24.700Z","avatar_url":"https://github.com/lotesystem.png","language":"JavaScript","readme":"# Lote Design System\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"ui-kit\" src=\"https://user-images.githubusercontent.com/71380271/110454542-2e73ac00-80e9-11eb-941e-21f3debb3914.png\"\u003e\n\u003c/p\u003e\n\n\u003e Lote Design system is a design system which contains set of different components\n\u003e that will make it easier for us to create websites by clear standards and best\n\u003e practices for accessibility, internationalization, and responsive web design.\n\n\nWhat it includes?\n- UI Kit\n- Color scheme\n- Typography\n- Gridsystem\n- Icongraphy\n- and much more\n\n### Some knowledge about `Logo` and word `Lote`\n***Lote***\nLote comes from the Lote Tree a location that marks the end of the seventh heaven, the boundary which no creation can pass. It is a symbol of solidarity and determination; it reminds us that the goals of this world are not incompatible with the goals of the spiritual spirit.\n\n***Logo***\nLife is started with the water and water is divided into the ocean. King of the ocean is a whale.\n\n## Getting started\n\nFrom the start, I have a goal to help developers to build any kind of site in less amount of time. So I have divided this whole design-system to separate packages and consider this design system as one `monorepo` for all the packages.\n\nFor example, if you only want to use core components (**Theme (Default Color scheme)**, **Reset styles**, **GridSystem**, **Button**, and **Input** fields etc) of design system you have to install only the `core` package and if you only want to use icons then install `icons` package. Make sure you have little understanding of the tech stack what I am using to build this design-system.\n\n## Technology stack\n-   [React](https://reactjs.org/)\n-   [Storybook](https://storybook.js.org/)\n-   [JavaScript](https://javascript.info/)\n-   [Styled Components](https://styled-components.com/)\n-   [Jest](https://jestjs.io/)\n-   [Eslint](https://eslint.org/)\n-   [Lerna](https://lerna.js.org/)\n\nBack to the point. The following table will explain to you what is the purpose of each package.\n\n| Package name                                      | Description                                                                                                  | Storybook \u0026 Docs                                                                                                                                                                              | Installation                                    |\n|---------------------------------------------------|--------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------|\n| [`core`](./packages/core)                         | Main core components comes with Theme, Typography, ColorScheme, GridSystem, Buttons, Pagination \u0026 Input etc. | [Demo](https://lotesystem.github.io/lote-design-system/packages/core/www) \u0026 [Docs](https://github.com/lotesystem/lote-design-system/tree/master/packages/core#readme)                         | yarn add `@lote-design-system/core`             |\n| [`icons`](./packages/icons)                       | Iconography assets from the design system                                                                    | [Demo](https://lotesystem.github.io/lote-design-system/packages/icons/www) \u0026 [Docs](https://github.com/lotesystem/lote-design-system/tree/master/packages/icons#readme)                       | yarn add `@lote-design-system/icons`            |\n| [`marketing-blocks`](./packages/marketing-blocks) | all the main components used inside the modern Landing pages                                                 | [Demo](https://lotesystem.github.io/lote-design-system/packages/marketing-blocks/www) \u0026 [Docs](https://github.com/lotesystem/lote-design-system/tree/master/packages/marketing-blocks#readme) | yarn add `@lote-design-system/marketing-blocks` |\n| [`gallery-blocks`](./packages/gallery-blocks)     | helps to create masonry or justified grid of photos                                                          | [Demo](https://lotesystem.github.io/lote-design-system/packages/gallery-blocks/www) \u0026 [Docs](https://github.com/lotesystem/lote-design-system/tree/master/packages/gallery-blocks#readme)     | yarn add `@lote-design-system/gallery-blocks`   |\n| [`map-blocks`](./packages/map-blocks)             | integrate mobile-friendly interactive maps                                                                   | [Demo](https://lotesystem.github.io/lote-design-system/packages/map-blocks/www) \u0026 [Docs](https://github.com/lotesystem/lote-design-system/tree/master/packages/map-blocks#readme)              | yarn add `@lote-design-system/map-blocks`       |\n\n## Motivation\n\nInitially, the purpose of this design system is to create any kind of website that we see in our normal life, such as. (Marketing / Agency Website), (Ecommerce Website) and Admin Dashboard. Therefore, the main purpose is to save the developer's time and create a complete set of components so that the developer does not have any difficulty in creating such a website.\n\n## Note\n\nYou can use the whole design system without installing all other packages. But remember the whole design-system is written with the [Css-In-Js](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js) approach. It is necessary to import `ThemeProvider` and `theme`, if you want to consume `components` \u0026 `blocks` inside your website.\n\nEither you can take `ThemeProvider` from external [Css-In-Js](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js) library like [styled-components](https://styled-components.com/docs/api#themeprovider) or you can import this from our `core` package which also comes with the predefined `theme`.\n\n## Tip #1\nTo use this design-system with an enhanced experience, I highly recommend using browser defaults and typography from our `core` package.\n\n```js\nimport React from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport {\n  reset,\n  typography,\n  ThemeProvider,\n  Button\n} from '@lote-design-system/core';\n\nconst GlobalStyle = createGlobalStyle`\n  ${reset};\n  ${typography};\n`;\n\nexport default function App() {\n  return (\n    \u003c\u003e\n      \u003cGlobalStyle /\u003e\n      \u003cThemeProvider\u003e\n        \u003cButton color=\"secondary\"\u003eHello World\u003c/Button\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Tip #2\n\n`If we want to use marketing blocks on our website, we need to import special theme!`\n\n`marketing blocks` are dependent upon the special `theme` which is crafted only for `marketing blocks`. To use `marketing-blocks` properly please take this example seriously.\n\n```js\nimport React from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport {\n  reset,\n  typography,\n  ThemeProvider,\n  Button\n} from '@lote-design-system/core';\nimport { theme } from '@lote-design-system/marketing-blocks';\n\nconst GlobalStyle = createGlobalStyle`\n  ${reset};\n  ${typography};\n`;\n\nexport default function App() {\n  return (\n    \u003c\u003e\n      \u003cGlobalStyle /\u003e\n      \u003cThemeProvider theme={theme}\u003e\n        \u003cButton color=\"secondary\"\u003eHello World\u003c/Button\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Goals\n\nThe core goals of this project are to:\n\n- Promote best practices for accessibility, internationalization, and\n  responsive web design.\n- Speed up design and development velocity\n- Help create consistent, beautiful, and usable UI in our applications\n\nWe hope to accomplish these goals by:\n\n- Reducing the number of decisions needed when iterating on UI\n- Reducing the amount of code duplication in our apps\n- Providing easy-to-use and extensible components for anyone to consume.\n\n## Contributing\n\nI'm always looking for contributors to help us build new features or help us improve the project documentation. Please clone this repo and feel free to make a PR.\n\n## License\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flotesystem%2Flote-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flotesystem%2Flote-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flotesystem%2Flote-design-system/lists"}