ContextQMD
Back to Prisma

Typography

apps/eclipse/content/design-system/tokens/typography.mdx

latest13.3 KB
Original Source

The Eclipse Design System provides utility classes for consistent typography across four categories: Titles, Headings, Text, and Code. Each maps to specific font families, sizes, weights, and line heights defined as design tokens.

Font Families

<div className="not-prose my-8 space-y-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="space-y-2 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak">--font-sans-display</p> <p className="type-heading-lg">Mona Sans VF</p> <p className="text-xs text-foreground-neutral-weak">Used for headings</p> </div> <div className="space-y-2 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak">--font-sans</p> <p className="type-text-md" style={{ fontFamily: "var(--font-sans)" }}>Inter</p> <p className="text-xs text-foreground-neutral-weak">Used for body text</p> </div> <div className="space-y-2 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak">--font-mono</p> <p className="type-code-md">Mona Sans Mono VF</p> <p className="text-xs text-foreground-neutral-weak">Used for code</p> </div> </div> </div>

Titles

Title styles use the Mona Sans VF display font with heavy weights and extended widths for maximum visual impact. Use these for hero sections, page titles, and marketing content.

<div className="not-prose my-8 space-y-6"> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-5xl &middot; 64px/72px &middot; weight 900 &middot; width 125</p> <p className="type-title-5xl">The quick brown fox</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-4xl &middot; 40px/48px &middot; weight 900 &middot; width 125</p> <p className="type-title-4xl">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-3xl &middot; 30px/36px &middot; weight 900 &middot; width 125</p> <p className="type-title-3xl">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-xl &middot; 20px/28px &middot; weight 800 &middot; width 110</p> <p className="type-title-xl">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-lg &middot; 18px/28px &middot; weight 800 &middot; width 110</p> <p className="type-title-lg">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-md &middot; 16px/24px &middot; weight 800 &middot; width 110</p> <p className="type-title-md">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-title-sm &middot; 14px/20px &middot; weight 800 &middot; width 125 &middot; uppercase</p> <p className="type-title-sm">The quick brown fox jumps over the lazy dog</p> </div> </div>

Title reference

ClassFontSizeLine heightWeightWidthNotes
type-title-5xlMona Sans VF64px (4rem)72px (4.5rem)900125
type-title-4xlMona Sans VF40px (2.5rem)48px (3rem)900125
type-title-3xlMona Sans VF30px (1.875rem)36px (2.25rem)900125
type-title-xlMona Sans VF20px (1.25rem)28px (1.75rem)800110
type-title-lgMona Sans VF18px (1.125rem)28px (1.75rem)800110
type-title-mdMona Sans VF16px (1rem)24px (1.5rem)800110
type-title-smMona Sans VF14px (0.875rem)20px (1.25rem)800125Uppercase, letter-spaced

Headings

Heading styles use the Mona Sans VF display font, except for heading-2xs. Use these styles only for headings.

<div className="not-prose my-8 space-y-6"> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-2xl &middot; 24px/32px &middot; weight 700</p> <p className="type-heading-2xl">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-xl &middot; 20px/28px &middot; weight 700</p> <p className="type-heading-xl">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-lg &middot; 18px/28px &middot; weight 700</p> <p className="type-heading-lg">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-md &middot; 18px/28px &middot; weight 650</p> <p className="type-heading-md">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-sm &middot; 14px/20px &middot; weight 650</p> <p className="type-heading-sm">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-xs &middot; 12px/16px &middot; weight 650</p> <p className="type-heading-xs">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-heading-2xs &middot; 11px/16px &middot; weight 600 &middot; uppercase &middot; Inter</p> <p className="type-heading-2xs">The quick brown fox jumps over the lazy dog</p> </div> </div>

Heading reference

