Pluma
Overview
About
MCP server
CLI
Codemods
3.0.0
Button Variant Rename
2.170.0
Banner Description Prop
Getting started
Contributing
Breaking changes
Changelog
Foundations
Content
Icons
Motion
Principles
Style utilities
Test helpers
Tokens
All Tokens
Color
Spacing
Typography
Elevation
Motion
AI
Components
Status
Layout
Accordion
AccordionGroup
AspectRatio
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
SplitView
Stack
Typography
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Content
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Navigation
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Buttons
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Forms
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
FileField
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Data display
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Timeline
Feedback
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Overlays
Blanket
ConfirmationModal
Drawer
Drawer manager
Modal
Modal manager
Popover
Tooltip
Misc
VisuallyHidden
Patterns
Density
States
Advanced
Ember Floating UI
Ember prop spreading
ESLint plugin
tooltip-custom-interactive
no-banned-imports
enforce-pluma-elements
no-deprecated-apis
no-deprecated-icons
no-raw-pluma-classnames
no-raw-pluma-css-variables
require-form-control-label
prefer-managed-modals
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React yield
Fly Migration
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.189.0
Iconsv1.19.0
MCPv0.8.61
Tokensv0.34.3

Typography

Font family, size, and weight primitives plus composite text styles.

Font

Font family

Font family tokens
NameUnderlying Value
Aa
font-family-mono
themeVars['font-family']['mono']
Monaco, Menlo, Consolas, Liberation Mono, Courier, Monospace
Aa
font-family-sans
themeVars['font-family']['sans']
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

Font size

Font size tokens
NameUnderlying Value
Aa
font-size-xxs
themeVars['font-size']['xxs']
12px
Aa
font-size-xs
themeVars['font-size']['xs']
13px
Aa
font-size-s
themeVars['font-size']['s']
14px
Aa
font-size-m
themeVars['font-size']['m']
16px
Aa
font-size-l
themeVars['font-size']['l']
20px
Aa
font-size-xl
themeVars['font-size']['xl']
24px
Aa
font-size-xxl
themeVars['font-size']['xxl']
32px
Aa
font-size-xxxl
themeVars['font-size']['xxxl']
48px
Aa
font-size-button
themeVars['font-size']['button']
font-size-s
14px

Font weight

Font weight tokens
NameUnderlying Value
Aa
font-weight-light
themeVars['font-weight']['light']
300
Aa
font-weight-regular
themeVars['font-weight']['regular']
400
Aa
font-weight-medium
themeVars['font-weight']['medium']
500
Aa
font-weight-semibold
themeVars['font-weight']['semibold']
600
Aa
font-weight-bold
themeVars['font-weight']['bold']
700
Aa
font-weight-heavy
themeVars['font-weight']['heavy']
900

Text

Text tokens
NameUnderlying Value
Aatext-brand-h1
  • fontFamily: Poppins
  • fontSize: 52px
  • fontWeight: 500
  • letterSpacing: 0%
  • lineHeight: 56px
  • textTransform: none
  • textDecoration: none
Aatext-brand-h2
  • fontFamily: Poppins
  • fontSize: 40px
  • fontWeight: 500
  • letterSpacing: 0%
  • lineHeight: 48px
  • textTransform: none
  • textDecoration: none
Aatext-brand-h3
  • fontFamily: Poppins
  • fontSize: 32px
  • fontWeight: 500
  • letterSpacing: 0%
  • lineHeight: 40px
  • textTransform: none
  • textDecoration: none
Aatext-brand-h4
  • fontFamily: Poppins
  • fontSize: 24px
  • fontWeight: 500
  • letterSpacing: 0%
  • lineHeight: 32px
  • textTransform: none
  • textDecoration: none
Aatext-brand-h5
  • fontFamily: Poppins
  • fontSize: 18px
  • fontWeight: 500
  • letterSpacing: 0%
  • lineHeight: 26px
  • textTransform: none
  • textDecoration: none
Aatext-brand-h6
  • fontFamily: Poppins
  • fontSize: 14px
  • fontWeight: 500
  • letterSpacing: 0%
  • lineHeight: 16px
  • textTransform: none
  • textDecoration: none
Aatext-brand-label
  • fontFamily: Poppins
  • fontSize: 12px
  • fontWeight: 600
  • letterSpacing: 4%
  • lineHeight: 14px
  • textTransform: uppercase
  • textDecoration: none
Aatext-brand-p
  • fontFamily: SF Pro Text
  • fontSize: 16px
  • fontWeight: 400
  • letterSpacing: 0%
  • lineHeight: 28px
  • textTransform: none
  • textDecoration: none
Aatext-brand-p-small
  • fontFamily: SF Pro Text
  • fontSize: 14px
  • fontWeight: 400
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: none
Aatext-brand-p-subheader
  • fontFamily: SF Pro Text
  • fontSize: 24px
  • fontWeight: 400
  • letterSpacing: 0%
  • lineHeight: 36px
  • textTransform: none
  • textDecoration: none
Aatext-product-code
  • fontFamily: font-family-mono
    Monaco, Menlo, Consolas, Liberation Mono, Courier, Monospace
  • fontSize: 0.9em
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: inherit
  • textTransform: none
  • textDecoration: none
Aatext-product-h1
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xl
    24px
  • fontWeight: font-weight-semibold
    600
  • letterSpacing: 0%
  • lineHeight: 24px
  • textTransform: none
  • textDecoration: none
Aatext-product-h2
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: 18px
  • fontWeight: font-weight-bold
    700
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: none
Aatext-product-h3
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-m
    16px
  • fontWeight: font-weight-semibold
    600
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: none
Aatext-product-h4
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-s
    14px
  • fontWeight: font-weight-semibold
    600
  • letterSpacing: 0%
  • lineHeight: 16px
  • textTransform: none
  • textDecoration: none
Aatext-product-label
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xxs
    12px
  • fontWeight: font-weight-medium
    500
  • letterSpacing: 1%
  • lineHeight: normal
  • textTransform: none
  • textDecoration: none
Aatext-product-label-secondary
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: 12px
  • fontWeight: font-weight-medium
    500
  • letterSpacing: 0%
  • lineHeight: 14px
  • textTransform: none
  • textDecoration: none
Aatext-product-link
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-s
    14px
  • fontWeight: font-weight-medium
    500
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: underline
Aatext-product-link-secondary
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-s
    14px
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: underline
Aatext-product-p
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-s
    14px
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: none
Aatext-product-p-active
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-s
    14px
  • fontWeight: font-weight-semibold
    600
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: none
Aatext-product-p-secondary
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-s
    14px
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: 20px
  • textTransform: none
  • textDecoration: none
Aatext-product-ps
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xs
    13px
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: 18px
  • textTransform: none
  • textDecoration: none
Aatext-product-ps-active
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xs
    13px
  • fontWeight: font-weight-semibold
    600
  • letterSpacing: 0%
  • lineHeight: 18px
  • textTransform: none
  • textDecoration: none
Aatext-product-pxs
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xxs
    12px
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: 18px
  • textTransform: none
  • textDecoration: none
Aatext-product-pxs-active
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xxs
    12px
  • fontWeight: font-weight-semibold
    600
  • letterSpacing: 0%
  • lineHeight: 18px
  • textTransform: none
  • textDecoration: none
Aatext-product-pxs-secondary
  • fontFamily: font-family-sans
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • fontSize: font-size-xxs
    12px
  • fontWeight: font-weight-regular
    400
  • letterSpacing: 0%
  • lineHeight: 18px
  • textTransform: none
  • textDecoration: none

On this page

Font
Font family
Font size
Font weight
Text