Design System

A comprehensive design system with tokens, components, and patterns.

← Back to Portfolio

Typography

Heading 1

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog

Heading 3

The quick brown fox jumps over the lazy dog

Body Text

The quick brown fox jumps over the lazy dog. 1234567890iIl

Small Text

The quick brown fox jumps over the lazy dog. 1234567890iIl

Color Tokens

Primary

#000000

Secondary

#4a5568

Disabled

tw-text-text-disabled

Success

tw-text-success

Warning

tw-text-warn

Info

tw-text-info

Error

tw-text-error

Components

Buttons

Form Elements

Cards

Card Title

This is a basic card component with subtle shadow and border.

Elevated Card

This card has more elevation with a stronger shadow.

Bordered Card

This card uses a border and background color.

Spacing System

0.25rem
0.5rem
1rem
1.5rem
2rem
3rem
4rem