Core text styles used across product interfaces. Each style specifies size, line height, weight, and font family.
Heading L30/36 Semi Bold
The quick brown fox jumps over the lazy dog
Heading M24/32 Semi Bold
The quick brown fox jumps over the lazy dog
Title L20/28 Medium
The quick brown fox jumps over the lazy dog
Title M18/28 Medium
The quick brown fox jumps over the lazy dog
Body L18/28 Regular
The quick brown fox jumps over the lazy dog
Body M16/24 Regular
The quick brown fox jumps over the lazy dog
Body S14/20 Regular
The quick brown fox jumps over the lazy dog
Label L14/20 Medium
The quick brown fox jumps over the lazy dog
Label M12/16 Medium
The quick brown fox jumps over the lazy dog
Code M14/20 Regular
const result = await fetchData();
Code S12/16 Regular
const result = await fetchData();
Display and marketing styles for landing pages, hero sections, and editorial content.
Display 2XL60/68 Bold
Build better
Display XL48/56 Bold
Build better products
Display L40/48 Semi Bold
Build better products faster
Display M32/40 Semi Bold
Build better products faster
Display S24/32 Semi Bold
Build better products faster with Lexicon
Lead L20/28 Regular
A comprehensive design system for building modern interfaces with confidence.
Lead M18/28 Regular
A comprehensive design system for building modern interfaces with confidence.
Eyebrow L14/20 Semi Bold +1.5ls
DESIGN SYSTEM
Eyebrow M12/16 Semi Bold +1.2ls
COMPONENTS
Quote L24/32 Regular
Design is not just what it looks like — design is how it works.
Quote M20/28 Regular
Design is not just what it looks like — design is how it works.
NameTypeValue
--font-displayfont-family'Satoshi Variable', system-ui, sans-serif
--font-bodyfont-family'DM Sans', system-ui, sans-serif
--font-monofont-family'JetBrains Mono', ui-monospace, monospace
font-size/xsfont-size12px
font-size/smfont-size14px
font-size/mdfont-size16px
font-size/lgfont-size18px
font-size/xlfont-size20px
font-size/2xlfont-size24px
font-size/3xlfont-size30px
font-size/4xlfont-size32px
font-size/5xlfont-size40px
font-size/6xlfont-size48px
font-size/7xlfont-size60px
font-weight/regularfont-weight400
font-weight/mediumfont-weight500
font-weight/semiboldfont-weight600
font-weight/boldfont-weight700
line-height/tightline-height16px
line-height/snugline-height20px
line-height/normalline-height24px
line-height/relaxedline-height28px
line-height/looseline-height32px
line-height/displayline-height36px
letter-spacing/tightletter-spacing-0.02em
letter-spacing/normalletter-spacing0em
letter-spacing/wideletter-spacing0.05em
letter-spacing/widerletter-spacing0.1em
