Typography

Overview

Typography utilities provide consistent text styling based on design tokens. All classes use the s- namespace prefix to avoid conflicts with other CSS frameworks.

Font Size

Fluid typography that scales with viewport:

<p class="s-text-xs">Extra small text</p>
<p class="s-text-sm">Small text</p>
<p class="s-text-base">Base text (default)</p>
<p class="s-text-lg">Large text</p>
<p class="s-text-xl">Extra large text</p>
<p class="s-text-2xl">2x large text</p>
<p class="s-text-3xl">3x large text</p>
<p class="s-text-4xl">4x large text</p>
<p class="s-text-5xl">5x large text</p>

Font Weight

<p class="s-font-thin">Thin (100)</p>
<p class="s-font-extralight">Extra Light (200)</p>
<p class="s-font-light">Light (300)</p>
<p class="s-font-normal">Normal (400)</p>
<p class="s-font-medium">Medium (500)</p>
<p class="s-font-semibold">Semibold (600)</p>
<p class="s-font-bold">Bold (700)</p>
<p class="s-font-extrabold">Extra Bold (800)</p>
<p class="s-font-black">Black (900)</p>

Font Family

<p class="s-font-sans">Sans-serif font</p>
<p class="s-font-serif">Serif font</p>
<p class="s-font-mono">Monospace font</p>

Text Alignment

<p class="s-text-left">Left aligned</p>
<p class="s-text-center">Center aligned</p>
<p class="s-text-right">Right aligned</p>
<p class="s-text-justify">Justified text</p>
<p class="s-text-start">Start aligned (logical)</p>
<p class="s-text-end">End aligned (logical)</p>

Text Color

Semantic Colors

<p class="s-text-primary">Primary text color</p>
<p class="s-text-secondary">Secondary/muted text</p>
<p class="s-text-tertiary">Tertiary text</p>
<p class="s-text-inverse">Inverse text (for dark backgrounds)</p>
<p class="s-text-success">Success text</p>
<p class="s-text-warning">Warning text</p>
<p class="s-text-danger">Danger text</p>

Using Color Tokens

<p style="color: var(--s-primary-500);">Primary 500</p>
<p style="color: var(--s-accent-600);">Accent 600</p>

Line Height

<p class="s-leading-none">No extra line height (1)</p>
<p class="s-leading-tight">Tight line height (1.25)</p>
<p class="s-leading-snug">Snug line height (1.375)</p>
<p class="s-leading-normal">Normal line height (1.5)</p>
<p class="s-leading-relaxed">Relaxed line height (1.625)</p>
<p class="s-leading-loose">Loose line height (2)</p>

Letter Spacing

<p class="s-tracking-tighter">Tighter tracking (-0.05em)</p>
<p class="s-tracking-tight">Tight tracking (-0.025em)</p>
<p class="s-tracking-normal">Normal tracking (0)</p>
<p class="s-tracking-wide">Wide tracking (0.025em)</p>
<p class="s-tracking-wider">Wider tracking (0.05em)</p>
<p class="s-tracking-widest">Widest tracking (0.1em)</p>

Text Transform

<p class="s-uppercase">UPPERCASE TEXT</p>
<p class="s-lowercase">lowercase text</p>
<p class="s-capitalize">Capitalized Text</p>
<p class="s-normal-case">Normal case</p>

Text Decoration

<p class="s-underline">Underlined text</p>
<p class="s-overline">Overlined text</p>
<p class="s-line-through">Strikethrough text</p>
<p class="s-no-underline">No underline</p>

Decoration Styles

<p class="s-underline s-decoration-solid">Solid underline</p>
<p class="s-underline s-decoration-double">Double underline</p>
<p class="s-underline s-decoration-dotted">Dotted underline</p>
<p class="s-underline s-decoration-dashed">Dashed underline</p>
<p class="s-underline s-decoration-wavy">Wavy underline</p>

Text Overflow

Truncation (Attribute-based)

For semantic text truncation, use the s-truncate attribute:

<!-- Single line truncate -->
<p s-truncate>Long text that will be truncated with an ellipsis...</p>

<!-- Multi-line truncate -->
<p s-truncate="2">Text truncated to 2 lines...</p>
<p s-truncate="3">Text truncated to 3 lines...</p>
<p s-truncate="4">Text truncated to 4 lines...</p>

Text Overflow Classes

<p class="s-text-ellipsis">Text with ellipsis</p>
<p class="s-text-clip">Text that clips</p>

Text Wrap

<p class="s-text-wrap">Normal text wrapping</p>
<p class="s-text-nowrap">No wrapping</p>
<p class="s-text-balance">Balanced text (CSS text-wrap: balance)</p>
<p class="s-text-pretty">Pretty text (CSS text-wrap: pretty)</p>

Whitespace

<p class="s-whitespace-normal">Normal whitespace handling</p>
<p class="s-whitespace-nowrap">No wrapping</p>
<p class="s-whitespace-pre">Preserve whitespace</p>
<p class="s-whitespace-pre-line">Preserve newlines</p>
<p class="s-whitespace-pre-wrap">Preserve all, wrap</p>
<p class="s-whitespace-break-spaces">Break on spaces</p>

Word Break

<p class="s-break-normal">Normal word breaking</p>
<p class="s-break-words">Break long words</p>
<p class="s-break-all">Break anywhere</p>
<p class="s-break-keep">Keep words together</p>

Hyphens

<p class="s-hyphens-none">No hyphenation</p>
<p class="s-hyphens-manual">Manual hyphenation only</p>
<p class="s-hyphens-auto">Automatic hyphenation</p>

Vertical Alignment

<span class="s-align-baseline">Baseline</span>
<span class="s-align-top">Top</span>
<span class="s-align-middle">Middle</span>
<span class="s-align-bottom">Bottom</span>
<span class="s-align-text-top">Text top</span>
<span class="s-align-text-bottom">Text bottom</span>

List Styles

<ul class="s-list-none">No bullets</ul>
<ul class="s-list-disc">Disc bullets</ul>
<ol class="s-list-decimal">Numbered</ol>
<ul class="s-list-inside">List inside</ul>
<ul class="s-list-outside">List outside</ul>

Opacity

<p class="s-opacity-0">Invisible</p>
<p class="s-opacity-25">25% opacity</p>
<p class="s-opacity-50">50% opacity</p>
<p class="s-opacity-75">75% opacity</p>
<p class="s-opacity-100">Fully visible</p>

Links

<a href="#" class="s-link">Styled link with underline and hover</a>

Headings Example

<h1 class="s-text-4xl s-font-bold s-mb-4">Heading 1</h1>
<h2 class="s-text-3xl s-font-bold s-mb-3">Heading 2</h2>
<h3 class="s-text-2xl s-font-semibold s-mb-2">Heading 3</h3>
<h4 class="s-text-xl s-font-semibold s-mb-2">Heading 4</h4>
<h5 class="s-text-lg s-font-medium s-mb-1">Heading 5</h5>
<h6 class="s-text-base s-font-medium s-mb-1">Heading 6</h6>

CSS Custom Properties

:root {
  /* Font families */
  --s-font-sans: "Inter", system-ui, sans-serif;
  --s-font-serif: "Georgia", serif;
  --s-font-mono: "JetBrains Mono", monospace;

  /* Font sizes */
  --s-text-base: 1rem;
  --s-text-lg: 1.125rem;
  --s-text-xl: 1.25rem;
  /* ... etc */
}