ClassFontSizeLine heightWeight
type-heading-2xlMona Sans VF24px (1.5rem)32px (2rem)700
type-heading-xlMona Sans VF20px (1.25rem)28px (1.75rem)700
type-heading-lgMona Sans VF18px (1.125rem)28px (1.75rem)700
type-heading-mdMona Sans VF18px (1.125rem)28px (1.75rem)650
type-heading-smMona Sans VF14px (0.875rem)20px (1.25rem)650
type-heading-xsMona Sans VF12px (0.75rem)16px (1rem)650
type-heading-2xsInter11px (0.6875rem)16px (1rem)600

Text

Text styles use the Inter body font. Most content, labels and captions should be rendered using these styles.

<div className="not-prose my-8 space-y-6"> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-md &middot; 16px/24px &middot; weight 400</p> <p className="type-text-md">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-md-strong &middot; 16px/24px &middot; weight 500</p> <p className="type-text-md-strong">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-md-stronger &middot; 16px/24px &middot; weight 600</p> <p className="type-text-md-stronger">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-sm &middot; 14px/20px &middot; weight 400</p> <p className="type-text-sm">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-sm-strong &middot; 14px/20px &middot; weight 500</p> <p className="type-text-sm-strong">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-sm-stronger &middot; 14px/20px &middot; weight 600</p> <p className="type-text-sm-stronger">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-xs &middot; 12px/16px &middot; weight 400</p> <p className="type-text-xs">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-xs-strong &middot; 12px/16px &middot; weight 500</p> <p className="type-text-xs-strong">The quick brown fox jumps over the lazy dog</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-text-xs-stronger &middot; 12px/16px &middot; weight 600</p> <p className="type-text-xs-stronger">The quick brown fox jumps over the lazy dog</p> </div> </div>

Text reference

ClassSizeLine heightWeight
type-text-md16px (1rem)24px (1.5rem)400
type-text-md-strong16px (1rem)24px (1.5rem)500
type-text-md-stronger16px (1rem)24px (1.5rem)600
type-text-sm14px (0.875rem)20px (1.25rem)400
type-text-sm-strong14px (0.875rem)20px (1.25rem)500
type-text-sm-stronger14px (0.875rem)20px (1.25rem)600
type-text-xs12px (0.75rem)16px (1rem)400
type-text-xs-strong12px (0.75rem)16px (1rem)500
type-text-xs-stronger12px (0.75rem)16px (1rem)600

Code

Code styles use the Mona Sans Mono VF monospace font. Use it for displaying code or tabular data.

<div className="not-prose my-8 space-y-6"> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-code-md &middot; 16px/24px &middot; weight 400</p> <p className="type-code-md">const hello = "world";</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-code-md-strong &middot; 16px/24px &middot; weight 500</p> <p className="type-code-md-strong">const hello = "world";</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-code-sm &middot; 14px/20px &middot; weight 400</p> <p className="type-code-sm">const hello = "world";</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-code-sm-strong &middot; 14px/20px &middot; weight 500</p> <p className="type-code-sm-strong">const hello = "world";</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-code-xs &middot; 12px/16px &middot; weight 400</p> <p className="type-code-xs">const hello = "world";</p> </div> <div className="space-y-1 p-4 border border-stroke-neutral rounded-lg"> <p className="text-xs font-mono text-foreground-neutral-weak mb-2">.type-code-xs-strong &middot; 12px/16px &middot; weight 500</p> <p className="type-code-xs-strong">const hello = "world";</p> </div> </div>

Code reference

ClassSizeLine heightWeight
type-code-md16px (1rem)24px (1.5rem)400
type-code-md-strong16px (1rem)24px (1.5rem)500
type-code-sm14px (0.875rem)20px (1.25rem)400
type-code-sm-strong14px (0.875rem)20px (1.25rem)500
type-code-xs12px (0.75rem)16px (1rem)400
type-code-xs-strong12px (0.75rem)16px (1rem)500

Usage

tsx
<h1 className="type-title-4xl">Hero Title</h1>
<h2 className="type-heading-2xl">Page Heading</h2>
<h3 className="type-heading-lg">Section Heading</h3>
<p className="type-text-md">Body text paragraph.</p>
<p className="type-text-sm-strong">Emphasized small text.</p>
<code className="type-code-sm">inlineCode()</code>