Tim J Mitchell
Back to home

Component Library

A showcase of available UI components and design tokens for timjmitchell.com

Typography

Heading 1 - Lora Serif

Heading 2 - Lora Serif

Heading 3 - Inter

Heading 4 - Inter

Body text in Inter. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Muted text for secondary content and metadata.

This is a styled link within paragraph text.

Inline code styling
// Code block
function hello() {
  console.log("Hello, world!");
}
This is a blockquote with the sky blue border accent.

Font Families

font-sans (Inter): The quick brown fox jumps over the lazy dog.

font-serif (Lora): The quick brown fox jumps over the lazy dog.

font-display (Plus Jakarta Sans): The quick brown fox jumps over the lazy dog.

font-mono: The quick brown fox jumps over the lazy dog.

Custom CSS Classes

.tag

CategoryProductAI Strategy

.meta

Jan 2026 · 5 min read

.divider

.prose-container

Centers content with max-width of 680px (optimal reading width)

Color Palette

Primary (Sky Blue)

Secondary

Accent

Muted

Destructive

Card / Background

Foreground

Border

Button

Variants

Sizes

As Link

Go Home

Input

Card (ShadCN)

Card Title
Card description text goes here.

Card content with any React children.

Another Card
With different content.

Section Layouts

Eyebrow

Section Label

SectionHeader

Our Approach

Three Pillars of Product Strategy

A practical framework for data-driven organizations

SectionDivider

ContentCard

Basic content card

Content card with hover lift

FeatureGrid + FeatureCard

Data Strategy

A playbook for making data strategic.

AI Integration

Practical AI adoption for enterprise teams.

Product Leadership

Building high-performing product organizations.

Container

Centered container with max-width. Widths: narrow (768px), default (1024px), wide (1152px). Use inside FullBleedSection.

Navigation Components

BackLink

Back to home

Blog Components

Page Layout Components

PageLayout

Container with responsive padding. Width variants: narrow (672px), default (896px), wide (1152px), full.

PageHeader

Consistent page title with optional subtitle. See the header of this page.

Section

Content section with consistent vertical spacing (py-8 md:py-12) and optional title.

Responsive Patterns

Responsive Text (resize window to see)

This text grows: text-lg → md:text-xl → lg:text-2xl

Responsive Grid

Column 1
Column 2
Column 3

grid-cols-1 → md:grid-cols-2 → lg:grid-cols-3

Flex Direction Switch

Item A
Item B

flex-col (stacked) → md:flex-row (side by side)

Hidden/Shown

← This only shows on mobile (hidden on md+)

Spacing Scale

Using Tailwind's default scale (1 unit = 0.25rem = 4px)

p-2 (8px)

p-4 (16px)

p-6 (24px)

p-8 (32px)

p-12 (48px)

Animations

Custom animation utilities defined in globals.css

.animate-fade-in
.animate-fade-in-up

FullBleedSection (Live Demo)

These sections break out of the container to span the full viewport width.

Muted Background

Full-Bleed Section

This section spans the full viewport width with a muted background.

Feature One

Cards inside a full-bleed section.

Feature Two

With hover lift effect enabled.

Feature Three

Using the FeatureGrid layout.

Primary Background

Dark Section Variant

Primary background with inverted text colors for high-contrast sections.

Pattern Overlay

Dots Pattern

Sections can include subtle dot or grid pattern overlays.