062174 (Club blue - traditional, trustworthy)

secondary

DEB100 (Club yellow/gold - energy, visibility)

accent

10B981 (Green - soccer field aesthetic)

neutral

1F2937 (Dark gray for text)

base-100

FFFFFF (White backgrounds)

base-200

F3F4F6 (Light gray backgrounds)

base-300

E5E7EB (Medium gray borders)

Typography Guidelines Use font-sans with system fonts or Inter Ensure minimum 16px base font size for accessibility Apply proper line-height (1.5+ for body text) Use font-weight variations: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) Theme Configuration Example // tailwind.config.js module . exports = { plugins : [ require ( 'daisyui' ) ] , daisyui : { themes : [ { williamstown : { primary : '#062174' , // Club blue 'primary-content' : '#FFFFFF' , secondary : '#DEB100' , // Club gold 'secondary-content' : '#000000' , accent : '#10B981' , // Soccer green 'accent-content' : '#FFFFFF' , neutral : '#1F2937' , 'neutral-content' : '#FFFFFF' , 'base-100' : '#FFFFFF' , // White 'base-200' : '#F3F4F6' , // Light gray 'base-300' : '#E5E7EB' , // Medium gray 'base-content' : '#1F2937' , info : '#3ABFF8' , 'info-content' : '#000000' , success : '#36D399' , 'success-content' : '#000000' , warning : '#FBBD23' , 'warning-content' : '#000000' , error : '#F87272' , 'error-content' : '#000000' } } ] } } ; Component Selection Use DaisyUI Components For Navigation & Menus: navbar - Top navigation bar menu - Vertical/horizontal menu lists dropdown - Dropdown menus drawer - Mobile slide-out navigation breadcrumbs - Page navigation trail Actions: btn - Buttons with variants (btn-primary, btn-secondary, btn-ghost, btn-outline) btn-group - Grouped button sets swap - Toggle/swap icons (menu hamburger) link - Styled links Data Display: card - Content cards for news, fixtures, players badge - Labels and tags avatar - Profile pictures stat - Statistics display (goals, wins, etc.) table - Data tables for fixtures/results timeline - Match history timeline Forms: input - Text inputs with validation states textarea - Multi-line text select - Dropdown select checkbox - Checkboxes radio - Radio buttons toggle - Toggle switches range - Range sliders file-input - File upload Feedback: alert - Notifications and messages modal - Modal dialogs toast - Toast notifications loading - Loading spinners skeleton - Loading skeletons progress - Progress bars Layout: divider - Section dividers stack - Vertical stacking join - Join elements together indicator - Notification indicators Use Custom Tailwind For Hero sections with glassmorphism effects Complex asymmetric layouts Custom animations and transitions Grid-breaking designs from frontend-design skill Unique spacing patterns Advanced visual effects (backdrop-blur, gradients) Accessibility Patterns WCAG AA Compliance Color Contrast: DaisyUI automatically ensures contrast for text/background combinations Verify custom colors meet 4.5:1 ratio for normal text Verify custom colors meet 3:1 ratio for large text (18px+) Touch Targets: Use btn-lg for primary CTAs (ensures 44x44px minimum) Default btn is 48px height (meets requirements) Use btn-sm sparingly, only for secondary actions Form Accessibility: < label className = " form-control w-full "

< div className = " label "

< span className = " label-text "

Email address </ span

</ div

< input type = " email " placeholder = " you@example.com " className = " input input-bordered w-full " aria-required = " true " /> < div className = " label "

< span className = " label-text-alt "

We'll never share your email </ span

</ div

</ label

Focus States: DaisyUI includes visible focus indicators by default Test all interactive elements with keyboard navigation Use focus: variants for custom styling Semantic HTML: DaisyUI components use proper semantic HTML Add ARIA labels where needed: aria-label , aria-describedby Use role attribute for custom components Common Patterns for Sports Clubs Match/Fixture Card < div className = " card bg-base-100 shadow-xl "

< div className = " card-body "

< div className = " flex items-center justify-between "

< h3 className = " card-title text-lg "

Round 5 </ h3

< div className = " badge badge-primary "

Home </ div

</ div

< div className = " my-4 flex items-center justify-between "

< div className = " flex-1 text-center "

< p className = " text-xl font-bold "

Williamstown SC </ p

</ div

< div className = " px-4 text-center "

< p className = " text-3xl font-bold "

2 - 1 </ p

</ div

< div className = " flex-1 text-center "

< p className = " text-xl font-bold "

Opposition FC </ p

</ div

</ div

< div className = " card-actions justify-end "

< button className = " btn btn-ghost "

Match Report </ button

</ div

</ div

</ div

News Card < div className = " card bg-base-100 shadow-xl "

