Back to projects
UI/UX

ORBIT-UI

CSS-first Design System built with Astro and Tailwind CSS v4

AstroTailwind CSS v4TypeScript
View site Code

The Problem It Solves

  • Visual consistency and shared tokens across technical projects.
  • Minimizes JS logic in basic components to improve performance and maintainability.
  • Provides a clear base of visual contracts (tokens and components) without the overhead of a heavy UI kit.

Key Features

  • Semantic tokens and adapted Tailwind utilities.
  • Reusable components with a CSS-first focus (styles and accessibility).
  • Live documentation and examples (Storybook/Docs-style).
  • Explicit component states (valid/invalid).
  • Components: Card, Button, NavLink, Alert, Badge.
  • Dark mode support via prefers-color-scheme.
  • Static site generation (100% static, zero runtime JS).

Technical Decision

  • Prioritize simplicity: CSS and tokens over heavy JS frameworks.
  • Favor interoperability and clear contracts between frontend and design.
  • Not a UI kit or framework — focused on tokens and contracts.
All projects