Design System

Comprehensive showcase of our design system components, colors, typography, and design tokens. Explore interactive examples and copy code snippets for consistent implementation across the application.

17+

Components

100+

Design Tokens

WCAG AA

Accessible

100%

Documented

Welcome to Our Design System

This design system provides a comprehensive set of reusable components, design tokens, and guidelines to ensure consistency across our applications. Built with React, TypeScript, and Tailwind CSS.

🎯

Design Tokens

Comprehensive design tokens for colors, typography, spacing, and breakpoints with interactive documentation and usage examples.

📚

Documentation

Interactive component documentation with props, examples, accessibility guidelines, and design token references.

♿

Accessibility

WCAG 2.1 AA compliant components with built-in accessibility validation and testing tools for inclusive design.

Getting Started

Import components from our design system and start building consistent interfaces:

// Import UI components

import { Button, H1, Container } from '@/components';

// Import design tokens

import { colors, typography } from '@/lib/design-tokens';

Brand Identity

Typography

UTM BEBAS

Headings and display text

Manrope

Body text and UI elements

Brand Colors

Primary Orange

#F15A24

Secondary Black

#000000