{"id":51851266,"url":"https://github.com/zaxwebs/infra-design-system","last_synced_at":"2026-07-23T19:30:44.430Z","repository":{"id":355965998,"uuid":"1230448918","full_name":"zaxwebs/infra-design-system","owner":"zaxwebs","description":"An infrastructre-oriented design system document with demo.","archived":false,"fork":false,"pushed_at":"2026-05-06T02:24:23.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-06T04:30:29.315Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/zaxwebs.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":null,"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":"2026-05-06T02:23:09.000Z","updated_at":"2026-05-06T02:24:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zaxwebs/infra-design-system","commit_stats":null,"previous_names":["zaxwebs/infra-design-system"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zaxwebs/infra-design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaxwebs%2Finfra-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaxwebs%2Finfra-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaxwebs%2Finfra-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaxwebs%2Finfra-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zaxwebs","download_url":"https://codeload.github.com/zaxwebs/infra-design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaxwebs%2Finfra-design-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35814999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-23T02:00:06.683Z","response_time":57,"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":[],"created_at":"2026-07-23T19:30:43.820Z","updated_at":"2026-07-23T19:30:44.424Z","avatar_url":"https://github.com/zaxwebs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Infra Design System\n\nA design system for infrastructure interfaces — fast, technical, compact, and trustworthy.\n\nInfra pairs a quiet SaaS marketing shell with product-like surfaces: terminal previews, dashboard walkthroughs, resource calculators, tables, docs navigation, and status-oriented controls.\n\n## Quick start\n\nOpen [`demo/index.html`](demo/index.html) in your browser to explore the full component showcase.\n\n## Structure\n\n```\n├── design-system.md    # Complete design system specification\n└── demo/\n    ├── index.html      # Interactive component demo page\n    ├── styles.css      # All design tokens and component styles\n    └── app.js          # Theme toggle, tabs, calculator, animations\n```\n\n## Design tokens\n\nThe system uses semantic CSS custom properties with full light and dark theme support.\n\n| Token              | Purpose                                      |\n| ------------------ | -------------------------------------------- |\n| `--primary`        | Actions, selected state, progress, focus      |\n| `--muted`          | Section backgrounds, inactive controls        |\n| `--border`         | Structural borders throughout                 |\n| `--destructive`    | Errors and dangerous actions                  |\n| `--warning`        | Pending or caution states                     |\n| `--card`           | Elevated surface backgrounds                  |\n\n## Typography\n\n- **UI \u0026 marketing:** [Geist](https://fonts.google.com/specimen/Geist)\n- **Code \u0026 numeric:** [Geist Mono](https://fonts.google.com/specimen/Geist+Mono)\n\n## Components\n\nThe demo showcases the following components:\n\n- **Layout** — Marketing header, hero, footer, container\n- **Buttons** — Primary, secondary, destructive, account pill, marketing pill, disabled states\n- **Badges** — Status dots (live, healthy, degraded, down), info badges\n- **Cards** — App cards, feature cards, info panels (success, warning, destructive)\n- **Forms** — Text inputs, number inputs with suffix, select pickers, range sliders\n- **Data** — Responsive pricing table with ARIA roles\n- **Terminal** — Terminal card with syntax-colored output, logs surface\n- **Navigation** — Tabs with active states, smooth-scroll anchors\n- **Theme toggle** — Light/dark switch with localStorage persistence\n- **Pricing calculator** — Interactive cost estimator with live updates\n\n## Design principles\n\n- Use green only where it clarifies action, progress, or operational health\n- Keep product UI dense, bordered, and scannable\n- Prefer actual dashboard/terminal/data visuals over abstract illustrations\n- Every surface must work in both light and dark themes\n- Motion is functional and brief (150–500ms)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaxwebs%2Finfra-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaxwebs%2Finfra-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaxwebs%2Finfra-design-system/lists"}