Typography

Font Tokens

Cerberus provides a set of font tokens (theme.tokens.fonts) that define the font families used throughout the design system. These font tokens serve as the foundation for all text styles and typography decisions.

Font tokens are designed to be semantic and descriptive:

• display - Primary font reserved for display headings (Poppins)
• sans - Primary font used for body text and regular headings (Poppins)
• mono - Monospace font used for code and technical content (Recursive)

Customizing Font Tokens:

Font tokens can be customized in two ways: at the Panda config level or through CSS custom properties.

Option 1: Panda Config Level

Override font tokens directly in your panda.config.ts file:

1
import {
2
  createCerberusConfig,
3
  createCerberusPreset,
4
} from '@cerberus/panda-preset'
5

6
export default createCerberusConfig({
7
  presets: [createCerberusPreset()],
8

9
  include: ['./app/**/*.{ts,tsx}'],
10
  exclude: [],
11

12
  theme: {
13
    tokens: {
14
      fonts: {
15
        // Override existing tokens
16
        display: { value: "Inter Display, sans-serif" },
17
        sans: { value: "Inter, system-ui, sans-serif" },
18
        mono: { value: "JetBrains Mono, Menlo, monospace" },
19

20
        // Add new font tokens
21
        brand: { value: "YourBrand Font, serif" },
22
      },
23
    },
24
  },
25
})

Option 2: CSS Custom Properties

Font tokens reference CSS custom properties with fallbacks for flexibility:

• Each token uses the pattern: var(--font-{name}, var(--font-{family}, {fallback}))
• You can override fonts by setting the appropriate CSS custom properties in your application

1
:root {
2
  --font-display: "Custom Display Font", sans-serif;
3
  --font-sans: "Custom Body Font", system-ui, sans-serif;
4
  --font-mono: "Custom Mono Font", Menlo, monospace;
5
}

Text Styles

Cerberus provides a comprehensive set of text styles that combine font families, sizes, weights, and spacing to create consistent typography patterns.

Text Style Categories:

• Display - Large headings for marketing and hero sections
• Heading - Structured content headings (h1-h6)
• Body - Main content text in various sizes
• Label - Form labels and UI text
• Button - Button text styling
• Mono - Monospace text for code and technical content

How to Use Text Styles: Text styles can be applied using the textStyle prop on Text components or through PandaCSS:

1
// Using Text component
2
<Text textStyle="heading-lg">Large Heading</Text>
3

4
// Using CSS function
5
<div className={css({ textStyle: 'body-md' })}>Body text</div>

Customization:

• Text styles are built from primitive font and sizing tokens
• Override individual properties by extending the text style object
• Create custom text styles following the same pattern for consistency