Upstart Theme Documentation

Customizing Theme Colors & Fonts

The Upstart theme uses CSS variables in src/styles/theme.css for colors and typography. Update these values to match your brand.

src/styles/theme.css

@theme inline {
  /* Configure base font size, type scale, and font families in `src/config/fonts.json` */
  --leading-body: 1.8;
  --leading-inherit: inherit;

  /* Colors */
  --color-primary: #4F1AD6;
  --color-secondary: #B2A6F1;
  --color-accent: #1A122E;
  --color-body: #0e0c0c;
  --color-border-light: #242222;
  --color-theme-dark: #1A191C;

  --color-text-default: #C8C1C1;
  --color-dark: #000E30;
  --color-light: #fff6f6;

}

Customizing Colors

• Adjust the --color-* variables to match your brand palette.
• Update --color-text-* variables to refine text contrast.

---

Typography Settings

Fonts are configured in src/config/fonts.json and loaded automatically.

[
  {
    "name": "Satoshi",
    "provider": "local",
    "preload": false,
    "cssVariable": "--font-primary",
    "fallback": "sans-serif",
    "options": {
      "variants": [
        {
          "weight": 400,
          "style": "normal",
          "src": [
            "./src/assets/fonts/satoshi-400.woff2"
          ]
        },
        {
          "weight": 500,
          "style": "normal",
          "src": [
            "./src/assets/fonts/satoshi-500.woff2"
          ]
        }
      ]
    }
  },
  {
    "name": "Syne",
    "provider": "google",
    "weights": [
      500
    ],
    "styles": [
      "normal"
    ],
    "subsets": [
      "latin"
    ],
    "preload": true,
    "cssVariable": "--font-secondary",
    "fallback": "sans-serif"
  },
  {
    "name": "Instrument Serif",
    "provider": "google",
    "weights": [
      400
    ],
    "styles": [
      "normal"
    ],
    "subsets": [
      "latin"
    ],
    "preload": true,
    "cssVariable": "--font-tertiary",
    "fallback": "sans-serif"
  }
]

Font Customization

• Update name, weights/variants, and styles to match your brand.
• Keep cssVariable in sync with theme styles that reference it.
• For local fonts, ensure the src paths exist and are committed.