Design System
Typography
Typography system and font usage in the YaVendio Design System
Font Family
Bricolage Grotesque
YaVendio uses Bricolage Grotesque as its primary typeface — a modern, versatile font with excellent readability.
Bricolage Grotesque is a free, open-source variable font available through Google Fonts.
Properties:
- Style: Sans-serif
- Variable: Yes (200-800 weights)
- Character Set: Latin extended
- License: Open Font License
Installation
import { Bricolage_Grotesque } from 'next/font/google'
const bricolageGrotesque = Bricolage_Grotesque({
subsets: ['latin'],
variable: '--font-bricolage-grotesque',
weight: ['400', '500', '600', '700'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={bricolageGrotesque.variable}>
<body>{children}</body>
</html>
)
}module.exports = {
theme: {
extend: {
fontFamily: {
bricolage: ['var(--font-bricolage-grotesque)'],
},
},
},
}<div className="font-bricolage">
This text uses Bricolage Grotesque
</div>Typography Scale
Headings
| Level | Size | Line Height | Weight | Usage |
|---|---|---|---|---|
| H1 | 32px | 1.2 | 700 | Page titles, hero headings |
| H2 | 24px | 1.3 | 600 | Section headings |
| H3 | 20px | 1.4 | 600 | Subsection headings |
| H4 | 18px | 1.4 | 500 | Card titles, small headings |
Body Text
| Size | px | Line Height | Weight | Usage |
|---|---|---|---|---|
| Large | 18px | 1.6 | 400 | Lead paragraphs, introductory text |
| Base | 16px | 1.5 | 400 | Default body text |
| Small | 14px | 1.5 | 400 | Secondary text, captions, buttons |
| XS | 12px | 1.4 | 400 | Labels, helper text |
Font Weights
font-weight: 400; /* Regular - Body text */
font-weight: 500; /* Medium - Emphasized text */
font-weight: 600; /* Semibold - Headings */
font-weight: 700; /* Bold - Strong emphasis */Line Height
line-height: 1.3; /* Tight - Headings */
line-height: 1.5; /* Normal - Body text */
line-height: 1.6; /* Relaxed - Large body text */YaVendio components use leading-[1.3] for button text to maintain compact, balanced proportions.
Button Typography
font-family: var(--font-bricolage-grotesque);
font-weight: 500;
font-size: 14px;
line-height: 1.3;Text Utilities
Tailwind Classes
// Small medium text
<div className="font-bricolage text-sm font-medium leading-[1.3]">
Small medium text
</div>
// Base body text
<div className="font-bricolage text-base font-normal">
Base body text
</div>
// Section heading
<div className="font-bricolage text-2xl font-semibold">
Section heading
</div>Custom Typography Classes
.heading-1 {
@apply font-bricolage text-[32px] font-bold leading-[1.2];
}
.heading-2 {
@apply font-bricolage text-[24px] font-semibold leading-[1.3];
}
.body-text {
@apply font-bricolage text-base font-normal leading-[1.5];
}
.small-text {
@apply font-bricolage text-sm font-normal leading-[1.5];
}Accessibility
Never use font sizes smaller than 16px for body text to maintain readability. 14px is only acceptable for compact UI elements such as buttons and secondary labels.
Minimum sizes:
- Body text: 16px
- UI elements (buttons, captions): 14px
- Labels and helper text: 12px
Contrast ratios:
- Normal text (< 18px): 4.5:1 minimum
- Large text (≥ 18px): 3:1 minimum
Line length:
- Desktop: 60-80 characters
- Mobile: 40-60 characters
.prose {
max-width: 65ch; /* ~65 characters */
}Responsive Typography
.heading {
font-size: 24px; /* Mobile */
}
@media (min-width: 768px) {
.heading {
font-size: 32px; /* Desktop */
}
}<h1 className="text-2xl md:text-3xl lg:text-4xl">
Responsive Heading
</h1>Best Practices
Examples
Text Hierarchy
export default function Example() {
return (
<div className="space-y-4">
<h1 className="font-bricolage text-4xl font-bold">
Main Page Title
</h1>
<h2 className="font-bricolage text-2xl font-semibold">
Section Heading
</h2>
<p className="font-bricolage text-base">
Regular body text with good readability.
</p>
<p className="font-bricolage text-sm text-gray-600">
Secondary text or helper information.
</p>
</div>
)
}Button Text
<div className="flex gap-4">
<YaButton variant="primary" size="default">
Default Size
</YaButton>
<YaButton variant="primary" size="small">
Small Size
</YaButton>
</div>