Colors & Fonts

Files: src/styles/theme.css, src/config/fonts.json · Skill level: Beginner

Components use named color tokens, so changing a token in one file changes it across the site.

Brand And Surface Colors

Open src/styles/theme.css. The colors are in the @theme block at the top:

@theme {
  /* Brand colors */
  --color-primary: #CCF664;
  --color-accent: #0f3d3a;

  /* Surface colors */
  --color-body: #FFFFFF;
  --color-theme-dark: #193133;
  --color-theme-light: #F5F6F7;
  --color-theme-cream: #FAF8F2;

  /* Content colors */
  --color-dark: #1e1e1e;
  --color-text-default: #5f5f5f;
}

Token	Used for	Tailwind classes
`--color-primary`	Primary buttons, highlights, accents	`bg-primary`, `text-primary`
`--color-accent`	Deep accent color	`bg-accent`, `text-accent`
`--color-body`	Page background	`bg-body`
`--color-body-secondary`	Alternate page background	`bg-body-secondary`
`--color-theme-dark`	Dark sections and dark buttons	`bg-theme-dark`
`--color-theme-light`	Light gray panels and cards	`bg-theme-light`
`--color-theme-cream`	Warm background of the corporate homepage	`bg-theme-cream`
`--color-section-warm`	Warm surface of some section cards and panels	`bg-section-warm`
`--color-dark`	Headings and strong text	`text-dark`
`--color-light`	Text on dark backgrounds	`text-light`
`--color-text-default`	Body text	`text-text-default`
`--color-border-light`, `--color-border-dark`, `--color-border-primary`, `--color-border-input`	Borders, dividers, and form fields	`border-border-light`, …

Aim for a contrast of at least 4.5:1 between text and its background. The shipped primary is a light lime, so text on primary buttons is dark.

Consultiz has one color scheme. It has no dark mode switch.

Fonts

Fonts are set in src/config/fonts.json. Each entry is one family:

{
  "name": "Inter",
  "variants": [
    { "style": "normal", "weight": "400" },
    { "style": "normal", "weight": "500" }
  ],
  "preload": false,
  "display": "swap",
  "cssVariable": "--font-primary",
  "provider": "google",
  "subsets": ["latin"],
  "fallback": "sans-serif"
}

The shipped fonts and where they are used:

`cssVariable`	Shipped font	Used for
`--font-primary`	Inter	Body text
`--font-secondary`	Space Grotesk	Headings
`--font-ternary`	Funnel Display	Headings on pages that use the alternate heading font (pricing, legal, and several inner pages)
`--font-reference-body`	Poppins	Body text on the main homepage
`--font-reference-heading`	Inter Tight	Headings on the main homepage

To change a font, replace "name" with any Google Fonts family name and keep its cssVariable. List only the weights you use: every weight is an extra file to download. The font files are downloaded at build time and served from your own site.

Field	What it does
`name`	Font family name, exactly as it is written on the provider’s site
`variants`	The styles and weights to include
`cssVariable`	Which role the font fills. Don’t rename these
`provider`	`google` (default), `fontsource`, `bunny`, or `fontshare`
`preload`	`true` loads the font earlier. Use it for one font at most
`subsets`	Character sets, for example `["latin", "latin-ext"]` for more accented letters
`fallback`	Font used while yours loads

Type Scale

Heading sizes are calculated from two numbers in theme.css:

--text-base: 1rem;         /* body text size (16px) */
--text-base-scale: 1.23;   /* each heading level is 1.23× the one below */
--text-base-sm: calc(var(--text-base) * 0.9);  /* base size on small screens */

Raise --text-base-scale for bigger headings, or lower it for a quieter look. h1 to h6 and the large display sizes all follow.

Breakpoints

Screen widths where the layout changes, also in theme.css:

Name	Width
`xs`	380px
`sm`	540px
`md`	768px
`lg`	1024px
`xl`	1320px

Corner Radius

--radius-custom (10px) and --radius-section (20px) in theme.css set the rounded corners of cards and section panels.