{"id":29796433,"url":"https://github.com/nsbno/spor","last_synced_at":"2026-04-10T10:04:54.366Z","repository":{"id":36950459,"uuid":"447151199","full_name":"nsbno/spor","owner":"nsbno","description":"Spor - Vy's Design System","archived":false,"fork":false,"pushed_at":"2026-03-31T07:40:19.000Z","size":57201,"stargazers_count":29,"open_issues_count":20,"forks_count":8,"subscribers_count":20,"default_branch":"main","last_synced_at":"2026-03-31T08:44:28.277Z","etag":null,"topics":["design-system","react"],"latest_commit_sha":null,"homepage":"https://spor.vy.no","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nsbno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-01-12T09:20:23.000Z","updated_at":"2026-03-31T07:35:45.000Z","dependencies_parsed_at":"2023-09-26T19:18:55.093Z","dependency_job_id":"618c9aa2-2a17-4c2b-aab1-57a6aff133aa","html_url":"https://github.com/nsbno/spor","commit_stats":null,"previous_names":[],"tags_count":1202,"template":false,"template_full_name":null,"purl":"pkg:github/nsbno/spor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsbno%2Fspor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsbno%2Fspor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsbno%2Fspor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsbno%2Fspor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nsbno","download_url":"https://codeload.github.com/nsbno/spor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsbno%2Fspor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["design-system","react"],"created_at":"2025-07-28T05:09:52.374Z","updated_at":"2026-04-01T17:26:17.899Z","avatar_url":"https://github.com/nsbno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Spor: Vy's Design System\n\nWelcome to **Spor**, Vy's open-source design system! Spor is a **shared language for designers and developers**, helping us build **consistent, accessible, and high-quality user experiences** across all platforms.\n\n## 📖 Table of Contents\n\n- [What is Spor?](#-what-is-spor)\n- [Repository Structure](#-repository-structure)\n- [Getting Started](#-getting-started)\n- [How to Contribute](#-how-to-contribute)\n- [Design System Fundamentals](#-design-system-fundamentals)\n- [Accessibility](#-accessibility)\n- [Releasing New Versions](#-releasing-new-versions)\n- [Adding New Icons](#-adding-new-icons)\n- [Additional Resources](#-additional-resources)\n\n---\n\n## 📌 What is Spor?\n\nSpor provides:\n\n- **Reusable UI components** for web and mobile\n- **Design tokens** for colors, typography, spacing, and more\n- **Guidelines and documentation** for usage and best practices\n- **A collaborative space** for designers and developers to contribute\n\nOur goal is to ensure **visual and functional consistency** across Vy's digital products. Anyone—inside or outside Vy—can contribute! 🚀\n\n---\n\n## 📂 Repository Structure\n\nSpor follows a **monorepo** structure, containing multiple **packages** and **applications**.\n\n### 🚀 Applications\n\n- **`designmanual-frontend`** – A Remix app for documentation and demos (this site).\n- **`design-studio`** – A Sanity Studio app for managing documentation ([spor.vy.no/studio](https://spor.vy.no/studio)).\n\n### 📦 Key Packages\n\n- **`@vygruppen/spor-react`** – The React component library.\n- **`@vygruppen/spor-design-tokens`** – Design tokens (colors, typography, spacing, etc.).\n- **`@vygruppen/spor-icon`** – SVG icons.\n- **`@vygruppen/spor-icon-react`** – React components for icons.\n- **`@vygruppen/spor-icon-react-native`** – React Native components for icons.\n- **`@vygruppen/spor-loader`** – All Lottie loading animation data.\n\n---\n\n## 🔧 Getting Started\n\n### ✅ Prerequisites\n\nBefore you begin, ensure you have:\n\n- **Node.js** installed.\n- **Basic familiarity with Git** for version control.\n\n### 📥 Cloning the Repository\n\n```sh\ngit clone https://github.com/nsbno/spor.git\n```\n\n### 📦 Installing Dependencies\n\n```sh\ncd spor\npnpm install\n```\n\n### ⚡ Building the Project\n\n```sh\npnpm build\n```\n\n### 💻 Running the Development Server\n\n```sh\npnpm dev\n```\n\n---\n\n## 👋 How to Contribute\n\nSpor is built **collaboratively**, and contributions are welcome! Here are some ways you can help:\n\n- 🛠 **Develop new components, features, or bug fixes.**\n- 🎨 **Design new components and propose design improvements.**\n- 📝 **Enhance documentation** by adding examples or proofreading.\n- 🔍 **Increase test coverage** by writing more tests.\n- 🐛 **Report bugs** or suggest improvements via **GitHub issues**.\n- 💬 **Provide feedback** on design and developer experience.\n- ✅ **Review pull requests** and help maintain code quality.\n\nFor detailed guides, check out:\n\n- **[Creating a New React Component](https://spor.vy.no/guides/how-to-make-new-react-components)**\n- **[Creating a New React Native Component](https://spor.vy.no/guides/how-to-make-new-react-native-components)**\n- **[Releasing New Versions](https://spor.vy.no/guides/releasing-new-versions)**\n\n💡 **Not sure where to start?** Look for GitHub issues labeled `good first issue` for beginner-friendly tasks.\n\n---\n\n## 🎨 Design System Fundamentals\n\n### 🏗 Components\n\nSpor provides **pre-built UI components** that:\n\n- **Follow accessibility best practices**\n- **Include built-in states and interactivity**\n- **Have corresponding Figma components for designers**\n\nBrowse the component library to see them in action! 🧩\n\n### 🎨 Design Tokens\n\nDesign tokens define:\n\n- **Colors** (`brand.primary`, `text.default`)\n- **Spacing \u0026 Layout** (`spacing.md`, `radius.lg`)\n- **Typography** (`font.heading`, `lineHeight.base`)\n\nUse design tokens instead of hard-coded values for consistency across products.\n\n---\n\n## ♿ Accessibility\n\n### ✅ Web Accessibility Best Practices\n\n- **Use semantic HTML** (`\u003cbutton\u003e`, `\u003ch1\u003e`, `\u003cinput\u003e`, etc.).\n- **Follow proper heading structure** (no skipping levels like `\u003ch1\u003e` → `\u003ch3\u003e`).\n- **Use ARIA only when necessary** (`aria-expanded`, `aria-live`).\n- **Ensure proper keyboard navigation** (Tab, Enter, Spacebar, Arrow keys).\n\n### 🔍 Checking Zoom Accessibility\n\n- Test **browser zoom up to 200%** to ensure readability.\n- Avoid horizontal scrolling unless required.\n- Use **DevTools → Rendering → Emulate Vision Deficiencies** for testing.\n\n### 📱 React Native Accessibility\n\n- **Set accessibilityRole** for meaningful interaction.\n- **Use accessibilityLabel** for better screen reader support.\n- **Ensure dynamic updates use accessibilityLiveRegion**.\n\nFor more details, check **our accessibility guide**. 🎯\n\n---\n\n## 🔄 Releasing New Versions\n\nSpor follows **semantic versioning (SemVer)**, and new versions are released using **Changesets**.\n\n### 📦 Steps to Release a New Version:\n\n1. **Run `npx changeset`** to document changes.\n2. **Select affected packages** and **choose a version bump** (major, minor, patch).\n3. **Commit the changeset** (this creates a file in `.changeset/`).\n4. **Merge the pull request**, triggering an automatic release.\n\nFor more details, see **[our release guide](https://spor.vy.no/guides/releasing-new-versions)**.\n\n---\n\n## 🖼️ Adding New Icons\n\nTo add new icons to Spor:\n\n1. **Get SVG assets** from a designer.\n2. **Follow the naming convention** (`icon-name-variant-size.svg`).\n3. **Place them in `packages/spor-icon/svg/`** under the correct category.\n4. **Run `pnpm build`** to generate React components.\n5. **Create a changeset** and submit a pull request.\n\nFor a step-by-step guide, see **[our icon contribution guide](https://spor.vy.no/guides/how-to-add-new-icons)**. 🎨\n\n---\n\n## 📚 Additional Resources\n\n📖 **[Spor Documentation](https://spor.vy.no/)** – Official documentation and guides.  \n📝 **[Figma Library](https://www.figma.com/design/Tmr2URVX2vNkyRLqKhNRQA/Vy_komponentbibliotek?node-id=0-1\u0026p=f\u0026t=0FRcZh8C5N0edYFm-0)** – Explore design components in Figma.  \n🐛 **[GitHub Issues](https://github.com/nsbno/spor/issues)** – Report bugs or find tasks to work on.  \n💬 **Slack (#spor channel)** – Discuss and collaborate with the team.\n\n---\n\nSpor is **built by everyone** at Vy—so jump in, contribute, and help shape our design system! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsbno%2Fspor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnsbno%2Fspor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsbno%2Fspor/lists"}