Taxo Theme Documentation

Fonts & Colors

Taxo defines design tokens in src/styles/theme.css and font loading in src/config/fonts.json.

Color Tokens

src/styles/theme.css

@theme inline {
  --color-primary: #056251;
  --color-secondary: #f4f1ea;
  --color-accent: #ffb966;
  --color-accent-dark: #d88a3d;
  --color-body: #fcf3e7;
  --color-body-dark: #092420;
  --color-text-dark: #2b2b2b;
  --color-text-light: #ffffff;
  --color-border-light: #e6e2da;
  --color-border-dark: #1f4d3b;
}

These variables drive most of the theme:

• buttons
• headers and footers
• backgrounds
• borders
• dark sections

Typography Settings

[
  {
    "name": "Jost",
    "cssVariable": "--font-primary"
  },
  {
    "name": "Syne",
    "cssVariable": "--font-secondary"
  }
]

Taxo uses:

• --font-primary for body/UI text
• --font-secondary for stronger display and heading styles

Safe Font Customization

1. update src/config/fonts.json
2. keep cssVariable values aligned with the variables already used in CSS
3. restart dev if the font provider or variants change

After Changing Colors

Review these files if your brand palette changes significantly:

• src/styles/buttons.css
• src/styles/navigation.css
• src/styles/components.css
• src/styles/global.css

That helps catch contrast problems in dark sections, accent buttons, and border states.