< figure

< img src = " /news-image.jpg " alt = " News headline " /> </ figure

< div className = " card-body "

< div className = " flex gap-2 "

< div className = " badge badge-secondary "

News </ div

< div className = " badge badge-outline "

Senior Men </ div

</ div

< h2 className = " card-title "

2026 Senior Men's Coaching Team </ h2

< p

Exciting announcement about our coaching lineup for the upcoming season... </ p

< div className = " card-actions mt-4 items-center justify-between "

< span className = " text-base-content/70 text-sm "

2 days ago </ span

< button className = " btn btn-primary "

Read More </ button

</ div

</ div

</ div

Navigation Header < div className = " navbar bg-primary text-primary-content "

< div className = " navbar-start "

< div className = " dropdown "

< button tabIndex = { 0 } className = " btn btn-ghost lg:hidden "

< svg className = " h-5 w-5 " fill = " none " viewBox = " 0 0 24 24 " stroke = " currentColor "

< path strokeLinecap = " round " strokeLinejoin = " round " strokeWidth = { 2 } d = " M4 6h16M4 12h8m-8 6h16 " /> </ svg

</ button

< ul tabIndex = { 0 } className = " menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow "

< li

< a

HOME </ a

</ li

< li

< a

ABOUT </ a

</ li

< li

< a

FIXTURES </ a

</ li

</ ul

</ div

< a className = " btn btn-ghost text-xl "

WILLIAMSTOWN SC </ a

</ div

< div className = " navbar-center hidden lg:flex "

< ul className = " menu menu-horizontal px-1 "

< li

< a

HOME </ a

</ li

< li

< a

ABOUT </ a

</ li

< li

< a

MEMBER INFO </ a

</ li

< li

< a

FIXTURES </ a

</ li

< li

< a

CALENDAR </ a

</ li

< li

< a

CONTACT </ a

</ li

< li

< a

SHOP </ a

</ li

</ ul

</ div

< div className = " navbar-end "

< button className = " btn btn-ghost btn-circle "

< svg className = " h-5 w-5 " fill = " none " viewBox = " 0 0 24 24 " stroke = " currentColor "

< path strokeLinecap = " round " strokeLinejoin = " round " strokeWidth = { 2 } d = " M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z " /> </ svg

</ button

</ div

</ div

Player Card < div className = " card card-compact bg-base-100 shadow-xl "

< figure

< img src = " /player-photo.jpg " alt = " Player name " className = " h-64 w-full object-cover " /> </ figure

< div className = " card-body "

< div className = " flex items-start justify-between "

< div

< h3 className = " card-title "

John Smith </ h3

< p className = " text-base-content/70 text-sm "

Midfielder </ p

</ div

< div className = " badge badge-lg badge-primary "

15 </ div

</ div

< div className = " stats stats-vertical mt-2 shadow "

< div className = " stat p-2 "

< div className = " stat-title text-xs "

Appearances </ div

< div className = " stat-value text-lg "

24 </ div

</ div

< div className = " stat p-2 "

< div className = " stat-title text-xs "

Goals </ div

< div className = " stat-value text-lg "

8 </ div

</ div

</ div

</ div

</ div

Event Card < div className = " card bg-base-100 shadow-xl "

< div className = " card-body "

< div className = " flex items-start gap-4 "

< div className = " text-center "

< div className = " text-primary text-4xl font-bold "

15 </ div

< div className = " text-base-content/70 text-sm "

NOV </ div

</ div

< div className = " flex-1 "

< h3 className = " card-title "

Season Launch Event </ h3

< p className = " text-base-content/70 mb-2 text-sm "

6:00 PM - 9:00 PM </ p

< p

Join us for the official 2026 season launch with the new coaching team... </ p

< div className = " card-actions mt-4 justify-end "

< button className = " btn btn-primary "

RSVP </ button

</ div

</ div

</ div

</ div

</ div

Responsive Utilities Breakpoint Classes Use DaisyUI's responsive modifiers with Tailwind breakpoints: // Button sizes < button className = " btn btn-sm md:btn-md lg:btn-lg "

Responsive Button </ button

// Card layout < div className = " grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 "

{ / Cards adapt to screen size / } </ div

// Navigation drawer (mobile) < div className = " drawer lg:drawer-open "

< input id = " drawer " type = " checkbox " className = " drawer-toggle " /> < div className = " drawer-content "

{ / Page content / } </ div

< div className = " drawer-side "

{ / Sidebar menu / } </ div

</ div

Mobile-First Patterns // Hide on mobile, show on desktop < div className = " hidden lg:block "

Desktop Menu </ div

// Show on mobile, hide on desktop < div className = " lg:hidden "

Mobile Menu </ div

