Design System Demo

This page demonstrates the new responsive design system with modern navigation, color scheme, and component styles.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a regular paragraph with some link text demonstrating the default typography styles.

Buttons

Responsive Button Grid:

Calculator 1 Calculator 2 Calculator 3 Calculator 4

Form Elements

Input Field

Select Field

Textarea

Calculator Components

From Value

To Value

328.08 feet

100 meters equals 328.08 feet

Grid System

Card 1

This is a responsive grid card.

Card 2

Cards automatically adjust to screen size.

Card 3

Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns.

Status Messages

Success! Your calculation was completed successfully.

Warning! Please check your input values.

Error! Something went wrong with the calculation.

Info: This is some helpful information.

Color Scheme

Primary

Gray

Success

Error

Article Section Example

This demonstrates how article content would look with the new design system.

Features of the New Design

Responsive navigation with dropdown menus
Modern color scheme using CSS custom properties
Mobile-first responsive design
Consistent typography and spacing
Reusable component styles
Accessible form elements and buttons

Benefits

Improved user experience across all devices
Faster development with reusable components
Better SEO with semantic HTML structure
Easy customization with CSS variables