Design Tokens

Guidelines

  1. Text Styles
    1. Display Text
    2. Headings
    3. Body Text
    4. Labels
    5. Special
    6. Usage
      1. Responsive Text Styles
    7. Best Practices

Text Styles

Predefined typography compositions that bundle font size, weight, letter spacing, and line height into a single textStyle property.

Display Text

Large text for hero sections and prominent headings. All display styles use bold weight with tight line height and negative letter spacing.

Small Display

The quick brown fox jumps over the lazy dog

Medium Display

The quick brown fox jumps over the lazy dog

Large Display

The quick brown fox jumps over the lazy dog

Extra Large Display

The quick brown fox jumps over the lazy dog 
---
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

// Common styles using css.raw()
const containerStyle = stack({ gap: "lg" });

const sectionStackStyle = stack({
  gap: "2xs",
});

const baseTextContainerStyle = css.raw({
  backgroundColor: { base: "white", _dark: "neutral.surface" },
  padding: "md",
  borderRadius: "md",
  border: "1px solid",
  borderColor: { base: "neutral.border.muted", _dark: "neutral.border.muted" },
});

// Static text styles using css.raw()
const textStyles = {
  "display.sm": css.raw({ textStyle: "display.sm" }),
  "display.md": css.raw({ textStyle: "display.md" }),
  "display.lg": css.raw({ textStyle: "display.lg" }),
  "display.xl": css.raw({ textStyle: "display.xl" }),
} as const;

// Text style data
const textStyleExamples = [
  {
    title: "Small Display",
    styleKey: "display.sm" as keyof typeof textStyles,
  },
  {
    title: "Medium Display",
    styleKey: "display.md" as keyof typeof textStyles,
  },
  {
    title: "Large Display",
    styleKey: "display.lg" as keyof typeof textStyles,
  },
  {
    title: "Extra Large Display",
    styleKey: "display.xl" as keyof typeof textStyles,
  },
];

const sampleText = "The quick brown fox jumps over the lazy dog";
---

<div class={containerStyle}>
  {
    textStyleExamples.map((example) => (
      <div class={sectionStackStyle}>
        <h3>{example.title}</h3>
        <div class={css(baseTextContainerStyle, textStyles[example.styleKey])}>
          {sampleText}
        </div>
      </div>
    ))
  }
</div>
StyleFont SizeWeightLine HeightLetter Spacing
display.sm2xl (3.2rem)boldtight-0.02em
display.md3xl (4.0rem)boldtight-0.02em
display.lg4xl (4.8rem)boldtight-0.02em
display.xl5xl (6.4rem)boldtight-0.02em

Headings

Hierarchical headings for section structure.

Extra Large Heading

The quick brown fox jumps over the lazy dog

Large Heading

The quick brown fox jumps over the lazy dog

Medium Heading

The quick brown fox jumps over the lazy dog

Small Heading

The quick brown fox jumps over the lazy dog 
---
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

// Common styles using css.raw()
const containerStyle = stack({ gap: "lg" });

const sectionStackStyle = stack({
  gap: "2xs",
});

const baseTextContainerStyle = css.raw({
  backgroundColor: { base: "white", _dark: "neutral.surface" },
  padding: "md",
  borderRadius: "md",
  border: "1px solid",
  borderColor: { base: "neutral.border.muted", _dark: "neutral.border.muted" },
});

// Static text styles using css.raw()
const textStyles = {
  "heading.xl": css.raw({ textStyle: "heading.xl" }),
  "heading.lg": css.raw({ textStyle: "heading.lg" }),
  "heading.md": css.raw({ textStyle: "heading.md" }),
  "heading.sm": css.raw({ textStyle: "heading.sm" }),
} as const;

// Text style data
const textStyleExamples = [
  {
    title: "Extra Large Heading",
    styleKey: "heading.xl" as keyof typeof textStyles,
  },
  {
    title: "Large Heading",
    styleKey: "heading.lg" as keyof typeof textStyles,
  },
  {
    title: "Medium Heading",
    styleKey: "heading.md" as keyof typeof textStyles,
  },
  {
    title: "Small Heading",
    styleKey: "heading.sm" as keyof typeof textStyles,
  },
];

const sampleText = "The quick brown fox jumps over the lazy dog";
---

<div class={containerStyle}>
  {
    textStyleExamples.map((example) => (
      <div class={sectionStackStyle}>
        <h3>{example.title}</h3>
        <div class={css(baseTextContainerStyle, textStyles[example.styleKey])}>
          {sampleText}
        </div>
      </div>
    ))
  }
</div>
StyleFont SizeWeightLine HeightLetter Spacing
heading.xl2xl (3.2rem)boldsnug-0.01em
heading.lgxl (2.4rem)boldsnug—
heading.mdlg (2.0rem)600snug—
heading.smmd (1.6rem)600snug—

Body Text

Standard paragraph text in three sizes.

Large Body

The quick brown fox jumps over the lazy dog

Medium Body

The quick brown fox jumps over the lazy dog

Small Body

The quick brown fox jumps over the lazy dog 
---
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

// Common styles using css.raw()
const containerStyle = stack({ gap: "lg" });

const sectionStackStyle = stack({
  gap: "2xs",
});

const baseTextContainerStyle = css.raw({
  backgroundColor: { base: "white", _dark: "neutral.surface" },
  padding: "md",
  borderRadius: "md",
  border: "1px solid",
  borderColor: { base: "neutral.border.muted", _dark: "neutral.border.muted" },
});