// Collapse for accordion on mobile < div className = " collapse lg:collapse-open "

< input type = " checkbox " /> < div className = " collapse-title "

Click to expand </ div

< div className = " collapse-content "

Content </ div

</ div

Form Validation States // Success state < input type = " text " className = " input input-bordered input-success w-full " defaultValue = " valid@email.com " /> // Error state < input type = " text " className = " input input-bordered input-error w-full " aria-invalid = " true " aria-describedby = " email-error " /> < span id = " email-error " className = " text-error text-sm "

Please enter a valid email address </ span

// Warning state < input type = " text " className = " input input-bordered input-warning w-full " /> // Disabled state < input type = " text " className = " input input-bordered w-full " disabled /> Loading States // Button loading < button className = " btn btn-primary "

< span className = " loading loading-spinner "

</ span

Loading... </ button

// Skeleton loader < div className = " flex flex-col gap-4 "

< div className = " skeleton h-32 w-full "

</ div

< div className = " skeleton h-4 w-28 "

</ div

< div className = " skeleton h-4 w-full "

</ div

< div className = " skeleton h-4 w-full "

</ div

</ div

// Card skeleton < div className = " card bg-base-100 shadow-xl "

< div className = " skeleton h-48 w-full "

</ div

< div className = " card-body "

< div className = " skeleton h-4 w-3/4 "

</ div

< div className = " skeleton h-4 w-1/2 "

</ div

</ div

</ div

Modal Patterns // Basic modal < dialog id = " my_modal " className = " modal "

< div className = " modal-box "

< h3 className = " font-bold text-lg "

Match Report </ h3

< p className = " py-4 "

Detailed match information goes here... </ p

< div className = " modal-action "

< form method = " dialog "

< button className = " btn "

Close </ button

</ form

</ div

</ div

</ dialog

// Modal with backdrop < dialog id = " my_modal_2 " className = " modal modal-bottom sm:modal-middle "

< div className = " modal-box "

< h3 className = " font-bold text-lg "

Confirm Action </ h3

< p className = " py-4 "

Are you sure you want to proceed? </ p

< div className = " modal-action "

< form method = " dialog "

< button className = " btn btn-ghost "

Cancel </ button

< button className = " btn btn-primary "

Confirm </ button

</ form

</ div

</ div

< form method = " dialog " className = " modal-backdrop "

< button

close </ button

</ form

</ dialog

Performance Considerations Bundle Size DaisyUI adds approximately 25KB gzipped to your bundle Components are CSS-only (no JavaScript overhead) Use Tailwind's JIT mode for optimal bundle size Purge unused styles in production Optimization Tips // tailwind.config.js - Limit DaisyUI themes for smaller bundle daisyui : { themes : [ 'williamstown' ] , // Only include what you need darkTheme : false , // Disable if not using dark mode base : true , styled : true , utils : true , } Tree Shaking DaisyUI components are automatically tree-shaken when not used. Only include components you actually reference in your HTML/JSX. Combining DaisyUI with Custom Styles When to Mix // DaisyUI component with custom Tailwind < div className = " card bg-base-100 shadow-xl backdrop-blur-xl bg-opacity-80 "

< div className = " card-body "

{ / Glassmorphism effect added to DaisyUI card / } </ div

</ div

// DaisyUI with custom animations < button className = " btn btn-primary hover:scale-105 transition-transform duration-200 "

Hover Me </ button

Extending DaisyUI Components // tailwind.config.js module . exports = { theme : { extend : { // Add custom animations animation : { 'fade-in' : 'fadeIn 0.3s ease-in' } , keyframes : { fadeIn : { '0%' : { opacity : '0' , transform : 'translateY(10px)' } , '100%' : { opacity : '1' , transform : 'translateY(0)' } } } } } } ; Component Composition Building Complex Components // Fixture list with stats const FixtureList = ( ) => ( < div className = " overflow-x-auto "

< table className = " table-zebra table "

< thead

< tr

< th

Date </ th

< th

Home </ th

< th

Score </ th

< th

Away </ th

< th

Status </ th

</ tr

</ thead

< tbody

< tr

< td

Nov 15 </ td

< td className = " font-bold "

Williamstown SC </ td

< td className = " text-center "

2 - 1 </ td

< td

Opposition FC </ td

< td

< div className = " badge badge-success "

Win </ div

</ td

</ tr

</ tbody

</ table

</ div

) ; Best Practices Always use semantic HTML - DaisyUI builds on proper semantic elements Test keyboard navigation - Ensure all interactive elements are keyboard accessible Verify color contrast - Use tools to check WCAG compliance Use consistent spacing - Stick to Tailwind's spacing scale (p-4, gap-4, etc.) Leverage data-theme - Apply theme to container elements: