GiantMallows.com

Design System Demo

Primary Colors

Background Colors

bg-primary-100
bg-primary-300
bg-primary-500
bg-primary-600
bg-primary-800

Text Colors

text-primary-400

text-primary-600

text-primary-700

text-primary-800

text-primary-900

Secondary Colors

Background Colors

bg-secondary-100
bg-secondary-200
bg-secondary-400
bg-secondary-600
bg-secondary-800

Text Colors

text-secondary-400

text-secondary-500

text-secondary-600

text-secondary-700

text-secondary-800

Component Examples

Primary Button

Secondary Button

Card Example

This is a card with primary accents

Additional Color Palettes

Success

bg-success-100
bg-success-600

text-success-600

Warning

bg-warning-100
bg-warning-600

text-warning-600

Error

bg-error-100
bg-error-600

text-error-600

Accent

bg-accent-100
bg-accent-600

text-accent-600

Usage Guide

You can now use the following utility classes throughout your application:

  • bg-primary-{50,100,200,...,950} - Primary background colors
  • text-primary-{50,100,200,...,950} - Primary text colors
  • bg-secondary-{50,100,200,...,950} - Secondary background colors
  • text-secondary-{50,100,200,...,950} - Secondary text colors
  • bg-success-{50,100,200,...,950} - Success colors
  • bg-warning-{50,100,200,...,950} - Warning colors
  • bg-error-{50,100,200,...,950} - Error colors
  • bg-accent-{50,100,200,...,950} - Accent colors