UI Design Guide

A comprehensive guide to using Ordin's reusable UI components for consistent design across the marketing website.

Button Component

Buttons are used for actions and interactions. They come in different variants and sizes to fit various use cases.

Variants

Sizes

With Icons

Usage Example

import { Button } from '../components/ui/Button'

<Button variant="primary" size="md" icon="add">
  Create New
</Button>

Heading Component

Typography component for headings with semantic HTML elements and consistent styling.

Semantic Levels

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Custom Sizes

4XL Size

3XL Size

2XL Size

XL Size

Large Size

Base Size

Small Size

Extra Small Size

Usage Example

import { Heading } from '../components/ui/Heading'

<Heading variant="h2" size="3xl" className="mb-4">
  Page Title
</Heading>

Text Component

Text component for body text with different variants and semantic elements.

Variants

Body text - This is the default text style for most content.

Lead text - Larger, more prominent text for introductions.

Caption text - Used for image captions and secondary information.

Small text - For fine print and less important details.

Muted text - Subdued text for less emphasis.

Sizes

Extra Large Text

Large Text

Base Text

Small Text

Extra Small Text

2XS Text

Usage Example

import { Text } from '../components/ui/Text'

<Text variant="lead" className="mb-4">
  This is a lead paragraph that introduces the section.
</Text>
<Text variant="body">
  This is regular body text with more detailed information.
</Text>

Badge Component

Small status indicators and labels to highlight important information.

Variants

PrimaryAccent

Sizes

XSSmallMediumLarge

Usage Example

import { Badge } from '../components/ui/Badge'

<Badge variant="accent" size="md">
  New Feature
</Badge>

Card Component

Container component for grouping related content with consistent styling.

Basic Card

This is a basic card with some content. Cards provide a clean way to group related information.

Interactive Card

This card has hover effects and can be clicked for interactions.

Interactive

Usage Example

import { Card } from '../components/ui/Card'

<Card className="p-6">
  <h3>Card Title</h3>
  <p>Card content goes here...</p>
</Card>

Icon Component

Consistent iconography using Material Design icons with type safety.

Common Icons

home

person

email

phone

location

search

settings

add

edit

delete

check

close

Sizes

16px

20px

24px

32px

Usage Example

import { Icon } from '../components/ui/Icon'

<Icon type="home" size={24} className="text-blue-500" />

Design Principles

Consistency

Use the same components across the website to maintain visual consistency and user familiarity.

Principle

Accessibility

All components follow accessibility best practices with proper ARIA labels and keyboard navigation.

Accessibility

Responsive Design

Components are built with responsive design in mind and work across all device sizes.

Responsive

Type Safety

All components are fully typed with TypeScript for better developer experience and fewer bugs.

TypeScript