Next.js
Customization
Customize colors and typography by editing variables.
This guide explains how you can change the look and feel of your project, like its colors and fonts.
Customizing colors
You can change the main colors used throughout the project from src/styles/variables.css.
- Open
variables.css - Find the
/* ==== COLORS ==== */section - Update the
--color-*variables (for example--color-primary-500)
Example:
@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;
--color-accent: #fcfcfc;
--color-background-1: #fcfcfd;
--color-background-2: #f9fafb;
}
Key variables to customize:
--color-primary-500: main brand color--color-secondary: secondary text/UI color--color-accent: accent color--color-background-1…--color-background-11: background colors--color-stroke-1…--color-stroke-9: borders/strokes
Customizing font size
You can customize font sizes and line heights in src/styles/variables.css under the typography section.
Example:
@theme {
/* =============== TYPOGRAPHY =============== */
--text-heading-1: 4.25rem;
--text-heading-1--line-height: 110%;
--text-heading-2: 3.25rem;
--text-heading-2--line-height: 120%;
--text-heading-3: 2.5rem;
--text-heading-3--line-height: 120%;
--text-heading-4: 2rem;
--text-heading-4--line-height: 130%;
--text-heading-5: 1.5rem;
--text-heading-5--line-height: 140%;
--text-heading-6: 1.25rem;
--text-heading-6--line-height: 140%;
--text-tagline-1: 1rem;
--text-tagline-1--line-height: 150%;
--text-tagline-2: 0.875rem;
--text-tagline-2--line-height: 150%;
--text-tagline-3: 0.75rem;
--text-tagline-3--line-height: 150%;
}
1rem is typically 16px by default (so 2rem is ~32px). Adjust both size and line-height for readability.