E-Crystal Design System

Guide

Quick reference for the Typography component and design tokens.

Typography Component

Quick start

This is an H2 with accent color

<Typography variant="h2" color="accentPrimary">…</Typography>

Prop	Type	Description
variant	TypographyVariant	Style token (title-1…caption-2)
color	TypographyColor	Text color from theme
as	React.ElementType	Override HTML tag
weight	TypographyWeight	Font weight override
limit	number	Max chars before truncating (tooltip on hover by default)
seeMore	boolean	Show inline “See more” button instead of tooltip
tooltip	boolean	Deprecated — tooltip is automatic when limit is set
seeMoreText	string	Label for the “See more” toggle button (default: ‘See more’)
seeLessText	string	Label for the “See less” toggle button (default: ‘See less’)
className	string	Additional classes

All variants

title-1 — The quick brown fox

<Typography variant="title-1" />

title-2 — The quick brown fox

<Typography variant="title-2" />

title-3 — The quick brown fox

<Typography variant="title-3" />

h1 — The quick brown fox

<Typography variant="h1" />

h2 — The quick brown fox

<Typography variant="h2" />

h3 — The quick brown fox

<Typography variant="h3" />

h4 — The quick brown fox

<Typography variant="h4" />

h5 — The quick brown fox

<Typography variant="h5" />

h6 — The quick brown fox

<Typography variant="h6" />

body-1 — The quick brown fox

<Typography variant="body-1" />

body-2 — The quick brown fox

<Typography variant="body-2" />

body-3 — The quick brown fox

<Typography variant="body-3" />

body-4 — The quick brown fox

<Typography variant="body-4" />

label-1 — The quick brown fox<Typography variant="label-1" />

label-2 — The quick brown fox<Typography variant="label-2" />

label-3 — The quick brown fox<Typography variant="label-3" />

caption-1 — The quick brown fox<Typography variant="caption-1" />

caption-2 — The quick brown fox<Typography variant="caption-2" />

With color prop

Default text

color="primary"

Secondary text

color="secondary"

Accent

color="accentPrimary"

Success

color="successPrimary"

Error

color="errorPrimary"

Warning

color="warningPrimary"

Info

color="infoPrimary"

Offer

color="offerPrimary"

White

color="white"

With weight prop

thin (100)

The quick brown fox jumps over the lazy dog

weight="thin"

light (300)

The quick brown fox jumps over the lazy dog

weight="light"

regular (400)

The quick brown fox jumps over the lazy dog

weight="regular"

medium (500)

The quick brown fox jumps over the lazy dog

weight="medium"

semibold (600)

The quick brown fox jumps over the lazy dog

weight="semibold"

bold (700)

The quick brown fox jumps over the lazy dog

weight="bold"

black (900)

The quick brown fox jumps over the lazy dog

weight="black"

Override HTML tag with as

This H3 renders as a div

<Typography variant="h3" as="div" />

Extra classes with className

Italic accent body text

<Typography variant="body-1" className="italic text-accent-primary" />

With limit (tooltip on hover)

The quick brown fox jumps over the lazy dog. This sentence is intentionally verbose so it exceeds the character limit and shows a tooltip with the full text on hover.

<Typography variant="body-2" limit={80}>…long text…</Typography>

With limit + seeMore (inline “See more” button)

The quick brown fox jumps over the lazy dog. This sentence is intentionally verbose so it exceeds the character limit and shows a “See more” toggle that expands the full text inline when clicked.The quick brown fox jumps over the lazy dog. This sentence is intentionally verbose so it exceeds the character limit and shows a “See more” toggle that expands the full text inline when clicked.

<Typography variant="body-2" limit={80} seeMore>…long text…</Typography>

Color Tokens

text

bg

border

icon

Type Scale

Title 1The quick brown fox72/88

Title 2The quick brown fox64/76

Title 3The quick brown fox56/68

H1The quick brown fox56/68

H2The quick brown fox48/58

H3The quick brown fox40/48

H4The quick brown fox32/38

H5The quick brown fox24/30

H6The quick brown fox20/24

Body 1The quick brown fox18/28

Body 2The quick brown fox16/24

Body 3The quick brown fox14/20

Body 4The quick brown fox12/16

Label 1The quick brown fox16/22

Label 2The quick brown fox14/20

Label 3The quick brown fox12/16

Caption 1The quick brown fox10/12

Caption 2The quick brown fox9/10

Fonts

Montserrat

Headings & UI

font-heading

Geist Sans

Body text

font-sans

Geist Mono

Code blocks

font-mono

Font Weights

thin

100

extralight

200

light

300

regular

400

medium

500

semibold

600

bold

700

extrabold

800

black

900

Hooks Guide

queryHooks Documentation

Complete guide for useFetchData, useApiMutation, useInfiniteFetchData, and useSafeUpdate.

Providers & Layouts

Providers & Layouts Documentation

Theme system, layout provider, sidebar management, and app shell.