Back to Brandbook

Adoption Check

Design token usage analysis

Adoption Summary

53% Adopted
15
Total Files
8
Using Tokens
7
Need Updates
6
Violations
Design Token Adoption53%

Token Violations

mediumcolor
components/landing/Hero.tsx:239
Inconsistent with theme system
bg-gradient-to-br from-violet-400 to-fuchsia-400
Use tokens.color.accent.sunrise.a and tokens.color.accent.sunrise.b
lowspacing
components/landing/Footer.tsx:154
Not using standardized spacing scale
mt-16
Use tokens.spacing.component.xl or Section component
lowradius
components/ui/Button.tsx:17
Hard-coded radius value
rounded-full
Consider using tokens.radius.full for consistency
mediumshadow
components/landing/StartQuizDialog.tsx:51
Missing semantic shadow token
shadow-2xl
Use tokens.shadow.dialog
highcolor
components/landing/Testimonials.tsx:35
Hard-coded colors break theme switching
bg-gradient-to-br from-violet-400 to-fuchsia-400
Use theme-aware gradient from tokens
mediumspacing
components/landing/HowItWorks.tsx:33
Duplicated spacing pattern
py-24 md:py-32
Use Section component with spacing='md'

Compliant Files

Container.tsx
100%
components/ui/Container.tsx
Tokens Used:
spacing.containercontainer.maxWidth
Section.tsx
100%
components/ui/Section.tsx
Tokens Used:
spacing.sectioncolor.surface
Card.tsx
95%
components/ui/Card.tsx
Tokens Used:
radius.2xlshadow.cardcolor.surface.glass
tokens.ts
100%
lib/tokens.ts
Tokens Used:
All design tokens defined
tokens.css
100%
styles/tokens.css
Tokens Used:
CSS custom properties

Migration Recommendations

High Priority (Breaking Changes)

  • • Replace hard-coded colors with theme-aware tokens
  • • Update gradient definitions to use accent color tokens
  • • Ensure all interactive elements use consistent focus rings

Medium Priority (Consistency)

  • • Replace spacing utilities with Section/Container components
  • • Standardize shadow usage across components
  • • Update border radius to use token scale

Low Priority (Optimization)

  • • Consolidate duplicate utility patterns
  • • Add semantic tokens for common use cases
  • • Document component variants and usage