Typography
The design system uses a structured type scale with dedicated components for each text role.
Font Family
scss
$font-family-primary:
'Jost',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;Type Components
Each typography role has a dedicated Vue component with predefined sizes:
| Component | Sizes | Use Case |
|---|---|---|
Display | 2xs–3xl | Hero text, major headings |
Heading | 3xs–4xl | Section headings |
Body | xs–2xl | Paragraph text |
Label | 3xs–3xl | Form labels, captions |
PriceHeading | 2xs–3xl | Financial amounts |
ArticleBody | xs–3xl | Long-form content |
ArticleHeading | xs–3xl | Article section titles |
Usage
vue
<script setup>
import { Heading, Body, Label } from '@yellowcard/b2b-design-system';
</script>
<template>
<Heading size="lg">Account Overview</Heading>
<Body size="md">Your current balance and recent transactions.</Body>
<Label size="sm">Last updated: 2 hours ago</Label>
</template>Font Weights
| Weight | Token | Usage |
|---|---|---|
| 400 | $font-weight-regular | Body text |
| 500 | $font-weight-medium | Labels, buttons |
| 600 | $font-weight-semibold | Headings |
| 700 | $font-weight-bold | Display, emphasis |
SCSS Tokens
scss
@use '@yellowcard/b2b-design-system/scss/typography' as *;
.custom-heading {
font-size: $font-size-heading-lg;
font-weight: $font-weight-semibold;
line-height: $line-height-heading-lg;
}See Typography Tokens for the full list of size and line-height tokens.