Design System
Colors
Primary
Brand
Gray
Typography
Display Font (Montserrat)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Font (Inter)
Extra Small: The quick brown fox jumps over the lazy dog.
Small: The quick brown fox jumps over the lazy dog.
Base: The quick brown fox jumps over the lazy dog.
Large: The quick brown fox jumps over the lazy dog.
Extra Large: The quick brown fox jumps over the lazy dog.
Components
Buttons
Cards
Card Title
Card Description
Card content goes here. This is a basic card example.
Service Card
Full Truckload Service
Our full truckload service provides dedicated freight transportation for your shipments.
Form Elements
Form Components
Input, Label, and Form examples
Component Documentation
Button
Description
Buttons are used to trigger actions or events, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
Usage
import { Button } from '@/components/ui/button'
<Button>Click me</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button size="lg">Large</Button>Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "ghost" | "link" | default | The visual style of the button |
| size | "sm" | "md" | "lg" | md | The size of the button |
| asChild | boolean | false | When true, the button will be rendered as a child element |
Example
Card
Description
Cards are used to group related content and actions. They create distinct sections of content within the page.
Usage
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card content goes here</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>Example
Example Card
This is an example card component
This card demonstrates the typical usage pattern with header, content, and footer sections.
Design Guidelines
Typography
- Use the
font-displayclass for headings (Montserrat) - Use the default font (Inter) for body text
- Limit the use of font sizes to the predefined scale
- Maintain a type hierarchy with clear visual distinction between heading levels
- Keep line lengths between 60-75 characters for optimal readability
Color Usage
- Use
brand-blueas the primary action color - Use
brand-darkfor headers and important text - Use
brand-lightfor backgrounds and subtle highlights - Use
brand-accentsparingly for emphasis and calls-to-action - Maintain a minimum 4.5:1 contrast ratio for text on backgrounds for accessibility
- Use gray scale for most UI elements and containers
Spacing and Layout
- Use the Tailwind spacing scale consistently (4px increment system)
- Maintain a vertical rhythm with consistent spacing between sections
- Use the container class with appropriate padding for responsive layouts
- Use Grid for multi-column layouts and complex interfaces
- Use Flexbox for aligning items and creating simpler layouts
- Maintain whitespace to improve readability and focus
Responsive Design
- Design mobile-first, then enhance for larger screens
- Use Tailwind's responsive prefixes consistently (sm, md, lg, xl, 2xl)
- Ensure all interactive elements have appropriate touch targets (min 44px)
- Adjust typography scale for different viewport sizes
- Test all components at various breakpoints
Animation Guidelines
- Use subtle animations to enhance user experience, not distract
- Keep animations under 300ms for UI interactions
- Use Framer Motion for complex animations and transitions
- Respect user preferences for reduced motion
- Maintain consistent easing functions throughout the application
- Use the predefined animation classes when possible