@ragrabbit/mcp

Verified
MIT License
OverviewInspectSchema Related Servers Reviews Score
{/* Typography.mdx */}

import { Meta, Typeset } from '@storybook/blocks';

<Meta title="Base/Typography" />

export const typography = {
  type: {
    primary: "--font-geist-sans",
  },
  weight: {
    regular: '400',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
  size: {
    s1: 12,
    s2: 14,
    s3: 16,
    m1: 20,
    m2: 24,
    m3: 28,
    l1: 32,
    l2: 40,
    l3: 48,
  },
};

export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

# Typography

**Font:** System Serif

**Weights:** All

<span class="font-sans">Font sans</span>

<Typeset
  fontSizes={[
    Number(typography.size.m1),
  ]}
  fontWeight={typography.weight.regular}
  sampleText={SampleText}
  fontFamily="serif"
/>

**Font:** System GeistMonoVF

**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)

<Typeset
  fontSizes={[
    Number(typography.size.m1),
  ]}
  fontWeight={typography.weight.regular}
  sampleText={SampleText}
  fontFamily="--font-geist-mono"
/>

**Font:** GeistSansVF

Regular
<Typeset
  fontSizes={[
    Number(typography.size.m1),
  ]}
  fontWeight={typography.weight.regular}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

Bold
<Typeset
  fontSizes={[
    Number(typography.size.m1),
  ]}
  fontWeight={typography.weight.bold}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

Extrabold
<Typeset
  fontSizes={[
    Number(typography.size.m1),
  ]}
  fontWeight={typography.weight.extrabold}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

Black
<Typeset
  fontSizes={[
    Number(typography.size.m1),
  ]}
  fontWeight={typography.weight.black}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

Sizes
<Typeset
  fontSizes={[
    Number(typography.size.s1),
    Number(typography.size.s2),
    Number(typography.size.s3),
    Number(typography.size.m1),
    Number(typography.size.m2),
    Number(typography.size.m3),
    Number(typography.size.l1),
    Number(typography.size.l2),
    Number(typography.size.l3),
  ]}
  fontWeight={typography.weight.black}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>