Colors & Fonts

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

A rebrand in Ecozen is a handful of values, not a search-and-replace. Every component uses named color tokens, so changing a token changes it everywhere. Ecozen has one light palette; there is no dark mode.

Brand And Surface Colors

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

/* === PRIMARY BRAND === */
--color-primary: #DDEB3B;        /* citrus accent: buttons on photos, icons, highlights */
--color-primary-deep: #4F5A0A;   /* accent tone for text on light surfaces */
--color-secondary: #1E4A44;      /* deep teal-green */
--color-accent: #EFF3EC;         /* mint-grey surface: cards, bands */
/* === BACKGROUNDS === */
--color-body: #FFFFFF;           /* main page bg */
--color-body-dark: #0E1311;      /* ink: footer, dark panels */
/* === TEXT === */
--color-text-dark: #0E1311;
--color-text-muted: #5E6560;
--color-text-light: #FFFFFF;
/* === BORDERS === */
--color-border-light: #E3E8E0;
--color-border-dark: #0E1311;
/* === UTILITY === */
--color-dark: #0E1311;
--color-light: #FFFFFF;

Token	Used for	Tailwind classes
`--color-primary`	Accent buttons, icons, slider and progress bars, highlights	`bg-primary`, `text-primary`
`--color-primary-deep`	The accent as text on white or light surfaces	`text-primary-deep`
`--color-secondary`	Deep green details	`bg-secondary`, `border-secondary`
`--color-accent`	Soft surface behind cards, form panels, and chips	`bg-accent`
`--color-body`	Page background	`bg-body`
`--color-body-dark`, `--color-dark`	The top bar, the footer, dark panels, and dark buttons	`bg-body-dark`, `bg-dark`
`--color-text-dark`	Headings and the default text color	`text-text-dark`
`--color-text-muted`	Secondary text: descriptions, notes, and small labels	`text-text-muted`
`--color-text-light`	Text on dark backgrounds	`text-text-light`
`--color-border-light`	Borders and dividers	`border-border-light`

Button Colors

Buttons in content files take their color from variant and class:

You write	Button
`variant: "fill"`	Dark button with light text
`variant: "fill"`, `class: "btn-accent"`	Accent (`--color-primary`) button with dark text
`variant: "fill"`, `class: "btn-light"`	White button with dark text, for dark or photo backgrounds
`variant: "outline"`	Outlined button that fills dark on hover
`variant: "text"`	Underlined text link

See Button Options for every option.

Fonts

Ecozen uses Inter Tight for both body text and headings, and IBM Plex Sans Arabic for Arabic text. All are set in src/config/fonts.json, one entry per role:

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

The first entry (--font-primary) is the body font; the second (--font-secondary, weights 500 and 600) is used for headings, the logo text, and the footer wordmark. The third (--font-arabic) has "languages": ["ar"], so it loads only on Arabic pages. 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. Astro downloads the font files at build time and serves them 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`	`--font-primary` for body text, `--font-secondary` for headings. Don’t rename these
`provider`	`google` (default), `fontsource`, `bunny`, `fontshare`, or `local` for your own files
`preload`	`true` loads the font earlier
`subsets`	Character sets, for example `["latin", "latin-ext"]` for accented languages
`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.25;   /* each heading level is 1.25× 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. --text-wordmark sets the size of the large name at the bottom of the wordmark footer.

Breakpoints

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

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

Do It With AI

Rebrand the colors. Accent [HEX], dark brand color [HEX]. In src/styles/theme.css update
--color-primary, --color-primary-deep, and --color-secondary. Keep dark text readable on the
accent buttons and at least 4.5:1 contrast for --color-primary-deep on white. Then replace
Inter Tight with [FONT] in both entries of src/config/fonts.json, keeping the cssVariable values,
weights, and fallback.