This PR implements a comprehensive design token system using Tailwind CSS v4, optimizes font loading, and ensures consistent typography across all components. The changes establish a single source of truth for design values and resolve font weight conflicts.
Changes
Design Token System: Added complete design token system in app/tailwind.css with spacing, colors, typography, shadows, and border radius tokens
Font Loading Optimization: Updated app/layout.js to load all required font weights (400, 500, 600, 700, 800) with display: "swap" for better performance
Typography Classes: Implemented typography utility classes that automatically handle font families and weights
Font Weight Conflicts: Resolved conflicts between typography classes and manual font weight overrides
Design Token Mapping: Ensured all Tailwind numeric classes correctly map to design tokens (e.g., p-8 = var(--spacing-scale-032))
Key Components Updated
HeroBanner.js: Updated border radius to use design token (rounded-[var(--spacing-scale-008)])
NumberedCards.js: Updated max-width to use design token (max-w-[var(--spacing-measures-max-width-lg)])
Footer.js: Updated spacing tokens and typography to use design tokens consistently
How to Test
Run locally: npm run dev and verify all components render correctly
Check typography: Verify font weights display properly (400, 500, 600, 700, 800) across all components
Test responsive layout: Check all breakpoints (xsm, sm, md, lg, xl) maintain consistent spacing and typography
Verify design tokens: Confirm spacing, colors, and border radius use design tokens consistently
Font loading: Check browser dev tools to ensure all font weights load without fallbacks
Storybook: Run npm run storybook to verify component stories display correctly
# Update Design Token System and Font Optimization
## Overview
This PR implements a comprehensive design token system using Tailwind CSS v4, optimizes font loading, and ensures consistent typography across all components. The changes establish a single source of truth for design values and resolve font weight conflicts.
## Changes
- **Design Token System**: Added complete design token system in `app/tailwind.css` with spacing, colors, typography, shadows, and border radius tokens
- **Font Loading Optimization**: Updated `app/layout.js` to load all required font weights (400, 500, 600, 700, 800) with `display: "swap"` for better performance
- **Typography Classes**: Implemented typography utility classes that automatically handle font families and weights
- **Font Weight Conflicts**: Resolved conflicts between typography classes and manual font weight overrides
- **Design Token Mapping**: Ensured all Tailwind numeric classes correctly map to design tokens (e.g., `p-8` = `var(--spacing-scale-032)`)
### Key Components Updated
- **HeroBanner.js**: Updated border radius to use design token (`rounded-[var(--spacing-scale-008)]`)
- **NumberedCards.js**: Updated max-width to use design token (`max-w-[var(--spacing-measures-max-width-lg)]`)
- **Footer.js**: Updated spacing tokens and typography to use design tokens consistently
## How to Test
1. **Run locally**: `npm run dev` and verify all components render correctly
2. **Check typography**: Verify font weights display properly (400, 500, 600, 700, 800) across all components
3. **Test responsive layout**: Check all breakpoints (xsm, sm, md, lg, xl) maintain consistent spacing and typography
4. **Verify design tokens**: Confirm spacing, colors, and border radius use design tokens consistently
5. **Font loading**: Check browser dev tools to ensure all font weights load without fallbacks
6. **Storybook**: Run `npm run storybook` to verify component stories display correctly
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Update Design Token System and Font Optimization
Overview
This PR implements a comprehensive design token system using Tailwind CSS v4, optimizes font loading, and ensures consistent typography across all components. The changes establish a single source of truth for design values and resolve font weight conflicts.
Changes
app/tailwind.csswith spacing, colors, typography, shadows, and border radius tokensapp/layout.jsto load all required font weights (400, 500, 600, 700, 800) withdisplay: "swap"for better performancep-8=var(--spacing-scale-032))Key Components Updated
rounded-[var(--spacing-scale-008)])max-w-[var(--spacing-measures-max-width-lg)])How to Test
npm run devand verify all components render correctlynpm run storybookto verify component stories display correctly