Skip to main content

Source: ocean/docs/TYPOGRAPHY_PATTERNS.md | ✏️ Edit on GitHub

Typography Patterns in Ocean Dashboard

This document outlines the typography patterns used throughout the Ocean dashboard, following shadcn/ui conventions.

Page Headers​

Standard page header pattern:

<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
  <div>
    <h1 className="text-3xl font-bold tracking-tight">Page Title</h1>
    <p className="text-muted-foreground">Page description goes here</p>
  </div>
  {/* Page content */}
</div>

Card Headers​

Using shadcn/ui Card components:

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description text</CardDescription>
  </CardHeader>
  <CardContent>{/* Content */}</CardContent>
</Card>

Text Hierarchy​

  • Page titles: text-3xl font-bold tracking-tight
  • Section headings: text-2xl font-bold
  • Subsection headings: text-lg font-semibold
  • Card titles: Handled by CardTitle component
  • Body text: Default text size, often with text-muted-foreground
  • Small text: text-sm text-muted-foreground

Common Patterns​

Page Layout​

<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
  <PageHeader heading="Page Title" description="Description of what this page does" />
  {/* Content in Cards */}
</div>

Inline Code​

<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
  code snippet
</code>

Muted Text​

<p className="text-muted-foreground">Secondary information</p>

Usage with Typography Components​

import { TypographyH1, TypographyP } from '@/components/ui/typography'
import { PageHeader } from '@/components/ui/page-header'

// Option 1: Using typography components
<TypographyH1>Dashboard</TypographyH1>
<TypographyP>Welcome to your dashboard</TypographyP>

// Option 2: Using page header component
<PageHeader
  heading="Dashboard"
  description="Welcome to your dashboard"
/>

// Option 3: Using classes directly (existing pattern)
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
<p className="text-muted-foreground">Welcome to your dashboard</p>

All approaches are valid - choose based on your needs and consistency within your section of the codebase.