F2Shipped

Typography

The type scale — display through caption — using Rethink Sans. All tokens live in charply-design/tokens.css and are exposed as both component classes and Tailwind utilities.

Type Scale

Each role has a class alias (.type-*) and a Tailwind utility (text-*).

The fastest way to reply

.type-displaytext-display56px / 64px / 500 / -0.03em

Safe by design

.type-h2text-h248px / 56px / 500 / -0.03em

Context-aware drafts

.type-h3text-h320px / 28px / 500 / 0

SETTINGS

.type-h4text-h412px / 18px / 500 / 0.05em (uppercase)

Works on X and LinkedIn without leaving the tab.

.type-bodytext-body14px / 20px / 400 / 0

WebReply reads the thread and suggests replies that match your voice.

.type-body-lgtext-body-lg17px / 28px / 400 / 0

Scan · Generate · Post

.type-body-listtext-body-list20px / 24px / 400 / 0

Last updated May 2026

.type-captiontext-caption12px / 16px / 400 / 0

Install extension

.type-buttontext-button15px / 24px / 500 / 0

Reference Table

Role	Class / Utility	Size	Line height	Weight	Tracking
Display / H1	`.type-displaytext-display`	56px	64px	500	-0.03em
Section H2	`.type-h2text-h2`	48px	56px	500	-0.03em
Subheading H3	`.type-h3text-h3`	20px	28px	500	0
Label H4	`.type-h4text-h4`	12px	18px	500	0.05em (uppercase)
Body	`.type-bodytext-body`	14px	20px	400	0
Body Large	`.type-body-lgtext-body-lg`	17px	28px	400	0
Body List	`.type-body-listtext-body-list`	20px	24px	400	0
Caption	`.type-captiontext-caption`	12px	16px	400	0
Button	`.type-buttontext-button`	15px	24px	500	0

Font Family

Rethink Sans

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

--font-family-sans--font-rethink-sansfont-sans

Usage Rules

✓Use text-body / text-caption for extension UI
✓Use text-muted-foreground for supporting copy
✓Reserve display scale for marketing hero sections

Don't

✗Use text-[13px] when text-caption exists
✗Use font-bold (700+) on landing pages
✗Apply negative tracking to body or caption roles