Customization Guide#

This guide explains how you can easily change the look and feel of your project, like its colors and fonts.

Customizing Colors#

You can easily change the main colors used throughout the project.

Where to Change Colors:

Find the file named variables.css in your project's src/styles folder. This file acts like the main control panel for your project's appearance and contains all CSS custom properties (variables).

How to Change Colors:

1. Open the variables.css file.
2. Look for the /* ==== COLORS ==== */ section.
3. You'll see CSS custom properties (variables) that start with --color- like:
   • --color-primary-500: #864ffe (main primary color)
   • --color-secondary: #1a1a1c (secondary color)
   • --color-accent: #fcfcfc (accent color)

/* Example color variables in variables.css */
@theme {
  /* =============== COLORS =============== */
  --color-primary-500: #864ffe; /* <-- Main primary color */
  --color-primary-600: #7c31f6; /* <-- Darker primary shade */
  --color-primary-400: #a585ff; /* <-- Lighter primary shade */
  --color-secondary: #1a1a1c; /* <-- Secondary color */
  --color-accent: #fcfcfc; /* <-- Accent color */
  --color-background-1: #fcfcfd; /* <-- Main background */
  --color-background-2: #f9fafb; /* <-- Secondary background */
  /* ... and many more color variables */
}

4. To change colors:

   • Replace the hex codes (like #864ffe) with your desired color codes
   • The primary color has multiple shades (50, 100, 200, etc.) - you can update all of them or just the main ones
   • You can find color codes using online tools like Google Color Picker or color palette generators

5. Key color variables to customize:

   • --color-primary-500: Main primary color used throughout the app
   • --color-secondary: Secondary color for text and UI elements
   • --color-accent: Accent color for highlights
   • --color-background-1 to --color-background-11: Various background colors
   • --color-stroke-1 to --color-stroke-9: Border and stroke colors

6. Save the file. Your project's colors should update immediately!

Using Colors in Your Code: These CSS variables can be used directly in your styles or through Tailwind CSS classes that reference them.

Customizing Font Size#

You can easily customize the font sizes used throughout the project by modifying the typography variables.

Where to Change Font Sizes:

Find the file named variables.css in your project's src/styles folder. Look for the /* ===== TYPOGRAPHY ===== */ section.

How to Change Font Sizes:

1. Open the variables.css file.
2. Look for the /* =============== TYPOGRAPHY =============== */ section.
3. You'll see CSS custom properties (variables) for different text sizes like:
   • --text-heading-1: 4.25rem (largest heading)
   • --text-heading-2: 3.25rem (second largest heading)
   • --text-tagline-1: 1rem (body text size)

/* Example typography variables in variables.css */
@theme {
  /* =============== TYPOGRAPHY =============== */
  --text-heading-1: 4.25rem; /* <-- Largest heading (68px) */
  --text-heading-1--line-height: 110%;
  --text-heading-2: 3.25rem; /* <-- Second heading (52px) */
  --text-heading-2--line-height: 120%;
  --text-heading-3: 2.5rem; /* <-- Third heading (40px) */
  --text-heading-3--line-height: 120%;
  --text-heading-4: 2rem; /* <-- Fourth heading (32px) */
  --text-heading-4--line-height: 130%;
  --text-heading-5: 1.5rem; /* <-- Fifth heading (24px) */
  --text-heading-5--line-height: 140%;
  --text-heading-6: 1.25rem; /* <-- Smallest heading (20px) */
  --text-heading-6--line-height: 140%;
  --text-tagline-1: 1rem; /* <-- Body text (16px) */
  --text-tagline-1--line-height: 150%;
  --text-tagline-2: 0.875rem; /* <-- Small text (14px) */
  --text-tagline-2--line-height: 150%;
  --text-tagline-3: 0.75rem; /* <-- Smallest text (12px) */
  --text-tagline-3--line-height: 150%;
}

4. To change font sizes:

   • Replace the rem values with your desired sizes
   • 1rem = 16px (browser default), so 2rem = 32px, 0.5rem = 8px
   • You can also adjust the line heights for better text spacing

5. Key typography variables to customize:

   • --text-heading-1 to --text-heading-6: Different heading sizes (H1 to H6)
   • --text-tagline-1: Main body text size
   • --text-tagline-2: Secondary/smaller text size
   • --text-tagline-3: Caption or very small text size
   • Line height variables (e.g., --text-heading-1--line-height): Control spacing between lines

6. Understanding the sizing system:

   • Headings go from 1 (largest) to 6 (smallest)
   • Taglines are for body text and smaller elements
   • Each size has an associated line-height for optimal readability

7. Save the file. Your project's font sizes should update immediately!

Using Font Sizes in Your Code: These CSS variables can be used directly in your styles or through Tailwind CSS classes that reference them.