Typography

CruxMD uses the Geist font family from Vercel—a modern, geometric sans-serif optimized for interfaces. Geist Mono is used for code and technical content.

Font Families

Geist Sans

Primary typeface

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: var(--font-geist-sans)

Geist Mono

Code & technical content

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: var(--font-geist-mono)

Heading Scale

text-5xl font-medium (48px)

Heading 1 — Hero

text-4xl font-medium (36px)

Heading 2 — Page Title

text-3xl font-medium (30px)

Heading 3 — Section

text-2xl font-medium (24px)

Heading 4 — Subsection

text-xl font-semibold (20px)

Heading 5 — Card Title

text-lg font-semibold (18px)

Heading 6 — Minor Title

Body Text

text-xl (20px) — Lead paragraph

CruxMD is a clinical intelligence platform that helps physicians make faster, more informed decisions by combining patient context with AI.

text-base (16px) — Body text

The platform uses a hybrid retrieval system combining vector search and knowledge graphs to assemble relevant patient context. This enables natural language conversations about patient data with full clinical context.

text-sm (14px) — Secondary text

Patient data is stored in FHIR R4 format and indexed for semantic search. The system supports both structured queries and free-form clinical questions.

text-xs (12px) — Caption / Fine print

This is an AI-powered demo. Not for clinical use. Always verify information with authoritative sources.

Font Weights

Light (300)

Hero text, large display

Regular (400)

Body text, descriptions

Medium (500)

Headings, emphasis

Semibold (600)

Card titles, buttons

Usage Guidelines

Light (300) — Reserved for large hero text (36px+) where the size provides sufficient visual weight
Regular (400) — Default for all body text, form labels, and descriptions
Medium (500) — Page and section headings (H1-H4), emphasizing key information
Semibold (600) — Card titles, button text, and smaller headings (H5-H6) that need extra prominence

Code Styling

Inline code

Use the Button component for interactive actions. Import it from @/components/ui/button.

Code block

import { Button } from "@/components/ui/button"

export function MyComponent() {
  return (
    <Button variant="default" size="lg">
      Click me
    </Button>
  )
}