@ragrabbit/mcp
by madarco
Verified
{/* 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}
/>