Skip to main content
Pinch Design System
Modern components, consistent tokens, and seamless dark mode support across the app.
The Design System is currently in Early Beta. Some sections are still in development.

​
The Stack

Our design system is built on top of proven technologies:

Angular

Google’s frontend framework. Powerful & reliable.

Spartan UI

Headless Angular UI primitives and components.

Tailwind CSS

Utility-first CSS framework with great design baked in.

shadcn/ui

Composable patterns and modern design conventions.

​
Explore

Colors

Comprehensive color system with semantic meanings, contrast ratios, and dark mode support.

Typography

Text styles, font scales, and hierarchy for consistent content presentation.

Buttons

Interactive button components with variants, sizes, and states documentation.

Best Practices

Design principles, accessibility guidelines, and best practices for implementation.

​
Design Principles

Our design system is built on four core principles:
Maintain visual and functional consistency across all components and interactions. Use the same colors from our palette, apply consistent spacing scale, and follow typography hierarchy.
Ensure all components are accessible by default with proper ARIA labels and keyboard navigation. We follow WCAG AA contrast ratios and provide screen reader compatibility.
Optimize components for fast loading and smooth interactions. This includes lazy loading heavy components, optimizing bundle sizes, and using Angular signals for reactivity.
Build components that can adapt to different contexts and use cases. All components are responsive by default, support dark mode, and are customizable with variants.