// Static text styles using css.raw()
const textStyles = {
  "body.lg": css.raw({ textStyle: "body.lg" }),
  "body.md": css.raw({ textStyle: "body.md" }),
  "body.sm": css.raw({ textStyle: "body.sm" }),
} as const;

// Text style data
const textStyleExamples = [
  {
    title: "Large Body",
    styleKey: "body.lg" as keyof typeof textStyles,
  },
  {
    title: "Medium Body",
    styleKey: "body.md" as keyof typeof textStyles,
  },
  {
    title: "Small Body",
    styleKey: "body.sm" as keyof typeof textStyles,
  },
];

const sampleText = "The quick brown fox jumps over the lazy dog";
---

<div class={containerStyle}>
  {
    textStyleExamples.map((example) => (
      <div class={sectionStackStyle}>
        <h3>{example.title}</h3>
        <div class={css(baseTextContainerStyle, textStyles[example.styleKey])}>
          {sampleText}
        </div>
      </div>
    ))
  }
</div>
StyleFont SizeWeightLine Height
body.lglg (2.0rem)400normal
body.mdmd (1.6rem)400normal
body.smsm (1.4rem)400normal

Labels

UI labels for form fields and controls.

Large Label

The quick brown fox jumps over the lazy dog

Medium Label

The quick brown fox jumps over the lazy dog

Small Label

The quick brown fox jumps over the lazy dog 
---
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

// Common styles using css.raw()
const containerStyle = stack({ gap: "lg" });

const sectionStackStyle = stack({
  gap: "2xs",
});

const baseTextContainerStyle = css.raw({
  backgroundColor: { base: "white", _dark: "neutral.surface" },
  padding: "md",
  borderRadius: "md",
  border: "1px solid",
  borderColor: { base: "neutral.border.muted", _dark: "neutral.border.muted" },
});

// Static text styles using css.raw()
const textStyles = {
  "label.lg": css.raw({ textStyle: "label.lg" }),
  "label.md": css.raw({ textStyle: "label.md" }),
  "label.sm": css.raw({ textStyle: "label.sm" }),
} as const;

// Text style data
const textStyleExamples = [
  {
    title: "Large Label",
    styleKey: "label.lg" as keyof typeof textStyles,
  },
  {
    title: "Medium Label",
    styleKey: "label.md" as keyof typeof textStyles,
  },
  {
    title: "Small Label",
    styleKey: "label.sm" as keyof typeof textStyles,
  },
];

const sampleText = "The quick brown fox jumps over the lazy dog";
---

<div class={containerStyle}>
  {
    textStyleExamples.map((example) => (
      <div class={sectionStackStyle}>
        <h3>{example.title}</h3>
        <div class={css(baseTextContainerStyle, textStyles[example.styleKey])}>
          {sampleText}
        </div>
      </div>
    ))
  }
</div>
StyleFont SizeWeightLine Height
label.lgmd (1.6rem)boldsnug
label.mdsm (1.4rem)boldsnug
label.smxs (1.2rem)boldsnug

Special

Caption

The quick brown fox jumps over the lazy dog

Code

const quickBrownFox = "jumps over the lazy dog"; 
---
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

// Common styles using css.raw()
const containerStyle = stack({ gap: "lg" });

const sectionStackStyle = stack({
  gap: "2xs",
});

const baseTextContainerStyle = css.raw({
  backgroundColor: { base: "white", _dark: "neutral.surface" },
  padding: "md",
  borderRadius: "md",
  border: "1px solid",
  borderColor: { base: "neutral.border.muted", _dark: "neutral.border.muted" },
});

// Static text styles using css.raw()
const textStyles = {
  caption: css.raw({ textStyle: "caption" }),
  code: css.raw({ textStyle: "code" }),
} as const;

// Text style data
const textStyleExamples = [
  {
    title: "Caption",
    styleKey: "caption" as keyof typeof textStyles,
    text: "The quick brown fox jumps over the lazy dog",
  },
  {
    title: "Code",
    styleKey: "code" as keyof typeof textStyles,
    text: 'const quickBrownFox = "jumps over the lazy dog";',
  },
];
---

<div class={containerStyle}>
  {
    textStyleExamples.map((example) => (
      <div class={sectionStackStyle}>
        <h3>{example.title}</h3>
        <div class={css(baseTextContainerStyle, textStyles[example.styleKey])}>
          {example.text}
        </div>
      </div>
    ))
  }
</div>
StyleFont SizeFamilyWeightLine Height
captionxs (1.2rem)sans400normal
codesm (1.4rem)mono400snug

Usage

import { css } from "@pindoba/styled-system/css";

<h1 className={css({ textStyle: "display.lg" })}>Hero Heading</h1>
<h2 className={css({ textStyle: "heading.xl" })}>Section Title</h2>
<p className={css({ textStyle: "body.md" })}>Paragraph text</p>
<label className={css({ textStyle: "label.md" })}>Form Label</label>
<code className={css({ textStyle: "code" })}>npm install</code>

Responsive Text Styles

<h1 className={css({
  textStyle: { base: "heading.md", md: "heading.xl", lg: "display.sm" },
})}>
  Responsive heading
</h1>

Best Practices

  • Use textStyle instead of setting fontSize, fontWeight, and lineHeight individually
  • Maintain hierarchy: display > heading > body > label > special
  • Use responsive text styles for headings that need to scale across breakpoints
  1. Text Styles
    1. Display Text
    2. Headings
    3. Body Text
    4. Labels
    5. Special
    6. Usage
      1. Responsive Text Styles
    7. Best Practices